body {
    background:
        radial-gradient(circle at 8% 12%, rgba(47, 158, 68, 0.06), transparent 40%),
        radial-gradient(circle at 92% 88%, rgba(25, 113, 194, 0.06), transparent 40%),
        #eef2f6;
    color: #253041;
    accent-color: #2f9e44;
}

h1, h2, h3 {
    text-wrap: balance;
}

.navbar {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(20, 40, 70, 0.08);
}

html body .navbar .navbar-brand,
html body .navbar-dark .navbar-brand,
html body .navbar .nav-link,
html body .navbar-dark .navbar-nav .nav-link,
html body .navbar-dark .navbar-nav .nav-link.show,
html body .navbar-dark .navbar-nav .dropdown-toggle,
html body .navbar-dark .navbar-text {
    color: #253041 !important;
    font-weight: 600;
}

html body .navbar .nav-link:hover,
html body .navbar .nav-link:focus-visible,
html body .navbar-dark .navbar-nav .nav-link:hover,
html body .navbar-dark .navbar-nav .nav-link:focus,
html body .navbar-dark .navbar-nav .nav-link.active {
    color: #2f9e44 !important;
}

html body .navbar-dark .navbar-toggler,
html body .navbar .navbar-toggler {
    border-color: rgba(37, 48, 65, 0.35) !important;
    color: #253041 !important;
}

html body .navbar-dark .navbar-toggler-icon,
html body .navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23253041' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

html body .navbar .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(20, 40, 70, 0.12) !important;
}

html body .navbar .dropdown-menu .dropdown-item {
    color: #253041 !important;
}

html body .navbar .dropdown-menu .dropdown-item:hover,
html body .navbar .dropdown-menu .dropdown-item:focus {
    background: #e6f4ea !important;
    color: #2b8a3e !important;
}

@media (max-width: 991.98px) {
    html body .navbar .navbar-collapse {
        background: #ffffff;
        border-top: 1px solid rgba(20, 40, 70, 0.10);
        margin-top: 0.5rem;
        padding: 0.5rem 0.25rem;
        border-radius: 0 0 6px 6px;
    }
    html body .navbar-dark .navbar-nav .nav-link,
    html body .navbar .nav-link {
        padding: 0.65rem 0.75rem;
    }
}

html body .servers-header,
html body .category-header,
html body .faq-header,
html body .recruitment-header,
html body .recruitment-detail-header,
html body .auctions-header,
html body .page-hero {
    background: linear-gradient(120deg, #2f9e44 0%, #2b8a3e 55%, #1971c2 130%) !important;
    border-radius: 0;
}

html body .btn-primary {
    background: #2f9e44;
    border-color: #2f9e44;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
    box-shadow: 0 3px 10px rgba(47, 158, 68, 0.30);
}

html body .btn-primary:hover {
    background: #2b8a3e;
    border-color: #2b8a3e;
}

html body .card,
html body .filter-card,
html body search.filter-card,
html body .faq-item,
html body .recruitment-card,
html body .info-card,
html body .auction-card,
html body .stat-card {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 14px rgba(20, 40, 70, 0.09) !important;
}

#servers-container {
    container-type: inline-size;
}

html body #servers-container .row {
    counter-reset: srv-rank;
}

html body #servers-container .row > [class*="col-"] {
    counter-increment: srv-rank;
}

html body #servers-container .row > [class*="col-"],
html body .row.g-4 > .col-12.col-md-6,
html body .row.g-4 > .col-12.col-md-6.col-xl-4 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

html body .unified-server-card,
html body .server-card,
html body .recruitment-card,
html body .stat-card,
html body .auction-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

html body .server-card:hover,
html body .recruitment-card:hover,
html body .stat-card:hover,
html body .auction-card:hover {
    transform: none !important;
}

html body .unified-server-card {
    height: auto !important;
    background: #ffffff !important;
    border: 0 !important;
    border-left: 5px solid #2f9e44 !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 12px rgba(20, 40, 70, 0.10) !important;
}

html body .unified-server-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
    transform: translateX(-120%);
    pointer-events: none;
}

html body .unified-server-card:hover::after {
    transition: transform 0.7s ease;
    transform: translateX(120%);
}

@supports (animation-timeline: view()) {
    html body .unified-server-card {
        animation: craft-rise 0.6s ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }
    @keyframes craft-rise {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: none; }
    }
}

html body .unified-server-card:hover {
    transform: none !important;
    box-shadow: 0 8px 26px rgba(47, 158, 68, 0.22), 0 0 0 1px rgba(47, 158, 68, 0.25) !important;
    border-left-color: #51cf66 !important;
}

html body .unified-server-card .card-body {
    padding: 44px 18px 16px 64px !important;
    display: flex !important;
    flex-direction: column !important;
}

html body .unified-server-card .card-body::before {
    content: "#" counter(srv-rank);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 38px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #253041;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.85rem;
    border-radius: 4px;
    padding: 0 8px;
}

html body .unified-server-card .server-title {
    font-size: 1.1rem !important;
    color: #253041 !important;
}

html body .unified-server-card .server-title a {
    color: #253041 !important;
}

html body .unified-server-card .server-title a:hover {
    color: #2f9e44 !important;
}

html body .unified-server-card .server-type-badge {
    background: #1971c2 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
}

html body .unified-server-card .game-connection,
html body .unified-server-card .discord-connection {
    border-radius: 4px !important;
    border-style: dashed !important;
    font-family: 'JetBrains Mono', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    letter-spacing: 0.01em !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

html body .unified-server-card .game-connection:hover,
html body .unified-server-card .discord-connection:hover {
    border-style: solid !important;
    border-color: #2f9e44 !important;
    box-shadow: 0 0 0 3px rgba(47, 158, 68, 0.12) !important;
}

html body .unified-server-card .copy-btn {
    transition: transform 0.15s ease, background 0.15s ease !important;
}

html body .unified-server-card .copy-btn:hover {
    transform: scale(1.12);
    background: rgba(47, 158, 68, 0.22) !important;
}

html body .unified-server-card .player-count,
html body .unified-server-card .stat {
    background: #e6f4ea !important;
    color: #2b8a3e !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}

html body .unified-server-card .player-count i,
html body .unified-server-card .stat i {
    color: #2b8a3e !important;
}

html body .unified-server-card .server-stats {
    border-top: 1px dashed rgba(37, 48, 65, 0.15) !important;
}

html body .unified-server-card .server-actions .btn-success {
    background: linear-gradient(135deg, #2f9e44, #2b8a3e) !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 3px 10px rgba(47, 158, 68, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

html body .unified-server-card .server-actions .btn-success:hover {
    transform: scale(1.06);
    box-shadow: 0 5px 16px rgba(47, 158, 68, 0.50) !important;
}

html body .unified-server-card .card-body img {
    margin-left: auto;
}

html body .unified-server-card:has(.featured-badge) {
    border-left-color: #f59f00 !important;
    background: linear-gradient(90deg, #fff9e6 0%, #ffffff 30%) !important;
}

html body .unified-server-card:has(.featured-badge) .card-body::before {
    background: #f59f00;
}

@container (min-width: 640px) {
    html body .unified-server-card .server-header {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    html body .unified-server-card .server-stats {
        flex: 0 0 auto !important;
        border-top: 0 !important;
        margin: 0 0 0 auto !important;
        padding-top: 0 !important;
        flex-wrap: nowrap !important;
    }
    html body .unified-server-card .game-connection,
    html body .unified-server-card .discord-connection {
        max-width: 320px !important;
    }
}


html body .card-header.bg-info,
html body .card-header.bg-primary {
    background: linear-gradient(120deg, #2f9e44, #2b8a3e) !important;
    color: #ffffff !important;
    border: 0 !important;
}

html body .btn-info {
    background: #1971c2 !important;
    border-color: #1971c2 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

html body .btn-info:hover {
    background: #1864ab !important;
    border-color: #1864ab !important;
}

html body .alert-info {
    background: #e7f3ff !important;
    color: #1971c2 !important;
    border: 1px solid rgba(25, 113, 194, 0.25) !important;
    border-radius: 6px !important;
}

html body .badge.bg-info {
    background: #1971c2 !important;
}

html body .btn-check:checked + .btn-outline-success,
html body .btn-check:checked + .btn-outline-danger,
html body .btn-check:checked + .btn-outline-warning,
html body .btn-check:checked + .btn-outline-info {
    box-shadow: 0 3px 10px rgba(20, 40, 70, 0.20) !important;
}

html body .card .fa-star {
    color: #f59f00;
}

html body .btn-check:checked + label .fa-star {
    color: #ffffff;
}

html body .craft-spot {
    position: relative;
}

html body .craft-spot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(220px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(47, 158, 68, 0.10), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

html body .craft-spot:hover::before {
    opacity: 1;
}


@property --craft-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

html body .unified-server-card:has(.featured-badge) {
    border: 2px solid transparent !important;
    border-left: 5px solid #f59f00 !important;
    background:
        linear-gradient(90deg, #fff9e6 0%, #ffffff 30%) padding-box,
        conic-gradient(from var(--craft-angle), #f59f00, #ffd43b, #f59f00, #fff3bf, #f59f00) border-box !important;
    animation: craft-spin 5s linear infinite;
}

@keyframes craft-spin {
    to { --craft-angle: 360deg; }
}

html body .servers-header,
html body .category-header,
html body .page-hero {
    background-size: 180% 180% !important;
    animation: craft-hero-shift 14s ease-in-out infinite alternate;
}

@keyframes craft-hero-shift {
    from { background-position: 0% 40%; }
    to   { background-position: 100% 60%; }
}

html body .unified-server-card .server-actions .btn-success {
    position: relative;
    overflow: hidden;
}

html body .unified-server-card .server-actions .btn-success::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
    transform: translateX(-130%);
}

html body .unified-server-card .server-actions .btn-success:hover::after {
    transition: transform 0.55s ease;
    transform: translateX(130%);
}

html body .stat-card::before {
    background: linear-gradient(90deg, #2f9e44, #1971c2) !important;
}

html body .pagination .page-link {
    border-radius: 4px;
    color: #253041;
    font-weight: 600;
}

html body .pagination .page-item.active .page-link {
    background: #2f9e44;
    border-color: #2f9e44;
}

footer.bg-dark {
    background: #1c2430 !important;
}


html body.modal-open .unified-server-card,
html body.modal-open .unified-server-card::after {
    animation: none !important;
    transition: none !important;
}

html body .modal-content {
    border-radius: 6px !important;
}

@media (max-width: 575.98px) {
    html body .unified-server-card .card-body {
        padding: 40px 12px 12px 12px !important;
    }
    html body .unified-server-card .card-body::before {
        top: 12px;
        transform: none;
        left: auto;
        right: 12px;
        min-width: 32px;
        height: 26px;
        font-size: 0.78rem;
    }
    html body .unified-server-card .featured-badge {
        right: 56px !important;
    }
    html body .unified-server-card .card-body img {
        margin-left: 0;
        max-height: 36px !important;
    }
    html body .unified-server-card:hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .unified-server-card:hover {
        transform: none !important;
    }
    html body .unified-server-card::after,
    html body .unified-server-card .server-actions .btn-success::after {
        display: none;
    }
    html body .unified-server-card,
    html body .unified-server-card:has(.featured-badge),
    html body .servers-header,
    html body .category-header,
    html body .page-hero {
        animation: none !important;
    }
    html body .copy-btn:hover {
        transform: none !important;
    }
}

html:root {
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --surface-solid: #ffffff;
    --surface-border: rgba(20, 40, 70, 0.10);
    --text-body: #253041;
    --text-soft: #5c6b80;
    --hero-start: #2f9e44;
    --hero-mid: #2b8a3e;
    --hero-end: #1971c2;
    --primary-color: #2f9e44;
    --primary-dark: #2b8a3e;
    --primary-light: #51cf66;
    --connection-bg: #f0f7f2;
    --connection-color: #2b8a3e;
    --connection-border: rgba(47, 158, 68, 0.35);
    --connection-btn-bg: rgba(47, 158, 68, 0.12);
    --card-banner-h: 56px;
}