@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

:root {
    /* ---- Redesign "minimalista overpowered" -------------------------------
       Neutral near-black scale (panels, lines, text). The token NAMES are kept
       so every component that already references them inherits the new look.
       Accent stays CS2 orange; premium stays pink; rarity colours untouched. */
    --lte-primary-bg: #0a0a0b;   /* page background */
    --lte-secondary-bg: #0f0f11; /* navbar / panels / modal headers */
    --lte-default-bg: rgba(255, 255, 255, 0.02);
    --lte-small-default-bg: rgba(255, 255, 255, 0.02);

    /* New neutral helpers used by the modern components below. */
    --lte-panel: #0f0f11;
    --lte-panel-2: #141417;
    --lte-line: #1c1c20;
    --lte-line-2: #2a2a30;
    --lte-txt: #ededf0;
    --lte-muted: #8a8a93;
    --lte-faint: #5a5a62;

    /* Motion easing shared across the redesign. */
    --ease: cubic-bezier(.2, .85, .25, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --lte-accent: #FFAC41;
    --lte-accent-rgb: 255, 172, 65;

    --lte-premium: #FF1E56;
    --lte-premium-rgb: 255, 30, 86;

    --lte-grey: #c8c8cf;
    --lte-white: #ededf0;

    --lte-side-bg: #141417;
    --lte-side-border: #1c1c20;

    --lte-side-workshop-bg: #14141b;
    --lte-side-workshop-border: #2a2a3a;

    --lte-side-workshop-add-bg: #1a1a14;
    --lte-side-workshop-add-border: #5a5a32;

    --lte-side-workshop-limit-bg: #1a1212;
    --lte-side-workshop-limit-border: #5a3232;

    --lte-active-side-workshop-bg: #1f1f2a;
    --lte-active-side-workshop-border: #3a3a53;
    --lte-active-side-bg: #1a1a1e;
    --lte-active-side-border: #2a2a30;

    --lte-common: 129, 140, 154;
    --lte-uncommon: 94,152,217;
    --lte-rare: 75,105,205;
    --lte-mythical: 136,71,255;
    --lte-legendary: 211,44,230;
    --lte-ancient: 235,75,75;
    --lte-gold: 202,171,5;
    --lte-contraband: 228,174,57;
}

.fill {
    min-height: 50vh;
    height: 100%;
}

.text-premium {
    color: var(--lte-premium);
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(125,125,125,0.1);
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(125,125,125,0.3);
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: var(--lte-line-2);
    outline: none;
    opacity: 0.9;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-bottom: 10px;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background-color: var(--lte-accent);
    box-shadow: 0 0 0 4px rgba(var(--lte-accent-rgb), 0.18), 0 2px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.slider::-webkit-slider-thumb:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 6px rgba(var(--lte-accent-rgb), 0.22), 0 2px 8px rgba(0, 0, 0, 0.55);
}

.slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background-color: var(--lte-accent);
    box-shadow: 0 0 0 4px rgba(var(--lte-accent-rgb), 0.18);
    cursor: pointer;
}

.form-control {
    background-color: var(--lte-panel-2) !important;
}

.bg-color {
    background-color: var(--lte-primary-bg);
}

.bg-nav {
    background-color: var(--lte-secondary-bg) !important;
}

.btn-outline-warning {
    color: var(--lte-accent) !important;
    border-color: var(--lte-accent) !important;
}

/* ---- Sidebar nav items (was a 3D "pushable" button; now a flat modern pill).
   Class names kept because the JS toggles .active-side on .front and the markup
   still nests .shadow/.edge/.front. The two backing layers are neutralised so
   only the flat .front shows; motion.js adds a sliding marker behind them. */
.pushable {
    margin-bottom: 0.25rem;
    width: 100%;
    position: relative;
    border: none !important;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 200ms var(--ease);
}

.shadow,
.edge {
    display: none;
}

.front {
    display: block;
    position: relative;
    padding: 9px 4px;
    border-radius: 10px;
    font-size: .92rem;
    color: var(--lte-muted);
    background: transparent;
    border: 1px solid transparent;
    transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.front p { font-weight: 500; }
.front img,
.front i { transition: transform .25s var(--ease); }

.limit-btn {
    background: var(--lte-side-workshop-limit-bg);
    border: 1px solid var(--lte-side-workshop-limit-border);
    color: #e08a8a;
}

.workshop-btn {
    background: var(--lte-side-workshop-bg);
    border: 1px solid var(--lte-side-workshop-border);
    color: var(--lte-txt);
}

.workshop-add-btn {
    background: var(--lte-side-workshop-add-bg);
    border: 1px solid var(--lte-side-workshop-add-border);
    color: #d6cf8a;
}

.pushable:hover .front {
    color: var(--lte-txt);
    background: var(--lte-panel-2);
    border-color: var(--lte-line);
}
.pushable:hover .front img,
.pushable:hover .front i { transform: translateX(2px) scale(1.08); }

.pushable:active .front {
    transform: translateY(1px);
}

.pushable:focus:not(:focus-visible) {
    outline: none;
}

.active-side {
    color: #fff !important;
    background-color: var(--lte-active-side-bg) !important;
    border: 1px solid var(--lte-line-2) !important;
    box-shadow: inset 2px 0 0 var(--lte-accent);
}

.border-nav {
    border: 1px solid var(--lte-secondary-bg) !important;
}

.btn-outline-premium {
    --bs-btn-color: var(--lte-premium) !important;
    --bs-btn-border-color: var(--lte-premium) !important;
    --bs-btn-hover-color: #000 !important;
    --bs-btn-hover-bg: var(--lte-premium) !important;
    --bs-btn-hover-border-color: var(--lte-premium) !important;
    --bs-btn-focus-shadow-rgb: 255,193,7 !important;
    --bs-btn-active-color: #000 !important;
    --bs-btn-active-bg: var(--lte-premium) !important;
    --bs-btn-active-border-color: var(--lte-premium) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--lte-premium) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--lte-premium) !important;
    --bs-gradient: none !important;
}

.btn-outline-accent {
    --bs-btn-color: var(--lte-accent) !important;
    --bs-btn-border-color: var(--lte-accent) !important;
    --bs-btn-hover-color: #000 !important;
    --bs-btn-hover-bg: var(--lte-accent) !important;
    --bs-btn-hover-border-color: var(--lte-accent) !important;
    --bs-btn-focus-shadow-rgb: 255,193,7 !important;
    --bs-btn-active-color: #000 !important;
    --bs-btn-active-bg: var(--lte-accent) !important;
    --bs-btn-active-border-color: var(--lte-accent) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--lte-accent) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--lte-accent) !important;
    --bs-gradient: none !important;
}

.btn-outline-accent-card {
    --bs-btn-bg: rgba(var(--lte-accent-rgb), 0.05) !important;
    --bs-btn-color: var(--lte-accent) !important;
    --bs-btn-border-color: transparent !important;
    --bs-btn-hover-color: #000 !important;
    --bs-btn-hover-bg: var(--lte-accent) !important;
    --bs-btn-hover-border-color: var(--lte-accent) !important;
    --bs-btn-focus-shadow-rgb: 255,193,7 !important;
    --bs-btn-active-color: #000 !important;
    --bs-btn-active-bg: var(--lte-accent) !important;
    --bs-btn-active-border-color: var(--lte-accent) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--lte-accent) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--lte-accent) !important;
    --bs-gradient: none !important;
    border-radius: 0px !important;
}

.btn-outline-premium-card {
    --bs-btn-bg: rgba(var(--lte-premium-rgb), 0.05) !important;
    --bs-btn-color: var(--lte-premium) !important;
    --bs-btn-border-color: transparent !important;
    --bs-btn-hover-color: #000 !important;
    --bs-btn-hover-bg: var(--lte-premium) !important;
    --bs-btn-hover-border-color: var(--lte-premium) !important;
    --bs-btn-focus-shadow-rgb: 255,193,7 !important;
    --bs-btn-active-color: #000 !important;
    --bs-btn-active-bg: var(--lte-premium) !important;
    --bs-btn-active-border-color: var(--lte-premium) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--lte-premium) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--lte-premium) !important;
    --bs-gradient: none !important;
    border-radius: 0px !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--lte-grey) !important;
    --bs-btn-border-color: var(--lte-grey) !important;
    --bs-btn-hover-color: #000 !important;
    --bs-btn-hover-bg: var(--lte-grey) !important;
    --bs-btn-hover-border-color: var(--lte-grey) !important;
    --bs-btn-focus-shadow-rgb: 255,193,7 !important;
    --bs-btn-active-color: #000 !important;
    --bs-btn-active-bg: var(--lte-grey) !important;
    --bs-btn-active-border-color: var(--lte-grey) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--lte-grey) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--lte-grey) !important;
    --bs-gradient: none !important;
}

.btn-accent {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--lte-accent) !important;
    --bs-btn-border-color: var(--lte-accent) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--lte-accent) !important;
    --bs-btn-hover-border-color: var(--lte-accent) !important;
    --bs-btn-focus-shadow-rgb: 49,132,253 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--lte-accent) !important;
    --bs-btn-active-border-color: var(--lte-accent) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--lte-accent) !important;
    --bs-btn-disabled-border-color: var(--lte-accent) !important;
}

/* Modern button polish: rounder corners, weightier label, smooth transitions.
   Kept low-key (no global hover-transform) so card-internal buttons, the
   team selector and the wear-tier segments keep their own behaviour. */
.btn {
    --bs-btn-border-radius: 10px;
    font-weight: 600;
    transition: background-color .2s var(--ease), border-color .2s var(--ease),
                color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}

/* .btn-primary {
    z-index: 10;
    position: relative;
    background-color: transparent !important;
    border: transparent !important;
    transform-style: preserve-3d;
}

.btn-primary::after {
    z-index: -1;
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width:  100%;
    height: 100%;
    background-color: #242424;
    border-radius: 4px !important;
}

.btn-primary::before {
    z-index: -1;
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    margin-top: 4px;
    width:  100%;
    height: 100%;
    background-color: blue;
    border-radius: 4px !important;
    transform: translateZ(-1px);
}

.btn-primary::before {
    background-color: #ddd;
}

.btn-primary:hover::after {
    background-color: #292929 !important;
}

.btn-primary:active::after {
    transform: translateY(3px);
    background-color: #323232 !important;
} */

.text-accent {
    color: var(--lte-accent) !important;
}

.locked-side {
    background-color: #181818 !important;
    border: 1px solid var(--lte-premium) !important;
    color: var(--lte-premium) !important;
    font-weight: bold;
}

.locked-side:hover {
    background-color: #181818 !important;
}

.locked-side > img {
    filter: invert(28%) sepia(50%) hue-rotate(295deg) saturate(100) !important;
}

.weapon-img {
    object-fit: contain;
    position: relative;
    width: 70%;
}

.workshop-weapon-img {
    object-fit: contain;
    position: relative;
    width: 90%;
}

.weapon-skin-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-common {
    border-color: rgb(var(--lte-common) )!important;
    color: rgb(var(--lte-common));
    background: linear-gradient(135deg, rgba(var(--lte-common),0.03), var(--lte-default-bg), rgba(var(--lte-common), 0.15));
}

.card-uncommon {
    border-color: rgb(var(--lte-uncommon)) !important;
    color: rgb(var(--lte-uncommon));
    background: linear-gradient(135deg, rgba(var(--lte-uncommon),0.03), var(--lte-default-bg), rgba(var(--lte-uncommon), 0.15));
}

.card-rare {
    border-color: rgb(var(--lte-rare)) !important;
    color: rgb(var(--lte-rare));
    background: linear-gradient(135deg, rgba(var(--lte-rare),0.05), var(--lte-default-bg), rgba(var(--lte-rare), 0.23));
}

.card-mythical {
    border-color: rgb(var(--lte-mythical))!important;
    color: rgb(var(--lte-mythical));
    background: linear-gradient(135deg, rgba(var(--lte-mythical),0.05), var(--lte-default-bg), rgba(var(--lte-mythical), 0.2));
}

.card-legendary {
    border-color: rgb(var(--lte-legendary)) !important;
    color: rgb(var(--lte-legendary));
    background: linear-gradient(135deg, rgba(var(--lte-legendary),0.05), var(--lte-default-bg), rgba(var(--lte-legendary), 0.3));
}

.card-ancient {
    border-color: rgb(var(--lte-ancient)) !important;
    color: rgb(var(--lte-ancient));
    background: linear-gradient(135deg, rgba(var(--lte-ancient),0.02), var(--lte-default-bg), rgba(var(--lte-ancient), 0.15));
}

.card-gold {
    border-color: rgb(var(--lte-gold)) !important;
    color: rgb(var(--lte-gold));
    background: linear-gradient(135deg, rgba(var(--lte-gold),0.02), var(--lte-default-bg), rgba(var(--lte-gold), 0.15));
}

.card-contraband {
    border-color: rgb(var(--lte-contraband)) !important;
    color: rgb(var(--lte-contraband));
    background: linear-gradient(135deg, rgba(var(--lte-contraband),0.02), var(--lte-default-bg), rgba(var(--lte-contraband), 0.15));
}



.small-card-common {
    border-color: rgb(var(--lte-common) )!important;
    color: rgb(var(--lte-common));
    background: linear-gradient(135deg, rgba(var(--lte-common),0.03), rgba(var(--lte-common), 0.1), rgba(var(--lte-common), 0.15));
}

.small-card-uncommon {
    border-color: rgb(var(--lte-uncommon)) !important;
    color: rgb(var(--lte-uncommon));
    background: linear-gradient(135deg, rgba(var(--lte-uncommon),0.03), rgba(var(--lte-uncommon),0.1), rgba(var(--lte-uncommon), 0.15));
}

.small-card-rare {
    border-color: rgb(var(--lte-rare)) !important;
    color: rgb(var(--lte-rare));
    background: linear-gradient(135deg, rgba(var(--lte-rare),0.05), rgba(var(--lte-rare),0.1), rgba(var(--lte-rare), 0.23));
}

.small-card-mythical {
    border-color: rgb(var(--lte-mythical))!important;
    color: rgb(var(--lte-mythical));
    background: linear-gradient(135deg, rgba(var(--lte-mythical),0.05), rgba(var(--lte-mythical),0.1), rgba(var(--lte-mythical), 0.2));
}

.small-card-legendary {
    border-color: rgb(var(--lte-legendary)) !important;
    color: rgb(var(--lte-legendary));
    background: linear-gradient(135deg, rgba(var(--lte-legendary),0.05), rgba(var(--lte-legendary),0.15), rgba(var(--lte-legendary), 0.3));
}

.small-card-ancient {
    border-color: rgb(var(--lte-ancient)) !important;
    color: rgb(var(--lte-ancient));
    background: linear-gradient(135deg, rgba(var(--lte-ancient),0.02), rgba(var(--lte-ancient),0.1), rgba(var(--lte-ancient), 0.15));
}

.small-card-gold {
    border-color: rgb(var(--lte-gold)) !important;
    color: rgb(var(--lte-gold));
    background: linear-gradient(135deg, rgba(var(--lte-gold),0.02), rgba(var(--lte-gold),0.1), rgba(var(--lte-gold), 0.15));
}

.small-card-contraband {
    border-color: rgb(var(--lte-contraband)) !important;
    color: rgb(var(--lte-contraband));
    background: linear-gradient(135deg, rgba(var(--lte-contraband),0.02), rgba(var(--lte-contraband),0.01), rgba(var(--lte-contraband), 0.15));
}

.skin-dot {
    background: currentColor;
    border-radius: 999px;
    width: 5px;
    height: 5px;
}

.contrast-reset {
    backdrop-filter: none !important;
}

.weapon_card {
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
}

.workshop-weapon-card {
    overflow: hidden;
    position: relative;
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1), .3s;
    transform-style: preserve-3d;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.weapon-card {
    overflow: hidden;
    position: relative;
    border: 1px solid var(--lte-line);
    border-radius: 14px !important;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease),
                border-color .3s var(--ease), background-color .3s var(--ease);
    transform-style: preserve-3d;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* Shine sweep that crosses the card on hover (the "movement"). */
.weapon-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
    transform: skewX(-18deg);
    transition: left .7s var(--ease);
    pointer-events: none;
    z-index: 2;
}
.weapon-card:hover::after {
    left: 130%;
}

.weapon-card:hover {
    transform: translateY(-5px);
    /* currentColor = the rarity colour set by .card-* — a rarity-tinted glow. */
    border-color: currentColor;
    box-shadow: 0 20px 42px -20px currentColor, 0 8px 22px rgba(0, 0, 0, .55);
}

.show-hover, .img-show-hover {
    transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.weapon-card:hover > .show-hover {
    transform: translateY(0%) !important;
}


.weapon-card:hover > a > .img-show-hover {
    transform: translateY(0%) !important;
    transform: scale(1) !important;
}

.weapon-card:hover > a > .show-hover {
    transform: translateY(0%) !important;
}

.active-card {
    margin: -2px;
    outline: 2px solid var(--lte-accent) !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 4px rgba(var(--lte-accent-rgb), 0.18), 0 8px 22px rgba(0, 0, 0, .5);
}

.active-card > .settings {
    visibility: visible;
    opacity: 1;
}

.profile-bg {
    color: #fff;
    background: #242424;
    border: 1px solid #363636;
}

li {
    list-style-type: none;
}

.parent-weapon-card {
    position: relative;
}

.settings {
    height: 48px;
    width: 48px;
    position: absolute;
    right: 0;
    margin: 8px;
    visibility: hidden;
    opacity: 0;
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    border: none;
}

.revert {
    height: 48px;
    width: 48px;
    position: absolute;
    right: 0;
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    border: none;
    background-color: transparent;
}

.loading-card {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    backdrop-filter: blur(15px);
}

.locked-card {
    position: absolute;
    visibility: hidden;
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    backdrop-filter: blur(15px);
    color: var(--lte-premium) !important;
}


.settings:hover {
    background-color: rgb(179, 179, 179) !important;
}

.bg-opacity {
    background-color: rgba(0,0,0,0.3);
}

.text-roboto {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.bg-option {
    aspect-ratio : 1 / 1;
    width: 100%;
    object-fit: cover;
    border-radius: 0.7rem;
}

.bg-option-active {
    outline: 3px solid salmon;
}

.form-control-dark {
    display: block !important;
    width: 100% !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--lte-white) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--lte-active-side-bg) !important;
    background-clip: padding-box !important;
    border: var(--bs-border-width) solid var(--lte-active-side-border) !important;
    border-radius: var(--bs-border-radius) !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
}

.locked-bg-url {
    color: var(--lte-premium) !important;
    border: var(--bs-border-width) solid var(--lte-premium) !important;
    text-align: center;
}

.px-6 {
    padding-inline: 5rem;
}

.profile-banner {
    background-size: cover;
    width: 100%;
    height: 17rem;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.uploadBtn {
    transform: translateY(-20%);
    visibility: hidden;
    opacity: 0;
    transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.profile-banner:hover {
    box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .3);
}

.profile-banner:hover > .uploadBtn {
    transform: translateY(0%);
    visibility: visible;
    opacity: 1;
}

.pt-6 {
    padding-top: 5rem;
}
/* ---- Stickers ---- */
/* ====================================================================
   Float / pattern modal polish
   ==================================================================== */
#patternFloat .modal-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
#patternFloat .modal-header {
    padding: 14px 20px;
}
#patternFloat .modal-body {
    padding: 20px 24px 24px;
}
#patternFloat .modal-footer {
    padding: 14px;
}
#modalImg {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
    margin-bottom: 4px;
}
#patternFloat .modal-body > h5 {
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 16px;
}
#patternFloat .form-outline {
    width: 100%;
    max-width: 300px;
    text-align: center;
}
#patternFloat .form-label {
    display: block;
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a8a8a;
    font-weight: 600;
    margin-bottom: 7px !important;
}
#patternFloat #float,
#patternFloat #pattern {
    text-align: center;
    font-weight: 600;
    background-color: #0c0c0c !important;
    border: 1px solid #2a2a2a;
    border-radius: 9px;
    color: #eee;
    padding: .5rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#patternFloat #float:focus,
#patternFloat #pattern:focus {
    border-color: var(--lte-accent);
    box-shadow: 0 0 0 .18rem rgba(var(--lte-accent-rgb), .2);
}
#floatText {
    font-size: .8rem;
    font-weight: 600;
    color: var(--lte-accent);
    margin-top: 8px !important;
}
/* Pattern + StatTrak on one row */
#patternFloat .modal-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 320px;
}
#patternFloat .modal-row .pattern-field {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    text-align: center;
}
#patternFloat .modal-row .stattrak-field {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
/* Wear-tier segmented buttons (FN / MW / FT / WW / BS) */
#patternFloat .btn-group {
    display: flex;
    width: 100%;
    max-width: 320px;
    gap: 4px;
}
.floatButton.btn-primary {
    flex: 1;
    background-color: #181818 !important;
    border: 1px solid #2a2a2a !important;
    color: #aaa !important;
    font-weight: 600;
    font-size: .82rem;
    padding: .42rem 0;
    border-radius: 8px !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.floatButton.btn-primary:hover {
    background-color: #242424 !important;
    color: #fff !important;
}
.floatButton.btn-primary.active {
    background-color: var(--lte-accent) !important;
    border-color: var(--lte-accent) !important;
    color: #1a1a1a !important;
}
/* StatTrak switch */
#patternFloat .form-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0;
}
#patternFloat .form-switch .form-check-input {
    float: none;
    margin: 0;
    width: 2.4em;
    height: 1.2em;
    cursor: pointer;
    background-color: #2a2a2a;
    border-color: #3a3a3a;
}
#patternFloat .form-switch .form-check-input:checked {
    background-color: var(--lte-accent);
    border-color: var(--lte-accent);
}
#patternFloat .form-switch .form-check-input:focus {
    border-color: var(--lte-accent);
    box-shadow: 0 0 0 .18rem rgba(var(--lte-accent-rgb), .2);
}
#patternFloat .form-switch .form-check-label {
    font-weight: 600;
    color: #ddd;
}
#modalButton {
    min-width: 170px;
    font-weight: 600;
    border-radius: 9px;
    padding: .5rem 1.5rem;
}
/* Sticker section header (title + clear-all) */
.sticker-section-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 4px;
}
.sticker-section-head .form-label {
    margin: 0 !important;
}
.sticker-clear-all {
    background: none;
    border: none;
    color: #c0504d;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease;
}
.sticker-clear-all:hover {
    color: #e06b67;
    background-color: rgba(224, 107, 103, 0.1);
}

.sticker-slot {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sticker-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border: 1px dashed #3a3a3a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.025);
    transition: border-color .15s ease, background-color .15s ease;
}
.sticker-thumb:hover {
    border-color: var(--lte-accent);
    background-color: rgba(var(--lte-accent-rgb), 0.08);
}
.sticker-img {
    max-width: 62px;
    max-height: 62px;
    display: none;
}
.sticker-plus {
    color: #5a5a5a;
    font-size: 1.3rem;
    transition: color .15s ease;
}
.sticker-thumb:hover .sticker-plus {
    color: var(--lte-accent);
}
.sticker-slot.filled .sticker-thumb {
    border-style: solid;
    border-color: #3a3a3a;
    background-color: rgba(255, 255, 255, 0.04);
}
.sticker-slot.filled .sticker-thumb:hover {
    border-color: var(--lte-accent);
}
/* Corner badges (apply-to-all, clear) shown on filled slots. */
.sticker-apply-all,
.sticker-clear-badge {
    position: absolute;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid var(--lte-primary-bg);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: transform .1s ease, background-color .15s ease;
}
.sticker-apply-all {
    top: -8px;
    left: -8px;
    background-color: var(--lte-accent);
    color: #1a1a1a;
}
.sticker-apply-all:hover {
    transform: scale(1.14);
    background-color: #ffbe6b;
}
.sticker-clear-badge {
    top: -8px;
    right: -8px;
    background-color: #d24b4b;
    color: #fff;
}
.sticker-clear-badge:hover {
    transform: scale(1.14);
    background-color: #e35e5e;
}
.sticker-wear-wrap {
    width: 100%;
    margin-top: 7px;
    text-align: center;
}
.sticker-wear {
    width: 100%;
    height: 4px;
    margin-bottom: 2px;
}
.sticker-wear-label {
    color: #888;
    font-size: .66rem;
    font-weight: 600;
}
/* Placement editor button is kept in the markup but hidden in the UI for now. */
.sticker-pos {
    display: none !important;
}
/* Big sticker picker overlay (lives inside #patternFloat) */
.sticker-picker-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1065; /* above the skin modal (1055) */
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sticker-picker-overlay.show {
    display: flex;
}
.sticker-picker-dialog {
    width: min(1480px, 97vw);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.sticker-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}
.sticker-picker-body {
    padding: 16px;
    overflow-y: auto;
}
.sticker-filter-bar .form-select,
.sticker-filter-bar .form-control {
    min-width: 130px;
}

/* ---- Free-text search field ----
   Set apart from the dropdown filters: full-width row, leading magnifier icon
   and an accent border so it clearly reads as "type to search", not a combobox. */
.sticker-search-wrap {
    position: relative;
}
.sticker-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lte-accent);
    font-size: .95rem;
    pointer-events: none;
}
.sticker-search-input.form-control {
    padding-left: 40px;
    font-size: 1rem;
    font-weight: 500;
    background-color: rgba(var(--lte-accent-rgb), 0.06);
    border: 1px solid rgba(var(--lte-accent-rgb), 0.55);
}
.sticker-search-input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}
.sticker-search-input.form-control:focus {
    background-color: rgba(var(--lte-accent-rgb), 0.10);
    border-color: var(--lte-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--lte-accent-rgb), 0.22);
}

/* Custom type-ahead dropdown for the collection / org / player filters. The
   parent col is .sticker-ta (position:relative); the menu is built in JS and
   only ever holds the matched suggestions (capped), so it stays light. */
.sticker-ta {
    position: relative;
}
/* Chevron caret marks these inputs as dropdown comboboxes (vs the search box). */
.sticker-ta::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.4);
    pointer-events: none;
}
/* Slightly recessed look so the comboboxes group together, distinct from search. */
.sticker-combo.form-control {
    padding-right: 26px;
    background-color: rgba(255, 255, 255, 0.04);
}
.sticker-combo.form-control:focus {
    background-color: rgba(255, 255, 255, 0.07);
}
.sticker-typeahead-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin-top: 2px;
    padding: 4px;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    background-color: #15181c;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.sticker-typeahead-menu.show {
    display: block;
}
.sticker-typeahead-menu li {
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .85rem;
    color: #d7d7d7;
}
.sticker-typeahead-menu li:hover,
.sticker-typeahead-menu li.active {
    background-color: rgba(255, 255, 255, 0.12);
}
.sticker-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
}
.sticker-result {
    cursor: pointer;
    text-align: center;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0.03);
    transition: background-color .15s ease, transform .1s ease;
}
.sticker-result:hover {
    background-color: rgba(255, 255, 255, 0.10);
    transform: translateY(-2px);
}
.sticker-result-img {
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    /* faint rarity-coloured glow behind the sticker */
    background:
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rarity, #444) 28%, transparent), transparent 70%);
}
.sticker-result-img img {
    max-width: 92px;
    max-height: 92px;
    object-fit: contain;
}
.sticker-result small {
    display: block;
    margin-top: 4px;
    font-size: .68rem;
    line-height: 1.1;
    color: #cfcfcf;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Loadout overview ---- */
.loadout-card {
    background-color: rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    transition: background-color .15s ease, transform .1s ease;
}
.loadout-card:hover {
    background-color: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
}
.loadout-clickable {
    cursor: pointer;
}
.loadout-img {
    width: 100%;
    height: 90px;
    object-fit: contain;
}
.loadout-gear {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .72rem;
    transition: transform .1s ease;
}
.loadout-gear:hover {
    transform: scale(1.1);
}

/* Any element wired to a click action shows a pointer cursor so users know it's
   interactive (skin/agent/music cards equip on click, loadout cards, etc.). */
[onclick] {
    cursor: pointer;
}

/* ============================================================
   Mobile responsiveness — ADDITIVE ONLY.
   Every rule below is scoped to small viewports, so layouts at
   >= 576px (tablet/desktop) are completely unaffected. The grid,
   sidebar/scroller toggle and modals are already responsive via
   Bootstrap utility classes; these rules only patch the gaps that
   show up on phones.
   ============================================================ */
@media (max-width: 575.98px) {
    /* The footer is position:fixed and its credit line wraps to 2-3
       lines on a narrow screen, growing tall enough to cover the last
       row of cards. Give the scrolling content room to clear it. */
    #skinsContainer {
        padding-bottom: 6rem;
    }

    /* Sticker picker: fit more stickers per row on a phone so the user
       isn't scrolling through 2-wide columns. (Desktop keeps 112px.) */
    .sticker-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
        gap: 8px;
    }
    .sticker-result-img {
        height: 76px;
    }
    .sticker-result-img img {
        max-width: 72px;
        max-height: 72px;
    }

    /* Keep the picker filter selects from forcing horizontal overflow
       inside the narrow picker dialog. */
    .sticker-filter-bar .form-select,
    .sticker-filter-bar .form-control {
        min-width: 0;
    }
}

/* ---- Card size cycler ---- */
/* The cardSizeBtn cycles a class on #skinsContainer that overrides how many
   cards fit per row. Only takes effect on >= md screens, so the phone layout
   keeps its responsive defaults. Covers both category grids (cards are direct
   children of #skinsContainer) and the loadout grid (cards live in #loadoutGrid).
   The :not(.col-12) guard leaves the loadout header/wrapper columns alone. */
@media (min-width: 768px) {
    #skinsContainer.cards-lg > [class*="col-"]:not(.col-12),
    #skinsContainer.cards-lg #loadoutGrid > [class*="col-"] {
        flex: 0 0 auto;
        width: 33.3333%;
        max-width: none;
    }
    #skinsContainer.cards-md > [class*="col-"]:not(.col-12),
    #skinsContainer.cards-md #loadoutGrid > [class*="col-"] {
        flex: 0 0 auto;
        width: 25%;
        max-width: none;
    }
    #skinsContainer.cards-sm > [class*="col-"]:not(.col-12),
    #skinsContainer.cards-sm #loadoutGrid > [class*="col-"] {
        flex: 0 0 auto;
        width: 16.6667%;
        max-width: none;
    }

    /* Scale the skin image height with the card too — otherwise only the empty
       card area grows and bigger cards don't actually help you see the skin.
       (.weapon-img = category cards, .loadout-img = loadout overview cards.) */
    #skinsContainer.cards-lg .weapon-img,
    #skinsContainer.cards-lg .loadout-img { height: 190px; }
    #skinsContainer.cards-md .weapon-img,
    #skinsContainer.cards-md .loadout-img { height: 140px; }
    #skinsContainer.cards-sm .weapon-img,
    #skinsContainer.cards-sm .loadout-img { height: 95px; }
}

/* Marks a slot whose sticker has a custom placement (set by the editor). */
.sticker-slot.positioned .sticker-thumb {
    outline: 2px solid var(--lte-accent);
    outline-offset: 1px;
}

.sticker2d-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1066; /* above the sticker picker (1065) */
    background-color: rgba(0, 0, 0, 0.72);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sticker2d-overlay.show { display: flex; }
.sticker2d-dialog {
    width: min(1100px, 96vw);
    height: min(720px, 90vh);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.sticker2d-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    flex: 0 0 auto;
}
.sticker2d-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
/* The stage centers the canvas; JS sizes the canvas to the largest 16:9 box that
   fits, so the per-weapon constants (measured in a 1920x1080 frame) line up. */
.sticker2d-stage {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #15171c;
    overflow: hidden;
    padding: 8px;
}
.sticker2d-canvas {
    position: relative;
    background: #0f1115;
    overflow: hidden;
    touch-action: none;
}
.sticker2d-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill; /* stretch to the 16:9 frame, as the constants assume */
    user-select: none;
    pointer-events: none;
}
.sticker2d-item {
    position: absolute;
    cursor: grab;
    touch-action: none;
    will-change: left, top, transform;
}
.sticker2d-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.sticker2d-item.selected {
    outline: 2px solid #4ea1ff;
    outline-offset: 1px;
    cursor: grabbing;
}
.sticker2d-side {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    padding: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    overflow-y: auto;
}
@media (max-width: 768px) {
    .sticker2d-dialog { height: 92vh; }
    .sticker2d-body { flex-direction: column; }
    .sticker2d-side { flex-basis: auto; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

/* ---- Per-team divergence markers (official T/CT patch icons) ---- */
/* Badge shown on a grid card in "Both" mode when only one team has the item.
   Cards (.weapon-card) are position:relative, so absolute pins to the card. */
.team-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    pointer-events: none;
}
.team-badge img {
    display: block;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8));
}

/* T/CT patch icons inside the team selector buttons. */
.team-selector img {
    display: block;
    width: 16px;
    height: 16px;
}

/* Inline T/CT icon next to a loadout card title when the teams diverge. */
.team-tag {
    display: inline-flex;
    align-items: center;
}
.team-tag img {
    display: block;
    width: 16px;
    height: 16px;
}

/* The gear button is absolutely positioned at the card's top-right; keep the
   title row (weapon name + T/CT chip) from running underneath it. */
.loadout-clickable > p:first-child {
    padding-right: 32px;
}

/* Discreet vertical divider between the CT and T halves in Both mode. */
.loadout-divider {
    width: 1px;
    align-self: stretch;
    background-color: rgba(255, 255, 255, 0.12);
    margin: 0 4px;
}

/* ---- Loadout agent panels (CS2 equipment-menu style) ---- */
/* Tall vertical card flanking the gun grid: CT on the left, T on the right.
   Width is hard-capped (long agent names truncate instead of growing the
   panel and squeezing the gun grid). */
.loadout-agent-panel {
    flex: 0 0 190px;
    max-width: 190px;
    min-width: 0;
}
.loadout-agent-card {
    background-color: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background-color .15s ease;
    border-top: 3px solid #3a3a3a;
    overflow: hidden;
}
.loadout-agent-card .text-truncate {
    min-width: 0;
}
.loadout-agent-ct { border-top-color: #5d79ae; }
.loadout-agent-t  { border-top-color: #ccba7c; }
.loadout-agent-card:hover {
    background-color: rgba(255, 255, 255, 0.07);
}
.loadout-agent-img {
    width: 100%;
    height: 330px;
    object-fit: contain;
    object-position: center;
}

/* ---- Logged-out landing hero ---- */
.login-hero {
    min-height: calc(100vh - 220px); /* fills the space between navbar and footer */
}
.login-hero-logo {
    font-size: 5rem;
    color: #66c0f4; /* Steam light blue */
    filter: drop-shadow(0 0 25px rgba(102, 192, 244, 0.35));
}
.login-hero-title {
    font-size: 3.1rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.login-hero-sub {
    max-width: 520px;
    font-size: 1.05rem;
}
.btn-steam {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    background: linear-gradient(90deg, #06bfff 0%, #2d73ff 100%);
    border: none;
    border-radius: 10px;
    padding: 12px 34px;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(45, 115, 255, 0.35);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-steam:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 10px 30px rgba(45, 115, 255, 0.45);
}
.btn-steam:active {
    transform: translateY(0);
}

/* ---- Navbar "Connect to server" button ---- */
.btn-connect {
    --bs-btn-color: #1a1a1a;
    --bs-btn-hover-color: #1a1a1a;
    --bs-btn-active-color: #1a1a1a;
    background: linear-gradient(90deg, var(--lte-accent) 0%, #ff8c1a 100%);
    border: none;
    border-radius: 50rem;
    padding: 5px 18px 5px 7px;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(var(--lte-accent-rgb), 0.25);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-connect:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 6px 20px rgba(var(--lte-accent-rgb), 0.4);
}
.btn-connect:active {
    transform: translateY(0);
}
.btn-connect img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

/* ---- Team selector: dark pill container, accent-gradient active segment ---- */
.team-selector {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50rem;
    padding: 3px;
    gap: 2px;
}
.team-selector .btn {
    border: none !important;
    border-radius: 50rem !important;
    padding: 3px 14px;
    --bs-btn-color: #c8c8c8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
    transition: background .12s ease, color .12s ease;
}
.team-selector .btn.active {
    background: linear-gradient(90deg, var(--lte-accent) 0%, #ff8c1a 100%) !important;
    color: #1a1a1a !important;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(var(--lte-accent-rgb), 0.45);
}
.team-selector .btn.active img {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}

/* CT segment active = CT blue (T/Both keep the accent orange). */
.team-selector .btn.active[data-team="3"] {
    background: linear-gradient(90deg, #6fa8ff 0%, #3d6fe0 100%) !important;
    box-shadow: 0 2px 10px rgba(80, 130, 255, 0.45);
}

/* Both segment active = half T orange / half CT blue. */
.team-selector .btn.active[data-team="both"] {
    background: linear-gradient(105deg, var(--lte-accent) 0%, var(--lte-accent) 45%, #3d6fe0 55%, #3d6fe0 100%) !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    box-shadow: 0 2px 10px rgba(160, 130, 160, 0.4);
}

/* ---- Per-card team selector ----------------------------------------------
   Bare icons pinned to the bottom-right of each weapon card (no pill / no
   background), so a skin can be targeted at Both / T / CT without leaving the
   grid. Active = full opacity + a slight scale-up; inactive = dimmed. Team-
   exclusive guns show just their single team icon. */
.has-card-team {
    /* leave room below the skin title so the icons sit clear of it */
    padding-bottom: 26px !important;
}
.card-team {
    position: absolute;
    right: 6px;
    bottom: 5px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 4px;
}
.card-team-btn {
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
    opacity: 0.35;
    filter: grayscale(0.5);
    transition: opacity .12s ease, transform .12s ease, filter .12s ease;
}
.card-team-btn img {
    width: 12px;
    height: 12px;
    display: block;
}
.card-team-btn:hover {
    opacity: 0.75;
    filter: grayscale(0.2);
}
.card-team-btn.active {
    opacity: 1;
    filter: none;
    transform: scale(1.2);
}
/* Team-exclusive gun: single non-interactive icon. Dim when this paint isn't
   equipped on that side, full strength (.active) when it is. */
.card-team-locked img {
    width: 12px;
    height: 12px;
    display: block;
    opacity: 0.35;
    filter: grayscale(0.5);
}
.card-team-locked.active img {
    opacity: 1;
    filter: none;
}

/* ---- Float-modal team selector ----
   Reuses .team-selector styling; adds a dot on sides that already carry this
   paint, and a plain locked badge for team-exclusive guns. */
#modalTeamSelector .btn {
    position: relative;
}
.modal-team-dot {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lte-accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.modal-team-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cfcfcf;
    font-weight: 600;
}
.modal-team-locked img {
    width: 16px;
    height: 16px;
}

/* ---- Loading skeletons ---------------------------------------------------
   Shown in #skinsContainer while the multi-MB skins JSON loads. Pure CSS
   shimmer; the first real render replaces the container so no JS teardown. */
.skeleton-card {
    background: var(--lte-panel, #0f0f11);
    border: 1px solid var(--lte-line, #1c1c20);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 220px;
}
.skeleton-thumb,
.skeleton-line {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--lte-line-2, #2a2a30);
}
.skeleton-thumb {
    width: 80%;
    height: 120px;
    margin: 0.75rem 0 1rem;
}
.skeleton-line {
    height: 12px;
    width: 70%;
    margin-top: 8px;
    align-self: flex-start;
}
.skeleton-line-sm {
    width: 40%;
}
.skeleton-thumb::after,
.skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    animation: skeleton-shimmer 1.3s infinite;
}
@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-thumb::after,
    .skeleton-line::after { animation: none; }
}

/* ---- Toasts --------------------------------------------------------------
   Fixed bottom-right stack of auto-dismissing confirmation toasts. */
#toastStack {
    position: fixed;
    bottom: 5rem; /* clear of the fixed footer bar */
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.wp-toast {
    display: flex;
    align-items: center;
    min-width: 180px;
    max-width: 320px;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    background: var(--lte-secondary-bg, #202020);
    color: var(--lte-white, #eee);
    font-size: 0.9rem;
    border-left: 3px solid var(--lte-accent, #FFAC41);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.wp-toast.show {
    opacity: 1;
    transform: translateX(0);
}
.wp-toast-success i { color: var(--lte-accent, #FFAC41); }
.wp-toast-error {
    border-left-color: var(--lte-premium, #FF1E56);
}
.wp-toast-error i { color: var(--lte-premium, #FF1E56); }
@media (max-width: 575px) {
    #toastStack { left: 1rem; right: 1rem; bottom: 4.5rem; }
    .wp-toast { max-width: none; }
}

/* ---- Inline side-menu skin search ---------------------------------------- */
.sidebar-search {
    position: relative;
}
.sidebar-search > i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lte-accent, #FFAC41);
    pointer-events: none;
    font-size: 0.85rem;
}
.sidebar-search .form-control {
    background: var(--lte-side-bg, #1b1b1b);
    border-color: var(--lte-side-border, #3a3a3a);
    color: var(--lte-white, #eee);
    padding-left: 2rem;
}
.sidebar-search .form-control::placeholder {
    color: #8a8a8a;
}
.sidebar-search .form-control:focus {
    background: var(--lte-active-side-bg, #282828);
    border-color: var(--lte-accent, #FFAC41);
    box-shadow: 0 0 0 0.18rem rgba(var(--lte-accent-rgb), 0.25);
}

/* ---- Import / Export loadout modal --------------------------------------- */
.modal-content.share-modal {
    background: var(--lte-primary-bg, #101010);
    border: 1px solid var(--lte-side-border, #3a3a3a);
    border-radius: 14px;
    overflow: hidden;
}
.share-modal .modal-header {
    background: var(--lte-secondary-bg, #202020);
    border-bottom: 1px solid var(--lte-side-border, #3a3a3a);
    padding: 0.9rem 1.1rem;
}
.share-modal .modal-body {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.share-card {
    background: var(--lte-secondary-bg, #202020);
    border: 1px solid var(--lte-side-border, #3a3a3a);
    border-radius: 11px;
    padding: 1rem;
}
.share-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.share-card-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--lte-accent-rgb), 0.14);
    color: var(--lte-accent, #FFAC41);
}
.share-card-head h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
}
.share-textarea {
    background: var(--lte-side-bg, #1b1b1b);
    border-color: var(--lte-side-border, #3a3a3a);
    color: var(--lte-white, #eee);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    resize: vertical;
}
.share-textarea:focus {
    background: var(--lte-side-bg, #1b1b1b);
    border-color: var(--lte-accent, #FFAC41);
    box-shadow: 0 0 0 0.18rem rgba(var(--lte-accent-rgb), 0.2);
    color: var(--lte-white, #eee);
}
.share-copy-btn {
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.share-copy-btn.copied {
    background: #3fae6b !important;
    border-color: #3fae6b !important;
    color: #fff !important;
}
.share-copy-btn:disabled {
    opacity: 0.5;
}

/* ============================================================================
   REDESIGN "minimalista overpowered" — chrome + motion layer
   Additive block. Styles the page background, glass navbar, and the new pieces
   that motion.js injects (spotlight, sidebar marker, ripple). All movement is
   disabled under prefers-reduced-motion at the bottom.
   ============================================================================ */

body {
    color: var(--lte-txt);
}

/* Depth for the card tilt (motion.js rotates cards on hover). */
#skinsContainer {
    perspective: 1200px;
}

/* Skin paint-name title was an <h5> (~1.25rem) and ran long / truncated.
   Bring it down to a compact, readable size and tighten the surrounding text. */
h5.weapon-skin-title {
    font-size: .88rem;
    line-height: 1.2;
    margin-bottom: .15rem;
    margin-right: .75rem; /* breathing room before the card edge */
}
/* On cards that carry the per-team CT/T icons (bottom-right), keep the paint
   name clear of them: reserve space on the right so it ellipsises in time. */
.has-card-team h5.weapon-skin-title {
    margin-right: 0;
    padding-right: 56px;
}
.weapon-card .text-secondary small.text-roboto {
    font-size: .72rem;
}

/* Page background: graphite gradient with a faint amber/cool wash, not flat black. */
body.bg-color {
    background-color: var(--lte-primary-bg);
    background-image:
        radial-gradient(1200px 600px at 78% -12%, rgba(var(--lte-accent-rgb), 0.06), transparent 60%),
        radial-gradient(900px 520px at 0% 8%, rgba(90, 110, 255, 0.05), transparent 55%);
    background-attachment: fixed;
}

/* ---- Glass, sticky, condensing navbar ---- */
.navbar.bg-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: rgba(15, 15, 17, 0.72) !important;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid transparent;
    transition: padding .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.navbar.bg-nav.shrink {
    padding-top: .35rem;
    padding-bottom: .35rem;
    background-color: rgba(10, 10, 11, 0.9) !important;
    border-bottom-color: var(--lte-line);
}
.navbar-brand {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Sidebar panel that holds the nav items. */
.bg-nav.rounded {
    border: 1px solid var(--lte-line);
}

/* Accent focus ring on inputs site-wide (was Bootstrap blue). */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--lte-accent-rgb), 0.6) !important;
    box-shadow: 0 0 0 .18rem rgba(var(--lte-accent-rgb), 0.18) !important;
}

.profile-bg {
    background: var(--lte-panel-2);
    border: 1px solid var(--lte-line);
}

/* ---- Cursor spotlight (injected into <body> by motion.js) ---- */
.fx-spotlight {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(360px circle at var(--mx, -200px) var(--my, -200px),
        rgba(255, 255, 255, 0.04), transparent 65%);
    transition: background .1s linear;
}
/* Keep app content above the spotlight layer. */
.navbar, .container, .container-fluid, .login-hero, .sticker-picker-overlay,
.sticker2d-overlay, .modal, #toastStack { position: relative; z-index: 1; }

/* ---- Sidebar sliding marker (injected into the sidebar panel by motion.js) ---- */
.nav-marker {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 0;
    border-radius: 10px;
    background: var(--lte-panel-2);
    border: 1px solid var(--lte-line);
    box-shadow: inset 2px 0 0 var(--lte-accent);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: transform .42s var(--ease), height .25s var(--ease), opacity .3s var(--ease);
}
/* The marker sits behind the buttons; their .front backgrounds become
   transparent on hover so the marker shows through. */
.has-nav-marker .pushable { z-index: 1; }
.has-nav-marker .pushable:hover .front,
.has-nav-marker .active-side {
    background: transparent !important;
    border-color: transparent !important;
}
.has-nav-marker .active-side { box-shadow: none; }

/* ---- Card reveal-on-scroll (motion.js adds .fx-reveal then .fx-in) ---- */
.fx-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
    will-change: opacity, transform;
}
.fx-reveal.fx-in {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Magnetic buttons (motion.js sets inline transform) ---- */
.magnetic {
    will-change: transform;
    transition: transform .25s var(--ease);
}

/* ---- Floating tooltip for truncated skin names (motion.js) ---- */
.fx-tip {
    position: fixed;
    z-index: 3000;
    pointer-events: none;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 10px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--lte-txt);
    background: var(--lte-panel-2);
    border: 1px solid var(--lte-line-2);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.fx-tip.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---- Click ripple (motion.js appends .fx-ripple spans) ---- */
.fx-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
    animation: fx-rip .6s var(--ease-out);
    z-index: 5;
}
@keyframes fx-rip { to { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .fx-spotlight { display: none; }
    .weapon-card::after { display: none; }
    .fx-reveal { opacity: 1 !important; transform: none !important; }
    .nav-marker { transition: none; }
}