/**
 * ContentDB Styles
 * Author: Damiano Parenti
 * Copyright © 2026 Damiano Parenti - All Rights Reserved
 * Modern 2026 Design with Animations
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
    --site-header-height: 108px;
    --shop-subnav-height: 56px;
    --primary: #00d4ff;
    --primary-dark: #00a8cc;
    --primary-light: #00f0ff;
    --secondary: #0099ff;
    --accent: #00e5ff;
    --success: #00ff88;
    --warning: #ffaa00;
    --danger: #ff3366;
    --dark: #0a0a0a;
    --dark-light: #1a1a1a;
    --darker: #050505;
    --light: #ffffff;
    --gray: #888888;
    --gradient-1: linear-gradient(135deg, #00d4ff 0%, #0099ff 50%, #0066ff 100%);
    --gradient-2: linear-gradient(135deg, #00f0ff 0%, #00d4ff 50%, #00a8cc 100%);
    --gradient-3: linear-gradient(135deg, #00e5ff 0%, #0099ff 100%);
    --glass: rgba(0, 212, 255, 0.05);
    --glass-border: rgba(0, 212, 255, 0.2);
    --neon-glow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3), 0 0 30px rgba(0, 212, 255, 0.1);
    --neon-glow-strong: 0 0 15px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.5), 0 0 45px rgba(0, 212, 255, 0.3);
}

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

body {
    font-family: 'Outfit', 'Space Grotesk', 'Inter', sans-serif;
    background: var(--dark);
    color: var(--light);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    line-height: 1.6;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Fade In Animation on Scroll */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Animated Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 153, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(0, 229, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(0, 240, 255, 0.08) 0%, transparent 50%);
    z-index: -1;
    animation: neonPulse 8s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% {
        opacity: 0.55;
    }
    50% {
        opacity: 0.82;
    }
}

/* ── Ambient logo background (main public pages) ─────────── */
.page-ambient-bg {
    isolation: isolate;
}

.page-ambient-bg::before {
    z-index: -3;
    animation: none;
    opacity: 0;
}

.page-ambient-bg > main,
.page-ambient-bg > footer,
.page-ambient-bg > .shop-shell {
    position: relative;
    z-index: 1;
}

.page-ambient-bg > .rankings-sidebar,
.page-ambient-bg > .sidebar-open-btn {
    position: fixed;
    z-index: var(--rankings-sidebar-z, 1001);
}

.page-ambient-bg > .sidebar-open-btn {
    z-index: 99;
}

.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.ambient-bg__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 48%, rgba(0, 212, 255, 0.08) 0%, transparent 62%),
        radial-gradient(ellipse 45% 38% at 22% 78%, rgba(0, 102, 255, 0.06) 0%, transparent 55%);
    opacity: 0.95;
}

.ambient-bg__logo-wrap {
    --ambient-center-x: 50%;
    position: absolute;
    top: 50%;
    left: var(--ambient-center-x);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(78vmin, 820px);
    max-width: min(88vw, 820px);
    transition: left 0.32s ease;
    pointer-events: none;
}

.ambient-bg__logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(72vmin, 760px);
    object-fit: contain;
    opacity: 0.6;
    user-select: none;
    -webkit-user-drag: none;
}

@media (max-width: 1100px) {
    .ambient-bg__logo-wrap {
        width: min(82vmin, 680px);
    }
}

@media (max-width: 768px) {
    .ambient-bg__logo-wrap {
        width: min(86vmin, 520px);
    }

    .ambient-bg__logo {
        max-height: min(78vmin, 500px);
    }
}

/* ── FACEIT Ban List (public registry) ───────────────────── */
.faceit-ban-registry {
    padding-bottom: 3rem;
}

.faceit-ban-registry__subtitle {
    text-align: center;
    color: var(--gray);
    margin: -0.5rem auto 0.75rem;
    max-width: 52rem;
}

.faceit-ban-registry__note {
    text-align: center;
    color: rgba(0, 212, 255, 0.75);
    font-size: 0.92rem;
    margin-bottom: 1.75rem;
}

.faceit-ban-registry__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.faceit-ban-stat {
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    text-align: center;
}

.faceit-ban-stat__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-light);
    line-height: 1.1;
}

.faceit-ban-stat__label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.faceit-ban-registry__toolbar {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.9fr;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}

.faceit-ban-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--gray);
}

.faceit-ban-toolbar__field--grow {
    position: relative;
}

.faceit-ban-toolbar__field--grow i {
    position: absolute;
    left: 0.85rem;
    top: 2.15rem;
    color: var(--gray);
    pointer-events: none;
}

.faceit-ban-toolbar__field--grow .form-control {
    padding-left: 2.25rem;
}

.faceit-ban-registry__count {
    color: var(--gray);
    font-size: 0.88rem;
    margin-bottom: 0.85rem;
}

.faceit-ban-registry__table-wrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(0, 212, 255, 0.16);
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
}

.faceit-ban-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.faceit-ban-table thead {
    background: rgba(0, 212, 255, 0.08);
}

.faceit-ban-table th {
    text-align: left;
    padding: 0.85rem 1rem;
    color: var(--primary-light);
    font-weight: 600;
    white-space: nowrap;
}

.faceit-ban-table td {
    padding: 0.9rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}

.faceit-ban-table tbody tr:hover td {
    background: rgba(0, 212, 255, 0.04);
}

.faceit-ban-table__empty,
.faceit-ban-registry__empty-filter {
    text-align: center;
    color: var(--gray);
    padding: 2rem 1rem;
}

.faceit-ban-player strong {
    display: block;
    color: var(--light);
}

.faceit-ban-player__id {
    display: block;
    font-size: 0.78rem;
    color: var(--gray);
    margin-top: 0.15rem;
    word-break: break-all;
}

.faceit-ban-player__link {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--primary);
    font-size: 0.85rem;
}

.faceit-ban-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.faceit-ban-list__item {
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.faceit-ban-list__item:last-child {
    border-bottom: none;
}

.faceit-ban-list__item--active .faceit-ban-list__reason {
    color: #ff8aa3;
}

.faceit-ban-list__reason {
    display: block;
    font-weight: 600;
    color: var(--primary-light);
}

.faceit-ban-list__meta {
    display: block;
    font-size: 0.8rem;
    color: var(--gray);
    margin-top: 0.15rem;
}

.faceit-ban-report-link {
    color: var(--primary);
    font-weight: 500;
}

.faceit-ban-report-date {
    display: block;
    font-size: 0.8rem;
    color: var(--gray);
    margin-top: 0.2rem;
}

.faceit-ban-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem 0.85rem;
    margin-top: 1.35rem;
    padding: 0.85rem 0.5rem 0.25rem;
}

.faceit-ban-pagination[hidden] {
    display: none !important;
}

.faceit-ban-pagination__info {
    color: var(--gray);
    font-size: 0.92rem;
    text-align: center;
}

.faceit-ban-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.faceit-ban-pagination__btn {
    min-width: 2.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.72);
    color: var(--light);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.faceit-ban-pagination__btn:hover:not(:disabled),
.faceit-ban-pagination__btn:focus-visible {
    border-color: rgba(0, 212, 255, 0.45);
    background: rgba(0, 212, 255, 0.12);
    color: #fff;
    outline: none;
}

.faceit-ban-pagination__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.faceit-ban-pagination__btn.is-active {
    border-color: rgba(0, 212, 255, 0.55);
    background: rgba(0, 212, 255, 0.2);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.18);
}

.faceit-ban-pagination__nav {
    padding-inline: 0.95rem;
}

.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;
}

@media (max-width: 900px) {
    .faceit-ban-registry__toolbar {
        grid-template-columns: 1fr;
    }

    .faceit-ban-registry__stats {
        grid-template-columns: 1fr;
    }

    .faceit-ban-table thead {
        display: none;
    }

    .faceit-ban-table tr {
        display: block;
        padding: 0.75rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .faceit-ban-table td {
        display: block;
        border: none;
        padding: 0.45rem 1rem;
    }

    .faceit-ban-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray);
        margin-bottom: 0.2rem;
    }
}

/* ── Lite Ban List (Stoneworks / LiteBans) ───────────────── */
.lite-ban-registry { padding-bottom: 3rem; }
.lite-ban-registry__subtitle { text-align: center; color: var(--gray); margin: -0.5rem auto 0.75rem; max-width: 52rem; }
.lite-ban-registry__note { text-align: center; color: rgba(132, 204, 22, 0.85); font-size: 0.92rem; margin-bottom: 1.75rem; }
.lite-ban-registry__sync-progress { text-align: center; color: #f59e0b; font-size: 0.88rem; margin: -1rem auto 1.5rem; max-width: 52rem; }
.lite-ban-registry__source { color: #a3e635; margin-left: 0.35rem; }
.lite-ban-registry__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.lite-ban-stat { background: rgba(132, 204, 22, 0.08); border: 1px solid rgba(132, 204, 22, 0.22); border-radius: 14px; padding: 1rem 1.1rem; text-align: center; }
.lite-ban-stat__value { display: block; font-size: 1.75rem; font-weight: 700; color: #bef264; line-height: 1.1; }
.lite-ban-stat__label { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; }
.lite-ban-registry__toolbar { display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr; gap: 0.85rem; margin-bottom: 0.75rem; }
.lite-ban-toolbar__field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--gray); }
.lite-ban-toolbar__field--grow { position: relative; }
.lite-ban-toolbar__field--grow i { position: absolute; left: 0.85rem; top: 2.15rem; color: var(--gray); pointer-events: none; }
.lite-ban-toolbar__field--grow .form-control { padding-left: 2.25rem; }
.lite-ban-registry__count { color: var(--gray); font-size: 0.88rem; margin-bottom: 0.85rem; }
.lite-ban-registry__table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(132, 204, 22, 0.2); background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); }
.lite-ban-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.lite-ban-table thead { background: rgba(132, 204, 22, 0.1); }
.lite-ban-table th { text-align: left; padding: 0.85rem 1rem; color: #bef264; font-weight: 600; white-space: nowrap; }
.lite-ban-table td { padding: 0.9rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); vertical-align: top; }
.lite-ban-table tbody tr:hover td { background: rgba(132, 204, 22, 0.05); }
.lite-ban-table__empty, .lite-ban-registry__empty-filter { text-align: center; color: var(--gray); padding: 2rem 1rem; }
.lite-ban-player { display: flex; align-items: center; gap: 0.65rem; }
.lite-ban-player__avatar { border-radius: 6px; flex-shrink: 0; }
.lite-ban-player strong { display: block; color: var(--light); }
.lite-ban-player__link { display: inline-block; margin-top: 0.25rem; color: #a3e635; font-size: 0.85rem; }
.lite-ban-list { list-style: none; margin: 0; padding: 0; }
.lite-ban-list__item { padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.lite-ban-list__item:last-child { border-bottom: none; }
.lite-ban-list__item--active .lite-ban-list__reason { color: #bef264; }
.lite-ban-list__reason { display: block; font-weight: 600; color: #d9f99d; }
.lite-ban-list__meta { display: block; font-size: 0.8rem; color: var(--gray); margin-top: 0.15rem; }
.lite-ban-report-link { color: #a3e635; font-weight: 500; }
.lite-ban-report-link--public { color: var(--gray); font-style: italic; }
.lite-ban-report-date { display: block; font-size: 0.8rem; color: var(--gray); margin-top: 0.2rem; }
.lite-ban-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem 0.85rem; margin-top: 1.35rem; padding: 0.85rem 0.5rem 0.25rem; }
.lite-ban-pagination[hidden] { display: none !important; }
.lite-ban-pagination__info { color: var(--gray); font-size: 0.92rem; text-align: center; }
.lite-ban-pagination__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; }
.lite-ban-pagination__btn { min-width: 2.35rem; padding: 0.45rem 0.75rem; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(15, 23, 42, 0.72); color: var(--light); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.lite-ban-pagination__btn:hover:not(:disabled), .lite-ban-pagination__btn:focus-visible { border-color: rgba(132, 204, 22, 0.45); background: rgba(132, 204, 22, 0.12); color: #fff; outline: none; }
.lite-ban-pagination__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lite-ban-pagination__btn.is-active { border-color: rgba(132, 204, 22, 0.55); background: rgba(132, 204, 22, 0.2); color: #fff; }
.lite-ban-pagination__nav { padding-inline: 0.95rem; }

@media (max-width: 900px) {
    .lite-ban-registry__toolbar { grid-template-columns: 1fr; }
    .lite-ban-registry__stats { grid-template-columns: 1fr; }
    .lite-ban-table thead { display: none; }
    .lite-ban-table tr { display: block; padding: 0.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .lite-ban-table td { display: block; border: none; padding: 0.45rem 1rem; }
    .lite-ban-table td::before { content: attr(data-label); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray); margin-bottom: 0.2rem; }
}

/* ── Liquipedia Ban List (Rainbow Six Siege) ─────────────── */
.liquipedia-ban-registry { padding-bottom: 3rem; }
.liquipedia-ban-registry__subtitle { text-align: center; color: var(--gray); margin: -0.5rem auto 0.75rem; max-width: 52rem; }
.liquipedia-ban-registry__note { text-align: center; color: rgba(245, 158, 11, 0.9); font-size: 0.92rem; margin-bottom: 1.75rem; }
.liquipedia-ban-registry__sync-progress { text-align: center; color: #fbbf24; font-size: 0.88rem; margin: -1rem auto 1.5rem; max-width: 52rem; }
.liquipedia-ban-registry__source { color: #fcd34d; margin-left: 0.35rem; }
.liquipedia-ban-registry__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.liquipedia-ban-stat { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.24); border-radius: 14px; padding: 1rem 1.1rem; text-align: center; }
.liquipedia-ban-stat__value { display: block; font-size: 1.75rem; font-weight: 700; color: #fbbf24; line-height: 1.1; }
.liquipedia-ban-stat__label { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; }
.liquipedia-ban-registry__toolbar { display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr; gap: 0.85rem; margin-bottom: 0.75rem; }
.liquipedia-ban-toolbar__field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--gray); }
.liquipedia-ban-toolbar__field--grow { position: relative; }
.liquipedia-ban-toolbar__field--grow i { position: absolute; left: 0.85rem; top: 2.15rem; color: var(--gray); pointer-events: none; }
.liquipedia-ban-toolbar__field--grow .form-control { padding-left: 2.25rem; }
.liquipedia-ban-registry__count { color: var(--gray); font-size: 0.88rem; margin-bottom: 0.85rem; }
.liquipedia-ban-registry__table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(245, 158, 11, 0.22); background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); }
.liquipedia-ban-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.liquipedia-ban-table thead { background: rgba(245, 158, 11, 0.1); }
.liquipedia-ban-table th { text-align: left; padding: 0.85rem 1rem; color: #fbbf24; font-weight: 600; white-space: nowrap; }
.liquipedia-ban-table td { padding: 0.9rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); vertical-align: top; }
.liquipedia-ban-table tbody tr:hover td { background: rgba(245, 158, 11, 0.05); }
.liquipedia-ban-table__empty, .liquipedia-ban-registry__empty-filter { text-align: center; color: var(--gray); padding: 2rem 1rem; }
.liquipedia-ban-player strong { display: block; color: var(--light); }
.liquipedia-ban-player__link { display: inline-block; margin-top: 0.25rem; color: #fcd34d; font-size: 0.85rem; }
.liquipedia-ban-list { list-style: none; margin: 0; padding: 0; }
.liquipedia-ban-list__item { padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.liquipedia-ban-list__item:last-child { border-bottom: none; }
.liquipedia-ban-list__item--active .liquipedia-ban-list__reason { color: #fbbf24; }
.liquipedia-ban-list__reason { display: block; font-weight: 600; color: #fde68a; }
.liquipedia-ban-list__meta { display: block; font-size: 0.8rem; color: var(--gray); margin-top: 0.15rem; }
.liquipedia-ban-report-link { color: #fcd34d; font-weight: 500; }
.liquipedia-ban-report-link--public { color: var(--gray); font-style: italic; }
.liquipedia-ban-report-date { display: block; font-size: 0.8rem; color: var(--gray); margin-top: 0.2rem; }
.liquipedia-ban-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem 0.85rem; margin-top: 1.35rem; padding: 0.85rem 0.5rem 0.25rem; }
.liquipedia-ban-pagination[hidden] { display: none !important; }
.liquipedia-ban-pagination__info { color: var(--gray); font-size: 0.92rem; text-align: center; }
.liquipedia-ban-pagination__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; }
.liquipedia-ban-pagination__btn { min-width: 2.35rem; padding: 0.45rem 0.75rem; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(15, 23, 42, 0.72); color: var(--light); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.liquipedia-ban-pagination__btn:hover:not(:disabled), .liquipedia-ban-pagination__btn:focus-visible { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.12); color: #fff; outline: none; }
.liquipedia-ban-pagination__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.liquipedia-ban-pagination__btn.is-active { border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.2); color: #fff; }
.liquipedia-ban-pagination__nav { padding-inline: 0.95rem; }

@media (max-width: 900px) {
    .liquipedia-ban-registry__toolbar { grid-template-columns: 1fr; }
    .liquipedia-ban-registry__stats { grid-template-columns: 1fr; }
    .liquipedia-ban-table thead { display: none; }
    .liquipedia-ban-table tr { display: block; padding: 0.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .liquipedia-ban-table td { display: block; border: none; padding: 0.45rem 1rem; }
    .liquipedia-ban-table td::before { content: attr(data-label); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray); margin-bottom: 0.2rem; }
}

/* RobloxWatcher Ban List */
.robloxwatcher-ban-registry { padding-bottom: 3rem; }
.robloxwatcher-ban-registry__subtitle { text-align: center; color: var(--gray); margin: -0.5rem auto 0.75rem; max-width: 52rem; }
.robloxwatcher-ban-registry__note { text-align: center; color: rgba(239, 68, 68, 0.92); font-size: 0.92rem; margin-bottom: 1.75rem; }
.robloxwatcher-ban-registry__sync-progress { text-align: center; color: #f87171; font-size: 0.88rem; margin: -1rem auto 1.5rem; max-width: 52rem; }
.robloxwatcher-ban-registry__source { color: #fca5a5; margin-left: 0.35rem; }
.robloxwatcher-ban-registry__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.robloxwatcher-ban-stat { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.24); border-radius: 14px; padding: 1rem 1.1rem; text-align: center; }
.robloxwatcher-ban-stat__value { display: block; font-size: 1.75rem; font-weight: 700; color: #f87171; line-height: 1.1; }
.robloxwatcher-ban-stat__label { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; }
.robloxwatcher-ban-registry__toolbar { display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr; gap: 0.85rem; margin-bottom: 0.75rem; }
.robloxwatcher-ban-toolbar__field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--gray); }
.robloxwatcher-ban-toolbar__field--grow { position: relative; }
.robloxwatcher-ban-toolbar__field--grow i { position: absolute; left: 0.85rem; top: 2.15rem; color: var(--gray); pointer-events: none; }
.robloxwatcher-ban-toolbar__field--grow .form-control { padding-left: 2.25rem; }
.robloxwatcher-ban-registry__count { color: var(--gray); font-size: 0.88rem; margin-bottom: 0.85rem; }
.robloxwatcher-ban-registry__table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(239, 68, 68, 0.22); background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); }
.robloxwatcher-ban-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.robloxwatcher-ban-table thead { background: rgba(239, 68, 68, 0.1); }
.robloxwatcher-ban-table th { text-align: left; padding: 0.85rem 1rem; color: #f87171; font-weight: 600; white-space: nowrap; }
.robloxwatcher-ban-table td { padding: 0.9rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); vertical-align: top; }
.robloxwatcher-ban-table tbody tr:hover td { background: rgba(239, 68, 68, 0.05); }
.robloxwatcher-ban-table__empty, .robloxwatcher-ban-registry__empty-filter { text-align: center; color: var(--gray); padding: 2rem 1rem; }
.robloxwatcher-ban-player strong { display: block; color: var(--light); }
.robloxwatcher-ban-player__id { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--gray); font-family: ui-monospace, monospace; }
.robloxwatcher-ban-list { list-style: none; margin: 0; padding: 0; }
.robloxwatcher-ban-list__item { padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.robloxwatcher-ban-list__item:last-child { border-bottom: none; }
.robloxwatcher-ban-list__item--active .robloxwatcher-ban-list__reason { color: #f87171; }
.robloxwatcher-ban-list__reason { display: block; font-weight: 600; color: #fecaca; }
.robloxwatcher-ban-list__meta { display: block; font-size: 0.8rem; color: var(--gray); margin-top: 0.15rem; }
.robloxwatcher-ban-report-link { color: #fca5a5; font-weight: 500; }
.robloxwatcher-ban-report-link--public { color: var(--gray); font-style: italic; }
.robloxwatcher-ban-report-date { display: block; font-size: 0.8rem; color: var(--gray); margin-top: 0.2rem; }
.robloxwatcher-ban-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem 0.85rem; margin-top: 1.35rem; padding: 0.85rem 0.5rem 0.25rem; }
.robloxwatcher-ban-pagination[hidden] { display: none !important; }
.robloxwatcher-ban-pagination__info { color: var(--gray); font-size: 0.92rem; text-align: center; }
.robloxwatcher-ban-pagination__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; }
.robloxwatcher-ban-pagination__btn { min-width: 2.35rem; padding: 0.45rem 0.75rem; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(15, 23, 42, 0.72); color: var(--light); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.robloxwatcher-ban-pagination__btn:hover:not(:disabled), .robloxwatcher-ban-pagination__btn:focus-visible { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.12); color: #fff; outline: none; }
.robloxwatcher-ban-pagination__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.robloxwatcher-ban-pagination__btn.is-active { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.2); color: #fff; }
.robloxwatcher-ban-pagination__nav { padding-inline: 0.95rem; }

@media (max-width: 900px) {
    .robloxwatcher-ban-registry__toolbar { grid-template-columns: 1fr; }
    .robloxwatcher-ban-registry__stats { grid-template-columns: 1fr; }
    .robloxwatcher-ban-table thead { display: none; }
    .robloxwatcher-ban-table tr { display: block; padding: 0.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .robloxwatcher-ban-table td { display: block; border: none; padding: 0.45rem 1rem; }
    .robloxwatcher-ban-table td::before { content: attr(data-label); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray); margin-bottom: 0.2rem; }
}

/* Steam ban registry (mirrors the FACEIT ban list layout) */
.ban-row--highlight {
    outline: 2px solid rgba(99, 102, 241, 0.75);
    outline-offset: -2px;
    background: rgba(99, 102, 241, 0.12) !important;
}

.steam-ban-registry {
    padding-bottom: 3rem;
}

.steam-ban-registry__subtitle {
    text-align: center;
    color: var(--gray);
    margin: -0.5rem auto 0.75rem;
    max-width: 52rem;
}

.steam-ban-registry__note {
    text-align: center;
    color: rgba(0, 212, 255, 0.75);
    font-size: 0.92rem;
    margin-bottom: 1.75rem;
}

.steam-ban-registry__sync-progress {
    text-align: center;
    color: #f59e0b;
    font-size: 0.88rem;
    margin: -1rem auto 1.5rem;
    max-width: 52rem;
}

.steam-ban-registry__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.steam-ban-stat {
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    text-align: center;
}

.steam-ban-stat__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-light);
    line-height: 1.1;
}

.steam-ban-stat__label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.steam-ban-registry__toolbar {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.9fr;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}

.steam-ban-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--gray);
}

.steam-ban-toolbar__field--grow {
    position: relative;
}

.steam-ban-toolbar__field--grow i {
    position: absolute;
    left: 0.85rem;
    top: 2.15rem;
    color: var(--gray);
    pointer-events: none;
}

.steam-ban-toolbar__field--grow .form-control {
    padding-left: 2.25rem;
}

.steam-ban-registry__count {
    color: var(--gray);
    font-size: 0.88rem;
    margin-bottom: 0.85rem;
}

.steam-ban-registry__table-wrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(0, 212, 255, 0.16);
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
}

.steam-ban-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.steam-ban-table thead {
    background: rgba(0, 212, 255, 0.08);
}

.steam-ban-table th {
    text-align: left;
    padding: 0.85rem 1rem;
    color: var(--primary-light);
    font-weight: 600;
    white-space: nowrap;
}

.steam-ban-table td {
    padding: 0.9rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}

.steam-ban-table tbody tr:hover td {
    background: rgba(0, 212, 255, 0.04);
}

.steam-ban-table__empty,
.steam-ban-registry__empty-filter {
    text-align: center;
    color: var(--gray);
    padding: 2rem 1rem;
}

.steam-ban-player strong {
    display: block;
    color: var(--light);
}

.steam-ban-player__id {
    display: block;
    font-size: 0.78rem;
    color: var(--gray);
    margin-top: 0.15rem;
    word-break: break-all;
}

.steam-ban-player__link {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--primary);
    font-size: 0.85rem;
}

.steam-ban-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.steam-ban-list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.steam-ban-list__item:last-child {
    border-bottom: none;
}

.steam-ban-list__item--active .steam-ban-list__reason {
    color: #ff8aa3;
}

.steam-ban-list__reason {
    font-weight: 600;
    color: var(--primary-light);
}

.steam-ban-list__meta {
    font-size: 0.85rem;
    color: var(--gray);
    text-align: right;
    word-break: break-word;
}

.steam-ban-report-link {
    color: var(--primary);
    font-weight: 500;
}

.steam-ban-report-link--public {
    color: var(--gray);
    font-weight: 500;
    font-style: italic;
}

.steam-ban-report-date {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--gray);
}

.steam-ban-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem 0.85rem;
    margin-top: 1.35rem;
    padding: 0.85rem 0.5rem 0.25rem;
}

.steam-ban-pagination[hidden] {
    display: none !important;
}

.steam-ban-pagination__info {
    color: var(--gray);
    font-size: 0.92rem;
    text-align: center;
}

.steam-ban-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.steam-ban-pagination__btn {
    min-width: 2.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.72);
    color: var(--light);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.steam-ban-pagination__btn:hover:not(:disabled),
.steam-ban-pagination__btn:focus-visible {
    border-color: rgba(0, 212, 255, 0.45);
    background: rgba(0, 212, 255, 0.12);
    color: #fff;
    outline: none;
}

.steam-ban-pagination__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.steam-ban-pagination__btn.is-active {
    border-color: rgba(0, 212, 255, 0.55);
    background: rgba(0, 212, 255, 0.2);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.18);
}

.steam-ban-pagination__nav {
    padding-inline: 0.95rem;
}

@media (max-width: 900px) {
    .steam-ban-registry__toolbar {
        grid-template-columns: 1fr;
    }

    .steam-ban-registry__stats {
        grid-template-columns: 1fr;
    }

    .steam-ban-table thead {
        display: none;
    }

    .steam-ban-table tr {
        display: block;
        padding: 0.75rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .steam-ban-table td {
        display: block;
        border: none;
        padding: 0.45rem 1rem;
    }

    .steam-ban-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray);
        margin-bottom: 0.2rem;
    }
}

/* Particles */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    contain: strict;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary);
    border-radius: 50%;
    animation: float 20s infinite;
    opacity: 0.32;
    box-shadow: 0 0 4px currentColor;
    contain: layout style paint;
}

@keyframes float {
    0%, 100% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    90% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Header */
header.site-header,
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.6rem 2rem;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    transition: all 0.3s ease;
    overflow: visible;
}

header.scrolled {
    padding: 0.4rem 2rem;
    background: rgba(15, 23, 42, 0.95);
}

.nav-container {
    max-width: min(100%, 1760px);
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(1rem, 2vw, 2.25rem);
    overflow: visible;
    position: relative;
    flex-wrap: nowrap;
}

.site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 212, 255, 0.08);
    color: var(--light);
    cursor: pointer;
    flex-shrink: 0;
}

.site-nav-toggle:hover {
    border-color: rgba(0, 212, 255, 0.45);
    color: var(--primary);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 800;
    text-shadow: none;
    animation: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    padding: 0;
    margin-right: 1.2rem;
    flex-shrink: 0;
}

.logo::before,
.logo::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

@keyframes logoGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3);
    }
    50% {
        text-shadow: var(--neon-glow-strong);
    }
}

.logo i {
    display: none;
}

.logo .site-logo,
.admin-header .site-logo,
.site-logo {
    height: 84px;
    width: auto;
    max-height: 84px;
    max-width: 120px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
}

nav.site-primary-nav,
nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(1.1rem, 1.55vw, 2.15rem);
    margin-left: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 0.35rem;
}

@media (min-width: 993px) {
    nav.site-primary-nav {
        overflow: visible;
    }
}

nav.site-primary-nav::-webkit-scrollbar,
nav::-webkit-scrollbar {
    display: none;
}

nav.site-primary-nav a,
nav a {
    color: var(--gray);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0.15rem;
    white-space: nowrap;
    flex-shrink: 0;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    box-shadow: var(--neon-glow);
    transition: width 0.3s ease;
}

nav a:hover {
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary);
}

nav a:hover::after {
    width: 100%;
}

nav a.active {
    color: var(--primary);
    text-shadow: var(--neon-glow);
}

nav a.active::after {
    width: 100%;
}

.site-nav-dropdown {
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}

.site-nav-dropdown.is-open {
    z-index: 10051;
}

.site-nav-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: var(--gray);
    font: inherit;
    font-size: inherit;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 0.5rem 0.15rem;
    white-space: nowrap;
    position: relative;
    transition: all 0.3s ease;
}

.site-nav-dropdown__toggle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    box-shadow: var(--neon-glow);
    transition: width 0.3s ease;
}

.site-nav-dropdown__toggle:hover,
.site-nav-dropdown.is-open .site-nav-dropdown__toggle {
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary);
}

.site-nav-dropdown__toggle:hover::after,
.site-nav-dropdown.is-open .site-nav-dropdown__toggle::after,
.site-nav-dropdown.is-active-section .site-nav-dropdown__toggle::after {
    width: 100%;
}

.site-nav-dropdown.is-active-section .site-nav-dropdown__toggle {
    color: var(--primary);
    text-shadow: var(--neon-glow);
}

.site-nav-dropdown__toggle i {
    font-size: 0.62rem;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.site-nav-dropdown.is-open .site-nav-dropdown__toggle i {
    transform: rotate(180deg);
}

.site-nav-dropdown__menu.language-dropdown {
    left: 0;
    right: auto;
    min-width: 280px;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    z-index: 10050;
}

.site-nav-dropdown__menu[hidden] {
    display: none !important;
}

.site-nav-dropdown.is-open .site-nav-dropdown__menu.language-dropdown:not([hidden]) {
    display: block !important;
    pointer-events: auto;
    animation: languageDropdownIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-nav-dropdown__menu.language-dropdown .language-option__inner {
    min-height: 3.1rem;
    padding: 0.82rem 0.95rem 0.86rem;
}

.ban-list-option__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
    font-size: 0.82rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.ban-list-option__icon--steam {
    background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
    color: #c7d5e0;
}

.ban-list-option__icon--faceit {
    background: linear-gradient(135deg, #ff5500 0%, #ff7722 100%);
    color: #fff;
}

.ban-list-option__icon--lite {
    background: linear-gradient(135deg, #65a30d 0%, #84cc16 100%);
    color: #052e16;
}

.ban-list-option__icon--liquipedia {
    background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
    color: #451a03;
}

.ban-list-option__icon--robloxwatcher {
    background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
    color: #fff;
}

.ban-list-option__icon--reports {
    background: linear-gradient(135deg, #0369a1 0%, #00d4ff 100%);
    color: #e0f7ff;
}

.ban-list-option__icon--create-report {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
    color: #ecfdf5;
}

.ban-list-option__icon--autocontrollo {
    background: linear-gradient(135deg, #4338ca 0%, #818cf8 100%);
    color: #eef2ff;
}

.ban-list-option__icon--about {
    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
    color: #eef2ff;
}

.ban-list-option__icon--staff {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
    color: #fffbeb;
}

.ban-list-option__icon--partners {
    background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
    color: #ecfdf5;
}

.ban-list-option__icon--tournaments-list {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    color: #f5f3ff;
}

.ban-list-option__icon--tournaments-create {
    background: linear-gradient(135deg, #c026d3 0%, #e879f9 100%);
    color: #fdf4ff;
}

.ban-list-option__icon--tournaments-manage {
    background: linear-gradient(135deg, #ea580c 0%, #fbbf24 100%);
    color: #fff7ed;
}

.site-nav-dropdown__menu.language-dropdown .language-option {
    padding: 0;
    white-space: normal;
}

.site-nav-dropdown__menu.language-dropdown .language-option::after {
    display: none;
}

.site-nav-dropdown__menu.language-dropdown .language-option:hover,
.site-nav-dropdown__menu.language-dropdown .language-option.active {
    text-shadow: none;
}

.auth-buttons {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.2vw, 1.35rem);
    margin-left: auto;
    padding-left: clamp(0.75rem, 1.5vw, 1.75rem);
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    z-index: 1002;
}

/* Hotbar più densa quando ci sono Shop + Admin (utente loggato / staff) */
.site-header--auth nav.site-primary-nav {
    gap: clamp(0.95rem, 1.25vw, 1.65rem);
}

.site-header--auth .logo {
    margin-right: 0.75rem;
}

.site-header--auth .logo .site-logo {
    height: 76px;
    max-height: 76px;
    max-width: 108px;
}

.site-header--staff nav.site-primary-nav {
    gap: clamp(0.85rem, 1.1vw, 1.45rem);
}

.site-header--staff nav.site-primary-nav a {
    font-size: 0.92rem;
}

.staff-admin-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
}

.staff-admin-nav-link__label {
    min-width: 0;
}

.staff-admin-nav-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.staff-support-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.38rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.88);
    letter-spacing: 0.01em;
}

.staff-support-nav-badge.is-hidden {
    display: none !important;
}

.staff-support-nav-badge--pending {
    background: #ef4444;
    animation: staff-support-badge-pulse 1.85s ease-in-out infinite;
}

.staff-support-nav-badge--answered {
    background: #22c55e;
}

.staff-reports-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.34rem;
    border-radius: 0.22rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.88);
    letter-spacing: 0.01em;
}

.staff-reports-nav-badge--pending {
    background: #ef4444;
    animation: staff-reports-badge-pulse 1.85s ease-in-out infinite;
}

.staff-reports-nav-badge--idle {
    background: #22c55e;
}

.staff-reports-nav-badge.is-hidden {
    display: none !important;
}

@keyframes staff-support-badge-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.88);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.88), 0 0 0 5px rgba(239, 68, 68, 0.34);
    }
}

@keyframes staff-reports-badge-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.88);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.88), 0 0 0 5px rgba(239, 68, 68, 0.34);
    }
}

.site-header--staff .auth-buttons {
    padding-left: clamp(1rem, 1.75vw, 2rem);
}

/* Site status widget (live users / maintenance) */
.site-status-widget {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    max-width: 100%;
}

.site-status-widget--hotbar {
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(8, 14, 22, 0.72);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    min-height: 36px;
}

.site-status-widget--card {
    justify-content: center;
    width: 100%;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(251, 146, 60, 0.35);
    background: rgba(251, 146, 60, 0.08);
}

.site-status-widget__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.site-status-widget__dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    opacity: 0.45;
    animation: site-status-pulse 2s ease-in-out infinite;
}

.site-status-widget__dot--green {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.65);
}

.site-status-widget__dot--green::after {
    background: rgba(34, 197, 94, 0.35);
}

.site-status-widget__dot--orange {
    background: #f97316;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.65);
}

.site-status-widget__dot--orange::after {
    background: rgba(249, 115, 22, 0.35);
}

@keyframes site-status-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.35; }
    50% { transform: scale(1.15); opacity: 0.7; }
}

.site-status-widget__body {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    line-height: 1.2;
}

.site-status-widget__count {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ecfdf5;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.site-status-widget__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffedd5;
    white-space: nowrap;
}

.site-status-widget--hotbar .site-status-widget__label {
    max-width: min(11rem, 34vw);
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-status-widget--card .site-status-widget__label {
    font-size: 0.95rem;
}

.site-status-widget.is-maintenance.site-status-widget--hotbar {
    border-color: rgba(249, 115, 22, 0.35);
    background: rgba(249, 115, 22, 0.1);
}

.site-status-widget.is-maintenance.site-status-widget--hotbar .site-status-widget__count {
    color: #ffedd5;
}

.site-status-widget [hidden] {
    display: none !important;
}

@media (max-width: 520px) {
    .site-status-widget--hotbar {
        padding: 0.35rem 0.55rem;
        gap: 0.4rem;
    }

    .site-status-widget--hotbar .site-status-widget__label {
        font-size: 0.74rem;
        max-width: 7.5rem;
    }

    .site-status-widget__count {
        font-size: 0.86rem;
    }
}

/* Language Selector */
.language-selector {
    position: relative;
    z-index: 1003;
    overflow: visible;
}

.language-btn {
    --spot-accent: #00d4ff;
    position: relative;
    display: inline-flex;
    align-items: stretch;
    min-height: 2.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(155deg, rgba(14, 20, 28, 0.92) 0%, rgba(8, 12, 18, 0.95) 100%) padding-box,
        linear-gradient(140deg, rgba(0, 212, 255, 0.42) 0%, rgba(0, 212, 255, 0.08) 50%, rgba(0, 102, 255, 0.28) 100%) border-box;
    color: var(--light);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(0, 212, 255, 0.08);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s ease,
        border-color 0.32s ease;
}

.language-btn__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.62rem 0.9rem 0.62rem 0.7rem;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.35;
}

.language-btn__code {
    color: rgba(220, 235, 245, 0.95);
    font-size: 0.78rem;
    line-height: 1.25;
    padding-top: 0.05em;
}

.language-btn__chevron {
    font-size: 0.62rem;
    color: var(--primary);
    opacity: 0.85;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}

.language-btn:hover,
.language-selector.is-open .language-btn {
    transform: translateY(-2px);
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.4),
        0 0 22px rgba(0, 212, 255, 0.22);
}

.language-selector.is-open .language-btn__chevron {
    transform: rotate(180deg);
    color: var(--primary-light);
}

.language-btn .spotlight-shine {
    background: radial-gradient(
        circle 90px at var(--spot-x) var(--spot-y),
        color-mix(in srgb, var(--spot-accent) 24%, transparent) 0%,
        transparent 72%
    );
}

.language-dropdown {
    --spot-accent: #00d4ff;
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 300px;
    width: max-content;
    max-width: min(340px, calc(100vw - 24px));
    padding: 0;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 16px;
    overflow: hidden;
    display: none;
    z-index: 10050;
    background: linear-gradient(155deg, rgba(10, 16, 26, 0.98) 0%, rgba(5, 9, 15, 0.99) 100%);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 212, 255, 0.08),
        0 0 32px rgba(0, 212, 255, 0.12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    pointer-events: none;
}

.language-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.45), transparent);
    z-index: 2;
    pointer-events: none;
}

.language-dropdown__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 60% at 100% 0%, rgba(0, 212, 255, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(0, 102, 255, 0.08) 0%, transparent 50%);
}

.language-dropdown__mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
    background-size: 16px 16px;
}

.language-dropdown .spotlight-shine {
    z-index: 1;
    background: radial-gradient(
        circle 150px at var(--spot-x) var(--spot-y),
        color-mix(in srgb, var(--spot-accent) 18%, transparent) 0%,
        transparent 70%
    );
}

.language-dropdown__inner {
    position: relative;
    z-index: 2;
    padding: 0.9rem 0.95rem 1rem;
    border-radius: 16px;
    overflow: hidden;
    background: inherit;
}

.language-dropdown__title {
    margin: 0 0 0.55rem;
    padding: 0.25rem 0.55rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(160, 190, 210, 0.85);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.3;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}

.language-dropdown__title i {
    color: var(--primary);
    font-size: 0.72rem;
}

.language-dropdown__list {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    max-height: min(420px, calc(100vh - 160px));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0.25rem 0.55rem 0.1rem;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.language-dropdown__list::-webkit-scrollbar {
    width: 4px;
}

.language-dropdown__list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 4px;
}

.language-dropdown.show {
    display: block;
    position: fixed;
    top: auto;
    right: auto;
    left: auto;
    pointer-events: auto;
    animation: languageDropdownIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.language-selector.is-open {
    z-index: 10051;
}

@keyframes languageDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.language-option {
    --spot-accent: #00d4ff;
    position: relative;
    display: block;
    overflow: visible;
    padding: 0;
    color: rgba(210, 222, 235, 0.95);
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid transparent;
    flex-shrink: 0;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.language-option__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 3.4rem;
    padding: 0.88rem 1rem 0.92rem;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.5;
}

.language-option .spotlight-shine {
    background: radial-gradient(
        circle 85px at var(--spot-x) var(--spot-y),
        color-mix(in srgb, var(--spot-accent) 26%, transparent) 0%,
        transparent 72%
    );
}

.language-option:hover {
    border-color: rgba(0, 212, 255, 0.28);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    color: #fff;
}

.language-option:hover .spotlight-shine,
.language-option:focus-visible .spotlight-shine {
    opacity: 1;
}

.language-option.active {
    border-color: rgba(0, 212, 255, 0.4);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.16) 0%, rgba(0, 102, 255, 0.1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 16px rgba(0, 212, 255, 0.12);
    color: #fff;
}

.language-option__name {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    padding: 0.12em 0 0.14em;
}

.language-option__check {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--primary-light);
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
    margin-top: 0;
    align-self: center;
}

.language-flag {
    display: block;
    width: 28px;
    height: 20px;
    object-fit: cover;
    object-position: center;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    align-self: center;
}

.language-btn .language-flag {
    width: 25px;
    height: 18px;
}

/* Contact page */
.contact-page-intro {
    max-width: 720px;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--gray);
    line-height: 1.75;
    font-size: 1.05rem;
}

.contact-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2rem;
    align-items: start;
}

.contact-channels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-channel {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 212, 255, 0.14);
    background: rgba(12, 18, 28, 0.55);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-channel:hover {
    border-color: rgba(0, 212, 255, 0.32);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.contact-channel__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-1);
    color: #fff;
    font-size: 1.25rem;
}

.contact-channel__body h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: var(--light);
}

.contact-channel__body p {
    margin: 0 0 0.4rem;
    color: var(--gray);
    font-size: 0.9rem;
    line-height: 1.55;
}

.contact-channel__link {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    word-break: break-all;
}

.contact-channel__link:hover {
    text-decoration: underline;
}

.contact-legal-note {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.12);
    background: rgba(0, 212, 255, 0.04);
    color: var(--gray);
    font-size: 0.88rem;
    line-height: 1.6;
}

.contact-response-time {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0 0;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(0, 212, 255, 0.1);
}

@media (max-width: 900px) {
    .contact-page-grid {
        grid-template-columns: 1fr;
    }
}

/* Sidebar Rankings */
.main-with-sidebar {
    margin-right: 0;
    transition: margin-right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-open .main-with-sidebar,
body.sidebar-open footer {
    margin-right: 330px;
    transition: margin-right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-open .index-page-content {
    transform: translateX(-160px);
}

.index-page-content {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.rankings-sidebar {
    position: fixed;
    right: 0;
    top: var(--rankings-sidebar-top, 104px);
    bottom: 0;
    width: 330px;
    isolation: isolate;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: var(--rankings-sidebar-z, 1001);
    border-left: 1px solid transparent;
    background:
        linear-gradient(180deg, rgba(11, 17, 26, 0.97) 0%, rgba(4, 7, 12, 0.99) 100%) padding-box,
        linear-gradient(180deg, rgba(0, 212, 255, 0.32) 0%, rgba(0, 102, 255, 0.14) 100%) border-box;
    box-shadow:
        -10px 0 45px rgba(0, 0, 0, 0.5),
        inset 1px 0 0 rgba(0, 212, 255, 0.06);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 45% at 100% 0%, rgba(0, 212, 255, 0.16) 0%, transparent 58%),
        radial-gradient(ellipse 70% 40% at 0% 100%, rgba(0, 102, 255, 0.1) 0%, transparent 55%);
    opacity: 0.85;
}

.sidebar-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
}

.sidebar-edge-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.55;
    animation: sidebarEdgePulse 5s ease-in-out infinite;
}

@keyframes sidebarEdgePulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.85; }
}

.rankings-sidebar::-webkit-scrollbar {
    width: 5px;
}

.rankings-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.rankings-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 4px;
}

.rankings-sidebar.closed {
    transform: translateX(100%);
}

.sidebar-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.06) 0%, transparent 100%);
}

.sidebar-toggle-top {
    width: 38px;
    height: 38px;
    background:
        linear-gradient(145deg, rgba(0, 212, 255, 0.95), rgba(0, 102, 255, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 11px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    box-shadow: 0 4px 18px rgba(0, 212, 255, 0.35);
}

.sidebar-toggle-top:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 212, 255, 0.5);
}

.rankings-sidebar.closed .sidebar-toggle-top i {
    transform: rotate(180deg);
}

.sidebar-toggle {
    display: none;
}

.sidebar-open-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    min-width: 44px;
    padding: 0.65rem 0.55rem 0.65rem 0.7rem;
    background:
        linear-gradient(155deg, rgba(12, 20, 30, 0.96), rgba(6, 10, 16, 0.98)) padding-box,
        linear-gradient(140deg, rgba(0, 212, 255, 0.5), rgba(0, 102, 255, 0.2)) border-box;
    border: 1px solid transparent;
    border-right: none;
    border-radius: 14px 0 0 14px;
    color: var(--primary);
    cursor: pointer;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease, color 0.3s ease;
    z-index: 99;
    box-shadow: -4px 0 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(0, 212, 255, 0.15);
}

.sidebar-open-btn__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 235, 245, 0.85);
}

.sidebar-open-btn:hover {
    transform: translateY(-50%) translateX(-3px);
    color: var(--primary-light);
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.5), 0 0 26px rgba(0, 212, 255, 0.28);
}

.rankings-sidebar.closed ~ .sidebar-open-btn {
    display: flex;
}

.sidebar-content {
    position: relative;
    z-index: 1;
    padding: 1.15rem 1.1rem 1.75rem;
}

.sidebar-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.65rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}

.sidebar-title-badge {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(145deg, rgba(0, 212, 255, 0.9), rgba(0, 102, 255, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 22px rgba(0, 212, 255, 0.35);
    animation: sidebarBadgePulse 4s ease-in-out infinite;
}

@keyframes sidebarBadgePulse {
    0%, 100% {
        box-shadow: 0 0 16px rgba(0, 212, 255, 0.28);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 28px rgba(0, 212, 255, 0.5);
        transform: scale(1.04);
    }
}

.sidebar-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(160, 190, 210, 0.75);
}

.ranking-section {
    --section-accent: #00d4ff;
    position: relative;
    margin-bottom: 1.15rem;
    padding: 0.95rem 0.85rem 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--section-accent) 18%, transparent);
    background:
        linear-gradient(155deg, rgba(14, 20, 28, 0.72) 0%, rgba(8, 12, 18, 0.55) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ranking-section--servers { --section-accent: #fbbf24; }
.ranking-section--recent { --section-accent: #00d4ff; }
.ranking-section--reporters { --section-accent: #f5c542; }
.ranking-section--liked { --section-accent: #00ff88; }
.ranking-section--disliked { --section-accent: #ff6688; }

.ranking-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ranking-section__toggle {
    width: 100%;
    margin: 0 0 0.85rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ranking-section__toggle:hover,
.ranking-section__toggle:focus-visible {
    opacity: 0.92;
    outline: none;
}

.ranking-section__toggle h4 {
    flex: 1;
    min-width: 0;
}

.ranking-section__expand-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.68rem;
    color: var(--section-accent);
    background: color-mix(in srgb, var(--section-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--section-accent) 24%, transparent);
    transition: transform 0.25s ease, background 0.25s ease;
    flex-shrink: 0;
}

.ranking-section--expanded .ranking-section__expand-icon {
    transform: rotate(180deg);
}

.ranking-section--expanded {
    border-color: color-mix(in srgb, var(--section-accent) 32%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 24px color-mix(in srgb, var(--section-accent) 10%, transparent);
}

.ranking-pagination {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid color-mix(in srgb, var(--section-accent) 14%, transparent);
}

.ranking-pagination[hidden] {
    display: none !important;
}

.ranking-pagination__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.ranking-pagination__info {
    min-width: 7.5rem;
    text-align: center;
    color: rgba(160, 175, 190, 0.95);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.ranking-pagination__btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--section-accent) 28%, transparent);
    background: rgba(8, 12, 18, 0.72);
    color: var(--light);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.ranking-pagination__btn:hover:not(:disabled),
.ranking-pagination__btn:focus-visible {
    border-color: color-mix(in srgb, var(--section-accent) 55%, transparent);
    background: color-mix(in srgb, var(--section-accent) 12%, transparent);
    color: #fff;
    outline: none;
}

.ranking-pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ranking-section h4 {
    margin: 0;
    color: var(--light);
    font-size: 0.82rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ranking-section__icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--section-accent);
    background: color-mix(in srgb, var(--section-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--section-accent) 32%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--section-accent) 18%, transparent);
}

.ranking-section__pill {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    color: #00ffaa;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.35);
    animation: livePillPulse 2.2s ease-in-out infinite;
}

@keyframes livePillPulse {
    0%, 100% { opacity: 0.75; box-shadow: none; }
    50% { opacity: 1; box-shadow: 0 0 12px rgba(0, 255, 136, 0.35); }
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ranking-section .ranking-item.spotlight {
    --spot-accent: var(--section-accent);
}

.ranking-item.spotlight .ranking-number,
.ranking-item.spotlight .ranking-info,
.ranking-item.spotlight .ranking-item__arrow {
    position: relative;
    z-index: 2;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0.65rem;
    text-decoration: none;
    border-radius: 14px;
    border: 1px solid rgba(0, 212, 255, 0.1);
    background: linear-gradient(135deg, rgba(16, 22, 30, 0.88) 0%, rgba(8, 12, 18, 0.92) 100%);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ranking-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--section-accent), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ranking-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--section-accent) 14%, transparent), transparent);
    transition: left 0.55s ease;
    pointer-events: none;
}

.ranking-item:hover {
    border-color: color-mix(in srgb, var(--section-accent) 45%, transparent);
    transform: translateX(-6px);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.35),
        0 0 16px color-mix(in srgb, var(--section-accent) 12%, transparent);
    background: linear-gradient(135deg, rgba(18, 26, 36, 0.95) 0%, rgba(10, 16, 24, 0.98) 100%);
}

.ranking-item:hover::before {
    opacity: 1;
}

.ranking-item:hover::after {
    left: 130%;
}

.ranking-item:hover .ranking-item__arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--section-accent);
}

.ranking-item--reporter {
    cursor: default;
}

.ranking-item--reporter:hover {
    transform: translateX(-4px);
}

.ranking-reporter-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid color-mix(in srgb, var(--section-accent) 55%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--section-accent) 25%, transparent);
    position: relative;
    z-index: 2;
}

.ranking-number {
    width: 30px;
    height: 30px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--section-accent) 85%, #fff), color-mix(in srgb, var(--section-accent) 55%, #000));
    color: #041018;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.82rem;
    flex-shrink: 0;
    box-shadow: 0 0 12px color-mix(in srgb, var(--section-accent) 25%, transparent);
}

.ranking-list .ranking-item:nth-child(1) .ranking-number {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #1a1300;
    box-shadow: 0 0 14px rgba(255, 200, 0, 0.35);
}

.ranking-list .ranking-item:nth-child(2) .ranking-number {
    background: linear-gradient(135deg, #e8eef5, #aab4c2);
    color: #1a1d22;
    box-shadow: 0 0 12px rgba(200, 210, 220, 0.25);
}

.ranking-list .ranking-item:nth-child(3) .ranking-number {
    background: linear-gradient(135deg, #d98a4f, #b5673a);
    color: #1a0d05;
    box-shadow: 0 0 12px rgba(217, 138, 79, 0.3);
}

.ranking-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.ranking-title {
    color: rgba(245, 248, 252, 0.95);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.ranking-item:hover .ranking-title {
    color: #fff;
}

.ranking-meta {
    color: rgba(160, 175, 190, 0.9);
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ranking-meta i {
    font-size: 0.68rem;
}

.ranking-meta--recent i { color: var(--primary); }

.ranking-meta--rating {
    color: #fde68a;
}

.ranking-meta--rating i {
    color: #fbbf24;
}

.ranking-meta--platform {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
}

.ranking-section--servers .ranking-meta--platform i {
    color: #fbbf24;
}

.ranking-item--server .ranking-info {
    gap: 0.2rem;
}
.ranking-meta--likes i { color: var(--success); }
.ranking-meta--dislikes i { color: var(--danger); }

.ranking-item__arrow {
    flex-shrink: 0;
    font-size: 0.62rem;
    opacity: 0;
    transform: translateX(-4px);
    color: var(--primary);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.1rem 0.5rem;
    color: rgba(160, 180, 200, 0.8);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.loading-ring {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(0, 212, 255, 0.15);
    border-top-color: var(--primary);
    animation: sidebarSpin 0.85s linear infinite;
}

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

.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
    color: rgba(150, 170, 190, 0.75);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 1rem 0.5rem;
}

.no-data i {
    font-size: 1.1rem;
    opacity: 0.55;
    color: var(--primary);
}

@media (max-width: 1024px) {
    body.sidebar-open .main-with-sidebar,
    body.sidebar-open footer {
        margin-right: 0;
    }

    body.sidebar-open .index-page-content {
        transform: none;
    }

    .main-with-sidebar {
        margin-right: 0;
    }
    
    .rankings-sidebar {
        width: min(100%, 280px);
        transform: translateX(0);
    }

    .rankings-sidebar.closed {
        transform: translateX(100%);
    }
}

/* Staff Page Styles */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.staff-page-ad,
.partners-page-ad {
    margin-top: 2.5rem;
}

.adsense-unit--horizontal-staff {
    width: 100%;
    min-height: 90px;
    overflow: hidden;
    border-radius: 12px;
}

.staff-card {
    --spot-accent: #00d4ff;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.92) 0%, rgba(8, 12, 18, 0.95) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.14);
    border-radius: 22px;
    padding: 0;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.staff-card__inner {
    position: relative;
    z-index: 2;
    padding: 2.5rem 2rem;
}

.staff-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-1);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.staff-card:hover {
    transform: translateY(-12px);
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 212, 255, 0.12);
}

.staff-card:hover::before {
    opacity: 1;
}

.staff-card:hover .spotlight-shine {
    opacity: 1;
}

.staff-avatar {
    width: 140px;
    height: 140px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--primary);
    box-shadow: var(--neon-glow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}

.staff-card:hover .staff-avatar {
    transform: scale(1.1);
    border-color: var(--primary-light);
    box-shadow: var(--neon-glow-strong);
}

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

.staff-card h3 {
    color: var(--light);
    font-size: 1.75rem;
    margin-bottom: 1rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.staff-role-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.staff-role-badge.founder {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
}

.staff-role-badge.staff-administrator {
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: white;
}

.staff-role-badge.senior-admin {
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    color: white;
}

.staff-role-badge.admin {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
}

.staff-role-badge.moderator {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.staff-role-badge.verificatore {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
}

.staff-role-badge.screenshare {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
}

.staff-role-badge.helper {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: #000;
}

.staff-discord {
    color: var(--gray);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.staff-discord i {
    color: #5865F2;
}

/* Partners Page */
.partners-page {
    max-width: 1200px;
    padding: 4rem 2rem;
}

.partners-page__title {
    text-align: center;
    margin-bottom: 1rem;
}

.partners-page__subtitle {
    text-align: center;
    color: var(--gray);
    margin-bottom: 3rem;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    align-items: stretch;
}

.partners-page__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--gray);
    margin: 0;
}

.partner-card {
    --spot-accent: #2dd4bf;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.92) 0%, rgba(8, 12, 18, 0.95) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(45, 212, 191, 0.14);
    border-radius: 22px;
    padding: 0;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.partner-card__inner {
    position: relative;
    z-index: 2;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-height: 320px;
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0d9488, #2dd4bf);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.partner-card:hover {
    transform: translateY(-12px);
    border-color: rgba(45, 212, 191, 0.35);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55), 0 0 24px rgba(45, 212, 191, 0.12);
}

.partner-card:hover::before {
    opacity: 1;
}

.partner-card:hover .spotlight-shine {
    opacity: 1;
}

.partner-logo {
    width: 140px;
    height: 140px;
    margin: 0 auto 1.75rem;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid rgba(45, 212, 191, 0.35);
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease, box-shadow 0.4s ease;
}

.partner-card:hover .partner-logo {
    transform: scale(1.05);
    border-color: rgba(45, 212, 191, 0.65);
    box-shadow: 0 0 24px rgba(45, 212, 191, 0.2);
}

.partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.partner-card__name {
    color: var(--light);
    font-size: 1.5rem;
    margin: 0 0 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}

.partner-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    margin-top: auto;
    width: 100%;
}

.partner-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: #e0f2fe;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.35);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.partner-card__link:hover {
    background: rgba(14, 165, 233, 0.28);
    border-color: rgba(14, 165, 233, 0.55);
    transform: translateY(-2px);
}

.partner-card__link--discord {
    color: #eef2ff;
    background: rgba(88, 101, 242, 0.18);
    border-color: rgba(88, 101, 242, 0.4);
}

.partner-card__link--discord:hover {
    background: rgba(88, 101, 242, 0.32);
    border-color: rgba(88, 101, 242, 0.6);
}

.partners-page__become.partner-card {
    margin-top: 2rem;
    min-height: 0;
    text-align: left;
}

.partners-page__become.partner-card:hover {
    transform: translateY(-6px);
}

.partners-page__become-inner {
    position: relative;
    z-index: 2;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 0;
}

.partners-page__become-main {
    flex: 1;
    min-width: 0;
}

.partners-page__become-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.65rem;
}

.partners-page__become-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(45, 212, 191, 0.12);
    border: 1px solid rgba(45, 212, 191, 0.28);
    color: #2dd4bf;
    font-size: 1.1rem;
}

.partners-page__become-title {
    margin: 0;
    font-size: 1.15rem;
    color: #e2e8f0;
    line-height: 1.3;
}

.partners-page__become-intro {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--gray);
    line-height: 1.45;
}

.partners-page__become-steps {
    margin: 0 0 0.55rem;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 1rem;
    counter-reset: partner-step;
}

.partners-page__become-steps li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.84rem;
    color: #cbd5e1;
    line-height: 1.4;
}

.partners-page__become-steps li::before {
    content: counter(partner-step) '.';
    counter-increment: partner-step;
    position: absolute;
    left: 0;
    color: #2dd4bf;
    font-weight: 700;
    font-size: 0.8rem;
}

.partners-page__become-alt,
.partners-page__become-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gray);
    line-height: 1.4;
}

.partners-page__become-note {
    margin-top: 0.3rem;
    opacity: 0.85;
}

.partners-page__become-action {
    flex-shrink: 0;
    align-self: center;
}

.partners-page__discord-btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .partners-page__become-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 1.15rem 1.25rem;
    }

    .partners-page__become-steps {
        grid-template-columns: 1fr;
    }

    .partners-page__become-action {
        align-self: stretch;
    }

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

.like-dislike-buttons {
    display: flex;
    gap: 0.5rem;
}

.like-btn,
.dislike-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.like-btn:hover,
.dislike-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.like-btn.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--success);
    color: var(--success);
}

.dislike-btn.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--danger);
    color: var(--danger);
}

.vote-count {
    font-weight: 600;
}

/* Cookie Consent Banner */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dark-light);
    border-top: 2px solid var(--primary);
    padding: 2rem;
    z-index: 10000;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), var(--neon-glow);
    display: none;
    animation: slideUp 0.5s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-consent.show {
    display: block;
}

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}

.cookie-consent-text h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-shadow: var(--neon-glow);
}

.cookie-consent-text p {
    color: var(--gray);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.cookie-consent-text a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid var(--primary);
}

.cookie-consent-text a:hover {
    color: var(--primary-light);
    border-color: var(--primary-light);
}

.cookie-consent-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-consent-buttons .btn {
    min-width: 150px;
}

.cookie-settings {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--dark);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    display: none;
}

.cookie-settings.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.cookie-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.cookie-option:hover {
    background: rgba(0, 212, 255, 0.05);
}

.cookie-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    cursor: pointer;
}

.cookie-option label {
    flex: 1;
    cursor: pointer;
}

.cookie-option h4 {
    color: var(--primary);
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.cookie-option p {
    color: var(--gray);
    font-size: 0.85rem;
    margin: 0;
}

.btn {
    padding: 0.875rem 2rem;
    border-radius: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--primary);
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 153, 255, 0.05) 100%);
    color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2), inset 0 0 15px rgba(0, 212, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 153, 255, 0.1) 100%);
    color: var(--primary-light);
    border-color: var(--primary-light);
    box-shadow: var(--neon-glow-strong), inset 0 0 20px rgba(0, 212, 255, 0.1);
    transform: translateY(-3px) scale(1.02);
}

.btn-primary {
    background: var(--gradient-1);
    border-color: transparent;
    color: white;
    box-shadow: var(--neon-glow);
    animation: neonGlow 3s ease-in-out infinite;
}

.btn-primary::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.btn-primary:hover {
    background: var(--gradient-2);
    border-color: transparent;
    color: white;
    box-shadow: var(--neon-glow-strong), 0 10px 40px rgba(0, 212, 255, 0.4);
    transform: translateY(-4px) scale(1.05);
}

@keyframes neonGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3), 0 0 30px rgba(0, 212, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.5), 0 0 45px rgba(0, 212, 255, 0.3);
    }
}

.btn-secondary {
    background: rgba(26, 26, 26, 0.8);
    color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(26, 26, 26, 0.95);
    border-color: var(--primary-light);
    color: var(--primary-light);
    box-shadow: var(--neon-glow);
    transform: translateY(-3px) scale(1.02);
}

.btn-discord {
    background: linear-gradient(135deg, #5865F2 0%, #7289da 100%);
    color: white;
    border: 2px solid #5865F2;
    box-shadow: 0 5px 25px rgba(88, 101, 242, 0.5);
}

.btn-discord:hover {
    background: linear-gradient(135deg, #7289da 0%, #5865F2 100%);
    border-color: #7289da;
    box-shadow: 0 8px 35px rgba(88, 101, 242, 0.7);
    transform: translateY(-4px) scale(1.05);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: clamp(0.55rem, 0.9vw, 0.85rem);
    flex-shrink: 0;
}

.user-menu > span:not(.badge) {
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-avatar-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--light);
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
}

.user-avatar-link:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.user-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

.user-avatar-ring {
    --avatar-ring-color: var(--primary);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    padding: 2px;
    background: var(--avatar-ring-color);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
    animation: avatarRingPulse 2.4s ease-in-out infinite;
}

.user-avatar-ring::before,
.user-avatar-ring::after {
    content: none;
}

@keyframes avatarRingPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(0, 212, 255, 0.2),
            0 0 10px rgba(0, 212, 255, 0.22);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(0, 212, 255, 0.35),
            0 0 16px rgba(0, 212, 255, 0.38);
    }
}

/* ContentPlus attivo — anello dorato con lucine */
.user-avatar-ring--skip-queue {
    --avatar-ring-color: #ffd54a;
    padding: 3px;
    background: linear-gradient(
        135deg,
        #fff6b8 0%,
        #ffd54a 22%,
        #ffb300 48%,
        #ffe082 72%,
        #ffc107 100%
    );
    animation: skipQueueGoldRing 3.2s ease-in-out infinite;
    box-shadow:
        0 0 14px rgba(255, 193, 7, 0.45),
        0 0 28px rgba(255, 160, 0, 0.22);
}

.user-avatar-ring--skip-queue::before,
.user-avatar-ring--skip-queue::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #fffef0 0%, #ffe566 55%, transparent 100%);
    box-shadow: 0 0 8px 2px rgba(255, 236, 140, 0.95);
    opacity: 0;
}

.user-avatar-ring--skip-queue::before {
    top: 2px;
    right: 8px;
    animation: skipQueueFireflyA 4.5s ease-in-out infinite;
}

.user-avatar-ring--skip-queue::after {
    bottom: 4px;
    left: 6px;
    width: 4px;
    height: 4px;
    animation: skipQueueFireflyB 5.2s ease-in-out infinite 0.8s;
}

@keyframes skipQueueGoldRing {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
            0 0 12px rgba(255, 193, 7, 0.4),
            0 0 24px rgba(255, 160, 0, 0.2);
    }
    50% {
        filter: brightness(1.12);
        box-shadow:
            0 0 18px rgba(255, 214, 90, 0.62),
            0 0 34px rgba(255, 180, 0, 0.34);
    }
}

@keyframes skipQueueFireflyA {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }
    18% {
        opacity: 1;
        transform: translate(-4px, 6px) scale(1);
    }
    42% {
        opacity: 0.35;
        transform: translate(2px, 12px) scale(0.8);
    }
    65% {
        opacity: 0.95;
        transform: translate(8px, 4px) scale(1.05);
    }
    82% {
        opacity: 0;
        transform: translate(12px, -2px) scale(0.5);
    }
}

@keyframes skipQueueFireflyB {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }
    22% {
        opacity: 0.9;
        transform: translate(6px, -5px) scale(1);
    }
    48% {
        opacity: 0.25;
        transform: translate(-3px, -10px) scale(0.75);
    }
    70% {
        opacity: 1;
        transform: translate(-9px, -2px) scale(1.1);
    }
    88% {
        opacity: 0;
        transform: translate(-12px, 4px) scale(0.55);
    }
}

/* ContentPlus in scadenza (≤ 7 giorni) — anello rosso */
.user-avatar-ring--skip-queue-expiring {
    --avatar-ring-color: var(--danger);
    padding: 3px;
    background: linear-gradient(135deg, #ff6b8f 0%, #ff3366 45%, #ff1744 100%);
    animation: skipQueueExpiringRing 1.35s ease-in-out infinite;
    box-shadow:
        0 0 12px rgba(255, 51, 102, 0.55),
        0 0 22px rgba(255, 23, 68, 0.28);
}

.user-avatar-ring--skip-queue-expiring::before,
.user-avatar-ring--skip-queue-expiring::after {
    content: none;
}

@keyframes skipQueueExpiringRing {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(255, 51, 102, 0.45),
            0 0 18px rgba(255, 23, 68, 0.22);
    }
    50% {
        box-shadow:
            0 0 16px rgba(255, 80, 120, 0.72),
            0 0 28px rgba(255, 23, 68, 0.42);
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-avatar-ring,
    .user-avatar-ring--skip-queue,
    .user-avatar-ring--skip-queue-expiring {
        animation: none;
    }

    .user-avatar-ring--skip-queue::before,
    .user-avatar-ring--skip-queue::after {
        display: none;
    }
}

/* Main Content */
main {
    padding-top: 124px;
    min-height: 100vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 4.5rem 2rem 3.5rem;
    animation: fadeInUp 1s ease;
    position: relative;
    overflow: visible;
}

.hero::before {
    content: '';
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 92vw);
    height: 420px;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.1) 0%, transparent 72%);
    animation: heroGlow 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.page-ambient-index .hero::before {
    animation: none;
    opacity: 0.75;
}

.hero-panel {
    --cat-accent: #00d4ff;
    --spot-accent: #00d4ff;
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    border-radius: 24px;
    border: 1px solid transparent;
    background:
        linear-gradient(155deg, rgba(14, 20, 28, 0.94) 0%, rgba(6, 10, 16, 0.98) 100%) padding-box,
        linear-gradient(140deg, rgba(0, 212, 255, 0.42) 0%, rgba(0, 212, 255, 0.08) 42%, rgba(0, 102, 255, 0.28) 100%) border-box;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    overflow: hidden;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;
}

.hero-panel__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 95% 75% at 10% -8%, color-mix(in srgb, var(--cat-accent) 30%, transparent) 0%, transparent 58%),
        radial-gradient(ellipse 75% 60% at 96% 108%, rgba(0, 102, 255, 0.16) 0%, transparent 60%);
    opacity: 0.8;
    transition: opacity 0.45s ease;
}

.hero-panel__mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.34;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 95% 85% at 50% 22%, black 18%, transparent 74%);
    -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 22%, black 18%, transparent 74%);
}

.hero-panel__shine {
    z-index: 1;
}

.hero-panel__body {
    position: relative;
    z-index: 2;
    padding: 3.25rem 2.75rem 2.85rem;
}

.hero-panel:hover {
    transform: translateY(-6px);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, var(--cat-accent) 38%, transparent),
        0 0 36px color-mix(in srgb, var(--cat-accent) 20%, transparent);
}

.hero-panel:hover .hero-panel__aurora {
    opacity: 1;
}

@keyframes heroGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

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

.hero h1 {
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    font-weight: 900;
    margin-bottom: 1.35rem;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGlow 3s ease infinite;
    position: relative;
    z-index: 1;
    letter-spacing: -2px;
}

@keyframes textGlow {
    0%, 100% {
        filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 50px rgba(0, 212, 255, 0.8));
    }
}

.hero p {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: var(--gray);
    max-width: 640px;
    margin: 0 auto 2.25rem;
    line-height: 1.8;
    position: relative;
    z-index: 1;
    font-weight: 400;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* ── Spotlight lucina (condiviso con categorie) ─────────── */
.spotlight:not(.language-dropdown):not(.language-option),
.category-card,
.hero-panel {
    --spot-accent: var(--cat-accent, #00d4ff);
    --spot-x: 50%;
    --spot-y: 35%;
    position: relative;
    overflow: hidden;
}

.spotlight-shine,
.category-card__shine,
.hero-panel__shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(
        circle 140px at var(--spot-x) var(--spot-y),
        color-mix(in srgb, var(--spot-accent) 22%, transparent) 0%,
        transparent 72%
    );
}

.spotlight:hover > .spotlight-shine,
.spotlight:focus-within > .spotlight-shine,
.category-card:hover .category-card__shine,
.hero-panel:hover .hero-panel__shine {
    opacity: 1;
}

/* Evita che il genitore si illumini quando il mouse è su uno spotlight figlio */
.spotlight:hover:has(.spotlight:hover) > .spotlight-shine,
.spotlight:focus-within:has(.spotlight:focus-within) > .spotlight-shine {
    opacity: 0;
}

/* Hero CTA — stile categoria + lucina */
.btn-hero-cta {
    isolation: isolate;
    min-width: 240px;
    min-height: 3.25rem;
    padding: 0.9rem 2rem;
    border-radius: 18px;
    border: 1px solid transparent !important;
    animation: none !important;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.btn-hero-cta::before {
    display: none;
}

.btn-hero-cta--primary {
    --spot-accent: #00d4ff;
    background:
        linear-gradient(155deg, rgba(14, 20, 28, 0.94) 0%, rgba(6, 10, 16, 0.98) 100%) padding-box,
        linear-gradient(140deg, rgba(0, 212, 255, 0.45) 0%, rgba(0, 212, 255, 0.08) 42%, rgba(0, 102, 255, 0.28) 100%) border-box !important;
    color: #fff;
    box-shadow: 0 10px 36px rgba(0, 100, 160, 0.4);
}

.btn-hero-cta--secondary {
    --spot-accent: #0099ff;
    background:
        linear-gradient(155deg, rgba(14, 20, 28, 0.92) 0%, rgba(6, 10, 16, 0.96) 100%) padding-box,
        linear-gradient(140deg, rgba(0, 212, 255, 0.38) 0%, rgba(0, 102, 255, 0.12) 100%) border-box !important;
    color: #e8f7ff;
    box-shadow: 0 10px 32px rgba(0, 80, 120, 0.35);
}

.spotlight-content {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.btn-hero-cta:hover,
.btn-hero-cta:focus-visible {
    transform: translateY(-4px);
    color: #fff;
}

.btn.btn-hero-cta.btn-primary:hover,
.btn.btn-hero-cta.btn-secondary:hover {
    transform: translateY(-4px) scale(1);
}

.btn-hero-cta--primary:hover {
    box-shadow:
        0 14px 44px rgba(0, 140, 220, 0.5),
        0 0 24px rgba(0, 212, 255, 0.2);
}

.btn-hero-cta--secondary:hover {
    box-shadow:
        0 14px 40px rgba(0, 180, 255, 0.38),
        0 0 20px rgba(0, 212, 255, 0.15);
}

/* Categories Grid */
.section-title {
    text-align: center;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 3rem;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
    text-shadow: 0 0 40px rgba(0, 212, 255, 0.3);
}

.categories-section {
    padding: 4rem 2rem 5rem;
    position: relative;
}

.categories-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90vw);
    height: 280px;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.category-card {
    --cat-accent: #00d4ff;
    --spot-accent: var(--cat-accent);
    text-align: center;
    cursor: pointer;
    border-radius: 22px;
    border: 1px solid transparent;
    background:
        linear-gradient(155deg, rgba(14, 20, 28, 0.94) 0%, rgba(6, 10, 16, 0.98) 100%) padding-box,
        linear-gradient(140deg, rgba(0, 212, 255, 0.38) 0%, rgba(0, 212, 255, 0.06) 42%, rgba(0, 102, 255, 0.22) 100%) border-box;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.35s ease;
}

.category-card:nth-child(6n+1) { --cat-accent: #00d4ff; --spot-accent: #00d4ff; }
.category-card:nth-child(6n+2) { --cat-accent: #0099ff; --spot-accent: #0099ff; }
.category-card:nth-child(6n+3) { --cat-accent: #00e5c8; --spot-accent: #00e5c8; }
.category-card:nth-child(6n+4) { --cat-accent: #5b8dff; --spot-accent: #5b8dff; }
.category-card:nth-child(6n+5) { --cat-accent: #00b4ff; --spot-accent: #00b4ff; }
.category-card:nth-child(6n+6) { --cat-accent: #36d6ff; --spot-accent: #36d6ff; }

.category-card__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 12% -5%, color-mix(in srgb, var(--cat-accent) 28%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 70% 55% at 95% 105%, rgba(0, 102, 255, 0.14) 0%, transparent 58%);
    opacity: 0.75;
    transition: opacity 0.45s ease;
}

.category-card__mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 95% 85% at 50% 25%, black 15%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 25%, black 15%, transparent 72%);
}

.category-card__body {
    position: relative;
    z-index: 2;
    padding: 2.15rem 1.85rem 2rem;
}

.category-card__cta {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.72rem;
    color: var(--cat-accent);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.22);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, var(--cat-accent) 35%, transparent),
        0 0 32px color-mix(in srgb, var(--cat-accent) 18%, transparent);
}

.category-card:hover .category-card__aurora {
    opacity: 1;
}

.category-card:hover .spotlight-shine,
.category-card:hover .category-card__shine {
    opacity: 1;
}

.category-card:hover .category-card__cta {
    opacity: 1;
    transform: translate(0, 0);
    background: color-mix(in srgb, var(--cat-accent) 18%, transparent);
}

.category-icon-wrap {
    position: relative;
    width: 86px;
    height: 86px;
    margin: 0 auto 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, color-mix(in srgb, var(--cat-accent) 22%, transparent), rgba(0, 40, 60, 0.15));
    border: 1px solid color-mix(in srgb, var(--cat-accent) 45%, transparent);
    box-shadow:
        0 0 22px color-mix(in srgb, var(--cat-accent) 25%, transparent),
        inset 0 0 18px color-mix(in srgb, var(--cat-accent) 12%, transparent);
    animation: categoryRingPulse 4.5s ease-in-out infinite;
}

.category-icon-ring::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--cat-accent) 22%, transparent);
    opacity: 0.65;
    animation: categoryRingSpin 18s linear infinite;
}

@keyframes categoryRingPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 18px color-mix(in srgb, var(--cat-accent) 20%, transparent),
            inset 0 0 14px color-mix(in srgb, var(--cat-accent) 10%, transparent);
    }
    50% {
        transform: scale(1.04);
        box-shadow:
            0 0 28px color-mix(in srgb, var(--cat-accent) 32%, transparent),
            inset 0 0 20px color-mix(in srgb, var(--cat-accent) 16%, transparent);
    }
}

@keyframes categoryRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.category-icon {
    font-size: 2.35rem;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: iconFloat 3.2s ease-in-out infinite;
    color: var(--cat-accent);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cat-accent) 55%, transparent));
    position: relative;
    z-index: 1;
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

.category-card:nth-child(2) .category-icon { animation-delay: 0.4s; }
.category-card:nth-child(3) .category-icon { animation-delay: 0.8s; }
.category-card:nth-child(4) .category-icon { animation-delay: 1.2s; }
.category-card:nth-child(2) .category-icon-ring { animation-delay: 0.5s; }
.category-card:nth-child(3) .category-icon-ring { animation-delay: 1s; }
.category-card:nth-child(4) .category-icon-ring { animation-delay: 1.5s; }

.category-card h3 {
    font-size: 1.65rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
    color: var(--light);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

.category-card p {
    color: rgba(200, 210, 220, 0.82);
    font-size: 0.98rem;
    line-height: 1.65;
    max-width: 28ch;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.category-tags-preview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(0, 212, 255, 0.1);
    position: relative;
    z-index: 1;
}

.category-tag-chip {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: 0.02em;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.category-card:hover .category-tag-chip {
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.category-tag-more {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cat-accent);
    background: color-mix(in srgb, var(--cat-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat-accent) 35%, transparent);
}

/* Glass Card */
.glass-card {
    background: var(--dark-light);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.1);
}

.glass-card.create-report-form,
.glass-card.about-content {
    --spot-accent: #00d4ff;
    padding: 0;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.92) 0%, rgba(8, 12, 18, 0.88) 100%);
    border: 1px solid rgba(0, 212, 255, 0.14);
    box-shadow:
        0 14px 44px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.create-report-form__inner,
.about-content__inner {
    position: relative;
    z-index: 2;
    padding: 2rem;
}

.about-page {
    max-width: 1180px;
}

.about-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
}

.about-page-ad {
    position: sticky;
    top: var(--rankings-sidebar-top, 104px);
}

.adsense-unit--vertical-about {
    min-height: 250px;
    overflow: hidden;
    border-radius: 12px;
}

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

    .about-page-ad {
        position: static;
        max-width: 360px;
        margin: 0 auto;
    }
}

.glass-card:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), var(--neon-glow);
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--light);
}

.form-control {
    width: 100%;
    padding: 1rem;
    background: var(--dark);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    color: var(--light);
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 0 5px rgba(0, 212, 255, 0.1);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--neon-glow);
    background: var(--dark-light);
}

.form-control::placeholder {
    color: var(--gray);
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

@keyframes field-invalid-pulse {
    0%, 100% {
        border-color: #ef4444;
        box-shadow:
            0 0 0 0 rgba(239, 68, 68, 0.45),
            0 0 14px rgba(239, 68, 68, 0.35);
    }
    50% {
        border-color: #f87171;
        box-shadow:
            0 0 0 4px rgba(239, 68, 68, 0.28),
            0 0 24px rgba(239, 68, 68, 0.72);
    }
}

.form-control.field-invalid,
select.form-control.field-invalid,
textarea.form-control.field-invalid,
input.form-control.field-invalid {
    border-color: #ef4444 !important;
    animation: field-invalid-pulse 1.35s ease-in-out infinite;
    background: rgba(239, 68, 68, 0.06) !important;
}

.form-group.field-invalid-group > label {
    color: #fca5a5;
}

/* Consent / legal checkbox cards (create report) */
.form-consent-options {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 1.75rem 0 1.5rem;
}

.consent-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 2px solid var(--glass-border);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.04), rgba(99, 102, 241, 0.03));
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    user-select: none;
}

.consent-card:hover {
    border-color: rgba(0, 212, 255, 0.45);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.07), rgba(99, 102, 241, 0.05));
}

.consent-card--required {
    border-color: rgba(0, 212, 255, 0.28);
}

.consent-card.field-invalid-group {
    border-color: #ef4444 !important;
    animation: field-invalid-pulse 1.35s ease-in-out infinite;
    background: rgba(239, 68, 68, 0.06) !important;
}

.consent-card__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.consent-card__control {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
    border-radius: 6px;
    border: 2px solid rgba(0, 212, 255, 0.55);
    background: rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.consent-card__check {
    font-size: 0.7rem;
    color: #04121f;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.15s ease;
}

.consent-card__input:checked + .consent-card__control {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.45);
}

.consent-card__input:checked + .consent-card__control .consent-card__check {
    opacity: 1;
    transform: scale(1);
}

.consent-card__input:focus-visible + .consent-card__control {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.consent-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.consent-card__title {
    font-weight: 600;
    color: var(--light);
    line-height: 1.45;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.consent-card__icon {
    color: var(--primary);
    font-size: 0.95rem;
}

.consent-card__desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--gray);
}

.consent-card__note {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(245, 197, 66, 0.92);
}

.consent-card__link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.consent-card__link:hover {
    color: #7dd3fc;
}

.btn-submit-report {
    margin-top: 0;
    padding: 1rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex: 1 1 auto;
    min-width: 0;
}

.create-report-actions {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.create-report-actions .btn-save-draft {
    flex: 0 0 auto;
    padding: 1rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.create-report-draft-banner {
    margin-bottom: 1rem;
}

.cdb-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(5, 5, 5, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.cdb-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.cdb-loading-overlay__panel {
    --spot-accent: #00d4ff;
    position: relative;
    min-width: min(100%, 340px);
    padding: 0;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.96) 0%, rgba(8, 12, 18, 0.94) 100%);
    border: 1px solid rgba(0, 212, 255, 0.18);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.55),
        0 0 32px rgba(0, 212, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cdb-loading-overlay__content {
    position: relative;
    z-index: 2;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
}

.cdb-loading-overlay__spinner {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 4px solid rgba(0, 212, 255, 0.14);
    border-top-color: var(--primary-light);
    border-right-color: var(--primary);
    box-shadow:
        0 0 28px rgba(0, 212, 255, 0.28),
        inset 0 0 12px rgba(0, 212, 255, 0.08);
    transform-origin: center center;
    will-change: transform;
    animation: cdbLoadingSpin 0.85s linear infinite;
}

@keyframes cdbLoadingSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cdb-loading-overlay__text {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--primary-light);
    text-shadow: 0 0 14px rgba(0, 212, 255, 0.35);
}

body.create-report-loading {
    overflow: hidden;
}

.btn-submit-report.is-loading {
    opacity: 0.8;
}

@media (max-width: 520px) {
    .create-report-actions {
        flex-direction: column;
    }

    .create-report-actions .btn-save-draft {
        width: 100%;
        justify-content: center;
    }
}

/* Legal pages (terms, privacy) */
.legal-document {
    line-height: 1.75;
}

.legal-document h2 {
    margin-top: 2rem;
}

.legal-document h2:first-of-type {
    margin-top: 0.5rem;
}

.legal-document h3 {
    margin-top: 1rem;
}

.legal-document table th,
.legal-document table td {
    vertical-align: top;
}

.legal-document a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rating-stars.field-invalid {
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    border: 2px solid #ef4444;
    animation: field-invalid-pulse 1.35s ease-in-out infinite;
    display: inline-flex;
    gap: 0.35rem;
}

.tags-container.field-invalid {
    padding: 0.85rem;
    border-radius: 12px;
    border: 2px dashed #ef4444;
    animation: field-invalid-pulse 1.35s ease-in-out infinite;
}

/* Tags */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.25rem;
}

.tag {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.tag:hover {
    transform: scale(1.05);
}

.tag.selected {
    border-color: white;
    box-shadow: 0 0 15px currentColor;
}

/* Rating Stars */
.rating-stars {
    display: flex;
    gap: 0.5rem;
    font-size: 1.5rem;
}

.rating-stars i {
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--gray);
}

.rating-stars i:hover,
.rating-stars i.active {
    color: var(--warning);
    transform: scale(1.2);
}

/* Report Cards */
.report-card {
    --spot-accent: #00d4ff;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.92) 0%, rgba(8, 12, 18, 0.95) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.14);
    border-radius: 22px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    animation: fadeInUp 0.5s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.report-card > :not(.spotlight-shine) {
    position: relative;
    z-index: 2;
}

.report-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-1);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.report-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: var(--primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), var(--neon-glow);
}

.report-card:hover::before {
    opacity: 1;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.report-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.report-meta {
    display: flex;
    gap: 1rem;
    color: var(--gray);
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.report-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.report-meta__target {
    color: #f8fafc;
    font-weight: 600;
}

.report-meta__target i {
    color: #fb923c;
}

.report-meta__label {
    color: var(--gray);
    font-weight: 500;
}

.report-description {
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.report-description--detail {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--light);
}

.report-section {
    margin: 1.75rem 0;
}

.report-section-title {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    color: var(--light);
    font-weight: 700;
}

.report-detail-card {
    padding: 1rem 1.15rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

.report-detail-card p {
    margin: 0.4rem 0;
    line-height: 1.55;
}

.ai-score-public {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
}

.ai-score-public i {
    opacity: 0.85;
}

.report-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.report-status {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.report-status.pending {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary);
}

.report-status.approved {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.report-status.rejected {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.report-status.under_review {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.report-status.deleted {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
}

/* Filters */
.filters {
    --spot-accent: #00d4ff;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.82) 0%, rgba(8, 12, 18, 0.72) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.filters-inner {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.85rem;
    color: var(--gray);
    font-weight: 500;
}

.filter-select {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--light);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

.filter-select option {
    background: var(--dark);
    color: var(--light);
}

/* Footer */
footer {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
    backdrop-filter: blur(30px);
    border-top: 2px solid var(--glass-border);
    padding: 4rem 2rem 2rem;
    margin-top: 6rem;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-1);
    opacity: 0.5;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section.spotlight {
    --spot-accent: #00d4ff;
    border-radius: 18px;
    padding: 1.35rem 1.25rem;
    border: 1px solid rgba(0, 212, 255, 0.1);
    background: rgba(14, 20, 28, 0.45);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.footer-section.spotlight:hover {
    border-color: rgba(0, 212, 255, 0.22);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.footer-section.spotlight h4,
.footer-section.spotlight p,
.footer-section.spotlight ul,
.footer-section.spotlight .btn {
    position: relative;
    z-index: 2;
}

.footer-section h4 {
    color: var(--primary);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.footer-section p {
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: var(--gray);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 1rem;
}

.footer-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary);
    padding-left: 1.5rem;
    text-shadow: 0 0 10px var(--primary);
}

.footer-links a:hover::before {
    width: 8px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    text-align: left;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
    color: var(--gray);
    font-size: 0.9rem;
}

.footer-bottom p {
    margin: 0;
}

.footer-trademark {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--gray);
    max-width: 52rem;
}

.footer-legal-email {
    margin-left: auto;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.footer-legal-email:hover {
    color: var(--primary-light);
    text-shadow: 0 0 10px var(--primary);
}

.footer-bottom a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-bottom a:hover {
    color: var(--primary-light);
    text-shadow: 0 0 10px var(--primary);
}

/* Responsive Design */

@media (max-width: 768px) {
    .hero {
        padding: 3rem 1rem 2.5rem;
    }

    .hero-panel__body {
        padding: 2.25rem 1.35rem 2rem;
    }

    .hero h1 {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }
    
    .hero p {
        font-size: 1.05rem;
        margin-bottom: 1.75rem;
    }

    .hero-buttons {
        gap: 1rem;
    }

    .btn-hero-cta {
        min-width: 100%;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    .staff-grid {
        grid-template-columns: 1fr;
    }

    .partners-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .footer-legal-email {
        margin-left: 0;
        align-self: flex-end;
    }
    
    .rankings-sidebar {
        width: 100%;
    }

    .rankings-sidebar.closed {
        transform: translateX(100%);
    }

    .rankings-sidebar:not(.closed) {
        transform: translateX(0);
    }
    
    .main-with-sidebar {
        margin-right: 0;
    }
}

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--glass-border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Alert */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.alert-success {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid var(--success);
    color: var(--success);
}

.alert-error {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid var(--warning);
    color: var(--warning);
}

.alert-info {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid var(--primary);
    color: var(--primary);
}

/* File upload previews (fixed-size thumbnails, never break the layout) */
.file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.file-preview-item {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

.file-preview-item img,
.file-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.file-preview-item i {
    font-size: 2rem;
    color: var(--primary);
}

.file-preview-item span {
    font-size: 0.7rem;
    color: var(--gray);
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.evidence-upload-group {
    margin-bottom: 1.5rem;
}

.evidence-upload-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.evidence-upload-count {
    color: var(--gray);
    font-size: 0.9rem;
}

.evidence-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#file-preview {
    margin-top: 1rem;
}

.file-preview-item__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

.file-preview-item__remove:hover {
    background: rgba(220, 38, 38, 0.9);
}

/* Floating toast notifications */
.cdb-toast-container {
    position: fixed;
    top: 90px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: calc(100vw - 48px);
}

.cdb-toast {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    background: rgba(18, 24, 38, 0.98);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    border-left: 4px solid var(--primary);
    cursor: pointer;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: 360px;
}

.cdb-toast.cdb-toast-show {
    opacity: 1;
    transform: translateX(0);
}

.cdb-toast i { font-size: 1.2rem; }
.cdb-toast-success { border-left-color: #10b981; }
.cdb-toast-success i { color: #10b981; }
.cdb-toast-error { border-left-color: #ef4444; }
.cdb-toast-error i { color: #ef4444; }
.cdb-toast-warning { border-left-color: #f59e0b; }
.cdb-toast-warning i { color: #f59e0b; }
.cdb-toast-info { border-left-color: var(--primary); }

@media (max-width: 480px) {
    .cdb-toast-container { right: 12px; left: 12px; top: 80px; }
    .cdb-toast { max-width: none; }
}

/* Responsive */
@media (max-width: 1280px) {
    .site-header--staff .site-nav-toggle,
    .site-header--auth .site-nav-toggle {
        display: inline-flex;
    }

    .site-header--staff .nav-container nav.site-primary-nav,
    .site-header--auth .nav-container nav.site-primary-nav {
        display: none;
        position: absolute;
        top: calc(100% + 0.35rem);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        margin: 0;
        padding: 0.75rem;
        border-radius: 14px;
        background: rgba(10, 16, 26, 0.98);
        border: 1px solid var(--glass-border);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        z-index: 1005;
        overflow: visible;
    }

    .site-header--staff .nav-container.is-mobile-open nav.site-primary-nav,
    .site-header--auth .nav-container.is-mobile-open nav.site-primary-nav {
        display: flex;
    }

    .site-header--staff .nav-container nav.site-primary-nav a,
    .site-header--auth .nav-container nav.site-primary-nav a {
        padding: 0.65rem 0.85rem;
        border-radius: 10px;
        font-size: 1rem;
    }

    .site-header--staff .nav-container nav.site-primary-nav a:hover,
    .site-header--auth .nav-container nav.site-primary-nav a:hover {
        background: rgba(0, 212, 255, 0.08);
    }
}

@media (max-width: 992px) {
    :root {
        --site-header-height: 88px;
    }

    .site-nav-toggle {
        display: inline-flex;
    }

    .nav-container nav.site-primary-nav {
        display: none;
        position: absolute;
        top: calc(100% + 0.35rem);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        margin: 0;
        padding: 0.75rem;
        border-radius: 14px;
        background: rgba(10, 16, 26, 0.98);
        border: 1px solid var(--glass-border);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        z-index: 1005;
        overflow: visible;
    }

    .nav-container.is-mobile-open nav.site-primary-nav {
        display: flex;
    }

    .nav-container nav.site-primary-nav a {
        padding: 0.65rem 0.85rem;
        border-radius: 10px;
    }

    .nav-container nav.site-primary-nav a:hover {
        background: rgba(0, 212, 255, 0.08);
    }

    .site-nav-dropdown {
        width: 100%;
    }

    .site-nav-dropdown__toggle {
        width: 100%;
        justify-content: space-between;
        padding: 0.65rem 0.85rem;
        border-radius: 10px;
    }

    .site-nav-dropdown__toggle::after {
        display: none;
    }

    .site-nav-dropdown.is-open .site-nav-dropdown__menu.language-dropdown:not([hidden]) {
        display: block !important;
        animation: none;
    }

    .site-nav-dropdown__menu.language-dropdown {
        position: static !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 0.35rem;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .site-nav-dropdown__menu.language-dropdown .language-dropdown__list {
        max-height: none;
        overflow: visible;
    }

    .logo .site-logo {
        height: 64px;
        max-height: 64px;
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    .filters {
        flex-direction: column;
    }
    
    .filter-group {
        width: 100%;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* AI Analysis Badge for Report Detail Page */
.ai-analysis-badge {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.ai-analysis-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ai-score-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.ai-score-number {
    color: var(--primary);
}

.ai-score-verdict {
    font-size: 1.3rem;
}

.ai-confidence-display {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.ai-confidence-very_high {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.ai-confidence-high {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.ai-confidence-medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.ai-confidence-low {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Rankings sidebar — entry animations */
.ranking-list--animate .ranking-item {
    animation: rankItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ranking-list--animate .ranking-item:nth-child(1) { animation-delay: 0.04s; }
.ranking-list--animate .ranking-item:nth-child(2) { animation-delay: 0.09s; }
.ranking-list--animate .ranking-item:nth-child(3) { animation-delay: 0.14s; }
.ranking-list--animate .ranking-item:nth-child(4) { animation-delay: 0.19s; }
.ranking-list--animate .ranking-item:nth-child(5) { animation-delay: 0.24s; }

@keyframes rankItemIn {
    from {
        opacity: 0;
        transform: translateX(14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Smooth reveal for category & report cards */
.category-card,
.report-card,
.tournament-card {
    will-change: transform;
}

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

    /* Keep the gentle Christmas snowfall running even under reduced motion;
       the flakes are already slowed down and thinned out in JS. */
    .christmas-snow-flake {
        animation-duration: var(--snow-duration, 26s) !important;
        animation-iteration-count: infinite !important;
    }

    /* Upload overlay must stay visibly animated during report submission. */
    .cdb-loading-overlay__spinner {
        animation-name: cdbLoadingSpin !important;
        animation-duration: 0.85s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }
}

/* ── Shop ───────────────────────────────────────────────── */
body.shop-body {
    --site-header-height: 96px;
    --shop-cart-sidebar-width: 340px;
    --shop-nav-offset: var(--site-header-height, 96px);
    --shop-alert-strip-height: 0px;
    --shop-stack-top: calc(var(--shop-nav-offset) + var(--shop-subnav-height, 56px) + var(--shop-alert-strip-height));
    /* Shop accent palette — aligned with site cyan/blue */
    --shop-accent: var(--primary);
    --shop-accent-light: var(--primary-light);
    --shop-accent-dark: var(--primary-dark);
    --shop-accent-secondary: var(--secondary);
    --shop-accent-soft: rgba(0, 212, 255, 0.12);
    --shop-accent-mid: rgba(0, 212, 255, 0.18);
    --shop-accent-border: rgba(0, 212, 255, 0.28);
    --shop-accent-border-strong: rgba(0, 212, 255, 0.38);
    --shop-accent-glow: rgba(0, 212, 255, 0.45);
    --shop-accent-text: #7ee8ff;
    --shop-accent-text-bright: #ccf7ff;
    --shop-intro-gold: var(--primary);
    --spot-accent: var(--primary);
}

body.shop-body .shop-shell {
    padding-top: var(--shop-stack-top);
    min-height: 100vh;
    position: relative;
    z-index: 2;
}

body.shop-body .shop-page-main {
    position: relative;
    z-index: 2;
    padding-top: 0;
    padding-bottom: 5.5rem;
    min-height: auto;
}

/* Layout a due colonne: catalogo | carrello */
.shop-layout {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: calc(100vh - var(--site-header-height));
}

.shop-layout__primary {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

body.shop-body.shop-cart-open > footer {
    margin-right: var(--shop-cart-sidebar-width);
    transition: margin-right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

body.shop-body.shop-cart-open-overlay {
    overflow: hidden;
}

body.shop-body.shop-cart-open-overlay > footer {
    margin-right: 0;
}

body.shop-body .shop-page-main--with-cart .shop-page {
    max-width: 100%;
}

/* Assistenza: sopra subnav/carrello e sempre visibile in basso a sinistra */
body.shop-body .cdb-support-launcher {
    z-index: 10200;
    left: max(1.25rem, env(safe-area-inset-left, 0px));
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}

body.shop-body .cdb-support-panel {
    z-index: 10210;
}

.shop-item-card > :not(.spotlight-shine):not(.shop-item-card__help) {
    position: relative;
    z-index: 2;
}

.shop-subnav {
    position: fixed;
    top: var(--shop-nav-offset, var(--site-header-height, 96px));
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    margin: 0;
    background: linear-gradient(180deg, rgba(12, 18, 28, 0.98) 0%, rgba(8, 12, 20, 0.95) 100%);
    border-top: none;
    border-bottom: 1px solid rgba(0, 212, 255, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.shop-global-alert--below-subnav {
    position: fixed;
    top: calc(var(--shop-nav-offset, var(--site-header-height, 108px)) + var(--shop-subnav-height, 56px));
    left: 0;
    right: 0;
    z-index: 998;
    margin: 0;
}

.shop-subnav__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.shop-subnav__tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.shop-subnav__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.15rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--gray);
    border: 1px solid transparent;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.shop-subnav__tab:hover {
    color: var(--light);
    background: rgba(255, 255, 255, 0.04);
}

.shop-subnav__tab.is-active {
    color: var(--primary);
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.1);
}

.shop-subnav__balance {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(0, 212, 255, 0.06));
    border: 1px solid rgba(0, 212, 255, 0.35);
}

.shop-subnav__balance-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
}

.shop-subnav__balance-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--shop-accent-text-bright);
    white-space: nowrap;
}

.shop-subnav__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.shop-cart-trigger {
    --spot-accent: #00d4ff;
    position: relative;
    display: inline-flex;
    align-items: stretch;
    padding: 0;
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 12px;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.92), rgba(8, 12, 18, 0.95));
    color: var(--light);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.shop-cart-trigger:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.45);
    box-shadow: 0 8px 22px rgba(0, 212, 255, 0.15);
}

.shop-cart-trigger__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    font-weight: 700;
    font-size: 0.88rem;
}

.shop-cart-trigger__badge {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--shop-accent), var(--shop-accent-text-bright));
    color: #021018;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.45);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shop-cart-trigger__badge[hidden] {
    display: none;
}

.shop-cart-trigger__badge.is-pop {
    animation: shopBadgePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes shopBadgePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.shop-add-cart-btn.is-adding {
    pointer-events: none;
    opacity: 0.75;
    transform: scale(0.97);
}

.shop-fly-dot {
    position: fixed;
    z-index: 10060;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--shop-accent-text-bright) 0%, var(--shop-accent) 70%);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.8);
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

.shop-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(2, 6, 14, 0.72);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.32s ease;
    display: none;
}

.shop-cart-backdrop.is-visible {
    opacity: 1;
}

/* Carrello — sidebar destra affiancata al catalogo */
.shop-cart-sidebar {
    --spot-accent: var(--shop-accent);
    position: relative;
    flex: 0 0 var(--shop-cart-sidebar-width);
    width: var(--shop-cart-sidebar-width);
    min-width: var(--shop-cart-sidebar-width);
    max-width: var(--shop-cart-sidebar-width);
    isolation: isolate;
    z-index: 4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-self: stretch;
    border-left: 1px solid transparent;
    background:
        linear-gradient(180deg, rgba(11, 17, 26, 0.97) 0%, rgba(4, 7, 12, 0.99) 100%) padding-box,
        linear-gradient(180deg, var(--shop-accent-border) 0%, rgba(0, 212, 255, 0.16) 100%) border-box;
    box-shadow:
        -10px 0 45px rgba(0, 0, 0, 0.5),
        inset 1px 0 0 rgba(0, 212, 255, 0.08);
    transition:
        flex-basis 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        min-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.32s ease,
        visibility 0.32s ease;
}

.shop-cart-sidebar.closed {
    flex-basis: 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-left-color: transparent;
    box-shadow: none;
}

.shop-cart-sidebar__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 45% at 100% 0%, rgba(0, 212, 255, 0.14) 0%, transparent 58%),
        radial-gradient(ellipse 70% 40% at 0% 100%, rgba(0, 212, 255, 0.1) 0%, transparent 55%);
    opacity: 0.85;
}

.shop-cart-sidebar__mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
}

.shop-cart-sidebar__edge-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--shop-accent-text-bright), var(--primary), transparent);
    opacity: 0.55;
    animation: sidebarEdgePulse 5s ease-in-out infinite;
}

.shop-cart-sidebar__header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px solid var(--shop-accent-soft);
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.06) 0%, transparent 100%);
}

.shop-cart-sidebar__toggle {
    width: 38px;
    height: 38px;
    background: linear-gradient(145deg, rgba(0, 212, 255, 0.95), rgba(0, 168, 204, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 11px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    box-shadow: 0 4px 18px rgba(0, 212, 255, 0.35);
}

.shop-cart-sidebar__toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 212, 255, 0.5);
}

.shop-cart-sidebar.closed .shop-cart-sidebar__toggle i {
    transform: rotate(180deg);
}

.shop-cart-sidebar__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding: 0 1.1rem 1.15rem;
}

.shop-cart-sidebar__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--shop-accent-soft);
}

.shop-cart-sidebar__title-badge {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.1rem;
    color: #021018;
    background: linear-gradient(145deg, var(--shop-accent-text-bright), var(--shop-accent));
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 22px rgba(0, 212, 255, 0.35);
}

.shop-cart-sidebar__title-text h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--light);
}

.shop-cart-sidebar__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--gray);
    line-height: 1.35;
}

.shop-cart-sidebar__body {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.15rem;
    margin-bottom: 0.85rem;
}

.shop-cart-sidebar__body::-webkit-scrollbar {
    width: 5px;
}

.shop-cart-sidebar__body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--shop-accent-text-bright), var(--primary));
    border-radius: 4px;
}

.shop-cart-sidebar__footer {
    position: relative;
    z-index: 2;
    padding-top: 0.85rem;
    border-top: 1px solid var(--shop-accent-soft);
}

.shop-cart-open-btn {
    position: fixed;
    right: 0;
    top: calc(50% + (var(--shop-subnav-height) * 0.25));
    transform: translateY(-50%);
    min-width: 44px;
    padding: 0.65rem 0.55rem 0.65rem 0.7rem;
    background:
        linear-gradient(155deg, rgba(12, 20, 30, 0.96), rgba(6, 10, 16, 0.98)) padding-box,
        linear-gradient(140deg, rgba(0, 212, 255, 0.5), rgba(0, 212, 255, 0.2)) border-box;
    border: 1px solid transparent;
    border-right: none;
    border-radius: 14px 0 0 14px;
    color: var(--shop-accent-text-bright);
    cursor: pointer;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease, color 0.3s ease;
    z-index: 955;
    box-shadow: -4px 0 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(0, 212, 255, 0.15);
}

body.shop-body.shop-cart-open .shop-cart-open-btn {
    display: none;
}

body.shop-body:not(.shop-cart-open) .shop-cart-open-btn {
    display: flex;
}

.shop-cart-open-btn__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 235, 245, 0.85);
}

.shop-cart-open-btn__badge {
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--shop-accent), var(--shop-accent-text-bright));
    color: #021018;
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.shop-cart-open-btn__badge[hidden] {
    display: none;
}

.shop-cart-open-btn__badge.is-pop {
    animation: shopBadgePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shop-cart-open-btn:hover {
    transform: translateY(-50%) translateX(-3px);
    color: #a5f3fc;
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.5), 0 0 26px var(--shop-accent-border);
}

.shop-cart-sidebar__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
    font-weight: 700;
}

.shop-cart-sidebar__total strong {
    font-size: 1.15rem;
    color: var(--shop-accent-text-bright);
}

.shop-cart-sidebar__balance-hint {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    color: var(--gray);
}

.shop-cart-sidebar__actions {
    display: flex;
    gap: 0.55rem;
}

.shop-cart-sidebar__actions .btn {
    flex: 1;
}

.shop-cart-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray);
}

.shop-cart-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.45;
}

.shop-cart-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.shop-cart-line {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.65rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    animation: shopLineIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--line-delay, 0s);
}

@keyframes shopLineIn {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

.shop-cart-line__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--shop-accent-soft);
    color: var(--shop-accent-text-bright);
}

.shop-cart-line__name {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.3;
}

.shop-cart-line__unit {
    font-size: 0.75rem;
    color: var(--gray);
}

.shop-cart-line__qty {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.shop-qty-btn {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 212, 255, 0.25);
    background: rgba(0, 212, 255, 0.08);
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
}

.shop-qty-value {
    min-width: 1.25rem;
    text-align: center;
    font-weight: 700;
}

.shop-cart-line__total {
    font-weight: 800;
    color: var(--shop-accent-text-bright);
    font-size: 0.88rem;
    white-space: nowrap;
}

.shop-cart-line__remove {
    border: none;
    background: transparent;
    color: var(--gray);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
}

.shop-cart-line__remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.shop-cart-checkout-btn.is-ready {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.35);
    animation: shopCheckoutPulse 2.5s ease-in-out infinite;
}

.shop-cart-checkout-btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

@keyframes shopCheckoutPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0, 212, 255, 0.2); }
    50% { box-shadow: 0 0 24px rgba(0, 212, 255, 0.42); }
}

.shop-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 10070;
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    background: rgba(10, 16, 26, 0.96);
    border: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    font-weight: 600;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    pointer-events: none;
}

.shop-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.shop-toast--success {
    border-color: rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
}

.shop-toast--error {
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}

.shop-section-header {
    margin-bottom: 1.5rem;
}

.shop-home-intro {
    --shop-intro-gold: var(--shop-accent);
    --shop-intro-cyan: #00d4ff;
    --spot-accent: var(--shop-accent);
    position: relative;
    margin-bottom: 1.65rem;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 22px !important;
    border: 1px solid transparent !important;
    backdrop-filter: blur(20px);
    background:
        linear-gradient(155deg, rgba(14, 20, 28, 0.96) 0%, rgba(6, 10, 16, 0.99) 100%) padding-box,
        linear-gradient(128deg, rgba(0, 212, 255, 0.5) 0%, rgba(0, 212, 255, 0.18) 38%, rgba(0, 102, 255, 0.32) 72%, var(--shop-accent-border) 100%) border-box !important;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;
}

.shop-home-intro:hover {
    transform: translateY(-3px);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 212, 255, 0.22),
        0 0 42px var(--shop-accent-soft);
}

.shop-home-intro__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 70% at 8% -5%, rgba(0, 212, 255, 0.22) 0%, transparent 58%),
        radial-gradient(ellipse 75% 65% at 96% 108%, rgba(0, 212, 255, 0.14) 0%, transparent 62%),
        radial-gradient(ellipse 55% 45% at 52% 50%, rgba(0, 102, 255, 0.06) 0%, transparent 70%);
    opacity: 0.88;
    animation: shopIntroAurora 9s ease-in-out infinite alternate;
}

.shop-home-intro__mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.035) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 95% 85% at 28% 18%, black 12%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 95% 85% at 28% 18%, black 12%, transparent 78%);
}

@keyframes shopIntroAurora {
    0% { opacity: 0.72; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.03); }
}

.shop-home-intro__layout {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.55rem 1.65rem;
}

.shop-home-intro__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
}

.shop-home-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.32rem 0.72rem 0.32rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a5f3fc;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.shop-home-intro__eyebrow-pulse {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55);
    animation: shopIntroPulse 2.4s ease-out infinite;
}

@keyframes shopIntroPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

.shop-home-intro__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.shop-home-intro__title-icon {
    flex-shrink: 0;
    width: 3.35rem;
    height: 3.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 1.35rem;
    color: #a5f3fc;
    background:
        linear-gradient(145deg, rgba(0, 212, 255, 0.24) 0%, rgba(0, 168, 204, 0.12) 100%);
    border: 1px solid rgba(0, 212, 255, 0.38);
    box-shadow:
        0 10px 28px var(--shop-accent-mid),
        inset 0 1px 0 rgba(165, 243, 252, 0.18);
}

.shop-home-intro__title-text {
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, #e0f7ff 0%, #a5f3fc 38%, var(--shop-accent-text-bright) 72%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.shop-home-intro__subtitle {
    margin: 0;
    max-width: 36rem;
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    line-height: 1.65;
    color: #94a3b8;
}

.shop-home-intro__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.shop-home-intro__chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.shop-home-intro__chips li i {
    color: var(--shop-accent-text-bright);
    font-size: 0.82rem;
}

.shop-home-intro__chips li:nth-child(2) i {
    color: #22d3ee;
}

.shop-home-intro__chips li:nth-child(3) i {
    color: #a78bfa;
}

.shop-home-intro:hover .shop-home-intro__chips li {
    border-color: rgba(148, 163, 184, 0.28);
}

.shop-home-intro__divider {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 0.25rem 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 212, 255, 0.35) 18%,
        rgba(0, 212, 255, 0.28) 50%,
        rgba(0, 212, 255, 0.35) 82%,
        transparent 100%
    );
    opacity: 0.85;
}

.shop-home-disclaimer {
    position: relative;
    flex: 0 1 min(100%, 23.5rem);
    align-self: center;
    padding: 1.1rem 1.15rem 1rem;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(0, 51, 102, 0.42) 0%, rgba(0, 32, 64, 0.52) 42%, rgba(6, 10, 16, 0.78) 100%);
    border: 1px solid rgba(0, 212, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(165, 243, 252, 0.12),
        inset 0 0 0 1px rgba(0, 212, 255, 0.06),
        0 14px 34px rgba(0, 0, 0, 0.32);
    color: #a5f3fc;
}

.shop-home-disclaimer::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 90% 80% at 100% 0%, rgba(0, 212, 255, 0.14) 0%, transparent 58%);
}

.shop-home-disclaimer__stamp {
    position: absolute;
    top: 0.72rem;
    right: 0.72rem;
    z-index: 1;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0c4a6e;
    background: linear-gradient(180deg, #a5f3fc 0%, var(--shop-accent-text-bright) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 14px var(--shop-accent-border);
    transform: rotate(4deg);
}

.shop-home-disclaimer__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding-right: 3.25rem;
}

.shop-home-disclaimer__icon {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.05rem;
    color: var(--shop-accent-text);
    background: rgba(0, 212, 255, 0.16);
    border: 1px solid rgba(0, 212, 255, 0.32);
    box-shadow: 0 0 22px rgba(0, 212, 255, 0.16);
}

.shop-home-disclaimer__head strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #cffafe;
}

.shop-home-disclaimer__head p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #a5f3fc;
}

.shop-home-disclaimer__list {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.shop-home-disclaimer__list li {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--shop-accent-text);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(0, 212, 255, 0.14);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.shop-home-intro:hover .shop-home-disclaimer__list li,
.shop-home-disclaimer:focus-within .shop-home-disclaimer__list li {
    border-color: rgba(0, 212, 255, 0.22);
}

.shop-home-disclaimer__row-icon {
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--shop-accent-text-bright);
    background: var(--shop-accent-soft);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.shop-home-disclaimer__legal {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.85rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(0, 212, 255, 0.16);
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--shop-accent-text-bright);
}

.shop-home-disclaimer__legal > i {
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: #a5f3fc;
    opacity: 0.9;
}

.shop-home-disclaimer__link {
    color: #a5f3fc;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(254, 240, 138, 0.45);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.shop-home-disclaimer__link:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.65);
}

.shop-section-header h1 {
    font-size: 1.75rem;
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shop-section-header p {
    margin: 0;
    color: var(--gray);
}

/* Shop — I tuoi acquisti */
.shop-purchases-panel {
    position: relative;
    padding: 1.35rem 1.35rem 1.15rem;
    overflow: hidden;
}

.shop-purchases-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.shop-purchases-search {
    position: relative;
    display: block;
}

.shop-purchases-search i {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    opacity: 0.85;
    pointer-events: none;
}

.shop-purchases-search .form-control {
    padding-left: 2.45rem;
}

.shop-purchases-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.shop-purchases-filter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray);
}

.shop-purchases-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.16);
    font-size: 0.92rem;
    color: var(--gray);
}

.shop-purchases-summary strong {
    color: var(--shop-accent-text-bright);
}

.shop-purchases-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.shop-purchase-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 0.95rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.shop-purchase-row:hover {
    border-color: rgba(0, 212, 255, 0.22);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.shop-purchase-row[hidden] {
    display: none !important;
}

.shop-purchase-row__icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--shop-accent-text-bright);
    background: var(--shop-accent-soft);
    border: 1px solid rgba(0, 212, 255, 0.25);
}

.shop-purchase-row__title {
    margin: 0;
    font-size: 1rem;
    color: var(--light);
}

.shop-purchase-row__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.shop-purchase-row__status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-purchase-row__status--active {
    color: #6dffb8;
    background: rgba(46, 204, 113, 0.14);
    border: 1px solid rgba(46, 204, 113, 0.28);
}

.shop-purchase-row__status--inactive {
    color: #a8b0bc;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.shop-purchase-row--inactive {
    opacity: 0.82;
}

.shop-purchase-row--inactive:hover {
    opacity: 1;
}

.shop-purchase-row__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    font-size: 0.82rem;
    color: var(--gray);
}

.shop-purchase-row__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.shop-purchase-row__coins {
    text-align: right;
    min-width: 5.5rem;
}

.shop-purchase-row__coins-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
    margin-bottom: 0.15rem;
}

.shop-purchase-row__coins strong {
    font-size: 1.05rem;
    color: var(--shop-accent-text-bright);
    white-space: nowrap;
}

.shop-purchases-empty {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    color: var(--gray);
}

.shop-purchases-empty i {
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
    opacity: 0.45;
}

.shop-purchases-empty p {
    margin: 0;
}

.shop-recharge-balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid var(--shop-accent-border);
}

.shop-recharge-balance-row strong {
    font-size: 1.15rem;
    color: var(--shop-accent-text-bright);
}

.shop-global-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(90deg, var(--shop-accent-mid), rgba(0, 153, 255, 0.08));
    border-bottom: 1px solid rgba(0, 212, 255, 0.35);
    color: #a5f3fc;
    font-size: 0.92rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

/* Index rankings sidebar: stay above skip-queue banner, offset when banner is visible */
body:has(.shop-global-alert) {
    --rankings-sidebar-top: 144px;
}

body.page-ambient-index:has(.shop-global-alert) .rankings-sidebar {
    z-index: 1001;
}

.shop-global-alert__link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.shop-page {
    max-width: 960px;
    margin: 0 auto 3rem;
    padding: 1.5rem 1rem 2rem;
}

.shop-purchases-perk-counters {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 1.15rem;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 102, 255, 0.06) 100%);
    border: 1px solid rgba(0, 212, 255, 0.22);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.shop-purchases-perk-counter {
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem;
    min-width: 0;
}

.shop-purchases-perk-counter--warning {
    background: rgba(0, 212, 255, 0.06);
}

.shop-purchases-perk-counter__icon {
    flex-shrink: 0;
    width: 2.65rem;
    height: 2.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.1rem;
    color: var(--shop-accent-text-bright);
    background: rgba(0, 212, 255, 0.14);
    border: 1px solid var(--shop-accent-border);
}

.shop-purchases-perk-counter__icon--bot {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(129, 140, 248, 0.28);
}

.shop-purchases-perk-counter__icon--optimizer {
    color: #5adbff;
    background: rgba(0, 180, 255, 0.16);
    border-color: rgba(0, 180, 255, 0.32);
}

.shop-purchases-perk-counter--with-download {
    flex-wrap: wrap;
}

.shop-purchases-perk-counter__download {
    flex: 1 1 100%;
    margin-top: 0.65rem;
}

.shop-optimizer-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    color: #031018;
    background: linear-gradient(135deg, #5adbff 0%, #00b4ff 55%, #0077ff 100%);
    border: 1px solid rgba(90, 219, 255, 0.55);
    box-shadow: 0 8px 24px rgba(0, 180, 255, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.shop-optimizer-download-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0, 180, 255, 0.3);
    color: #031018;
    text-decoration: none;
}

.shop-purchases-perk-counter__body {
    min-width: 0;
}

.shop-purchases-perk-counter__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray);
}

.shop-purchases-perk-counter__value {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.shop-purchases-perk-counter__value strong {
    font-size: clamp(1.85rem, 4vw, 2.35rem);
    font-weight: 800;
    line-height: 1;
    color: var(--shop-accent-text-bright);
    text-shadow: 0 0 18px rgba(0, 212, 255, 0.25);
}

.shop-purchases-perk-counter__value span {
    font-size: 0.92rem;
    font-weight: 600;
    color: #cbd5e1;
}

.shop-purchases-perk-counter__inactive {
    margin: 0;
    font-size: 0.92rem;
    color: var(--gray);
    font-weight: 600;
}

.shop-purchases-perk-counter__warn {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--shop-accent-text);
    line-height: 1.4;
}

.shop-purchases-perk-counters__divider {
    flex: 0 0 1px;
    align-self: stretch;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 212, 255, 0.35) 18%,
        rgba(0, 212, 255, 0.35) 82%,
        transparent 100%
    );
}

@media (max-width: 640px) {
    .shop-purchases-perk-counters {
        flex-direction: column;
    }

    .shop-purchases-perk-counters__divider {
        flex: 0 0 auto;
        width: auto;
        height: 1px;
        margin: 0 1rem;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 212, 255, 0.35) 18%,
            rgba(0, 212, 255, 0.35) 82%,
            transparent 100%
        );
    }
}

.shop-purchases-perk-counter--with-presence {
    align-items: center;
}

.shop-purchases-perk-counter__presence {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    min-width: 9.5rem;
}

.shop-purchases-perk-counter__presence-status {
    display: flex;
    width: 100%;
}

.shop-purchases-perk-counter__presence-status .shop-bot-presence-btn {
    width: 100%;
}

.shop-bot-presence-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 7.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.shop-bot-presence-btn--change {
    color: #bae6fd;
    background: rgba(14, 165, 233, 0.16);
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 16px rgba(14, 165, 233, 0.12);
    cursor: pointer;
}

.shop-bot-presence-btn--change:hover,
.shop-bot-presence-btn--change:focus-visible {
    color: #fff;
    background: rgba(14, 165, 233, 0.28);
    border-color: rgba(125, 211, 252, 0.7);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18), 0 8px 20px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
    outline: none;
}

.shop-bot-presence-btn--change:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.shop-bot-presence-btn--online {
    color: #bbf7d0;
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.42);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.14);
    cursor: default;
    user-select: none;
}

.shop-bot-presence-btn--online i {
    font-size: 0.55rem;
    color: #4ade80;
    animation: shopBotPresencePulse 1.8s ease-in-out infinite;
}

.shop-bot-presence-btn--readd {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.12);
    cursor: pointer;
}

.shop-bot-presence-btn--readd:hover,
.shop-bot-presence-btn--readd:focus-visible {
    color: #fff;
    background: rgba(239, 68, 68, 0.28);
    border-color: rgba(248, 113, 113, 0.65);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18), 0 8px 20px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
    outline: none;
}

.shop-bot-presence-btn--readd:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

@keyframes shopBotPresencePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (max-width: 640px) {
    .shop-purchases-perk-counter--with-presence {
        flex-wrap: wrap;
    }

    .shop-purchases-perk-counter__presence {
        width: 100%;
        margin-left: 0;
        padding-left: 3.5rem;
        padding-top: 0.35rem;
    }

    .shop-bot-presence-btn {
        width: 100%;
    }
}

.shop-purchases-perk-status {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.15rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.32);
    color: #a7f3d0;
}

.shop-purchases-perk-status--warning {
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--shop-accent-border-strong);
    color: #a5f3fc;
}

.shop-purchases-perk-status__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.15rem;
    color: var(--shop-accent-text-bright);
    background: rgba(0, 212, 255, 0.14);
    border: 1px solid var(--shop-accent-border);
}

.shop-purchases-perk-status__body strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    color: var(--light);
}

.shop-purchases-perk-status__body p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
}

.shop-purchases-perk-status__warn {
    margin-top: 0.45rem !important;
    font-weight: 600;
    color: var(--shop-accent-text);
}

.shop-purchases-perk-status--warning .shop-purchases-perk-status__icon {
    color: #a5f3fc;
    background: var(--shop-accent-mid);
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.shop-catalog {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
}

.shop-catalog-tier__header {
    margin-bottom: 1.35rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.shop-catalog-tier__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    max-width: 52rem;
}

.shop-catalog-tier__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shop-catalog-tier--30d .shop-catalog-tier__badge {
    color: #ccf7ff;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.28);
}

.shop-catalog-tier--7d .shop-catalog-tier__badge {
    color: #dbeafe;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
}

.shop-catalog-tier__title {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    color: var(--light);
    line-height: 1.25;
}

.shop-catalog-tier__subtitle {
    margin: 0;
    color: var(--gray);
    line-height: 1.55;
    font-size: 0.95rem;
}

.shop-catalog-tier__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .shop-catalog-tier__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .shop-catalog {
        gap: 2.25rem;
    }

    .shop-catalog-tier__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.shop-item-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

.shop-item-card__help {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    left: auto;
    z-index: 4;
    width: 2.15rem;
    height: 2.15rem;
    margin: 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 17, 23, 0.72);
    color: #e2e8f0;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, background 0.22s ease;
    backdrop-filter: blur(8px);
}

.shop-item-card__help:hover,
.shop-item-card__help:focus-visible {
    transform: scale(1.08);
    color: #fff;
    border-color: rgba(0, 212, 255, 0.55);
    box-shadow: 0 0 0 3px var(--shop-accent-mid), 0 8px 20px rgba(0, 0, 0, 0.35);
    background: rgba(0, 212, 255, 0.15);
    outline: none;
}

.shop-item-card__help:active {
    transform: scale(0.96);
}

.shop-item-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    font-size: 1.65rem;
    color: var(--shop-accent-text-bright);
    background: var(--shop-accent-soft);
    border: 1px solid var(--shop-accent-border);
}

.shop-item-card h2,
.shop-item-card__name {
    margin: 0;
    font-size: 1.2rem;
    color: var(--light);
}

.shop-item-card p {
    margin: 0;
    color: var(--gray);
    line-height: 1.55;
    flex: 1;
}

.shop-item-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.shop-item-card__price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--shop-accent-text-bright);
}

.shop-empty-catalog {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--gray);
}

.shop-empty-catalog i {
    font-size: 2.5rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.shop-recharge-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.15rem;
    align-items: start;
}

.shop-recharge-side {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.shop-recharge-card {
    padding: 1.75rem;
}

.shop-recharge-lead {
    margin: 0 0 1rem;
    color: #d5dde8;
    font-size: 0.96rem;
    line-height: 1.55;
}

.shop-recharge-chips {
    list-style: none;
    margin: 0 0 1.35rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.shop-recharge-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--shop-accent-text-bright);
    background: var(--shop-accent-soft);
    border: 1px solid rgba(0, 212, 255, 0.22);
}

.shop-recharge-checkout-note {
    margin: 0 0 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #c5d0dc;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.shop-recharge-checkout-note i {
    color: var(--shop-accent-text-bright);
    margin-right: 0.35rem;
}

.shop-recharge-noscript {
    margin-top: 0.75rem;
}

.shop-recharge-guide {
    padding: 1.35rem 1.4rem;
}

.shop-recharge-guide__title {
    margin: 0 0 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    color: var(--light);
}

.shop-recharge-guide__title i {
    color: var(--shop-accent-text-bright);
}

.shop-recharge-guide__lead {
    margin: 0 0 1rem;
    color: #c5d0dc;
    font-size: 0.9rem;
    line-height: 1.55;
}

.shop-recharge-guide__subtitle {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
}

.shop-recharge-guide__subtitle:not(:first-of-type) {
    margin-top: 1rem;
}

.shop-recharge-guide__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.shop-recharge-guide__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #d2dae4;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.shop-recharge-guide__list--positive li i {
    color: #6dffb8;
    margin-top: 0.15rem;
}

.shop-recharge-guide__list--negative li i {
    color: #ff9f9f;
    margin-top: 0.15rem;
}

.shop-recharge-disclaimer.shop-home-disclaimer {
    margin: 0;
    padding: 1.3rem 1.35rem 1.2rem;
    background:
        linear-gradient(165deg, rgba(0, 82, 138, 0.94) 0%, rgba(0, 52, 98, 0.96) 48%, rgba(10, 20, 34, 0.98) 100%);
    border: 1px solid rgba(0, 212, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(224, 242, 254, 0.2),
        inset 0 0 0 1px rgba(0, 212, 255, 0.14),
        0 18px 42px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(0, 212, 255, 0.1);
    color: #e0f2fe;
}

.shop-recharge-disclaimer.shop-home-disclaimer::before {
    opacity: 0.55;
    background: radial-gradient(ellipse 95% 85% at 100% 0%, rgba(0, 212, 255, 0.22) 0%, transparent 60%);
}

.shop-recharge-disclaimer .shop-home-disclaimer__icon {
    background: rgba(0, 212, 255, 0.24);
    border-color: rgba(0, 212, 255, 0.45);
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.22);
}

.shop-recharge-disclaimer .shop-home-disclaimer__head strong {
    color: #f0fdff;
}

.shop-recharge-disclaimer .shop-home-disclaimer__head p {
    color: #dbeafe;
}

.shop-recharge-disclaimer .shop-home-disclaimer__list li {
    background: rgba(2, 16, 32, 0.62);
    border-color: rgba(0, 212, 255, 0.32);
    color: #e0f2fe;
}

.shop-recharge-disclaimer .shop-home-disclaimer__row-icon {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.38);
}

.shop-recharge-disclaimer .shop-home-disclaimer__legal {
    color: #e0f2fe;
    border-top-color: rgba(0, 212, 255, 0.3);
}

.shop-recharge-disclaimer .shop-home-disclaimer__legal > i {
    color: #bae6fd;
    opacity: 1;
}

.shop-recharge-disclaimer .shop-home-disclaimer__link {
    color: #bae6fd;
    text-decoration-color: rgba(186, 230, 253, 0.65);
}

.shop-recharge-disclaimer .shop-home-disclaimer__link:hover {
    color: #fff;
}

.shop-recharge-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.shop-preset-btn {
    flex: 1 1 auto;
    min-width: 120px;
}

.btn-paypal {
    background: #0070ba !important;
    border-color: #0070ba !important;
}

/* Shop — card payment (Stripe) */
.btn-card {
    background: linear-gradient(135deg, #635bff, #4b45c6) !important;
    border-color: #635bff !important;
}

.shop-recharge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.shop-recharge-actions .btn-paypal,
.shop-recharge-actions .btn-card {
    flex: 1 1 200px;
    justify-content: center;
}

.shop-recharge-cards-note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    opacity: 0.75;
}

.shop-recharge-cards-note i {
    font-size: 1.35rem;
}

@media (max-width: 520px) {
    .shop-recharge-actions .btn-paypal,
    .shop-recharge-actions .btn-card {
        flex: 1 1 100%;
    }
}

/* Milestone — 100 likes congratulations modal */
body.milestone-congrats-open {
    overflow: hidden;
}

.milestone-congrats-modal {
    position: fixed;
    inset: 0;
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.milestone-congrats-modal[hidden] {
    display: none !important;
}

.milestone-congrats-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 14, 0.82);
    backdrop-filter: blur(8px);
}

.milestone-congrats-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 26rem);
    padding: 2rem 1.65rem 1.5rem;
    border-radius: 20px;
    text-align: center;
    animation: milestoneCongratsIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes milestoneCongratsIn {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.milestone-congrats-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--light);
    cursor: pointer;
}

.milestone-congrats-modal__icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(234, 179, 8, 0.12));
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fbbf24;
    font-size: 2rem;
}

.milestone-congrats-modal__title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    color: var(--light);
}

.milestone-congrats-modal__body {
    margin: 0 0 1rem;
    line-height: 1.65;
    color: var(--gray);
}

.milestone-congrats-modal__meta {
    margin: 0 0 1.15rem;
}

.milestone-congrats-modal__link {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.92rem;
}

.milestone-congrats-modal__ok {
    min-width: 8rem;
}

/* Shop — Bot hosting modal */
body.shop-bot-modal-open {
    overflow: hidden;
}

.shop-bot-modal {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.shop-bot-modal[hidden] {
    display: none !important;
}

.shop-bot-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 14, 0.78);
    backdrop-filter: blur(6px);
}

.shop-bot-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 28rem);
    padding: 1.65rem 1.55rem 1.45rem;
    border-radius: 20px;
    text-align: center;
    animation: shopBotModalIn 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shopBotModalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.shop-bot-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--gray);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.shop-bot-modal__close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.shop-bot-modal__icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 1.45rem;
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.16);
    border: 1px solid rgba(129, 140, 248, 0.28);
}

.shop-bot-modal__dialog h2 {
    margin: 0 0 0.45rem;
    font-size: 1.25rem;
}

.shop-bot-modal__lead {
    margin: 0 0 1.1rem;
    color: var(--gray);
    font-size: 0.92rem;
    line-height: 1.55;
}

.shop-bot-modal__label {
    display: block;
    text-align: left;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.shop-bot-modal__hint {
    margin: 0.5rem 0 0;
    text-align: left;
    font-size: 0.78rem;
    color: var(--gray);
    line-height: 1.45;
}

.shop-bot-modal__error {
    margin: 0.65rem 0 0;
    text-align: left;
    font-size: 0.84rem;
    color: #fca5a5;
}

.shop-bot-modal__submit {
    width: 100%;
    margin-top: 1rem;
}

.shop-bot-modal__oauth-text,
.shop-bot-modal__waiting {
    color: var(--gray);
    font-size: 0.9rem;
    line-height: 1.55;
}

.shop-bot-modal__guild {
    margin: 0.5rem 0 0.85rem;
    font-weight: 700;
    color: #c7d2fe;
}

.shop-bot-modal__oauth-btn {
    width: 100%;
    margin-top: 0.35rem;
}

.shop-bot-modal__waiting {
    margin-top: 1rem;
}

.shop-bot-modal__success {
    margin: 0 0 1rem;
    color: #6ee7b7;
    font-weight: 600;
    line-height: 1.55;
}

.shop-bot-modal__success i {
    margin-right: 0.35rem;
}

/* Shop item help modal */
body.shop-help-modal-open {
    overflow: hidden;
}

.shop-help-modal {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.shop-help-modal[hidden] {
    display: none !important;
}

.shop-help-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 12, 0.72);
    backdrop-filter: blur(6px);
    animation: shopModalFadeIn 0.28s ease;
}

.shop-help-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    animation: shopModalSlideUp 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.shop-help-modal__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: rgba(15, 17, 23, 0.65);
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.shop-help-modal__close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
    transform: scale(1.06);
}

.shop-help-modal__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.35rem 3.25rem 1rem 1.35rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.shop-help-modal__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.shop-item-card[data-slug="complete_protection"],
.shop-item-card[data-slug="complete_protection_7d"] {
    border-color: rgba(0, 212, 255, 0.32);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 0 24px rgba(0, 212, 255, 0.08);
}

.shop-item-card[data-slug="complete_protection"] .shop-item-card__icon,
.shop-item-card[data-slug="complete_protection_7d"] .shop-item-card__icon {
    color: #ccf7ff;
    background: linear-gradient(145deg, rgba(0, 212, 255, 0.22) 0%, rgba(0, 102, 255, 0.14) 100%);
    border-color: rgba(0, 212, 255, 0.38);
}

.shop-help-modal__icon--bundle {
    color: #7ee8ff;
    background: rgba(0, 212, 255, 0.14);
    border: 1px solid rgba(0, 212, 255, 0.32);
}

.shop-help-modal__icon--skip {
    color: var(--shop-accent-text-bright);
    background: rgba(0, 212, 255, 0.14);
    border: 1px solid rgba(0, 212, 255, 0.32);
}

.shop-help-modal__icon--bot {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.32);
}

.shop-help-modal__dialog h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--light);
    padding-right: 0.5rem;
}

.shop-help-modal__body {
    padding: 1rem 1.35rem 1.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.shop-help-modal__section {
    margin-bottom: 1.15rem;
    animation: shopHelpSectionIn 0.4s ease both;
    animation-delay: var(--section-delay, 0s);
}

.shop-help-modal__section:last-child {
    margin-bottom: 0;
}

.shop-help-modal__section-title {
    margin: 0 0 0.45rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: #f1f5f9;
}

.shop-help-modal__section-body {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--gray);
}

.shop-help-modal__section--commands {
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
}

.shop-help-modal__commands {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.shop-help-modal__command {
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: rgba(15, 17, 23, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.shop-help-modal__command-name {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: #c4b5fd;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 8px;
    padding: 0.2rem 0.45rem;
    margin-bottom: 0.35rem;
}

.shop-help-modal__command-desc {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #94a3b8;
}

.shop-help-modal__note {
    margin: 0.85rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #cbd5e1;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.22);
}

.shop-help-modal__note i {
    margin-right: 0.35rem;
    color: #93c5fd;
}

@keyframes shopHelpSectionIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shopModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes shopModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.shop-body .shop-page,
body.shop-body .shop-grid,
body.shop-body .shop-catalog,
body.shop-body .shop-section-header,
body.shop-body .shop-home-intro {
    position: relative;
    z-index: 2;
}

@media (max-width: 1024px) {
    .shop-layout {
        display: block;
    }

    body.shop-body.shop-cart-open > footer {
        margin-right: 0;
    }

    .shop-cart-sidebar {
        position: fixed;
        top: var(--shop-stack-top, calc(var(--site-header-height) + var(--shop-subnav-height)));
        right: 0;
        bottom: 0;
        flex: none;
        width: min(380px, 100vw);
        min-width: 0;
        max-width: min(380px, 100vw);
        z-index: 10050;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(100%);
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .shop-cart-sidebar.closed {
        transform: translateX(100%);
        width: min(380px, 100vw);
        max-width: min(380px, 100vw);
        flex-basis: auto;
        opacity: 1;
        visibility: visible;
    }

    .shop-cart-sidebar.is-overlay-open {
        transform: translateX(0);
    }

    .shop-cart-backdrop {
        display: block;
    }

    .shop-cart-open-btn {
        top: calc(50% + var(--shop-subnav-height));
    }

    .shop-home-intro__layout {
        flex-direction: column;
        align-items: stretch;
        padding: 1.35rem 1.25rem;
    }

    .shop-home-intro__divider {
        display: none;
    }

    .shop-home-disclaimer {
        flex-basis: auto;
        max-width: none;
    }

    .shop-home-intro__title-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }
}

@media (max-width: 640px) {
    .shop-cart-sidebar,
    .shop-cart-sidebar.closed {
        width: 100vw;
        max-width: 100vw;
    }

    .shop-subnav__inner {
        padding: 0.65rem 1rem;
        flex-direction: column;
        align-items: stretch;
    }

    .shop-subnav__tabs {
        width: 100%;
    }

    .shop-subnav__tab {
        flex: 1;
        justify-content: center;
    }

    .shop-subnav__actions {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }

    .shop-cart-trigger__label {
        display: none;
    }

    .shop-subnav__balance {
        flex: 1;
        justify-content: flex-end;
    }

    .shop-purchases-filters {
        grid-template-columns: 1fr;
    }

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

    .shop-purchase-row {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .shop-purchase-row__coins {
        grid-column: 1 / -1;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.35rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

/* Shop-only maintenance (public) */
.shop-staff-maintenance-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--shop-accent-soft);
    border: 1px solid rgba(0, 212, 255, 0.4);
    color: var(--shop-accent-text);
    font-weight: 600;
    font-size: 0.92rem;
}

.shop-staff-maintenance-banner i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.shop-maintenance-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
    padding: 2rem 0;
}

.shop-maintenance-card {
    max-width: 520px;
    width: 100%;
    text-align: center;
    padding: 2.5rem 2rem;
}

.shop-maintenance-card__icon {
    font-size: 3rem;
    color: var(--shop-accent-text-bright);
    margin-bottom: 1rem;
}

.shop-maintenance-card h1 {
    margin-bottom: 0.75rem;
}

.shop-maintenance-card p {
    color: var(--gray);
    margin-bottom: 0.75rem;
}

.shop-maintenance-card__info {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 1.5rem !important;
}

.shop-maintenance-card .btn {
    margin-top: 0.5rem;
}

    .shop-cart-line {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
    }

    .shop-cart-line__qty {
        grid-column: 2;
    }

    .shop-cart-line__total {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .shop-cart-line__remove {
        grid-column: 1;
        grid-row: 2;
    }
}

/* ── Tournaments ─────────────────────────────────────── */

/* Premium surfaces — same feel as report cards & reports filters */
.tournaments-body {
    --tournament-accent: #00d4ff;
    --tournament-surface-bg: linear-gradient(155deg, rgba(14, 20, 28, 0.92) 0%, rgba(8, 12, 18, 0.95) 100%);
    --tournament-surface-border: rgba(0, 212, 255, 0.14);
    --tournament-surface-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.tournament-card,
.tournaments-page .glass-card,
.create-tournament-page .glass-card,
.tournament-detail-page .glass-card,
.tournament-manage-page .glass-card {
    --spot-accent: var(--tournament-accent);
    background: var(--tournament-surface-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--tournament-surface-border);
    border-radius: 22px;
    box-shadow: var(--tournament-surface-shadow);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.tournament-card > :not(.spotlight-shine),
.tournaments-page .glass-card > :not(.spotlight-shine),
.create-tournament-page .glass-card > :not(.spotlight-shine),
.tournament-detail-page .glass-card > :not(.spotlight-shine),
.tournament-manage-page .glass-card > :not(.spotlight-shine) {
    position: relative;
    z-index: 2;
}

.tournaments-page .glass-card:hover,
.create-tournament-page .glass-card:hover,
.tournament-detail-page .glass-card:hover,
.tournament-manage-page .glass-card:hover {
    border-color: rgba(0, 212, 255, 0.38);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 212, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tournaments-page,
.create-tournament-page,
.tournament-detail-page {
    max-width: 1200px;
    padding: 3rem 1.5rem 4rem;
}

.tournaments-page__header,
.create-tournament-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.tournaments-page__subtitle,
.create-tournament-page__subtitle {
    color: var(--gray);
    margin-top: 0.5rem;
    max-width: 52rem;
}

.tournaments-filters {
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 18px;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.82) 0%, rgba(8, 12, 18, 0.72) 100%);
}

.tournaments-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.tournaments-filters__field span {
    display: block;
    font-size: 0.85rem;
    color: var(--gray);
    margin-bottom: 0.35rem;
}

.tournaments-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.tournaments-page__results-meta {
    color: var(--gray);
    margin-bottom: 1rem;
}

.tournaments-page__results-count {
    font-weight: 700;
    color: var(--light);
    margin-right: 0.35rem;
}

.tournaments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.tournament-card {
    height: 100%;
    padding: 0;
    animation: fadeInUp 0.5s ease;
    will-change: transform;
}

.tournament-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-1);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.tournament-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: var(--primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), var(--neon-glow);
}

.tournament-card:hover::before {
    opacity: 1;
}

.tournament-card__inner {
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
}

.tournament-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tournament-card__game {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: #7ee8ff;
    font-weight: 600;
}

.tournament-card__status {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.tournament-card__status--registration_open,
.tournament-card__status--scheduled {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.35);
}

.tournament-card__status--registration_closed {
    background: rgba(251, 191, 36, 0.15);
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.35);
}

.tournament-card__status--in_progress {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
}

.tournament-card__status--completed {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.3);
}

.tournament-card__title {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.25;
}

.tournament-card__title a {
    color: var(--light);
    text-decoration: none;
}

.tournament-card__title a:hover {
    color: var(--primary-light);
}

.tournament-card__excerpt {
    color: var(--gray);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.tournament-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    font-size: 0.84rem;
    color: #cbd5e1;
}

.tournament-card__meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tournament-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
}

.tournament-card__host {
    font-size: 0.82rem;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tournaments-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--gray);
    animation: fadeInUp 0.5s ease;
}

.tournaments-grid .tournament-card:nth-child(1) { animation-delay: 0.02s; }
.tournaments-grid .tournament-card:nth-child(2) { animation-delay: 0.06s; }
.tournaments-grid .tournament-card:nth-child(3) { animation-delay: 0.1s; }
.tournaments-grid .tournament-card:nth-child(4) { animation-delay: 0.14s; }
.tournaments-grid .tournament-card:nth-child(5) { animation-delay: 0.18s; }
.tournaments-grid .tournament-card:nth-child(6) { animation-delay: 0.22s; }

.tournaments-empty i {
    font-size: 2.5rem;
    color: #00d4ff;
    margin-bottom: 0.75rem;
}

.tournaments-page__more {
    text-align: center;
    margin-top: 1.5rem;
}

.tournament-detail-page__back {
    margin-bottom: 1rem;
}

.tournament-detail {
    padding: 1.75rem;
    margin-bottom: 1.25rem;
    animation: fadeInUp 0.5s ease;
}

.tournament-detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-1);
    opacity: 0.65;
    z-index: 1;
}

.tournament-participants,
.tournament-pending {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    animation: fadeInUp 0.55s ease;
}

.tournament-detail__header {
    margin-bottom: 1.5rem;
}

.tournament-detail__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tournament-detail__game {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #7ee8ff;
    font-weight: 600;
}

.tournament-detail__status {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.tournament-detail__status--registration_open,
.tournament-detail__status--scheduled { background: rgba(34,197,94,.15); color: #86efac; }
.tournament-detail__status--registration_closed { background: rgba(251,191,36,.15); color: #fde68a; }
.tournament-detail__status--in_progress { background: rgba(59,130,246,.15); color: #93c5fd; }
.tournament-detail__status--completed { background: rgba(148,163,184,.15); color: #cbd5e1; }

.tournament-detail__title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.tournament-detail__creator {
    color: var(--gray);
    margin: 0;
}

.tournament-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: 1.5rem;
}

.tournament-detail__main h2,
.tournament-detail__info-card h3,
.tournament-participants h2,
.tournament-pending h2 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--primary-light);
}

.tournament-detail__description,
.tournament-detail__rules {
    color: #e2e8f0;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.tournament-detail__prize-box {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.1);
}

.tournament-detail__prize-box i {
    color: #e9d5ff;
    font-size: 1.25rem;
    margin-top: 0.15rem;
}

.tournament-detail__info-card {
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(8, 12, 18, 0.55);
    margin-bottom: 1rem;
}

.tournament-detail__dl {
    margin: 0;
}

.tournament-detail__dl > div {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 0.9rem;
}

.tournament-detail__dl dt {
    color: #94a3b8;
    margin: 0;
}

.tournament-detail__dl dd {
    margin: 0;
    color: #f1f5f9;
}

.tournament-detail__discord-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    color: #c4b5fd;
}

.tournament-detail__actions .btn-block {
    width: 100%;
    justify-content: center;
}

.tournament-detail__closed,
.tournament-detail__pending,
.tournament-detail__approved,
.tournament-detail__rejected {
    font-size: 0.92rem;
    margin-bottom: 0.75rem;
}

.tournament-participants__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.65rem;
}

.tournament-participants__list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.55) 0%, rgba(8, 12, 18, 0.65) 100%);
    border: 1px solid rgba(0, 212, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.tournament-participants__list li:hover {
    border-color: rgba(0, 212, 255, 0.28);
    transform: translateY(-2px);
}

.tournament-participants__list img {
    border-radius: 50%;
}

.tournament-pending__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.tournament-pending__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.55) 0%, rgba(8, 12, 18, 0.65) 100%);
    border: 1px solid rgba(0, 212, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.tournament-pending__row:hover {
    border-color: rgba(0, 212, 255, 0.28);
    transform: translateY(-2px);
}

.tournament-pending__user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tournament-pending__user img {
    border-radius: 50%;
}

.tournament-pending__actions {
    display: flex;
    gap: 0.5rem;
}

.tournament-pending__form {
    margin: 0;
}

.create-tournament-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 1.5rem;
    align-items: start;
}

.create-tournament-layout__main {
    min-width: 0;
}

.create-tournament-aside {
    position: sticky;
    top: 5.5rem;
}

.create-tournament-disclaimer {
    padding: 1.5rem 1.4rem;
}

.create-tournament-disclaimer::before,
.create-tournament-form::before,
.tournament-manage-overview::before,
.tournament-manage-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tournament-accent), transparent);
    opacity: 0.55;
    z-index: 1;
}

.create-tournament-form {
    padding: 1.5rem;
}

.create-tournament-disclaimer__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.create-tournament-disclaimer__icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(0, 153, 255, 0.12));
    border: 1px solid rgba(0, 212, 255, 0.4);
    color: #7ee8ff;
}

.create-tournament-disclaimer__title {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    line-height: 1.25;
}

.create-tournament-disclaimer__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.create-tournament-disclaimer__badge--ok {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.create-tournament-disclaimer__badge--warn {
    background: rgba(251, 191, 36, 0.15);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.create-tournament-disclaimer__intro {
    color: #e2e8f0;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 1.15rem;
}

.create-tournament-disclaimer__subtitle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 1.15rem 0 0.6rem;
    font-size: 0.92rem;
    color: var(--primary-light);
}

.create-tournament-disclaimer__subtitle i {
    color: #00d4ff;
}

.create-tournament-disclaimer__steps {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #cbd5e1;
    font-size: 0.88rem;
    line-height: 1.5;
}

.create-tournament-disclaimer__steps li {
    padding-left: 0.15rem;
}

.create-tournament-disclaimer__text {
    color: #cbd5e1;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

.create-tournament-disclaimer__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.create-tournament-disclaimer__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #e2e8f0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.create-tournament-disclaimer__benefits i {
    color: #4ade80;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.create-tournament-disclaimer__cta {
    width: 100%;
    justify-content: center;
    margin-top: 1.35rem;
}

.create-tournament-disclaimer__note {
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0.85rem 0 0;
    text-align: center;
}

@media (max-width: 992px) {
    .create-tournament-layout {
        grid-template-columns: 1fr;
    }

    .create-tournament-aside {
        position: static;
        order: -1;
    }
}

.create-tournament-form {
    padding: 1.5rem;
}

.create-tournament-form__section {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.create-tournament-form__section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.create-tournament-form__section h2 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--primary-light);
}

.create-tournament-form__hint {
    color: var(--gray);
    font-size: 0.9rem;
    margin: -0.35rem 0 1rem;
}

.create-tournament-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.create-tournament-form__actions {
    margin-top: 1rem;
}

.tournament-bot-required {
    text-align: center;
    padding: 2.5rem 1.5rem;
    animation: fadeInUp 0.5s ease;
}

.tournament-bot-required i {
    font-size: 2.5rem;
    color: #00d4ff;
    margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
    .tournament-detail__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Manage tournaments ────────────────────────────────── */

.tournament-manage-page {
    max-width: 1280px;
    padding: 3rem 1.5rem 4rem;
}

.tournament-manage-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.tournament-manage-page__subtitle {
    color: var(--gray);
    margin-top: 0.5rem;
    max-width: 52rem;
}

.tournament-manage-page__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.tournament-manage-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    animation: fadeInUp 0.5s ease;
}

.tournament-manage-empty i {
    font-size: 2.5rem;
    color: #00d4ff;
    margin-bottom: 0.75rem;
}

.tournament-manage-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.tournament-manage-sidebar {
    padding: 1.15rem;
    position: sticky;
    top: 5.5rem;
}

.tournament-manage-sidebar__title {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    color: var(--primary-light);
}

.tournament-manage-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.tournament-manage-sidebar__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
    color: var(--light);
    transition: border-color 0.2s, background 0.2s;
}

.tournament-manage-sidebar__item:hover,
.tournament-manage-sidebar__item.is-active {
    border-color: rgba(0, 212, 255, 0.45);
    background: rgba(0, 212, 255, 0.08);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
}

.tournament-manage-sidebar__item-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

.tournament-manage-sidebar__item-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.tournament-manage-sidebar__status {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

.tournament-manage-sidebar__badge {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tournament-manage-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tournament-manage-main > .glass-card {
    animation: fadeInUp 0.5s ease;
}

.tournament-manage-main > .glass-card:nth-child(2) { animation-delay: 0.05s; }
.tournament-manage-main > .glass-card:nth-child(3) { animation-delay: 0.1s; }
.tournament-manage-main > .glass-card:nth-child(4) { animation-delay: 0.15s; }

.tournament-manage-overview {
    padding: 1.35rem 1.5rem;
}

.tournament-manage-overview__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tournament-manage-overview__game {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #c4b5fd;
    font-weight: 600;
    font-size: 0.9rem;
}

.tournament-manage-overview__title {
    margin: 0.35rem 0 0;
    font-size: 1.45rem;
}

.tournament-manage-overview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.tournament-manage-overview__cancel-form {
    margin: 0;
}

.tournament-manage-overview__dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem 1rem;
    margin: 0;
}

.tournament-manage-overview__dl > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
}

.tournament-manage-overview__dl dt {
    color: #94a3b8;
    margin: 0;
}

.tournament-manage-overview__dl dd {
    margin: 0;
    color: #f1f5f9;
}

.tournament-manage-section {
    padding: 1.15rem 1.35rem;
}

.tournament-manage-section__header {
    margin-bottom: 0.85rem;
}

.tournament-manage-section__header h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: var(--primary-light);
}

.tournament-manage-section__hint,
.tournament-manage-section__empty {
    color: var(--gray);
    font-size: 0.9rem;
    margin: 0;
}

.tournament-manage-participants {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.tournament-manage-participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 212, 255, 0.12);
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.55) 0%, rgba(8, 12, 18, 0.65) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.tournament-manage-participant:hover {
    border-color: rgba(0, 212, 255, 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

.tournament-manage-participant__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.tournament-manage-participant__avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.tournament-manage-participant__info {
    min-width: 0;
}

.tournament-manage-participant__name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tournament-manage-participant__name {
    font-size: 1rem;
}

.tournament-manage-participant__meta {
    display: block;
    color: #94a3b8;
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

.tournament-manage-participant__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tournament-manage-participant__form {
    margin: 0;
}

.tournament-warning-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(239, 68, 68, 0.55);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.2s, transform 0.15s;
}

.tournament-warning-btn:hover {
    background: rgba(239, 68, 68, 0.28);
    transform: scale(1.04);
}

.tournament-warning-btn i {
    color: #ef4444;
    font-size: 0.95rem;
}

.tournament-manage-screening-note {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.tournament-manage-screening-note i {
    color: #00d4ff;
    margin-top: 0.15rem;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fecaca;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: rgba(239, 68, 68, 0.65);
    color: #fff;
}

body.tournament-screening-modal-open {
    overflow: hidden;
}

.tournament-screening-modal {
    position: fixed;
    inset: 0;
    z-index: 10250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.tournament-screening-modal[hidden] {
    display: none !important;
}

.tournament-screening-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 14, 0.85);
    backdrop-filter: blur(8px);
}

.tournament-screening-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 36rem);
    max-height: min(85vh, 640px);
    overflow: auto;
    padding: 1.5rem 1.35rem 1.25rem;
    border-radius: 18px;
    animation: milestoneCongratsIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tournament-screening-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--light);
    cursor: pointer;
}

.tournament-screening-modal__icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #ef4444;
    font-size: 1.35rem;
}

.tournament-screening-modal__title {
    margin: 0 0 0.35rem;
    text-align: center;
    font-size: 1.25rem;
}

.tournament-screening-modal__user {
    text-align: center;
    color: var(--gray);
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.tournament-screening-modal__loading,
.tournament-screening-modal__error {
    text-align: center;
    color: var(--gray);
    padding: 1rem 0;
}

.tournament-screening-modal__error {
    color: #fca5a5;
}

.tournament-screening-modal__section {
    margin-bottom: 1.15rem;
}

.tournament-screening-modal__section h3 {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    color: var(--primary-light);
}

.tournament-screening-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.tournament-screening-modal__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

.tournament-screening-modal__item-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.tournament-screening-modal__item-main strong {
    font-size: 0.92rem;
    line-height: 1.3;
}

.tournament-screening-modal__item-meta,
.tournament-screening-modal__item-target {
    font-size: 0.78rem;
    color: #94a3b8;
}

.tournament-screening-modal__ban-type {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #f87171;
}

.tournament-screening-modal__empty {
    text-align: center;
    color: var(--gray);
    margin: 0;
}

@media (max-width: 900px) {
    .tournament-manage-layout {
        grid-template-columns: 1fr;
    }

    .tournament-manage-sidebar {
        position: static;
    }
}

/* ── Autocontrollo page ─────────────────────────────────── */

.autocontrollo-page {
    max-width: 1280px;
    padding: 3.5rem 1.5rem 4rem;
}

.autocontrollo-page__header {
    text-align: center;
    margin-bottom: 2rem;
}

.autocontrollo-page__lead {
    color: var(--gray);
    max-width: 760px;
    margin: 0.75rem auto 0;
    line-height: 1.65;
}

.autocontrollo-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
    align-items: start;
}

.autocontrollo-login-gate {
    grid-column: 1 / -1;
    text-align: center;
}

.autocontrollo-login-gate__inner {
    position: relative;
    z-index: 2;
    padding: 3rem 1.5rem;
}

.autocontrollo-login-gate__inner i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.autocontrollo-login-gate__inner h2 {
    margin: 0 0 0.75rem;
}

.autocontrollo-login-gate__inner p {
    color: var(--gray);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.autocontrollo-form,
.autocontrollo-results,
.autocontrollo-sidebar {
    --spot-accent: #6366f1;
    padding: 0;
    background: linear-gradient(155deg, rgba(14, 20, 28, 0.92) 0%, rgba(8, 12, 18, 0.88) 100%);
    border: 1px solid rgba(99, 102, 241, 0.16);
}

.autocontrollo-form__inner,
.autocontrollo-results__inner,
.autocontrollo-sidebar__inner {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
}

.autocontrollo-form__title {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
}

.autocontrollo-form__note,
.autocontrollo-sidebar__lead,
.autocontrollo-form__disclaimer {
    color: var(--gray);
    font-size: 0.9rem;
    line-height: 1.55;
}

.autocontrollo-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.autocontrollo-form__full {
    grid-column: 1 / -1;
}

.autocontrollo-form__optional {
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.15);
}

.autocontrollo-form__optional summary {
    cursor: pointer;
    font-weight: 600;
    color: #e2e8f0;
}

.autocontrollo-form__optional .form-hint {
    margin: 0.5rem 0 0.75rem;
}

.autocontrollo-form__disclaimer {
    margin: 1rem 0 0.5rem;
}

.autocontrollo-form__staff-notice {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.28);
    background: rgba(99, 102, 241, 0.08);
    color: #c7d2fe;
    font-size: 0.88rem;
    line-height: 1.55;
}

.autocontrollo-form__submit {
    width: 100%;
    justify-content: center;
}

.autocontrollo-results {
    margin-top: 1.5rem;
}

.autocontrollo-results__head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.autocontrollo-results__head--ok {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
}

.autocontrollo-results__head--warn {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.22);
}

.autocontrollo-results__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.autocontrollo-results__head--ok .autocontrollo-results__icon {
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
}

.autocontrollo-results__head--warn .autocontrollo-results__icon {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
}

.autocontrollo-results__head h2 {
    margin: 0;
    font-size: 1.15rem;
}

.autocontrollo-results__headline,
.autocontrollo-results__counts,
.autocontrollo-results__resolved {
    color: var(--gray);
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

.autocontrollo-results__ai {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

.autocontrollo-results__ai h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.autocontrollo-results__ai p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.6;
    white-space: pre-wrap;
}

.autocontrollo-results__section {
    margin-top: 1rem;
}

.autocontrollo-results__section h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.autocontrollo-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.autocontrollo-results__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.autocontrollo-results__item-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.autocontrollo-results__meta,
.autocontrollo-results__target {
    font-size: 0.82rem;
    color: var(--gray);
}

.autocontrollo-results__ban-type {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #f87171;
}

.autocontrollo-results__empty {
    color: var(--gray);
    margin: 0;
}

.autocontrollo-sidebar {
    position: sticky;
    top: var(--rankings-sidebar-top, 104px);
}

.autocontrollo-sidebar__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.autocontrollo-sidebar__loading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--gray);
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

.autocontrollo-history-panel {
    margin-top: 0.75rem;
    min-height: 180px;
}

.autocontrollo-history-skeleton__label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    color: var(--gray);
}

.autocontrollo-history-skeleton__spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.15);
    border-top-color: #818cf8;
    animation: sidebarSpin 0.8s linear infinite;
    flex-shrink: 0;
}

.autocontrollo-history-skeleton__items {
    display: grid;
    gap: 0.55rem;
}

.autocontrollo-history-skeleton__card {
    height: 72px;
    border-radius: 12px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(99, 102, 241, 0.12) 45%,
        rgba(255, 255, 255, 0.04) 90%
    );
    background-size: 220% 100%;
    animation: autocontrolloSkeletonShimmer 1.35s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.autocontrollo-history-skeleton__card:nth-child(2) {
    animation-delay: 0.15s;
}

.autocontrollo-history-skeleton__card:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes autocontrolloSkeletonShimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

.autocontrollo-history-empty,
.autocontrollo-history-error {
    text-align: center;
    padding: 1.35rem 0.85rem;
    border-radius: 14px;
    border: 1px dashed rgba(99, 102, 241, 0.22);
    background: rgba(99, 102, 241, 0.05);
}

.autocontrollo-history-error {
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.05);
}

.autocontrollo-history-empty__icon,
.autocontrollo-history-error__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.autocontrollo-history-empty__icon {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.14);
}

.autocontrollo-history-error__icon {
    color: #f87171;
    background: rgba(239, 68, 68, 0.14);
}

.autocontrollo-history-empty__title,
.autocontrollo-history-error__title {
    margin: 0 0 0.45rem;
    font-size: 0.98rem;
    color: #e2e8f0;
}

.autocontrollo-history-empty__text,
.autocontrollo-history-error__text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--gray);
}

.autocontrollo-history-error__retry {
    margin-top: 0.85rem;
}

.autocontrollo-sidebar__empty {
    color: var(--gray);
    font-size: 0.9rem;
    margin: 0.75rem 0 0;
}

.autocontrollo-history {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
    max-height: 70vh;
    overflow: auto;
}

.autocontrollo-history__item {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.7rem 0.75rem;
    cursor: pointer;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    animation: autocontrolloHistoryIn 0.35s ease both;
}

@keyframes autocontrolloHistoryIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.autocontrollo-history__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    position: relative;
    z-index: 2;
}

.autocontrollo-history__avatar {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(14, 165, 233, 0.14);
    color: #7dd3fc;
    font-size: 1rem;
}

.autocontrollo-history__body {
    flex: 1;
    min-width: 0;
}

.autocontrollo-history__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.autocontrollo-history__chevron {
    color: rgba(148, 163, 184, 0.65);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.autocontrollo-history__item:hover .autocontrollo-history__chevron,
.autocontrollo-history__item.is-active .autocontrollo-history__chevron {
    color: #a5b4fc;
}

.autocontrollo-history__item:hover,
.autocontrollo-history__item.is-active {
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.autocontrollo-history__steam {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocontrollo-history__meta {
    display: block;
    font-size: 0.76rem;
    color: var(--gray);
    margin-top: 0.1rem;
}

.autocontrollo-history__counts {
    display: block;
    font-size: 0.76rem;
    color: #94a3b8;
    margin-top: 0.12rem;
}

.autocontrollo-history__status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
}

.autocontrollo-history__status--ok {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.autocontrollo-history__status--warn {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.autocontrollo-history__current {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #a5b4fc;
}

.autocontrollo-phase-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    text-align: left;
    width: min(100%, 320px);
}

.autocontrollo-phase-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--gray);
    padding: 0.25rem 0;
}

.autocontrollo-phase-list__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.autocontrollo-phase-list li.is-active {
    color: #e2e8f0;
}

.autocontrollo-phase-list li.is-active .autocontrollo-phase-list__dot {
    background: #818cf8;
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.8);
}

.autocontrollo-phase-list li.is-done {
    color: #a7f3d0;
}

.autocontrollo-phase-list li.is-done .autocontrollo-phase-list__dot {
    background: #34d399;
}

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

    .autocontrollo-sidebar {
        position: static;
        order: 2;
    }

    .autocontrollo-page-main {
        order: 1;
    }
}

@media (max-width: 640px) {
    .autocontrollo-form__grid {
        grid-template-columns: 1fr;
    }

    .autocontrollo-results__item {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Site maintenance page ─────────────────────────────── */

.maintenance-page-body {
    background: var(--dark);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-page-wrap {
    max-width: 800px;
    text-align: center;
    position: relative;
    z-index: 10;
    padding: 1.5rem;
}

.maintenance-page-card {
    padding: 3rem;
}

.maintenance-page-icon {
    font-size: 5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    animation: maintenancePulse 2s infinite;
}

.maintenance-page-title {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
    text-shadow: var(--neon-glow);
}

.maintenance-page-lead {
    font-size: 1.2rem;
    color: var(--gray);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.maintenance-page-info-box {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.maintenance-page-info-main {
    color: var(--light);
    margin-bottom: 0.75rem;
}

.maintenance-page-info-main i {
    color: var(--primary);
}

.maintenance-page-estimate-label {
    color: var(--gray);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.maintenance-countdown {
    margin: 0.5rem 0 1rem;
}

.maintenance-countdown__value {
    display: inline-block;
    font-family: 'Space Grotesk', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--primary-light);
    text-shadow: 0 0 24px rgba(0, 212, 255, 0.45);
    font-variant-numeric: tabular-nums;
}

.maintenance-page-countdown-hint {
    color: var(--gray);
    font-size: 0.85rem;
    margin: 0;
}

.maintenance-page-permanent-msg {
    color: var(--light);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.maintenance-discord-btn {
    margin-top: 0.25rem;
}

.maintenance-page-staff-box {
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.maintenance-page-staff-box--ok {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--success);
}

.maintenance-page-staff-box--ok p {
    color: var(--success);
    margin: 0;
}

.maintenance-page-staff-box--deny {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
}

.maintenance-page-staff-box--deny p {
    color: var(--danger);
    margin: 0;
}

.maintenance-page-footer {
    margin-top: 2rem;
    color: var(--gray);
}

@keyframes maintenancePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

/* Christmas mode — falling flakes (below header) + hotbar cap */
.christmas-snow-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 850;
    overflow: hidden;
}

.christmas-snow-flake {
    position: absolute;
    top: -8vh;
    display: block;
    pointer-events: none;
    opacity: var(--snow-opacity, 0.95);
    animation-name: christmas-snow-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.75));
}

.christmas-snow-flake--crystal {
    background:
        radial-gradient(circle at 35% 30%, #ffffff 0 18%, transparent 19%),
        linear-gradient(#ffffff, #ffffff) center/18% 100% no-repeat,
        linear-gradient(90deg, #ffffff, #ffffff) center/100% 18% no-repeat,
        linear-gradient(45deg, transparent 42%, #ffffff 42%, #ffffff 58%, transparent 58%) center/100% 100% no-repeat,
        linear-gradient(-45deg, transparent 42%, #ffffff 42%, #ffffff 58%, transparent 58%) center/100% 100% no-repeat;
    border-radius: 50%;
}

.christmas-snow-flake--puff {
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ffffff 0%, #eef4ff 55%, #d5e3f2 100%);
    box-shadow:
        inset -2px -3px 6px rgba(160, 180, 200, 0.35),
        0 0 8px rgba(255, 255, 255, 0.55);
}

.christmas-snow-flake--dot {
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
}

@keyframes christmas-snow-fall {
    0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg);
        opacity: 0;
    }
    6% {
        opacity: var(--snow-opacity, 0.95);
    }
    25% {
        transform: translate3d(calc(var(--snow-sway, 24px) * 0.45), 28vh, 0) rotate(120deg);
    }
    50% {
        transform: translate3d(calc(var(--snow-sway, 24px) * -0.35), 56vh, 0) rotate(240deg);
    }
    75% {
        transform: translate3d(calc(var(--snow-sway, 24px) * 0.55), 84vh, 0) rotate(320deg);
    }
    100% {
        transform: translate3d(0, 112vh, 0) rotate(360deg);
        opacity: var(--snow-opacity, 0.95);
    }
}

header.site-header.site-header--christmas {
    overflow: visible;
}

.site-header__snow-drift {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 34px;
    transform: translateY(calc(100% - 14px));
    pointer-events: none;
    z-index: 12;
    opacity: 1;
    filter: drop-shadow(0 5px 16px rgba(160, 200, 255, 0.32));
}

.site-header__snow-drift-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.site-header.scrolled .site-header__snow-drift {
    filter: drop-shadow(0 3px 10px rgba(160, 200, 255, 0.22));
}

.site-header__candy-canes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 14;
}

.site-header__candy-canes-left,
.site-header__candy-canes-right {
    position: absolute;
    bottom: 3px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.site-header__candy-canes-left {
    left: clamp(14px, 2.2vw, 32px);
    bottom: 2px;
}

.site-header__candy-canes-right {
    right: clamp(14px, 2.2vw, 32px);
    bottom: 0;
}

.candy-cane {
    display: block;
    width: 30px;
    height: auto;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.38));
}

.candy-cane--sm {
    width: 24px;
    margin-bottom: 0;
    margin-left: -3px;
    transform: rotate(-7deg);
    opacity: 0.94;
}

.site-header.scrolled .candy-cane {
    width: 26px;
}

.site-header.scrolled .candy-cane--sm {
    width: 21px;
}

@media (max-width: 992px) {
    .candy-cane {
        width: 24px;
    }

    .candy-cane--sm {
        width: 19px;
    }

    .site-header__candy-canes-left {
        left: 10px;
        bottom: 1px;
    }

    .site-header__candy-canes-right {
        right: 10px;
        bottom: 1px;
    }
}

@media (max-width: 480px) {
    .site-header__candy-canes-left .candy-cane--sm {
        display: none;
    }

    .candy-cane {
        width: 20px;
    }
}

/* ===================================================================
 * Server List (Lista Server)
 * =================================================================== */

.ban-list-option__icon--fivem {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    color: #fff7ed;
}

.ban-list-option__icon--redm {
    background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
    color: #fef2f2;
}

.ban-list-option__icon--minecraft {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
    color: #ecfdf5;
}

.ban-list-option__icon--roblox {
    background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
    color: #fff;
}

.ban-list-option__icon--arma3 {
    background: linear-gradient(135deg, #334155 0%, #64748b 100%);
    color: #f8fafc;
}

.ban-list-option__icon--rust {
    background: linear-gradient(135deg, #9a3412 0%, #ea580c 100%);
    color: #fff7ed;
}

.server-list-registry__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.server-list-registry__subtitle {
    color: var(--text-muted, #94a3b8);
    margin: 0.5rem 0 0;
    max-width: 52rem;
}

.server-list-registry__cta {
    flex-shrink: 0;
}

.server-list-registry__cta-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: min(100%, 340px);
}

/* Server limit inline notice (ContentDB notification style) */
.cdb-limit-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(18, 24, 38, 0.97) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    text-align: left;
}

.cdb-limit-notice--reached {
    border-left: 3px solid #f59e0b;
}

.cdb-limit-notice--contentplus {
    border-left: 3px solid var(--primary, #6366f1);
}

.cdb-limit-notice__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.cdb-limit-notice--reached .cdb-limit-notice__icon {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.22);
}

.cdb-limit-notice--contentplus .cdb-limit-notice__icon {
    background: rgba(99, 102, 241, 0.16);
    color: #a5b4fc;
    box-shadow: 0 0 18px rgba(99, 102, 241, 0.22);
}

.cdb-limit-notice__body {
    flex: 1;
    min-width: 0;
}

.cdb-limit-notice__text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.96);
    font-weight: 500;
}

.cdb-limit-notice__cta {
    margin-top: 0.7rem;
    width: 100%;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
}

.server-form-limit-wrap {
    display: flex;
    justify-content: center;
    max-width: 26rem;
    margin: 0 auto;
}

.server-form-card--blocked {
    padding: 1.75rem 1.25rem;
}

.server-list-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(12px);
}

.server-list-toolbar__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.server-list-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-main, #e2e8f0);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.server-list-chip:hover,
.server-list-chip.is-active {
    background: rgba(0, 212, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.45);
    transform: translateY(-1px);
}

.server-list-toolbar__tag-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.server-list-toolbar__tag-legend {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 0.65rem;
}

.server-list-toolbar__tag-hint {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
}

.server-list-tag-filters,
.server-tag-filters--form,
.server-tag-filters-grouped {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.server-tag-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.server-tag-group-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 1.35rem;
    margin: 0 0.1rem;
    background: rgba(148, 163, 184, 0.35);
    border-radius: 1px;
    align-self: center;
}

.server-tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.server-tag-list--detail .server-tag {
    font-size: 0.88rem;
    padding: 0.25rem 0.65rem;
}

.server-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 212, 255, 0.28);
    background: rgba(0, 212, 255, 0.08);
    color: #bae6fd;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.server-tag--filter,
.server-tag--pickable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.server-tag--filter input,
.server-tag--pickable input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.server-tag--filter.is-active,
.server-tag--pickable.is-active,
.server-tag--filter:has(input:checked),
.server-tag--pickable:has(input:checked) {
    background: rgba(0, 212, 255, 0.22);
    border-color: rgba(0, 212, 255, 0.65);
    color: #e0f7ff;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
    transform: translateY(-1px);
}

.server-tag--whitelist-mode.is-active,
.server-tag--whitelist-mode:has(input:checked) {
    background: rgba(234, 179, 8, 0.18);
    border-color: rgba(234, 179, 8, 0.55);
    color: #fef08a;
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.2);
}

.server-tag--genre.is-active,
.server-tag--genre:has(input:checked) {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.55);
    color: #e9d5ff;
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.2);
}

.server-tag--filter:hover,
.server-tag--pickable:hover {
    border-color: rgba(0, 212, 255, 0.5);
}

.server-list-toolbar__reset {
    white-space: nowrap;
}

.server-detail-card__tags .server-tag-list {
    display: inline-flex;
}

.server-list-toolbar__controls {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: end;
}

.server-list-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.server-list-toolbar__field--grow {
    position: relative;
}

.server-list-toolbar__field--grow i {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    opacity: 0.55;
}

.server-list-toolbar__field--grow .form-control {
    padding-left: 2.2rem;
}

.server-list-registry__count {
    margin-bottom: 1rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.92rem;
}

.server-list-registry__count-num {
    color: var(--light, #f1f5f9);
    font-weight: 800;
    margin-right: 0.35rem;
}

.server-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.server-list-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    padding: 2.5rem 1rem;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.35);
}

.server-list-card {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.62);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.server-list-card__hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    text-decoration: none;
    color: transparent;
}

.server-list-card__content {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.server-list-card:hover,
.server-list-card:focus-within {
    transform: translateY(-3px);
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 14px 40px rgba(0, 40, 80, 0.35);
}

.server-list-card:hover .server-list-card__title,
.server-list-card:focus-within .server-list-card__title {
    color: var(--primary, #00d4ff);
}

/* ContentPlus — card dorata in lista (proprietario con pacchetto attivo) */
.server-list-card--contentplus {
    border-color: rgba(255, 193, 7, 0.5);
    background:
        linear-gradient(155deg, rgba(28, 22, 8, 0.82) 0%, rgba(15, 23, 42, 0.68) 48%, rgba(12, 18, 30, 0.75) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 214, 90, 0.28),
        0 10px 32px rgba(255, 160, 0, 0.2),
        0 0 48px rgba(255, 193, 7, 0.14);
    animation: serverListContentPlusGlow 3.4s ease-in-out infinite;
}

.server-list-card--contentplus:hover,
.server-list-card--contentplus:focus-within {
    border-color: rgba(255, 224, 130, 0.72);
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(255, 236, 160, 0.45),
        0 18px 44px rgba(255, 160, 0, 0.32),
        0 0 64px rgba(255, 193, 7, 0.26);
}

.server-list-card--contentplus:hover .server-list-card__title,
.server-list-card--contentplus:focus-within .server-list-card__title {
    color: #ffe082;
}

.server-list-card__contentplus-aura {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 236, 140, 0.16) 0%, transparent 42%),
        radial-gradient(circle at 88% 22%, rgba(255, 193, 7, 0.12) 0%, transparent 38%),
        linear-gradient(135deg, rgba(255, 246, 184, 0.07) 0%, transparent 55%, rgba(255, 179, 0, 0.05) 100%);
}

.server-list-card__contentplus-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    background: radial-gradient(circle, #fffef0 0%, #ffe566 55%, transparent 100%);
    box-shadow: 0 0 10px 2px rgba(255, 236, 140, 0.9);
    opacity: 0;
}

.server-list-card__contentplus-spark--a {
    top: 12px;
    right: 18px;
    animation: serverListContentPlusSparkA 4.8s ease-in-out infinite;
}

.server-list-card__contentplus-spark--b {
    bottom: 52px;
    left: 16px;
    width: 5px;
    height: 5px;
    animation: serverListContentPlusSparkB 5.6s ease-in-out infinite 0.9s;
}

.server-list-card__contentplus-badge {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a1300;
    background: linear-gradient(135deg, #fff6b8 0%, #ffd54a 45%, #ffb300 100%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        0 0 14px rgba(255, 193, 7, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.server-list-card__contentplus-badge i {
    font-size: 0.68rem;
}

.server-list-card__contentplus-badge--inline {
    position: static;
    top: auto;
    right: auto;
    flex-shrink: 0;
    font-size: 0.58rem;
    padding: 0.22rem 0.55rem;
}

@keyframes serverListContentPlusGlow {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
            0 0 0 1px rgba(255, 214, 90, 0.28),
            0 10px 32px rgba(255, 160, 0, 0.2),
            0 0 48px rgba(255, 193, 7, 0.14);
    }
    50% {
        filter: brightness(1.06);
        box-shadow:
            0 0 0 1px rgba(255, 236, 160, 0.42),
            0 12px 36px rgba(255, 180, 0, 0.3),
            0 0 58px rgba(255, 214, 90, 0.22);
    }
}

@keyframes serverListContentPlusSparkA {
    0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.55); }
    20% { opacity: 1; transform: translate(-5px, 7px) scale(1); }
    45% { opacity: 0.35; transform: translate(3px, 14px) scale(0.8); }
    68% { opacity: 0.95; transform: translate(10px, 5px) scale(1.05); }
    85% { opacity: 0; transform: translate(14px, -3px) scale(0.5); }
}

@keyframes serverListContentPlusSparkB {
    0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    15% { opacity: 0.9; transform: translate(6px, -5px) scale(1); }
    38% { opacity: 0.25; transform: translate(12px, 2px) scale(0.75); }
    58% { opacity: 1; transform: translate(4px, 8px) scale(1.02); }
    78% { opacity: 0; transform: translate(-6px, 12px) scale(0.45); }
}

@media (prefers-reduced-motion: reduce) {
    .server-list-card--contentplus {
        animation: none;
    }

    .server-list-card__contentplus-spark {
        animation: none;
        opacity: 0.35;
    }
}

.server-list-card__preview {
    position: relative;
    min-height: 152px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 52%, #0c4a6e 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.server-list-card__preview--has-banner {
    min-height: 176px;
    background: #0b1220;
}

.server-list-card__preview-banner {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.server-list-card__preview--has-banner .server-list-card__preview-overlay {
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.04) 0%,
        rgba(15, 23, 42, 0.18) 42%,
        rgba(15, 23, 42, 0.72) 100%
    );
}

.server-list-card__preview--platform-fivem {
    background: linear-gradient(135deg, #7c2d12 0%, #ea580c 42%, #0f172a 100%);
}

.server-list-card__preview--platform-redm {
    background: linear-gradient(135deg, #78350f 0%, #b45309 40%, #1c1917 100%);
}

.server-list-card__preview--platform-minecraft {
    background: linear-gradient(135deg, #14532d 0%, #22c55e 38%, #0f172a 100%);
}

.server-list-card__preview--platform-roblox {
    background: linear-gradient(135deg, #991b1b 0%, #ef4444 40%, #111827 100%);
}

.server-list-card__preview--platform-arma3 {
    background: linear-gradient(135deg, #3f6212 0%, #65a30d 38%, #0f172a 100%);
}

.server-list-card__preview--platform-rust {
    background: linear-gradient(135deg, #9a3412 0%, #f97316 42%, #1c1917 100%);
}

.server-list-card__preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.42) 55%, rgba(15, 23, 42, 0.88) 100%);
}

.server-list-card__preview-logo-wrap {
    position: relative;
    z-index: 4;
    width: fit-content;
    margin: -2.35rem 0 0.75rem 1.15rem;
    pointer-events: none;
}

.server-list-card__preview-logo {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    object-fit: cover;
    border: 3px solid rgba(15, 23, 42, 0.95);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    background: rgba(15, 23, 42, 0.9);
}

.server-list-card__preview-logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.35rem;
}

.server-list-card__body {
    position: relative;
    z-index: 2;
    padding: 0 1.15rem 1rem;
}

.server-list-card__header {
    margin-bottom: 0.45rem;
}

.server-list-card__title {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--light, #f8fafc);
    transition: color 0.2s ease;
}

.server-list-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    margin-bottom: 0.6rem;
}

.server-list-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    min-width: 0;
}

.server-list-card__meta-item--rating {
    flex: 1 1 auto;
    min-width: 0;
}

.server-list-card__meta-item--rating .server-stars {
    flex-wrap: wrap;
    row-gap: 0.2rem;
}

.server-list-card__meta-item--likes {
    flex-shrink: 0;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #86efac;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(134, 239, 172, 0.22);
}

.server-list-card__meta-item--likes i {
    font-size: 0.78rem;
}

.server-list-card__desc {
    margin: 0 0 0.75rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.9rem;
    line-height: 1.5;
}

.server-list-card__tags {
    margin-bottom: 0.35rem;
}

.server-list-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.85rem 1.15rem 1.05rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.15rem;
    position: relative;
    z-index: 3;
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(8, 12, 18, 0.15) 0%, rgba(8, 12, 18, 0.42) 100%);
}

.server-list-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 8.5rem;
    padding: 0.72rem 1rem;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    z-index: 4;
    pointer-events: auto;
    border: 1px solid transparent;
    color: #f8fafc;
    cursor: pointer;
    user-select: none;
    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease,
        filter 0.14s ease,
        border-color 0.14s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 0 rgba(0, 0, 0, 0.18),
        0 4px 0 rgba(0, 0, 0, 0.28),
        0 8px 18px rgba(0, 0, 0, 0.22);
}

.server-list-card__action::before {
    content: '';
    position: absolute;
    inset: 1px 1px auto;
    height: 42%;
    border-radius: 12px 12px 10px 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.server-list-card__action-icon {
    position: relative;
    z-index: 1;
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.78rem;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.server-list-card__action-label {
    position: relative;
    z-index: 1;
}

.server-list-card__action:hover,
.server-list-card__action:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
    outline: none;
}

.server-list-card__action:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(0, 0, 0, 0.22);
}

.server-list-card__action.server-list-row__connect {
    background: linear-gradient(180deg, #34d399 0%, #22c55e 48%, #16a34a 100%);
    border-color: rgba(134, 239, 172, 0.55);
    color: #ecfdf5;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -2px 0 rgba(6, 78, 59, 0.35),
        0 4px 0 #14532d,
        0 8px 20px rgba(34, 197, 94, 0.28);
}

.server-list-card__action.server-list-row__connect:hover,
.server-list-card__action.server-list-row__connect:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -2px 0 rgba(6, 78, 59, 0.35),
        0 6px 0 #14532d,
        0 12px 24px rgba(34, 197, 94, 0.34);
}

.server-list-card__action.server-list-row__connect:active {
    box-shadow:
        inset 0 2px 5px rgba(6, 78, 59, 0.45),
        0 1px 0 #14532d;
}

.server-list-card__action.server-list-row__discord {
    background: linear-gradient(180deg, #818cf8 0%, #5865f2 50%, #4f46e5 100%);
    border-color: rgba(199, 210, 254, 0.5);
    color: #eef2ff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(49, 46, 129, 0.4),
        0 4px 0 #312e81,
        0 8px 20px rgba(88, 101, 242, 0.3);
}

.server-list-card__action.server-list-row__discord:hover,
.server-list-card__action.server-list-row__discord:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -2px 0 rgba(49, 46, 129, 0.4),
        0 6px 0 #312e81,
        0 12px 24px rgba(88, 101, 242, 0.36);
}

.server-list-card__action.server-list-row__discord:active {
    box-shadow:
        inset 0 2px 5px rgba(49, 46, 129, 0.45),
        0 1px 0 #312e81;
}

.server-list-card__action.server-list-card__action--delete {
    border-color: rgba(248, 113, 113, 0.35);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.92) 0%, rgba(185, 28, 28, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -2px 0 rgba(127, 29, 29, 0.45),
        0 4px 0 rgba(127, 29, 29, 0.55),
        0 8px 18px rgba(185, 28, 28, 0.28);
}

.server-list-card__action.server-list-card__action--delete:hover,
.server-list-card__action.server-list-card__action--delete:focus-visible {
    filter: brightness(1.06);
    border-color: rgba(252, 165, 165, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 0 rgba(127, 29, 29, 0.45),
        0 6px 0 rgba(127, 29, 29, 0.55),
        0 12px 24px rgba(185, 28, 28, 0.34);
}

.server-list-card__action.server-list-card__action--delete:active {
    box-shadow:
        inset 0 2px 5px rgba(127, 29, 29, 0.45),
        0 1px 0 #7f1d1d;
}

@media (max-width: 480px) {
    .server-list-card__action {
        flex: 1 1 100%;
        min-width: 0;
    }
}

.server-list-card__staff {
    margin-top: 0.65rem;
}

.server-list-card--form-preview {
    width: min(100%, 400px);
    max-width: 100%;
    pointer-events: none;
    margin: 0 auto;
}

.server-list-card--form-preview .server-list-card__preview-overlay {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.02) 0%,
        rgba(15, 23, 42, 0.12) 45%,
        rgba(15, 23, 42, 0.55) 100%
    );
}

.server-list-card--form-preview.server-list-card--form-preview-has-banner .server-list-card__preview-overlay {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.01) 0%,
        rgba(15, 23, 42, 0.08) 40%,
        rgba(15, 23, 42, 0.42) 100%
    );
}

.server-list-card__meta--form-preview {
    margin-bottom: 0.45rem;
}

.server-form-list-preview {
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    overflow: visible;
}

.server-form-list-preview__title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.server-form-list-preview__hint {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
}

.server-list-table-wrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.45);
}

.server-list-table {
    width: 100%;
    border-collapse: collapse;
}

.server-list-table th,
.server-list-table td {
    padding: 0.9rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.server-list-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #94a3b8);
    background: rgba(2, 6, 23, 0.35);
}

.server-list-row__name {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text-main, #f8fafc);
    text-decoration: none;
    font-weight: 600;
}

.server-list-row__name:hover {
    color: #7dd3fc;
}

.server-list-row__logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}

.server-list-row__desc {
    margin: 0;
    color: var(--text-muted, #94a3b8);
    font-size: 0.92rem;
    line-height: 1.45;
}

.server-list-row__category {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    font-size: 0.82rem;
}

.server-list-rating {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.server-list-rating__score {
    color: #fbbf24;
}

.server-list-rating__likes {
    color: #86efac;
}

.server-list-row__discord {
    color: #eef2ff;
    text-decoration: none;
}

.server-list-row__connect {
    color: #ecfdf5;
    font-weight: 800;
    text-decoration: none;
}

.server-list-staff {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.server-list-staff__item,
.server-list-staff__more {
    font-size: 0.82rem;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
}

.server-list-table__empty {
    text-align: center;
    color: var(--text-muted, #94a3b8);
    padding: 2rem 1rem !important;
}

.server-detail {
    max-width: 1080px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.server-detail__back {
    margin-bottom: 1rem;
}

.server-detail-card {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 15, 25, 0.72);
    overflow: hidden;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Hero */
.server-detail-hero {
    position: relative;
    min-height: 240px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 52%, #0c4a6e 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.server-detail-hero--has-banner {
    background: #0b1220;
}

.server-detail-hero__banner {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.server-detail-hero--has-banner .server-detail-hero__overlay {
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0) 0%,
        rgba(15, 23, 42, 0.08) 55%,
        rgba(15, 23, 42, 0.42) 100%
    );
}

.server-detail-hero--has-banner .server-detail-hero__mesh {
    display: none;
}

.server-detail-hero--platform-fivem {
    background: linear-gradient(135deg, #7c2d12 0%, #ea580c 42%, #0f172a 100%);
}

.server-detail-hero--platform-redm {
    background: linear-gradient(135deg, #78350f 0%, #b45309 40%, #1c1917 100%);
}

.server-detail-hero--platform-minecraft {
    background: linear-gradient(135deg, #14532d 0%, #22c55e 38%, #0f172a 100%);
}

.server-detail-hero--platform-roblox {
    background: linear-gradient(135deg, #991b1b 0%, #ef4444 40%, #111827 100%);
}

.server-detail-hero--platform-arma3 {
    background: linear-gradient(135deg, #3f6212 0%, #65a30d 38%, #0f172a 100%);
}

.server-detail-hero--platform-rust {
    background: linear-gradient(135deg, #9a3412 0%, #f97316 42%, #1c1917 100%);
}

.server-detail-hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.45) 55%, rgba(15, 23, 42, 0.92) 100%);
}

.server-detail-hero__mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background:
        radial-gradient(circle at 18% 22%, rgba(0, 212, 255, 0.18), transparent 42%),
        radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.08), transparent 36%);
}

.server-detail-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    min-height: 240px;
    padding: 1.5rem 1.5rem 1.65rem;
}

.server-detail-hero__logo-wrap {
    flex-shrink: 0;
}

.server-detail-hero__logo {
    display: block;
    width: 112px;
    height: 112px;
    border-radius: 22px;
    object-fit: cover;
    border: 4px solid rgba(15, 23, 42, 0.95);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    background: rgba(15, 23, 42, 0.92);
}

.server-detail-hero__logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 2.2rem;
}

.server-detail-hero__heading {
    min-width: 0;
    flex: 1;
    padding-bottom: 0.15rem;
}

.server-detail-hero__platform {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
}

.server-detail-hero__title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #f8fafc;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.server-detail-hero__tags .server-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.server-detail-card__inner {
    padding: 1.35rem 1.5rem 1.5rem;
}

/* Stats */
.server-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.35rem;
}

@media (min-width: 768px) {
    .server-detail-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.server-detail-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(155deg, rgba(16, 22, 30, 0.88) 0%, rgba(8, 12, 18, 0.92) 100%);
    overflow: hidden;
}

.server-detail-stat__icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.server-detail-stat__icon--likes {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.server-detail-stat__icon--rating {
    color: #fde047;
    background: rgba(234, 179, 8, 0.14);
    border: 1px solid rgba(234, 179, 8, 0.28);
}

.server-detail-stat__icon--staff {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.14);
    border: 1px solid rgba(14, 165, 233, 0.28);
}

.server-detail-stat__icon--date {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.28);
}

.server-detail-stat__value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    color: #f8fafc;
}

.server-detail-stat__value--text {
    font-size: 1rem;
}

.server-detail-stat__label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.95);
}

/* Layout */
.server-detail-layout {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 960px) {
    .server-detail-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }
}

.server-detail-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.server-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Sections */
.server-detail-section {
    position: relative;
    padding: 1.15rem 1.2rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.45);
    overflow: hidden;
}

.server-detail-section__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
    font-size: 1.02rem;
    color: #f1f5f9;
}

.server-detail-section__title-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 0.82rem;
    color: var(--primary, #00d4ff);
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.22);
}

.server-detail-section__body {
    color: var(--text-main, #e2e8f0);
}

.server-detail-card__description {
    line-height: 1.75;
    font-size: 0.98rem;
    white-space: normal;
    word-break: break-word;
}

/* Aside panels */
.server-detail-panel {
    position: relative;
    padding: 1.1rem 1.15rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
    overflow: hidden;
}

.server-detail-panel--meta {
    background: rgba(8, 12, 20, 0.55);
}

.server-detail-panel__title {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.95);
}

.server-detail-panel__actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.server-detail-action {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 12, 18, 0.72);
    color: #f8fafc;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.server-detail-action:hover,
.server-detail-action:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.server-detail-action__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1rem;
}

.server-detail-action__text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.server-detail-action__label {
    font-size: 0.95rem;
    font-weight: 700;
}

.server-detail-action__hint {
    font-size: 0.76rem;
    color: rgba(148, 163, 184, 0.95);
}

.server-detail-action--connect {
    border-color: rgba(34, 197, 94, 0.35);
    background: linear-gradient(135deg, rgba(22, 101, 52, 0.35) 0%, rgba(8, 12, 18, 0.85) 100%);
}

.server-detail-action--connect .server-detail-action__icon {
    color: #86efac;
    background: rgba(34, 197, 94, 0.18);
}

.server-detail-action--connect:hover,
.server-detail-action--connect:focus-visible {
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.12);
}

.server-detail-action--discord {
    border-color: rgba(88, 101, 242, 0.35);
    background: linear-gradient(135deg, rgba(49, 46, 129, 0.35) 0%, rgba(8, 12, 18, 0.85) 100%);
}

.server-detail-action--discord .server-detail-action__icon {
    color: #a5b4fc;
    background: rgba(88, 101, 242, 0.18);
}

.server-detail-action--discord:hover,
.server-detail-action--discord:focus-visible {
    border-color: rgba(88, 101, 242, 0.55);
    box-shadow: 0 8px 24px rgba(88, 101, 242, 0.12);
}

.server-detail-action--like .server-detail-action__icon {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
}

.server-detail-action--like.is-liked {
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.14);
    color: #dcfce7;
}

.server-detail-action--edit .server-detail-action__icon {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.12);
}

.server-like-btn.is-liked {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.55);
    color: #dcfce7;
}

/* Meta */
.server-detail-meta {
    margin: 0;
}

.server-detail-meta__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.server-detail-meta__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.server-detail-meta__row dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.9);
}

.server-detail-meta__row dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #e2e8f0;
    word-break: break-word;
}

.server-detail-meta__code {
    display: block;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    color: #cbd5e1;
    word-break: break-all;
}

/* Staff */
.server-detail-staff-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.server-detail-staff-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1rem 0.75rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.4);
    text-align: center;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.server-detail-staff-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.28);
}

.server-detail-staff-card__avatar {
    border-radius: 50%;
    border: 2px solid rgba(0, 212, 255, 0.35);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.12);
}

.server-detail-staff-card__name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f1f5f9;
}

.server-detail-staff-card__role {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.9);
}

.server-detail-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #94a3b8);
    font-size: 0.88rem;
}

.server-detail-card__footer i {
    margin-right: 0.35rem;
    opacity: 0.8;
}

@media (max-width: 639px) {
    .server-detail-hero__content {
        flex-direction: column;
        align-items: flex-start;
        min-height: 220px;
        padding: 1.15rem;
    }

    .server-detail-hero__logo,
    .server-detail-hero__logo--placeholder {
        width: 88px;
        height: 88px;
    }

    .server-detail-card__inner {
        padding: 1rem;
    }
}

.server-form-branding__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

/* ContentPlus — pannello dorato nel modulo lista server */
.server-form-contentplus {
    position: relative;
    margin: 1.35rem 0;
    padding: 1.35rem 1.25rem 1.25rem;
    border-radius: 22px;
    border: 1px solid rgba(255, 193, 7, 0.38);
    background:
        linear-gradient(155deg, rgba(28, 22, 8, 0.88) 0%, rgba(15, 23, 42, 0.72) 46%, rgba(12, 18, 30, 0.82) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 214, 90, 0.22),
        0 12px 36px rgba(255, 160, 0, 0.16),
        inset 0 1px 0 rgba(255, 246, 184, 0.08);
    overflow: hidden;
    isolation: isolate;
}

.server-form-contentplus > :not(.server-form-contentplus__aura):not(.server-form-contentplus__spark):not(.spotlight-shine) {
    position: relative;
    z-index: 2;
}

.server-form-contentplus--active {
    animation: serverFormContentPlusGlow 3.6s ease-in-out infinite;
}

.server-form-contentplus--locked {
    border-style: dashed;
    border-color: rgba(255, 193, 7, 0.28);
    opacity: 0.94;
}

.server-form-contentplus__aura {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 236, 140, 0.2) 0%, transparent 44%),
        radial-gradient(circle at 88% 18%, rgba(255, 193, 7, 0.14) 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(255, 179, 0, 0.08) 0%, transparent 52%),
        linear-gradient(135deg, rgba(255, 246, 184, 0.06) 0%, transparent 58%, rgba(255, 179, 0, 0.04) 100%);
}

.server-form-contentplus__spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, #fffef0 0%, #ffe566 55%, transparent 100%);
    box-shadow: 0 0 12px 2px rgba(255, 236, 140, 0.85);
    opacity: 0;
}

.server-form-contentplus__spark--a {
    top: 18px;
    right: 22px;
    animation: serverListContentPlusSparkA 4.8s ease-in-out infinite;
}

.server-form-contentplus__spark--b {
    bottom: 28px;
    left: 20px;
    width: 5px;
    height: 5px;
    animation: serverListContentPlusSparkB 5.6s ease-in-out infinite 0.9s;
}

.server-form-contentplus__header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 214, 90, 0.16);
}

.server-form-contentplus__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1a1300;
    background: linear-gradient(135deg, #fff6b8 0%, #ffd54a 45%, #ffb300 100%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        0 0 18px rgba(255, 193, 7, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.28);
}

.server-form-contentplus__badge i {
    font-size: 0.76rem;
}

.server-form-contentplus__headtext {
    min-width: 0;
    flex: 1;
}

.server-form-contentplus__title {
    margin: 0 0 0.35rem;
    font-size: 1.08rem;
    color: #ffe082;
    letter-spacing: -0.01em;
}

.server-form-contentplus__lead {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.82);
}

.server-form-contentplus__auto-hint {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(253, 230, 138, 0.88);
}

.server-form-contentplus__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.server-form-contentplus .server-form-list-preview {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 214, 90, 0.12);
}

.server-form-contentplus--locked .server-form-branding__fields {
    opacity: 0.72;
}

@keyframes serverFormContentPlusGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 214, 90, 0.22),
            0 12px 36px rgba(255, 160, 0, 0.16),
            inset 0 1px 0 rgba(255, 246, 184, 0.08);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 236, 160, 0.38),
            0 16px 42px rgba(255, 180, 0, 0.26),
            0 0 52px rgba(255, 214, 90, 0.14),
            inset 0 1px 0 rgba(255, 246, 184, 0.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .server-form-contentplus--active {
        animation: none;
    }

    .server-form-contentplus__spark {
        animation: none;
        opacity: 0.3;
    }
}

.server-form-branding__notice {
    margin: 0.75rem 0;
}

.server-form-branding__shop-link {
    color: var(--primary);
    font-weight: 600;
    margin-left: 0.35rem;
}

.server-form-branding__fields {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .server-form-branding__fields {
        grid-template-columns: 1fr 1fr;
    }
}

.server-form-branding__preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}

.server-form-branding__preview--logo img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.server-form-branding__preview img {
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.5);
}

.server-form-branding__preview--banner img {
    width: 100%;
    max-width: 320px;
    height: 90px;
}

.server-form-card {
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
}

.server-form__subtitle,
.server-form__hint {
    color: var(--text-muted, #94a3b8);
}

.server-staff-picker__controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.server-staff-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.server-staff-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.25);
}

.server-staff-picker__chip button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.server-form__actions {
    margin-top: 1rem;
}

.server-form__danger {
    margin-top: 2rem;
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.14), rgba(69, 10, 10, 0.2));
}

.server-form__danger-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: #fecaca;
}

.server-form__danger-hint {
    margin: 0 0 1rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.92rem;
}

@media (max-width: 900px) {
    .server-list-toolbar__controls {
        grid-template-columns: 1fr;
    }

    .server-list-table thead {
        display: none;
    }

    .server-list-table tr {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0.75rem 0;
    }

    .server-list-table td {
        display: block;
        border: 0;
        padding: 0.35rem 1rem;
    }

    .server-list-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted, #94a3b8);
        margin-bottom: 0.2rem;
    }

    .server-staff-picker__controls {
        grid-template-columns: 1fr;
    }
}

/* Server star ratings */
.server-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: #fbbf24;
    line-height: 1;
}

.server-stars--sm {
    font-size: 0.82rem;
}

.server-stars__icon--empty {
    color: rgba(251, 191, 36, 0.35);
}

.server-stars__value {
    margin-left: 0.35rem;
    font-weight: 700;
    color: #fde68a;
    font-size: 0.95em;
}

.server-stars__count {
    margin-left: 0.2rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.88em;
}

.server-detail-hero__rating {
    margin-top: 0.35rem;
}

.server-detail-stat__sub {
    font-size: 0.85em;
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
}

/* Server reviews */
.server-detail-action--review {
    border-color: rgba(251, 191, 36, 0.35);
}

.server-detail-action--review .server-detail-action__icon {
    color: #fbbf24;
}

.server-reviews-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.server-reviews-section__count {
    font-size: 0.85em;
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

.server-reviews-empty {
    color: var(--text-muted, #94a3b8);
    margin: 0;
}

.server-reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.server-review-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem 1.1rem;
}

.server-review-card.spotlight {
    overflow: hidden;
    isolation: isolate;
}

.server-review-card > :not(.spotlight-shine) {
    position: relative;
    z-index: 2;
}

.server-review-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.server-review-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.server-review-card__meta {
    flex: 1;
    min-width: 0;
}

.server-review-card__author {
    display: block;
    font-weight: 700;
}

.server-review-card__date {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted, #94a3b8);
}

.server-review-card__comment {
    margin: 0 0 0.75rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.server-review-card__votes {
    display: flex;
    gap: 0.5rem;
}

.server-review-vote {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    cursor: pointer;
    font-size: 0.88rem;
}

.server-review-vote--like.is-active {
    border-color: rgba(134, 239, 172, 0.45);
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.server-review-vote--dislike.is-active {
    border-color: rgba(252, 165, 165, 0.45);
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.server-review-reply {
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border-left: 3px solid rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.06);
}

.server-review-reply__label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fde68a;
    margin-bottom: 0.35rem;
}

.server-review-reply__comment {
    margin: 0;
    line-height: 1.5;
}

.server-review-reply-form {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.server-review-reply-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 4.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    padding: 0.65rem 0.75rem;
}

/* Review modal */
body.server-review-modal-open {
    overflow: hidden;
}

.server-review-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.server-review-modal[hidden] {
    display: none !important;
}

.server-review-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.server-review-modal__dialog {
    position: relative;
    width: min(100%, 480px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(18, 24, 38, 0.98), rgba(10, 14, 24, 0.98));
    padding: 1.5rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.server-review-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.server-review-modal__title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
}

.server-review-modal__lead {
    margin: 0 0 1rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.92rem;
}

.server-review-form__field {
    margin-bottom: 1rem;
}

.server-review-form__label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.server-review-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 6rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    padding: 0.75rem;
}

.server-review-form__error {
    color: #fca5a5;
    font-size: 0.88rem;
    margin: 0 0 0.75rem;
}

.server-star-picker__stars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.server-star-picker__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.55rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #fbbf24;
    cursor: pointer;
    font-size: 0.82rem;
}

.server-star-picker__btn.is-selected {
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.12);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2);
}

.server-star-picker__zero {
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
}

/* Server delete modal */
body.server-delete-modal-open {
    overflow: hidden;
}

.server-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.server-delete-modal[hidden] {
    display: none !important;
}

.server-delete-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.server-delete-modal__dialog {
    position: relative;
    width: min(100%, 480px);
    border-radius: 20px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(24, 18, 20, 0.98), rgba(12, 10, 14, 0.98));
    padding: 1.5rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.server-delete-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.server-delete-modal__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin-bottom: 0.85rem;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.28);
    font-size: 1.35rem;
}

.server-delete-modal__title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
}

.server-delete-modal__lead {
    margin: 0 0 0.75rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.92rem;
}

.server-delete-modal__name {
    margin: 0 0 1rem;
    font-weight: 700;
    color: #fecaca;
    word-break: break-word;
}

.server-delete-modal__error {
    margin: 0 0 1rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.28);
    color: #fecaca;
    font-size: 0.9rem;
}

.server-delete-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

/* ── Performance: lighter compositing on common viewports ── */
@media (max-width: 1024px) {
    header.site-header,
    header {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

@media (max-width: 768px), (hover: none) {
    .particles {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    .hero::before,
    .particle,
    .particles,
    .sidebar-edge-glow,
    .site-status-widget__dot,
    .staff-support-nav-badge,
    .staff-reports-nav-badge,
    .btn-primary,
    .ranking-section .ranking-item.spotlight {
        animation: none !important;
    }

    .spotlight-shine,
    .category-card__shine,
    .hero-panel__shine {
        transition: none !important;
    }
}

/* ── Mobile lite mode (class set early in perf-mobile-head.php) ── */
html.cdb-mobile-lite body::before {
    animation: none !important;
    opacity: 0.42;
}

html.cdb-mobile-lite .ambient-bg__logo-wrap {
    display: none;
}

html.cdb-mobile-lite .ambient-bg__mesh {
    opacity: 0.65;
}

html.cdb-mobile-lite header,
html.cdb-mobile-lite header.scrolled,
html.cdb-mobile-lite header.site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 23, 42, 0.97) !important;
}

html.cdb-mobile-lite :is(
    .glass-card,
    .report-card,
    .server-list-card,
    .server-form-card,
    .hero-panel,
    .category-card,
    .language-dropdown,
    .cdb-limit-notice,
    .server-list-toolbar,
    .staff-card,
    .partner-card,
    .rankings-sidebar,
    .site-status-widget,
    .shop-item-card,
    .tournament-card,
    .footer-section.spotlight,
    .lite-ban-registry__table-wrap,
    .faceit-ban-registry__table-wrap,
    .liquipedia-ban-registry__table-wrap,
    .steam-ban-registry__table-wrap,
    .robloxwatcher-ban-registry__table-wrap,
    .cdb-loading-overlay__panel,
    .server-review-card,
    .nav-container nav.site-primary-nav
) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.cdb-mobile-lite :is(
    .category-card__aurora,
    .category-card__mesh,
    .hero-panel__aurora,
    .hero-panel__mesh,
    .sidebar-aurora,
    .sidebar-mesh,
    .sidebar-edge-glow,
    .spotlight-shine,
    .category-card__shine,
    .hero-panel__shine
) {
    display: none !important;
}

html.cdb-mobile-lite :is(
    .category-icon-ring,
    .category-icon-ring::after,
    .site-status-widget__dot,
    .sidebar-edge-glow,
    .sidebar-badge,
    .live-pill,
    .user-avatar-ring,
    .user-avatar-ring--skip-queue,
    .user-avatar-ring--skip-queue-expiring,
    .btn-primary,
    .hero::before,
    .text-glow,
    .category-icon i
) {
    animation: none !important;
}

html.cdb-mobile-lite :is(
    .report-card,
    .server-list-card,
    .category-card,
    .ranking-item,
    .staff-card,
    .partner-card
) {
    content-visibility: auto;
    contain-intrinsic-size: auto 180px;
}

html.cdb-mobile-lite .rankings-sidebar {
    transition: transform 0.28s ease;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.45);
}

html.cdb-mobile-lite .index-page-content,
html.cdb-mobile-lite .main-with-sidebar,
html.cdb-mobile-lite footer {
    transition: none !important;
}

html.cdb-mobile-lite .hero h1 {
    text-shadow: none;
}

html.cdb-mobile-lite .christmas-snow-layer {
    opacity: 0.65;
}

/* Editorial intros & AdSense compliance blocks */
.editorial-intro {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.editorial-intro__title {
    font-size: 1.35rem;
    margin: 0 0 0.75rem;
    color: var(--primary);
}

.editorial-prose {
    line-height: 1.75;
    color: var(--gray);
}

.editorial-prose p {
    margin: 0 0 0.85rem;
}

.editorial-prose p:last-child {
    margin-bottom: 0;
}

.ugc-legal-notice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.22);
    color: var(--gray);
    font-size: 0.92rem;
    line-height: 1.6;
}

.ugc-legal-notice i {
    color: var(--primary);
    margin-top: 0.15rem;
}

.ugc-legal-notice a {
    color: var(--primary);
}

.error404-page {
    max-width: 720px;
    margin: 2rem auto 4rem;
}

.error404-card {
    text-align: center;
    padding: 2.5rem 2rem;
}

.error404-code {
    font-size: 4rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--primary);
    opacity: 0.85;
}

.error404-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.shop-public-landing {
    max-width: 900px;
    margin-bottom: 3rem;
}

.shop-public-login-card {
    margin: 1.5rem 0;
    padding: 1.5rem;
    text-align: center;
}

.shop-public-login-card h2 {
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.shop-public-catalog-preview {
    margin: 2rem 0 1rem;
}

.shop-public-catalog-list {
    margin: 1rem 0 0;
    padding-left: 1.25rem;
    line-height: 1.7;
    color: var(--gray);
}

.shop-public-legal-note {
    margin-top: 1.5rem;
    font-size: 0.92rem;
}

.shop-public-legal-note a {
    color: var(--primary);
}