/* ==========================================================================
   ASURA NEXUS — APP CHROME

   The frame every page sits in: navbar, mega menu, server picker, profile and
   Steam switcher, the mobile drawer, membership pill, event cards and the
   shared modal theme. It was 942 lines inside base.html's <style> block,
   reparsed on every request and invisible to the browser cache.

   Linked after nexus-ui.css so the chrome can lean on the tokens and still
   override a shared component where the navbar genuinely differs.
   ========================================================================== */

        /* The accent palette moved to static/css/nexus-ui.css section 1 — it was
           redeclared here, in the Dino Lab, in the inventory card partial and on
           the Patreon page, and the four copies had started to differ. */
       *{
           --bs-border-color: #414141;
       }
        body {
            /* Fallback color */
            background-color: #121212;
            /* Linear Gradient (Black 90%) + Image */
            background-image: linear-gradient(rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.92)),
                              url("../src/img/nexus_bg.webp");
            background-attachment: fixed; /* Parallax effect - image stays still */
            background-size: cover;
            background-position: center;
            color: #e0e0e0; /* Default text color */
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            padding-top: 80px; /* Clears the fixed navbar. */
        }

        /* 2. Glassmorphism Navbar */
        .navbar-glass {
            background: rgba(20, 20, 20, 0.7) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px); /* Safari support */
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            padding-top: 10px;
            padding-bottom: 10px;
        }

        /* Brand / Logo */
        .navbar-brand {
            font-weight: bold;
            letter-spacing: 1px;
            color: white !important;
        }

        .navbar-brand img {
            filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.5));
        }

        /* Custom Scrollbar (Chrome/Edge/Safari) */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0f0f0f;
        }
        ::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #666;
        }

        /* Generic Styles */
        .card {
            background-color: rgba(32, 34, 37, 0.85);
            backdrop-filter: blur(5px);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .card-header h5 {
            color: #b9bbbe;
            letter-spacing: 0.5px;
        }

        .list-group-item {
            background-color: transparent;
            color: #ffffff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .list-group-item:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }

        .text-muted {
            color: #a3a6aa !important;
        }

        /* --- SWEETALERT2 DARK GLASS THEME FIX --- */
        div:where(.swal2-container) .swal2-popup {
            background-color: rgba(32, 34, 37, 0.95) !important;
            color: #fff !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(10px) !important;
        }
        div:where(.swal2-container) .swal2-title { color: #fff !important; }
        div:where(.swal2-container) .swal2-html-container { color: #ccc !important; }
        /* SweetAlert ships checkbox/radio inputs with a white block background, which
           on the dark popup is a white bar with an invisible white label inside it. */
        div:where(.swal2-container) .swal2-checkbox,
        div:where(.swal2-container) .swal2-radio {
            background: transparent !important;
            color: #ccc !important;
            justify-content: center;
            gap: 0.6em;
        }
        div:where(.swal2-container) .swal2-checkbox input,
        div:where(.swal2-container) .swal2-radio input {
            width: 1.05em;
            height: 1.05em;
            margin: 0;
            accent-color: #eb6105;
            cursor: pointer;
        }
        div:where(.swal2-container) .swal2-checkbox .swal2-label,
        div:where(.swal2-container) .swal2-radio .swal2-label {
            margin: 0;
            font-size: 0.95rem;
            cursor: pointer;
        }

        /* --- FOOTER --- */
        .site-footer {
            background-color: rgba(15, 15, 15, 0.95);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            color: #adb5bd;
            font-size: 0.9rem;
            margin-top: auto;
            padding-top: 60px;
            padding-bottom: 30px;
        }

        .footer-logo-text {
            color: #fff; font-weight: 700; font-size: 1.2rem; letter-spacing: 1px; margin-bottom: 15px; display: block; text-decoration: none;
        }
        .footer-heading {
            color: #fff; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;
        }
        .footer-links { list-style: none; padding: 0; margin: 0; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: #adb5bd; text-decoration: none; transition: all 0.2s ease; display: inline-block; }
        .footer-links a:hover { color: #3498db; transform: translateX(5px); }
        .copyright-text { border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: 40px; padding-top: 20px; font-size: 0.85rem; color: #6c757d; }
        .blur-text { filter: blur(5px); }
        .content_wrapper{ margin-bottom: 2em; }

        /* =========================================
           --- NEW NAVBAR STYLES (FIXED) ---
           ========================================= */

        /* 1. Nav Links Layout */
        .navbar-nav .nav-link, .server-select {
            color: rgba(255, 255, 255, 0.7) !important;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            margin-right: 10px;
            border-radius: 6px;

            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            padding: 8px 16px !important;
        }

        .nav-link:hover, .nav-link.active, .server-select:hover, .server-select.active {
            color: #fff !important;
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-1px);
        }
        .nav-link.active i , .server-select i{ color:  rgba(255, 255, 255, 0.7); }
        /* Iconpack icons in the top bar's quick links: at the 0.9rem label size
           their line art is a hairline, so draw them larger, in full white and
           with a heavier outline (in the SVG's own units). */
        .navbar-nav .nav-link .nx-icon {
            width: 1.6em; height: 1.35em;
            color: #fff;
            --nx-icon-weight: 14;
        }

        /* 2. Nexus Dropdowns (Glassmorphism Base) */
        .nexus-dropdown-menu {
            background: rgba(22, 22, 24, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 8px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6);
            margin-top: 15px !important;
            animation: fadeInDrop 0.2s ease-out;
        }

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

        /* 3. Server Select Button Styles */
        .server-select-btn {
            background: rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255,255,255,0.5);
            color: #fff;
            padding: 5px 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.2s ease;
            cursor: pointer;
            text-decoration: none;
            height: 42px; /* Matches the profile pill next to it. */
            font-size: 0.85rem;
        }
        .server-select-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: #ffc107; /* Gold accent hover */
            color: #fff;
        }

        .server-dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
            border-radius: 8px;
            color: #e0e0e0;
            text-decoration: none;
            border: 1px solid transparent;
            transition: all 0.2s;
            margin-bottom: 4px;
        }
        .server-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: #fff;
        }


        /* 4. MEGA MENU STYLES */
        .nav-item.mega-menu-parent {
            position: static; /* The pane below is positioned against the navbar,
                                 not this item, so it can span the full width. */
        }
        .dropdown-menu.mega-menu-pane {
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            margin-top: 0;
            top: 90%;      /* Just under the navbar, overlapping it slightly. */

            /* Vzhled */
            border-radius: 0 0 12px 12px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 2px solid rgba(255, 255, 255, 0.7);

            background-color: #0f1012;
            box-shadow: 0 20px 50px rgba(0,0,0,0.9);

            /* Hidden by default, but kept as display:block — the fade and slide
               below need a laid-out box to animate. */
            display: block;
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.2s ease-in-out;
            pointer-events: none; /* Nothing is clickable while it is invisible. */
            z-index: 1050;
        }

        .dropdown-menu.mega-menu-pane.show {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .rich-menu-category {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #6c757d;
            font-weight: 700;
            margin-bottom: 15px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            padding-bottom: 5px;
        }
        .rich-menu-link {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 10px;
            border-radius: 8px;
            color: #e0e0e0;
            text-decoration: none;
            transition: all 0.2s;
            background: rgba(255,255,255,0.02);
            border: 1px solid transparent;
            height: 100%;
        }
        .rich-menu-link:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.1);
            color: #fff;
            transform: translateY(-2px);
        }
        .rich-menu-icon-box {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255, 255, 255, 0.1); /* Gold tint */
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.1rem;
        }
        /* Iconpack line art at glyph size thins to half a pixel and reads as
           faded next to the solid Font Awesome glyphs: draw it larger (wider
           than tall, so wide icons are not shrunk to fit a square), full white,
           and thicken its outline. --nx-icon-weight is in the SVG's own units. */
        .rich-menu-icon-box .nx-icon,
        .menu-strip-icon .nx-icon {
            width: 26px; height: 22px;
            color: #fff;
            --nx-icon-weight: 10;
        }

        /* 5. USER PROFILE STYLES */
        .profile-container {
            display: flex;
            align-items: center;
            gap: 15px;
            padding-left: 20px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            margin-left: 15px;
        }
        .profile-text { text-align: right; line-height: 1.2; }
        .profile-name { display: block; font-weight: 700; color: #fff; font-size: 1rem; }
        .profile-tier { display: block; font-size: 0.65rem; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; color: #ff4d4d; }

        /* Tier colors example */
        .tier-hunter { color: #ffc107; text-shadow: 0 0 10px rgba(255, 193, 7, 0.3); }
        .tier-alpha { color: #ff4d4d; text-shadow: 0 0 10px rgba(255, 77, 77, 0.3); }
        .tier-stalker { color: #bdc3c7; }
        .tier-scavenger { color: #adb5bd; }

        .profile-avatar-img {
            width: 42px; height: 42px;
            border-radius: 10px;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.2s;
        }
        .profile-container:hover .profile-avatar-img {
            transform: scale(1.05);
            border-color: #fff;
        }
        .menu-avatar-img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

            .membership-pill {
        display: inline-flex; align-items: center; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1);
        padding: 0; transition: all 0.3s ease; overflow: hidden; cursor: pointer; background: rgba(0,0,0,0.2);
    }
    .pill-content { padding: 8px 20px; font-weight: 700; display: flex; align-items: center; font-size: 0.9rem; letter-spacing: 1px; }
    .pill-action {
        max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        background: rgba(255,255,255,0.1); height: 100%; display: flex; align-items: center;
    }
    .pill-action span { padding: 8px 15px 8px 10px; font-weight: 600; font-size: 0.8rem; display: block; }
    .membership-pill:hover { box-shadow: 0 0 15px rgba(0,0,0,0.5); }
    .membership-pill:hover .pill-action { max-width: 120px; opacity: 1; }

    .pill-alpha { border-color: #ff4d4d; color: #ff4d4d; background: rgba(255, 77, 77, 0.05); }
    .pill-alpha:hover { box-shadow: 0 0 20px rgba(255, 77, 77, 0.3); border-color: #ff4d4d; }
    .pill-alpha .pill-action:hover { background: #ff4d4d; color: white; }

    .pill-hunter { border-color: #ffc107; color: #ffc107; background: rgba(255, 193, 7, 0.05); }
    .pill-hunter:hover { box-shadow: 0 0 20px rgba(255, 193, 7, 0.3); border-color: #ffc107; }
    .pill-hunter .pill-action:hover { background: #ffc107; color: black; }

    .pill-stalker { border-color: #bdc3c7; color: #bdc3c7; background: rgba(189, 195, 199, 0.05); }
    .pill-stalker:hover { box-shadow: 0 0 20px rgba(189, 195, 199, 0.2); border-color: #bdc3c7; }
    .pill-stalker .pill-action:hover { background: #bdc3c7; color: black; }

    .pill-scavenger { border-color: #6c757d; color: #adb5bd; background: rgba(108, 117, 125, 0.05); }
    .pill-scavenger:hover { box-shadow: 0 0 20px rgba(108, 117, 125, 0.2); border-color: #adb5bd; }
    .pill-scavenger .pill-action:hover { background: #adb5bd; color: black; }

    .membership-drawer {
        max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
        border-bottom: 1px solid transparent;
    }
    .membership-drawer.open { max-height: 2000px; opacity: 1; padding-bottom: 2rem; margin-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
    .close-drawer-btn { cursor: pointer; transition: transform 0.2s; color: #adb5bd; }
    .close-drawer-btn:hover { transform: scale(1.2); color: #fff; }

    .discord-role-container {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 6px;
        transition: all 0.2s ease;
        cursor: default;
    }

    .discord-role-container:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.15);
    }
    .role-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* One linked Steam account in the profile dropdown. */
.steam-account-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.steam-account-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Unlink button — only fades in while the card is hovered. */
.btn-delete-steam {
    opacity: 0.3;
    transition: all 0.2s;
    color: #adb5bd;
}
.steam-account-card:hover .btn-delete-steam {
    opacity: 1;
}
.btn-delete-steam:hover {
    color: #ff4d4d;
    transform: scale(1.1);
}

/* Dark theme for Bootstrap modals. */
.modal-dark .modal-content {
    background-color: #2b2d31;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}
.modal-dark .modal-header, .modal-dark .modal-footer {
    border-color: rgba(255, 255, 255, 0.05);
}
.modal-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.add-steam-card {
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: rgba(255, 255, 255, 0.5);
}

/* The plus icon sits in an avatar-sized slot so the add row lines up with the
   account rows above it. */
.add-steam-icon-slot {
    width: 42px;
    height: 42px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.add-steam-card:hover {
    background: rgba(13, 202, 240, 0.08);
    border-color: rgba(13, 202, 240, 0.5);
    color: #0dcaf0;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(13, 202, 240, 0.15);
}

.add-steam-card:hover .add-steam-icon-slot {
     border-color: #0dcaf0;
     background: rgba(13, 202, 240, 0.1);
}

/* --- EVENT BANNER STYLES --- */
.event-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    color: #e0e0e0;
    background: linear-gradient(100deg, rgba(13, 202, 240, 0.1) 0%, rgba(20, 20, 20, 0.6) 100%);
    border: 1px solid rgba(13, 202, 240, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Accent rail down the left edge. */
.event-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #0dcaf0; /* Asura Cyan */
    box-shadow: 0 0 10px #0dcaf0;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.event-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 202, 240, 0.6);
    background: linear-gradient(100deg, rgba(13, 202, 240, 0.18) 0%, rgba(20, 20, 20, 0.8) 100%);
    box-shadow: 0 8px 25px rgba(13, 202, 240, 0.15);
    color: #fff;
}

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

/* Ikonka */
.event-icon-wrapper {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13, 202, 240, 0.15);
    border-radius: 10px;
    color: #0dcaf0;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    border: 1px solid rgba(13, 202, 240, 0.1);
}

.event-card:hover .event-icon-wrapper {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(13, 202, 240, 0.25);
    color: #fff;
    box-shadow: 0 0 15px rgba(13, 202, 240, 0.4);
}

/* Texty */
.event-info h6 {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    display: flex; align-items: center; gap: 8px;
}

.event-info p {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: #a3a6aa;
    line-height: 1.3;
}
.event-card:hover .event-info p { color: #d1d1d1; }

.event-badge {
    font-size: 0.6rem;
    background: #0dcaf0;
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 0 5px rgba(13,202,240,0.5);
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% { box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(13, 202, 240, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 202, 240, 0); }
}

/* Gear shortcut in the mega menu — the route from "these top links are wrong
   for me" to the page that changes them. Deliberately quiet until hovered. */
.menu-gear-btn {
    position: absolute;
    top: 4px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}
.menu-gear-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    transform: rotate(45deg);
}

/* Splits a menu section into two runs without a second heading — Economy is
   "buy from Nexus" above and "trade with players" below. */
.rich-menu-gap { height: 10px; }

/* --- PIN TO QUICK ACCESS ------------------------------------------------
   A pushpin appears on hover over any menu row. There is no "add" here, only
   "replace": the top bar always holds exactly three links, so the popover has
   to say which one is being given up. */
.rich-menu-row { position: relative; }
.rich-menu-row .rich-menu-link { padding-right: 38px; }

.pin-btn {
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.rich-menu-row:hover .pin-btn,
.pin-btn.is-open { opacity: 1; pointer-events: auto; }
.pin-btn:hover, .pin-btn.is-open {
    background: rgba(235, 97, 5, 0.22);
    color: var(--nexus-orange, #eb6105);
}
.pin-btn.is-pinned { opacity: 1; pointer-events: auto; color: var(--nexus-orange, #eb6105); }

#pinPopover {
    position: fixed;
    z-index: 12050;
    width: 260px;
    padding: 10px;
    border-radius: 12px;
    background: #202225;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}
#pinPopover[hidden] { display: none; }
.pin-pop-title {
    color: #8e9297; font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.8px; text-transform: uppercase;
    padding: 2px 6px 8px; margin: 0;
}
.pin-pop-title b { color: #fff; }
.pin-slot {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: #ddd; font-size: 0.82rem; text-align: left;
    cursor: pointer;
    transition: all .15s ease;
}
.pin-slot:hover:not(:disabled) {
    background: rgba(235, 97, 5, 0.16);
    border-color: rgba(235, 97, 5, 0.45);
    color: #fff;
}
.pin-slot:disabled { opacity: .45; cursor: default; }
.pin-slot-num {
    flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(235, 97, 5, 0.15); border: 1px solid rgba(235, 97, 5, 0.4);
    color: var(--nexus-orange, #eb6105); font-size: 0.66rem; font-weight: 800;
}
.pin-slot-body { min-width: 0; }
.pin-slot-now { display: block; color: #8e9297; font-size: 0.68rem; }
.pin-slot-name {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- MENU FOOTER STRIP: three links + Discord ----------------------------
   The pages libs/navigation.py moves out of the rows on desktop (Collectors,
   Leaderboards, Groups), side by side as compact cards, then the Discord
   invite. Quieter than the rows above on purpose: they are a way out of the
   menu, not its content. */
.menu-strip-link {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.menu-strip-link:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.menu-strip-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.menu-strip-info { flex: 1; min-width: 0; }
.menu-strip-info h6 { margin: 0; font-weight: 700; font-size: 0.9rem; color: #fff; }
.menu-strip-info p { margin: 2px 0 0; font-size: 0.75rem; color: #8e9297; line-height: 1.3; }
.menu-strip-cta { color: #8e9297; transition: transform 0.3s ease, color 0.3s ease; }
.menu-strip-link:hover .menu-strip-cta { transform: translateX(4px); color: #fff; }

/* --- CLAN SERVER TILE ----------------------------------------------------
   The big tile standing in for the Clan Server row in Play, in the hub's ember accent
   (#ff6b35) so it reads as that place and not as another menu row. */
.menu-clan-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 18px 16px;
    min-height: 168px;
    border-radius: 12px;
    text-decoration: none;
    color: #e0e0e0;
    background: linear-gradient(150deg, rgba(255, 107, 53, 0.22) 0%, rgba(255, 107, 53, 0.07) 55%, rgba(20, 20, 20, 0.6) 100%);
    border: 1px solid rgba(255, 107, 53, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.menu-clan-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 107, 53, 0.7);
    box-shadow: 0 10px 28px rgba(255, 107, 53, 0.18);
    color: #fff;
}
.menu-clan-glow {
    position: absolute;
    right: -30px; top: -30px;
    width: 170px; height: 170px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.25) 0%, rgba(255, 107, 53, 0) 70%);
    pointer-events: none;
}
.menu-clan-art {
    position: absolute;
    right: -6px; bottom: -14px;
    font-size: 6.5rem;
    color: rgba(255, 107, 53, 0.1);
    transform: rotate(-12deg);
    pointer-events: none;
    transition: transform 0.3s ease;
}
.menu-clan-tile:hover .menu-clan-art { transform: rotate(-4deg) scale(1.05); }
.menu-clan-icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ff6b35 0%, #e8431b 100%);
    border-radius: 10px;
    color: #1a0b05;
    font-size: 1.2rem;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.4);
    margin-bottom: 12px;
    position: relative;
}
.menu-clan-tile h6 {
    margin: 0;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    position: relative;
}
.menu-clan-tile p {
    margin: 4px 0 12px;
    font-size: 0.8rem;
    color: #c9b3a8;
    line-height: 1.4;
    position: relative;
}
.menu-clan-cta {
    margin-top: auto;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ff8a5c;
    position: relative;
}
.menu-clan-cta i { margin-left: 4px; transition: transform 0.3s ease; }
.menu-clan-tile:hover .menu-clan-cta i { transform: translateX(4px); }

/* Discord blurple, deliberately smaller than the strip links: it is a standing link,
   not this week's suggestion. */
.menu-discord-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #c9c6ff;
    background: rgba(88, 101, 242, 0.14);
    border: 1px solid rgba(88, 101, 242, 0.40);
    transition: all 0.25s ease;
}
.menu-discord-btn i { font-size: 1.25rem; color: #8b93f8; transition: color 0.25s ease; }
.menu-discord-btn:hover {
    background: #5865F2;
    border-color: #5865F2;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(88, 101, 242, 0.35);
}
.menu-discord-btn:hover i { color: #fff; }

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #313131;
}
    /* The item-card system (.skin-card, .card-header-custom, .price-row, the
       ribbons, the gallery cross-fade, the palette) now lives in
       static/css/nexus-ui.css section 9 — four other templates were
       redeclaring parts of it. */

    /* --- MOBILE MENU --- */
@media (max-width: 991.98px) {
    #mobileMenuWrapper {
        background: #0f1012 !important; /* Opaque: the drawer covers the page, and a
                                           translucent one showed the content through. */
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 10000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-menu-content {
        background: #0f1012 !important;
        padding: 20px;
        height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px;
        color: #e0e0e0;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    .mobile-nav-link i { width: 20px; text-align: center; color: #3498db; }
    .mobile-category-title { color: #6c757d; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 10px 15px; font-weight: 800; }
    .mobile-profile-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 15px;
            border-radius: 50px;
            font-weight: 800;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 5px;
            border: 1px solid transparent;
        }

        .badge-hunter {
            background: rgba(255, 193, 7, 0.05);
            color: #ffc107;
            border-color: #ffc107;
            box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
        }

        .badge-alpha {
            background: rgba(255, 77, 77, 0.05);
            color: #ff4d4d;
            border-color: #ff4d4d;
            box-shadow: 0 0 10px rgba(255, 77, 77, 0.3);
        }

        .badge-stalker {
            background: rgba(189, 195, 199, 0.05);
            color: #bdc3c7;
            border-color: #bdc3c7;
        }
}

   .modal { z-index: 11000 !important; }
   .modal-backdrop { z-index: 10990 !important; }
   .swal2-container { z-index: 12000 !important; }

   .select2-container--default .select2-selection--single .select2-selection__rendered {margin-top: 8px;}


   /* --- APEX PROMO CARD --- */
    .apex-promo-card {
        background-color: #1a1b1e;
        border: 1px solid var(--nexus-orange);
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        height: 100%;
        min-height: 280px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
    }
    .apex-promo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(235, 97, 5, 0.25);
    }
    .apex-promo-bg {
        position: absolute; top: 0; right: 0; bottom: 0; left: 0;
        background-image: url("../src/img/account_membership.webp");
        background-size: cover;
        background-position: center right;
        opacity: 0.7;
    }
    .apex-promo-overlay {
        position: absolute; top: 0; right: 0; bottom: 0; left: 0;
        background: linear-gradient(90deg, rgba(26, 27, 30, 0.8) 15%, rgba(26, 27, 30, 0) 80%);
    }
    .apex-promo-content {
        position: relative;
        z-index: 2;
        padding: 30px;
        max-width: 65%;
    }
    .btn-apex {
        background: transparent;
        color: var(--nexus-orange);
        border: 1px solid var(--nexus-orange);
        font-weight: 800;
        text-transform: uppercase;
        padding: 10px 24px;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
        letter-spacing: 0.5px;
    }
    .btn-apex:hover { background: var(--nexus-orange); color: #fff; border-color: transparent; }

    /* Special / "epic" skin cards — azure frame and glow to set them apart
       from the regular collection. */
    .epic_card {
        border: 1px solid #00d9ff !important;
        box-shadow: 0 0 18px rgba(0, 217, 255, 0.45), inset 0 0 14px rgba(0, 217, 255, 0.12) !important;
    }
    .epic_card:hover {
        box-shadow: 0 0 30px rgba(0, 217, 255, 0.7), inset 0 0 18px rgba(0, 217, 255, 0.18) !important;
    }