/* =========================================================
   VELOCITY COMMUNITY
   VELOCITY BLUE / GRAPHITE 2026
   FINAL GLOBAL DESIGN LAYER
   ========================================================= */

:root {
    --bg:#070a0e !important;
    --bg-2:#0a0e13 !important;

    --surface:#0e141b !important;
    --surface-2:#121a23 !important;
    --surface-3:#17212c !important;

    --line:rgba(255,255,255,.075) !important;
    --line-hi:rgba(255,255,255,.13) !important;

    --text:#f2f5f7 !important;
    --text-2:#aab4bf !important;
    --muted:#707c88 !important;

    --blue:#3b9df5 !important;
    --blue-2:#2677cf !important;
    --blue-soft:rgba(59,157,245,.10) !important;

    --success:#58d6aa !important;
    --danger:#ef747c !important;
    --warning:#e8b867 !important;

    --panel:var(--surface) !important;
    --panel-2:var(--surface-2) !important;
    --panel-border:var(--line) !important;
    --panel-border-hi:var(--line-hi) !important;

    --ink:var(--text) !important;
    --ink-dim:var(--text-2) !important;

    --tactical:var(--blue) !important;
    --gold:#d4b166 !important;

    --r-sm:8px !important;
    --r-md:12px !important;
    --r-lg:16px !important;
}


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

html {
    background:var(--bg) !important;
    color-scheme:dark;
}

body {
    margin:0;
    color:var(--text) !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:15px;
    line-height:1.6;

    background:
        radial-gradient(
            900px 500px at 50% -120px,
            rgba(40,119,207,.16),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #090d12 0,
            #070a0e 480px,
            #070a0e 100%
        ) !important;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

::selection {
    background:rgba(59,157,245,.28);
    color:#fff;
}

a {
    color:inherit;
}

img {
    max-width:100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color:var(--text) !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        Arial,
        sans-serif !important;

    text-transform:none !important;
    letter-spacing:-.025em !important;
    text-shadow:none !important;
}

p {
    color:var(--text-2);
}

.mono {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace !important;
}


/* ---------------------------------------------------------
   NEW ICON SYSTEM
   --------------------------------------------------------- */

.vc-icon {
    display:inline-block;
    vertical-align:-3px;

    flex:0 0 auto;

    color:currentColor;

    shape-rendering:geometricPrecision;
}

.vc-brand-icon {
    display:inline-block;

    width:1.25em;
    height:1.25em;

    object-fit:cover;

    border-radius:4px;

    vertical-align:-.25em;
    flex:none;
}

.btn .vc-icon,
.nav-links .vc-icon,
.feature-link .vc-icon {
    transition:transform .18s ease;
}

.btn:hover .vc-icon,
.feature-link:hover .vc-icon {
    transform:translateX(1px);
}


/* ---------------------------------------------------------
   CONTAINER / SECTIONS
   --------------------------------------------------------- */

.container {
    width:min(1180px, calc(100% - 40px)) !important;
    margin-inline:auto !important;
}

.section {
    padding:76px 0 !important;
}

.section-alt {
    background:
        rgba(255,255,255,.012) !important;

    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.section-head {
    max-width:720px !important;
    margin-bottom:34px !important;
}

.section-head h2 {
    margin:8px 0 12px !important;

    font-size:
        clamp(28px,4vw,42px) !important;

    line-height:1.08 !important;
}

.section-head p,
.lead {
    color:var(--text-2) !important;
    line-height:1.7 !important;
}

.eyebrow {
    display:inline-flex !important;
    align-items:center;
    gap:7px;

    color:#7dbbf4 !important;

    font-family:inherit !important;
    font-size:11px !important;
    font-weight:700 !important;

    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}


/* ---------------------------------------------------------
   HEADER / NAV
   --------------------------------------------------------- */

.nav {
    position:sticky !important;
    top:0;
    z-index:1000;

    background:
        rgba(8,12,17,.96) !important;

    border-bottom:
        1px solid rgba(255,255,255,.065) !important;

    box-shadow:
        0 8px 28px rgba(0,0,0,.18) !important;
}

.nav-inner {
    min-height:70px !important;

    display:flex !important;
    align-items:center !important;

    gap:22px !important;
}

.brand {
    display:inline-flex !important;
    align-items:center !important;

    gap:10px !important;

    text-decoration:none !important;

    flex:none;
}

.brand-emblem {
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:10px;

    overflow:hidden;

    background:#101721;

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 6px 18px rgba(0,0,0,.28);
}

.brand-emblem img {
    width:100%;
    height:100%;

    object-fit:cover;
}

.brand-copy {
    display:flex;
    flex-direction:column;

    line-height:1.05;
}

.brand-copy strong {
    color:#f4f7fa;

    font-size:15px;
    font-weight:750;

    letter-spacing:.01em;
}

.brand-copy small {
    margin-top:4px;

    color:#6f7f8e;

    font-size:9px;
    font-weight:650;

    text-transform:uppercase;

    letter-spacing:.17em;
}

.nav-links {
    display:flex;
    align-items:center;

    gap:3px !important;
}

.nav-links > a {
    min-height:38px;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    padding:
        8px 10px !important;

    border:
        1px solid transparent !important;

    border-radius:
        9px !important;

    color:#8d99a5 !important;

    font-family:inherit !important;
    font-size:12.5px !important;
    font-weight:600 !important;

    letter-spacing:0 !important;
    line-height:1 !important;
    text-transform:none !important;

    text-decoration:none !important;

    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease !important;
}

.nav-links > a:hover {
    color:#e9f0f6 !important;

    background:
        rgba(255,255,255,.035) !important;

    border-color:
        rgba(255,255,255,.055) !important;
}

.nav-links > a.active {
    color:#dceeff !important;

    background:
        rgba(59,157,245,.10) !important;

    border-color:
        rgba(59,157,245,.20) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(59,157,245,.025) !important;
}

.nav-links > a.active .vc-icon {
    color:#66b5ff;
}

.nav-right {
    margin-left:auto;

    display:flex;
    align-items:center;

    gap:8px;
}

.lang-toggle {
    background:
        #0c1219 !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        9px !important;

    padding:3px !important;
}

.lang-toggle button {
    border:0;

    min-width:34px;
    height:30px;

    border-radius:6px !important;

    background:transparent !important;

    color:#758391 !important;

    font-family:inherit !important;
    font-weight:700 !important;
}

.lang-toggle button.active {
    color:#eaf4fc !important;

    background:
        #162433 !important;
}


/* RANKING alignment stays fixed */

.nav-links > a[href="/ranking.php"],
.nav-links > a[href="/ranking.php"].active {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding-top:8px !important;
    padding-bottom:8px !important;

    line-height:1 !important;

    top:auto !important;
    bottom:auto !important;

    transform:none !important;
    translate:none !important;
    scale:none !important;
}

.nav-links > a[href="/ranking.php"] svg,
.nav-links > a[href="/ranking.php"].active svg {
    position:static !important;

    top:auto !important;
    bottom:auto !important;

    transform:none !important;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.btn {
    min-height:40px;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:8px !important;

    padding:
        10px 15px !important;

    border-radius:
        9px !important;

    font-family:inherit !important;
    font-size:13px !important;
    font-weight:650 !important;

    letter-spacing:0 !important;
    text-transform:none !important;

    text-shadow:none !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        color .16s ease !important;
}

.btn:hover {
    transform:translateY(-1px);
}

.btn-primary {
    color:#fff !important;

    background:
        linear-gradient(
            180deg,
            #318ddc,
            #256fb7
        ) !important;

    border:
        1px solid #3b93df !important;

    box-shadow:
        0 6px 18px rgba(27,94,154,.20) !important;
}

.btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            #3b9bea,
            #2878c3
        ) !important;
}

.btn-ghost {
    color:#aab6c1 !important;

    background:
        rgba(255,255,255,.025) !important;

    border:
        1px solid var(--line) !important;
}

.btn-ghost:hover {
    color:#eef5fb !important;

    border-color:
        rgba(255,255,255,.14) !important;

    background:
        rgba(255,255,255,.05) !important;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero {
    position:relative;

    overflow:hidden;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}

.hero::after {
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(5,8,12,.08),
            rgba(5,8,12,.28) 55%,
            #070a0e 100%
        );
}

.hero-copy,
.hero .container {
    position:relative;
    z-index:2;
}

.hero h1 {
    font-size:
        clamp(38px,6vw,68px) !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.045em !important;
}


/* ---------------------------------------------------------
   PANELS / CARDS
   --------------------------------------------------------- */

.panel,
.card,
.feature-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.005)
        ),
        var(--surface) !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 10px 35px rgba(0,0,0,.16) !important;

    text-shadow:none !important;
}

.panel:hover,
.feature-card:hover {
    border-color:
        rgba(255,255,255,.125) !important;
}

.feature-card {
    padding:
        26px !important;

    text-decoration:none !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}

.feature-card:hover {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            180deg,
            rgba(59,157,245,.035),
            rgba(255,255,255,.008)
        ),
        var(--surface) !important;
}

.feature-icon,
.vc-perk-icon {
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    margin-bottom:16px;

    border-radius:10px;

    color:#6bb7fa;

    background:
        rgba(59,157,245,.085);

    border:
        1px solid rgba(59,157,245,.14);
}

.feature-card h3 {
    margin:
        0 0 9px !important;

    font-size:
        18px !important;
}

.feature-card p {
    color:
        #929eaa !important;
}

.feature-link {
    display:inline-flex;
    align-items:center;

    gap:7px;

    color:#74b9f6 !important;

    font-size:13px;
    font-weight:650;
}


/* ---------------------------------------------------------
   SERVER CARDS
   --------------------------------------------------------- */

.server-card {
    position:relative !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr) auto;

    align-items:stretch !important;

    min-height:
        170px;

    background:
        linear-gradient(
            135deg,
            rgba(46,133,211,.055),
            transparent 46%
        ),
        #0e141b !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    border-radius:
        15px !important;

    overflow:hidden;

    box-shadow:
        0 14px 38px rgba(0,0,0,.20) !important;

    transition:
        transform .18s ease,
        border-color .18s ease !important;
}

.server-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(88,166,236,.22) !important;
}

.server-card-main {
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:17px !important;

    padding:
        24px !important;
}

.vc-server-logo-wrap {
    position:relative;

    width:64px;
    height:64px;

    flex:0 0 64px;

    border-radius:14px;

    background:
        #111923;

    border:
        1px solid rgba(255,255,255,.11);

    box-shadow:
        0 9px 25px rgba(0,0,0,.25);

    overflow:visible;
}

.vc-server-logo {
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border-radius:13px;
}

.vc-server-logo-wrap .server-status-dot {
    position:absolute !important;

    right:-3px;
    bottom:-3px;

    width:11px !important;
    height:11px !important;

    margin:0 !important;

    border:
        3px solid #0e141b;

    border-radius:50%;

    box-sizing:content-box;
}

.server-status-dot.online {
    background:
        var(--success) !important;

    box-shadow:
        0 0 0 3px rgba(88,214,170,.10),
        0 0 12px rgba(88,214,170,.25) !important;
}

.server-status-dot.offline {
    background:
        var(--danger) !important;

    box-shadow:
        0 0 0 3px rgba(239,116,124,.10) !important;
}

.vc-server-copy {
    min-width:0;
}

.server-card-name {
    color:
        #f2f6f9 !important;

    font-family:
        inherit !important;

    font-size:
        18px !important;

    font-weight:
        750 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -.01em !important;

    text-transform:
        none !important;

    white-space:
        normal;

    text-shadow:
        none !important;
}

.vc-server-kind {
    margin-top:
        4px;

    color:
        #6685a0;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        650;

    letter-spacing:
        .02em;
}

.server-card-sub {
    margin-top:
        7px !important;

    color:
        #8d99a4 !important;

    font-family:
        inherit !important;

    font-size:
        12.5px !important;

    font-weight:
        450 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        0 !important;

    text-transform:
        none !important;

    text-shadow:
        none !important;
}

.server-card-stats {
    display:flex !important;

    border-left:
        1px solid rgba(255,255,255,.055);
}

.server-stat {
    min-width:
        92px !important;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        20px !important;

    text-align:center;

    border-left:
        0 !important;
}

.server-stat + .server-stat {
    border-left:
        1px solid rgba(255,255,255,.055) !important;
}

.server-stat .n {
    color:
        #eaf0f5 !important;

    font-family:
        inherit !important;

    font-size:
        19px !important;

    font-weight:
        750 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    text-shadow:
        none !important;
}

.server-stat .l {
    margin-top:
        5px;

    color:
        #707d89 !important;

    font-family:
        inherit !important;

    font-size:
        10.5px !important;

    font-weight:
        600 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    text-transform:
        none !important;
}

.server-card-ip {
    grid-column:
        1 / -1;

    display:flex !important;
    align-items:center !important;

    gap:10px !important;

    padding:
        12px 16px !important;

    background:
        rgba(0,0,0,.12) !important;

    border-top:
        1px solid rgba(255,255,255,.055) !important;

    border-left:
        0 !important;
}

.server-card-ip-text {
    display:flex !important;
    align-items:center;

    gap:7px;

    color:
        #8996a2 !important;

    font-family:
        inherit !important;

    font-size:
        12.5px !important;

    font-weight:
        550 !important;

    letter-spacing:
        0 !important;

    border:
        0 !important;

    padding:
        8px 9px !important;

    text-shadow:
        none !important;
}

.server-card-connect {
    margin-left:auto;
}

.server-card-connect .vc-brand-icon,
#srvModalConnect .vc-brand-icon {
    width:19px;
    height:19px;

    border-radius:5px;
}


/* ---------------------------------------------------------
   STATS
   --------------------------------------------------------- */

.stat-band,
.stats-band,
.stats-grid {
    border-color:
        var(--line) !important;
}

.stat,
.stat-card {
    background:
        rgba(255,255,255,.014) !important;

    border-color:
        var(--line) !important;
}

.stat .n,
.stat-card .n {
    color:
        #eef4f8 !important;

    font-family:
        inherit !important;

    font-weight:
        750 !important;

    text-shadow:
        none !important;
}


/* ---------------------------------------------------------
   FILTERS / FORMS
   --------------------------------------------------------- */

.filter-bar {
    gap:
        9px !important;
}

.search-box,
input,
select,
textarea {
    color:
        #e9eef2 !important;

    font-family:
        inherit !important;

    background:
        #0e151d !important;

    border-color:
        rgba(255,255,255,.085) !important;
}

.search-box {
    border-radius:
        10px !important;
}

.search-box:focus-within,
input:focus,
select:focus,
textarea:focus {
    border-color:
        rgba(59,157,245,.42) !important;

    box-shadow:
        0 0 0 3px
        rgba(59,157,245,.065) !important;
}

.chip {
    min-height:
        36px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    padding:
        7px 11px !important;

    color:
        #8c99a5 !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    text-transform:
        none !important;

    letter-spacing:
        0 !important;

    background:
        #0e151c !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        9px !important;
}

.chip:hover {
    color:
        #d9e2e9 !important;

    border-color:
        var(--line-hi) !important;
}

.chip.active {
    color:
        #cfeaff !important;

    background:
        rgba(59,157,245,.09) !important;

    border-color:
        rgba(59,157,245,.25) !important;

    box-shadow:
        none !important;
}

.chip.active svg {
    color:
        #6db9fa !important;
}


/* ---------------------------------------------------------
   PUNISHMENTS
   --------------------------------------------------------- */

.p-row,
.p-row-clickable {
    border-color:
        rgba(255,255,255,.055) !important;

    background:
        rgba(255,255,255,.008) !important;

    transition:
        background .15s ease,
        border-color .15s ease !important;
}

.p-row:hover,
.p-row-clickable:hover {
    background:
        rgba(59,157,245,.035) !important;

    border-color:
        rgba(59,157,245,.12) !important;
}

.badge {
    font-family:
        inherit !important;

    font-size:
        10.5px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .025em !important;

    border-radius:
        7px !important;
}


/* ---------------------------------------------------------
   SKINS / LOADOUT
   --------------------------------------------------------- */

.weapon-card,
.skin-opt {
    background:
        #0e151d !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    border-radius:
        12px !important;

    box-shadow:
        none !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease !important;
}

.weapon-card:hover,
.skin-opt:hover {
    transform:
        translateY(-2px);

    background:
        #111a24 !important;

    border-color:
        rgba(86,166,235,.22) !important;
}

.weapon-card.equipped,
.skin-opt.sel {
    background:
        rgba(59,157,245,.055) !important;

    border-color:
        rgba(59,157,245,.32) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(59,157,245,.025) !important;
}

.weapon-card .wn {
    color:
        #eaf0f4 !important;

    font-family:
        inherit !important;

    font-weight:
        650 !important;

    text-transform:
        none !important;
}

.weapon-card .ws {
    color:
        #74818d !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    text-transform:
        none !important;

    letter-spacing:
        0 !important;
}

.team-tab,
.team-tabs button {
    font-family:
        inherit !important;

    text-transform:
        none !important;
}

#skinModal .modal-head {
    background:
        #101720 !important;

    border-bottom:
        1px solid var(--line) !important;

    backdrop-filter:
        none !important;
}


/* M4 active / stored */

.weapon-card.vc-skin-stored {
    background:
        #0e151d !important;

    border-color:
        rgba(255,255,255,.075) !important;

    box-shadow:
        none !important;
}

.weapon-card.vc-skin-stored .ws {
    color:
        #677480 !important;
}

.weapon-card.vc-m4-active {
    background:
        rgba(59,157,245,.06) !important;

    border-color:
        rgba(59,157,245,.32) !important;
}

.weapon-card.vc-m4-active .ws {
    color:
        #69b5f6 !important;
}


/* ---------------------------------------------------------
   MODALS
   --------------------------------------------------------- */

.modal-veil {
    background:
        rgba(2,5,8,.78) !important;
}

.modal {
    background:
        #0d141c !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    border-radius:
        15px !important;

    box-shadow:
        0 28px 90px rgba(0,0,0,.50) !important;
}

.modal-head {
    border-bottom:
        1px solid var(--line) !important;
}

.modal-close {
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    color:#8e9ba7 !important;

    background:
        rgba(255,255,255,.025) !important;

    border:
        1px solid var(--line) !important;

    border-radius:
        9px !important;
}

.modal-close:hover {
    color:#fff !important;

    background:
        rgba(255,255,255,.055) !important;
}


/* Server modal text */

#serverModal,
#serverModal div,
#serverModal span,
#serverModal a,
#serverModal button {
    font-family:
        inherit !important;

    text-shadow:
        none !important;
}

#srvModalName {
    color:
        #eef4f8 !important;

    font-size:
        20px !important;

    font-weight:
        750 !important;

    letter-spacing:
        -.015em !important;
}

#srvModalIp {
    color:
        #7d8995 !important;

    font-size:
        12px !important;

    text-transform:
        none !important;

    letter-spacing:
        0 !important;
}


/* ---------------------------------------------------------
   RANKING
   --------------------------------------------------------- */

.ranking-table,
.rank-card,
.rank-row,
.ranking-row,
.leaderboard-row {
    background:
        #0e151d !important;

    border-color:
        var(--line) !important;
}

.rank-row:hover,
.ranking-row:hover,
.leaderboard-row:hover {
    background:
        rgba(59,157,245,.035) !important;
}


/* ---------------------------------------------------------
   CODE / TOAST
   --------------------------------------------------------- */

code {
    color:
        #a9d5fb !important;

    background:
        #111b25 !important;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius:
        6px !important;
}

.toast {
    color:
        #eaf1f6 !important;

    font-family:
        inherit !important;

    background:
        #111a23 !important;

    border:
        1px solid rgba(59,157,245,.30) !important;

    border-radius:
        10px !important;

    box-shadow:
        0 15px 40px rgba(0,0,0,.35) !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

footer,
.footer {
    color:
        #778491 !important;

    background:
        #070a0e !important;

    border-top:
        1px solid rgba(255,255,255,.06) !important;
}

footer a,
.footer a {
    color:
        #8d9ba8 !important;

    transition:
        color .15s ease;
}

footer a:hover,
.footer a:hover {
    color:
        #dce8f2 !important;
}


/* ---------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------- */

* {
    scrollbar-width:
        thin;

    scrollbar-color:
        #27394a #0a0e13;
}

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

::-webkit-scrollbar-track {
    background:
        #0a0e13;
}

::-webkit-scrollbar-thumb {
    background:
        #27394a;

    border:
        2px solid #0a0e13;

    border-radius:
        10px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width:1050px) {

    .brand-copy {
        display:none;
    }

    .nav-inner {
        gap:12px !important;
    }

    .nav-links > a {
        padding-left:
            8px !important;

        padding-right:
            8px !important;
    }
}


@media (max-width:860px) {

    .nav-inner > .nav-links {
        display:none !important;
    }

    #mobileNav {
        background:
            #090e14;

        border-top:
            1px solid var(--line);

        padding-top:
            10px !important;
    }

    #mobileNav a {
        justify-content:
            flex-start !important;

        width:
            100%;

        padding:
            11px 12px !important;
    }

    .section {
        padding:
            60px 0 !important;
    }
}


@media (max-width:700px) {

    .container {
        width:
            min(100% - 26px,1180px) !important;
    }

    .server-card {
        grid-template-columns:
            1fr;
    }

    .server-card-main {
        padding:
            19px !important;
    }

    .vc-server-logo-wrap {
        width:
            54px;

        height:
            54px;

        flex-basis:
            54px;
    }

    .server-card-stats {
        grid-column:
            1;

        border-left:
            0;

        border-top:
            1px solid rgba(255,255,255,.055);
    }

    .server-stat {
        flex:
            1;

        padding:
            14px !important;
    }

    .server-card-ip {
        padding:
            10px 12px !important;
    }

    .server-card-name {
        font-size:
            16px !important;
    }

    .vc-server-kind {
        font-size:
            10.5px;
    }
}


@media (max-width:520px) {

    .brand-emblem {
        width:
            36px;

        height:
            36px;
    }

    .lang-toggle {
        display:none;
    }

    .nav-right .btn-label {
        display:none;
    }

    .vc-connect-label {
        display:none;
    }

    .server-card-connect {
        width:
            42px !important;

        min-width:
            42px !important;

        height:
            40px;

        padding:
            0 !important;
    }

    .server-card-connect .vc-brand-icon {
        width:
            22px;

        height:
            22px;
    }

    .section {
        padding:
            48px 0 !important;
    }

    .feature-card {
        padding:
            21px !important;
    }
}


/* =========================================================
   END VELOCITY 2026
   ========================================================= */

/* VC_FINAL_BLUE_UI_START */


/* =========================================================
   VELOCITY — FINAL BLUE UI
   ========================================================= */


/* ---------- GENERAL TYPOGRAPHY ---------- */

html,
body {
    background:
        #070b10 !important;
}

body {
    color:
        #edf2f6 !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;

    font-size:
        15px !important;

    font-weight:
        400 !important;

    line-height:
        1.65 !important;

    letter-spacing:
        0 !important;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


body,
button,
input,
select,
textarea,
a {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        #f3f7fa !important;

    font-family:
        inherit !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.025em !important;

    text-transform:
        none !important;

    text-shadow:
        none !important;
}


p,
.lead,
.section-head p {
    color:
        #9ca8b3 !important;

    font-family:
        inherit !important;

    font-weight:
        400 !important;

    line-height:
        1.7 !important;

    letter-spacing:
        0 !important;

    text-shadow:
        none !important;
}


/*
 * Stari mono/display tekst je davao
 * onaj "mutan / gaming font" osjećaj.
 */

.mono {
    font-family:
        inherit !important;

    letter-spacing:
        0 !important;
}


code,
pre,
.js-copy-steamid {
    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace !important;
}



/* =========================================================
   ALL SMALL ICONS = VELOCITY V
   ========================================================= */


/*
 * Svi postojeći mali SVG iconi ostaju u DOM-u
 * zbog layouta/funkcionalnosti, ali vizuelno
 * prikazuju naš V logo.
 */

.vc-icon,
.nav-links svg,
.nav-right svg,
.btn svg,
.feature-icon svg,
.feature-link svg,
.search-box svg,
.chip svg,
.server-card-ip-text svg,
.p-row svg,
.p-row-clickable svg,
.modal svg,
.team-tab svg,
.skin-login-icon svg,
.toast svg,
footer svg,
.footer svg {
    width:
        18px !important;

    height:
        18px !important;

    min-width:
        18px !important;

    min-height:
        18px !important;

    flex:
        0 0 18px !important;

    display:
        inline-block !important;

    background-image:
        url("/assets/img/velocity-icon.webp") !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    border-radius:
        5px !important;

    stroke:
        transparent !important;

    fill:
        transparent !important;

    color:
        transparent !important;

    overflow:
        hidden !important;
}


.vc-icon *,
.nav-links svg *,
.nav-right svg *,
.btn svg *,
.feature-icon svg *,
.feature-link svg *,
.search-box svg *,
.chip svg *,
.server-card-ip-text svg *,
.p-row svg *,
.p-row-clickable svg *,
.modal svg *,
.team-tab svg *,
.skin-login-icon svg *,
.toast svg *,
footer svg *,
.footer svg * {
    display:
        none !important;
}


/*
 * Malo veća ikona u feature karticama.
 */

.feature-icon svg,
.skin-login-icon svg {
    width:
        24px !important;

    height:
        24px !important;

    min-width:
        24px !important;

    min-height:
        24px !important;

    flex-basis:
        24px !important;
}


/*
 * Sve image-based Velocity ikonice.
 */

.vc-brand-icon,
.vc-connect-icon,
.vc-server-inline-icon,
.vc-site-icon {
    display:
        block !important;

    width:
        18px !important;

    height:
        18px !important;

    min-width:
        18px !important;

    max-width:
        18px !important;

    min-height:
        18px !important;

    max-height:
        18px !important;

    object-fit:
        cover !important;

    border-radius:
        5px !important;

    flex:
        0 0 18px !important;
}



/* =========================================================
   HOMEPAGE NEW BACKGROUND
   ========================================================= */


.vc-home-hero {
    position:
        relative !important;

    min-height:
        clamp(500px,68vh,720px) !important;

    display:
        flex !important;

    align-items:
        center !important;

    background-color:
        #080d13 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(4,8,13,.96) 0%,
            rgba(4,8,13,.84) 27%,
            rgba(4,8,13,.42) 57%,
            rgba(4,8,13,.12) 100%
        ),
        linear-gradient(
            0deg,
            #070b10 0%,
            transparent 30%
        ),
        url("/assets/img/velocity-home-bg.webp") !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    border-bottom:
        1px solid rgba(76,158,231,.12) !important;

    overflow:
        hidden !important;
}


/*
 * Novi background zamjenjuje stari hero video,
 * ali ne brišemo video kod.
 */

.vc-home-hero .hero-video-wrap,
.vc-home-hero .hero-bg-loop,
.vc-home-hero video {
    display:
        none !important;
}


.vc-home-hero::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 73% 45%,
            rgba(44,145,239,.09),
            transparent 37%
        );
}


.vc-home-hero::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        160px;

    pointer-events:
        none;

    background:
        linear-gradient(
            transparent,
            #070b10
        );
}


.vc-home-hero .container,
.vc-home-hero .hero-copy {
    position:
        relative;

    z-index:
        2;
}


.vc-home-hero h1 {
    max-width:
        760px;

    font-size:
        clamp(42px,6vw,72px) !important;

    font-weight:
        750 !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.045em !important;
}


.vc-home-hero p,
.vc-home-hero .lead {
    max-width:
        620px;

    color:
        #aeb9c3 !important;

    font-size:
        16px !important;

    line-height:
        1.7 !important;
}



/* =========================================================
   MAIN SITE BLUE / GRAPHITE BACKGROUND
   ========================================================= */


body {
    background:
        radial-gradient(
            900px 500px at 50% 0,
            rgba(38,116,189,.10),
            transparent 67%
        ),
        linear-gradient(
            180deg,
            #080d12,
            #070b10 560px,
            #070b10
        ) !important;
}


.section-alt {
    background:
        rgba(255,255,255,.012) !important;

    border-top:
        1px solid rgba(255,255,255,.055) !important;

    border-bottom:
        1px solid rgba(255,255,255,.055) !important;
}



/* =========================================================
   SECTION TEXT
   ========================================================= */


.eyebrow {
    color:
        #6cb8f5 !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .07em !important;

    text-transform:
        uppercase !important;

    text-shadow:
        none !important;
}


.section-head h2 {
    font-size:
        clamp(30px,4vw,44px) !important;

    line-height:
        1.1 !important;

    margin-bottom:
        13px !important;
}


.section-head p {
    max-width:
        680px;

    font-size:
        14.5px !important;
}



/* =========================================================
   SERVER SECTION
   ========================================================= */


.server-card {
    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0,1fr) auto !important;

    grid-template-rows:
        auto 58px !important;

    align-items:
        stretch !important;

    min-height:
        0 !important;

    background:
        linear-gradient(
            135deg,
            rgba(42,129,209,.055),
            transparent 48%
        ),
        #0d141b !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    border-radius:
        15px !important;

    overflow:
        hidden !important;

    box-shadow:
        0 16px 44px rgba(0,0,0,.22) !important;
}


.server-card:hover {
    border-color:
        rgba(70,158,236,.24) !important;

    transform:
        translateY(-2px) !important;
}


.server-card-main {
    grid-column:
        1 !important;

    grid-row:
        1 !important;

    display:
        flex !important;

    align-items:
        center !important;

    min-width:
        0 !important;

    padding:
        24px !important;

    gap:
        16px !important;
}



/* Big server logo */

.vc-server-logo-wrap {
    position:
        relative !important;

    width:
        64px !important;

    height:
        64px !important;

    min-width:
        64px !important;

    flex:
        0 0 64px !important;

    overflow:
        visible !important;

    border-radius:
        14px !important;

    background:
        #101923 !important;

    border:
        1px solid rgba(255,255,255,.11) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.25) !important;
}


.vc-server-logo {
    display:
        block !important;

    width:
        64px !important;

    height:
        64px !important;

    min-width:
        64px !important;

    max-width:
        64px !important;

    min-height:
        64px !important;

    max-height:
        64px !important;

    object-fit:
        cover !important;

    border-radius:
        13px !important;
}



/* Live dot */

.vc-server-logo-wrap .server-status-dot {
    position:
        absolute !important;

    right:
        -3px !important;

    bottom:
        -3px !important;

    width:
        11px !important;

    height:
        11px !important;

    min-width:
        11px !important;

    min-height:
        11px !important;

    margin:
        0 !important;

    border:
        3px solid #0d141b !important;

    border-radius:
        50% !important;

    box-sizing:
        content-box !important;
}



/* Server text */

.vc-server-copy {
    min-width:
        0 !important;
}


.server-card-name {
    color:
        #f0f5f8 !important;

    font-family:
        inherit !important;

    font-size:
        18px !important;

    font-weight:
        700 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -.01em !important;

    text-transform:
        none !important;

    text-shadow:
        none !important;
}


.vc-server-kind {
    margin-top:
        4px !important;

    color:
        #668bab !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        0 !important;
}


.server-card-sub {
    margin-top:
        6px !important;

    color:
        #84919c !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        0 !important;

    text-transform:
        none !important;

    text-shadow:
        none !important;
}



/* Server player / ping stats */

.server-card-stats {
    grid-column:
        2 !important;

    grid-row:
        1 !important;

    display:
        flex !important;

    align-items:
        stretch !important;

    border-left:
        1px solid rgba(255,255,255,.055) !important;
}


.server-stat {
    min-width:
        100px !important;

    padding:
        20px 17px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-left:
        0 !important;
}


.server-stat + .server-stat {
    border-left:
        1px solid rgba(255,255,255,.055) !important;
}


.server-stat .n {
    color:
        #eef4f8 !important;

    font-family:
        inherit !important;

    font-size:
        19px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        0 !important;

    white-space:
        nowrap !important;
}


.server-stat .l {
    margin-top:
        5px !important;

    color:
        #697782 !important;

    font-family:
        inherit !important;

    font-size:
        10px !important;

    font-weight:
        500 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    text-transform:
        none !important;

    white-space:
        nowrap !important;
}



/* Bottom IP + connect row */

.server-card-ip {
    grid-column:
        1 / -1 !important;

    grid-row:
        2 !important;

    width:
        100% !important;

    min-height:
        58px !important;

    max-height:
        58px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        10px !important;

    padding:
        9px 14px !important;

    border-left:
        0 !important;

    border-top:
        1px solid rgba(255,255,255,.055) !important;

    background:
        rgba(0,0,0,.14) !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


.server-card-ip-text {
    min-width:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    padding:
        7px 8px !important;

    color:
        #8996a2 !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;

    border:
        0 !important;

    border-radius:
        7px !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}



/*
 * OVO popravlja ogroman logo/button sa screenshota.
 */

.server-card-connect {
    width:
        auto !important;

    min-width:
        112px !important;

    max-width:
        145px !important;

    height:
        40px !important;

    min-height:
        40px !important;

    max-height:
        40px !important;

    margin-left:
        auto !important;

    padding:
        0 13px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

    flex:
        0 0 auto !important;

    overflow:
        hidden !important;

    font-size:
        12px !important;

    font-weight:
        650 !important;

    white-space:
        nowrap !important;
}


.server-card-connect img,
.server-card-connect .vc-brand-icon,
.server-card-connect .vc-connect-icon,
.server-card-connect .vc-server-inline-icon,
#srvModalConnect img {
    width:
        19px !important;

    height:
        19px !important;

    min-width:
        19px !important;

    max-width:
        19px !important;

    min-height:
        19px !important;

    max-height:
        19px !important;

    object-fit:
        cover !important;

    border-radius:
        5px !important;

    flex:
        0 0 19px !important;
}



/* =========================================================
   PANELS / FEATURE CARDS
   ========================================================= */


.panel,
.feature-card,
.card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.017),
            rgba(255,255,255,.004)
        ),
        #0e151c !important;

    border:
        1px solid rgba(255,255,255,.07) !important;

    box-shadow:
        0 12px 36px rgba(0,0,0,.17) !important;

    text-shadow:
        none !important;
}


.feature-card h3 {
    font-size:
        18px !important;

    font-weight:
        700 !important;
}


.feature-card p {
    color:
        #8f9ba6 !important;

    font-size:
        13.5px !important;

    line-height:
        1.65 !important;
}



/* =========================================================
   BUTTONS
   ========================================================= */


.btn {
    font-family:
        inherit !important;

    font-weight:
        600 !important;

    letter-spacing:
        0 !important;

    text-transform:
        none !important;

    text-shadow:
        none !important;
}


.btn-primary {
    background:
        linear-gradient(
            180deg,
            #3695e5,
            #2874bb
        ) !important;

    border-color:
        #419ce8 !important;

    box-shadow:
        0 7px 20px rgba(31,112,181,.18) !important;
}



/* =========================================================
   FORMS / CHIPS
   ========================================================= */


input,
select,
textarea,
.search-box,
.chip {
    font-family:
        inherit !important;

    letter-spacing:
        0 !important;

    text-shadow:
        none !important;
}


.chip {
    text-transform:
        none !important;
}



/* =========================================================
   MODALS
   ========================================================= */


.modal,
.modal * {
    text-shadow:
        none !important;
}


.modal {
    background:
        #0d141b !important;
}



/* =========================================================
   MOBILE SERVER CARDS
   ========================================================= */


@media (max-width:760px) {

    .vc-home-hero {
        min-height:
            580px !important;

        background-position:
            63% center !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(4,8,13,.93),
                rgba(4,8,13,.64) 60%,
                rgba(4,8,13,.35)
            ),
            linear-gradient(
                0deg,
                #070b10,
                transparent 45%
            ),
            url("/assets/img/velocity-home-bg.webp") !important;
    }


    .server-card {
        grid-template-columns:
            1fr !important;

        grid-template-rows:
            auto auto 56px !important;
    }


    .server-card-main {
        grid-column:
            1 !important;

        grid-row:
            1 !important;

        padding:
            18px !important;
    }


    .server-card-stats {
        grid-column:
            1 !important;

        grid-row:
            2 !important;

        border-left:
            0 !important;

        border-top:
            1px solid rgba(255,255,255,.055) !important;
    }


    .server-stat {
        flex:
            1 !important;

        min-width:
            0 !important;

        padding:
            13px !important;
    }


    .server-card-ip {
        grid-column:
            1 !important;

        grid-row:
            3 !important;

        min-height:
            56px !important;

        max-height:
            56px !important;
    }


    .vc-server-logo-wrap {
        width:
            56px !important;

        height:
            56px !important;

        min-width:
            56px !important;

        flex-basis:
            56px !important;
    }


    .vc-server-logo {
        width:
            56px !important;

        height:
            56px !important;

        min-width:
            56px !important;

        max-width:
            56px !important;

        min-height:
            56px !important;

        max-height:
            56px !important;
    }
}



@media (max-width:480px) {

    /*
     * Kad stvarno nema mjesta:
     * samo V ikona u connect buttonu.
     */

    .server-card-connect {
        width:
            42px !important;

        min-width:
            42px !important;

        max-width:
            42px !important;

        padding:
            0 !important;

        font-size:
            0 !important;

        gap:
            0 !important;
    }


    .server-card-connect img,
    .server-card-connect .vc-brand-icon,
    .server-card-connect .vc-connect-icon {
        width:
            22px !important;

        height:
            22px !important;

        min-width:
            22px !important;

        max-width:
            22px !important;
    }


    .server-card-ip-text {
        font-size:
            11px !important;
    }


    .vc-home-hero h1 {
        font-size:
            clamp(37px,12vw,54px) !important;
    }
}


/* VC_FINAL_BLUE_UI_END */

/* VC_POLISH_NAV_LOADER_FOOTER_START */


/* =========================================================
   FINAL POLISH
   NAV + ICONS + LOADER + FOOTER + TYPOGRAPHY
   ========================================================= */

:root {
    /*
     * Gasi posljednje stare orange akcente.
     */
    --signal:#3b9df5 !important;
    --tactical:#3b9df5 !important;
}


/* =========================================================
   1. NORMALNE MODERNE IKONE
   ========================================================= */

/*
 * Zadnji patch je praktično svaki SVG pretvarao
 * u Velocity V sliku.
 *
 * Ovdje vraćamo prave semantic outline ikone.
 */

.vc-icon,
.nav-links svg,
.nav-right svg,
.btn svg,
.feature-icon svg,
.feature-link svg,
.search-box svg,
.chip svg,
.server-card-ip-text svg,
.p-row svg,
.p-row-clickable svg,
.modal svg,
.team-tab svg,
.skin-login-icon svg,
.toast svg {
    background-image:none !important;
    background:none !important;

    color:currentColor !important;

    stroke:currentColor !important;
    fill:none !important;

    border-radius:0 !important;

    overflow:visible !important;

    object-fit:initial !important;
}


.vc-icon *,
.nav-links svg *,
.nav-right svg *,
.btn svg *,
.feature-icon svg *,
.feature-link svg *,
.search-box svg *,
.chip svg *,
.server-card-ip-text svg *,
.p-row svg *,
.p-row-clickable svg *,
.modal svg *,
.team-tab svg *,
.skin-login-icon svg *,
.toast svg * {
    display:initial !important;
}


/*
 * Standardna veličina.
 */

.nav-links .vc-icon {
    width:16px !important;
    height:16px !important;

    min-width:16px !important;
    min-height:16px !important;

    flex:0 0 16px !important;
}


.btn .vc-icon {
    width:16px !important;
    height:16px !important;

    min-width:16px !important;
    min-height:16px !important;
}


/*
 * Feature kartice smiju imati veće line ikonice.
 */

.feature-icon .vc-icon {
    width:21px !important;
    height:21px !important;

    min-width:21px !important;
    min-height:21px !important;
}


/*
 * V logo ostaje samo kao pravi brand image:
 * header brand, server logo, connect logo itd.
 */

.brand-emblem img,
.vc-server-logo,
.vc-brand-icon,
.vc-connect-icon {
    display:block !important;

    object-fit:cover !important;
}



/* =========================================================
   2. GORNJA NAVIGACIJA
   ========================================================= */

.nav {
    background:
        linear-gradient(
            180deg,
            rgba(8,13,19,.985),
            rgba(7,11,16,.965)
        ) !important;

    border-bottom:
        1px solid rgba(87,165,235,.10) !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,.24) !important;
}


.nav-inner {
    min-height:72px !important;

    display:flex !important;
    align-items:center !important;

    gap:18px !important;
}


.nav-inner > .nav-links {
    display:flex !important;
    align-items:center !important;

    gap:3px !important;

    margin-left:8px !important;

    padding:4px !important;

    background:
        rgba(13,20,28,.88) !important;

    border:
        1px solid rgba(255,255,255,.065) !important;

    border-radius:
        12px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02) !important;
}


.nav-inner > .nav-links > a {
    position:relative !important;

    min-height:38px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    padding:
        0 11px !important;

    margin:0 !important;

    border:
        1px solid transparent !important;

    border-radius:
        8px !important;

    color:
        #8f9daa !important;

    background:
        transparent !important;

    font-family:
        inherit !important;

    font-size:
        12.5px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;

    text-transform:
        none !important;

    white-space:
        nowrap !important;

    transform:none !important;

    box-shadow:none !important;
}


.nav-inner > .nav-links > a:hover {
    color:
        #e4edf5 !important;

    background:
        rgba(255,255,255,.04) !important;

    border-color:
        rgba(255,255,255,.055) !important;
}


.nav-inner > .nav-links > a.active {
    color:
        #e8f5ff !important;

    background:
        linear-gradient(
            180deg,
            rgba(59,157,245,.15),
            rgba(59,157,245,.08)
        ) !important;

    border-color:
        rgba(76,169,246,.22) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


.nav-inner > .nav-links > a.active .vc-icon {
    color:
        #69baff !important;
}


/*
 * Ranking fix ostaje.
 */

.nav-links > a[href="/ranking.php"],
.nav-links > a[href="/ranking.php"].active {
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    top:auto !important;
    bottom:auto !important;

    transform:none !important;
    translate:none !important;
    scale:none !important;

    line-height:1 !important;
}


/*
 * Desni dio.
 */

.nav-right {
    margin-left:auto !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;
}


.lang-toggle {
    border-radius:
        9px !important;

    background:
        #0c131b !important;

    border:
        1px solid rgba(255,255,255,.07) !important;
}



/* =========================================================
   3. LOADING SCREEN
   ========================================================= */

/*
 * Stari veliki "VELOCITY COMMUNITY" tekst nestaje.
 * Umjesto njega imamo samo čist V emblem.
 */

#loadScreen {
    position:fixed !important;

    inset:0 !important;

    z-index:9999 !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:16px !important;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(42,133,218,.12),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #091019,
            #060a0f
        ) !important;

    transition:
        opacity .38s ease,
        visibility .38s ease !important;
}


#loadScreen.hidden {
    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;
}


/*
 * Zamjenjuje tekstualni logo V slikom.
 */

#loadScreen .load-logo {
    width:82px !important;
    height:82px !important;

    margin:0 0 5px !important;

    padding:0 !important;

    display:block !important;

    font-size:0 !important;

    line-height:0 !important;

    letter-spacing:0 !important;

    color:transparent !important;

    text-indent:-9999px !important;

    border-radius:
        18px !important;

    background:
        url("/assets/img/velocity-icon.webp")
        center / cover
        no-repeat !important;

    border:
        1px solid rgba(104,187,255,.20) !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.025),
        0 16px 45px rgba(0,0,0,.40),
        0 0 38px rgba(40,139,226,.12) !important;
}


#loadScreen .load-logo em {
    display:none !important;
}


#loadScreen .load-sub {
    margin:0 !important;

    color:
        #788998 !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    letter-spacing:
        .08em !important;

    text-transform:
        uppercase !important;
}


#loadScreen .load-bar-track {
    width:
        min(240px,60vw) !important;

    height:
        3px !important;

    margin-top:
        5px !important;

    overflow:
        hidden !important;

    border-radius:
        999px !important;

    background:
        rgba(255,255,255,.075) !important;
}


#loadScreen .load-bar-fill {
    height:
        100% !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            90deg,
            #2677cf,
            #48a8f5,
            #7dcaff
        ) !important;

    box-shadow:
        0 0 14px rgba(59,157,245,.30) !important;
}


#loadScreen .load-pct {
    color:
        #627484 !important;

    font-family:
        inherit !important;

    font-size:
        10.5px !important;

    font-weight:
        600 !important;

    letter-spacing:
        .02em !important;
}



/* =========================================================
   4. FOOTER
   ========================================================= */

footer,
.footer {
    position:relative;

    background:
        radial-gradient(
            650px 250px at 20% 0,
            rgba(45,130,207,.065),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #080d13,
            #060a0f
        ) !important;

    border-top:
        1px solid rgba(88,166,236,.09) !important;

    color:
        #84929e !important;
}


/*
 * Footer navigacija bez malih ikonki.
 */

footer nav svg,
footer nav .vc-icon,
.footer nav svg,
.footer nav .vc-icon,
footer .footer-links svg,
footer .footer-links .vc-icon,
.footer .footer-links svg,
.footer .footer-links .vc-icon {
    display:none !important;
}


footer h3,
footer h4,
footer h5,
.footer h3,
.footer h4,
.footer h5 {
    color:
        #dfe8ef !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        .045em !important;

    text-transform:
        uppercase !important;
}


footer p,
.footer p {
    color:
        #83909c !important;

    font-family:
        inherit !important;

    font-size:
        13.5px !important;

    font-weight:
        400 !important;

    line-height:
        1.7 !important;

    letter-spacing:
        0 !important;
}


footer a,
.footer a {
    color:
        #84929f !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        0 !important;

    text-decoration:
        none !important;

    transition:
        color .15s ease !important;
}


footer a:hover,
.footer a:hover {
    color:
        #68b6f8 !important;
}


/*
 * Glavna ikona iznad:
 * "CS2 zajednica napravljena za igrače..."
 *
 * Ako koristi bilo koju od standardnih footer/brand klasa,
 * dobija plavu pozadinu umjesto stare narandžaste.
 */

footer .footer-brand-icon,
footer .footer-logo-wrap,
footer .footer-mark,
footer .brand-emblem,
.footer .footer-brand-icon,
.footer .footer-logo-wrap,
.footer .footer-mark {
    background:
        linear-gradient(
            145deg,
            rgba(55,151,235,.16),
            rgba(32,93,153,.08)
        ) !important;

    border-color:
        rgba(80,169,246,.20) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25),
        0 0 24px rgba(47,143,226,.08) !important;
}


/*
 * Ako je stari icon container još koristio
 * var(--signal), nova varijabla je sada plava.
 */

footer [style*="var(--signal)"],
.footer [style*="var(--signal)"] {
    color:
        #55aef5 !important;

    border-color:
        rgba(74,165,241,.24) !important;
}



/* =========================================================
   5. GLOBAL TEXT POLISH
   ========================================================= */

body {
    color:
        #e9eff4 !important;

    font-size:
        15px !important;

    line-height:
        1.65 !important;
}


p {
    color:
        #96a3ae !important;

    font-size:
        14px;

    line-height:
        1.72 !important;
}


.lead {
    color:
        #a6b2bc !important;

    font-size:
        clamp(15px,1.4vw,17px) !important;

    line-height:
        1.72 !important;
}


.section-head p {
    color:
        #96a4b0 !important;

    font-size:
        14.5px !important;

    line-height:
        1.7 !important;
}


h1 {
    font-weight:
        740 !important;

    letter-spacing:
        -.04em !important;
}


h2 {
    font-weight:
        720 !important;

    letter-spacing:
        -.035em !important;
}


h3 {
    font-weight:
        680 !important;

    letter-spacing:
        -.018em !important;
}



/* =========================================================
   6. PANELS / BLUE ACCENTS
   ========================================================= */

.panel,
.card,
.feature-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.004)
        ),
        #0d141b !important;

    border-color:
        rgba(255,255,255,.07) !important;
}


.feature-icon {
    color:
        #66b7fa !important;

    background:
        linear-gradient(
            145deg,
            rgba(59,157,245,.12),
            rgba(59,157,245,.045)
        ) !important;

    border-color:
        rgba(75,168,244,.18) !important;
}


.feature-link {
    color:
        #67b5f7 !important;
}



/* =========================================================
   7. RESPONSIVE NAV
   ========================================================= */

@media (max-width:1100px) {

    .nav-inner > .nav-links > a {
        padding-left:
            9px !important;

        padding-right:
            9px !important;

        font-size:
            12px !important;
    }
}


@media (max-width:900px) {

    .nav-inner > .nav-links {
        display:none !important;
    }


    #mobileNav {
        margin-top:
            0 !important;

        padding:
            8px 0 14px !important;

        background:
            #080d13 !important;

        border-top:
            1px solid rgba(255,255,255,.055) !important;
    }


    #mobileNav > a {
        width:
            100% !important;

        min-height:
            42px !important;

        justify-content:
            flex-start !important;

        padding:
            0 12px !important;

        border-radius:
            8px !important;
    }
}


@media (max-width:520px) {

    #loadScreen .load-logo {
        width:
            70px !important;

        height:
            70px !important;

        border-radius:
            15px !important;
    }
}


/* VC_POLISH_NAV_LOADER_FOOTER_END */


/* =========================================================
   VC FINAL NAV / HERO / LOADER / FOOTER POLISH
   ========================================================= */


/* ---------------------------------------------------------
   GENERAL TEXT
   --------------------------------------------------------- */

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Inter,
        Roboto,
        Arial,
        sans-serif !important;

    font-size:15px !important;
    line-height:1.65 !important;

    color:#eaf0f5 !important;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

p {
    color:#9aa8b4 !important;
    line-height:1.72 !important;
}

.lead {
    color:#aab6c0 !important;
    line-height:1.7 !important;
}

h1,
h2,
h3,
h4 {
    text-shadow:none !important;
}


/* ---------------------------------------------------------
   TOP NAVIGATION
   --------------------------------------------------------- */

.nav {
    background:
        rgba(7,12,18,.97) !important;

    border-bottom:
        1px solid rgba(70,157,232,.11) !important;

    box-shadow:
        0 8px 32px rgba(0,0,0,.24) !important;
}


.nav-inner {
    min-height:72px !important;

    display:flex !important;
    align-items:center !important;

    gap:18px !important;
}


.nav-inner > .nav-links {
    margin-left:10px !important;

    display:flex !important;
    align-items:center !important;

    gap:4px !important;

    padding:5px !important;

    border-radius:12px !important;

    background:
        rgba(14,21,29,.92) !important;

    border:
        1px solid rgba(255,255,255,.065) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}


.nav-inner > .nav-links > a {
    min-height:38px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    padding:
        0 11px !important;

    color:#8998a5 !important;

    background:
        transparent !important;

    border:
        1px solid transparent !important;

    border-radius:
        8px !important;

    font-size:
        12.5px !important;

    font-weight:
        600 !important;

    letter-spacing:
        0 !important;

    line-height:
        1 !important;

    text-transform:
        none !important;

    transform:
        none !important;

    white-space:
        nowrap !important;
}


.nav-inner > .nav-links > a:hover {
    color:
        #e5edf4 !important;

    background:
        rgba(255,255,255,.045) !important;

    border-color:
        rgba(255,255,255,.06) !important;
}


.nav-inner > .nav-links > a.active {
    color:
        #eef8ff !important;

    background:
        linear-gradient(
            180deg,
            rgba(55,157,244,.17),
            rgba(55,157,244,.08)
        ) !important;

    border-color:
        rgba(76,171,247,.24) !important;
}


.nav-inner > .nav-links > a .vc-icon {
    width:
        15px !important;

    height:
        15px !important;

    min-width:
        15px !important;

    min-height:
        15px !important;

    color:
        #718698 !important;

    background:
        none !important;

    stroke:
        currentColor !important;

    fill:
        none !important;

    border-radius:
        0 !important;
}


.nav-inner > .nav-links > a.active .vc-icon {
    color:
        #67b8fb !important;
}


.nav-links > a[href="/ranking.php"],
.nav-links > a[href="/ranking.php"].active {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    top:auto !important;
    bottom:auto !important;

    transform:none !important;
    translate:none !important;
    scale:none !important;
}


/* ---------------------------------------------------------
   NEW PAGE HEROES — KAZNE / SKINOVI
   --------------------------------------------------------- */

.vc-page-hero {
    position:relative !important;

    min-height:
        350px !important;

    display:flex !important;
    align-items:center !important;

    padding:
        74px 0 65px !important;

    overflow:hidden !important;

    border-bottom:
        1px solid rgba(74,159,232,.12) !important;

    background-color:
        #080d13 !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        cover !important;
}


.vc-page-hero::after {
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(5,9,14,.97) 0%,
            rgba(5,9,14,.89) 34%,
            rgba(5,9,14,.52) 64%,
            rgba(5,9,14,.23) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,11,16,.72),
            transparent 55%
        );
}


.vc-page-hero .container {
    position:relative;

    z-index:2;
}


.vc-page-hero .eyebrow {
    display:inline-flex !important;
    align-items:center !important;

    gap:7px !important;

    color:#68b8f8 !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .075em !important;

    text-transform:
        uppercase !important;
}


.vc-page-hero h1 {
    max-width:
        650px;

    margin:
        14px 0 13px !important;

    color:
        #f4f7f9 !important;

    font-size:
        clamp(40px,5vw,62px) !important;

    font-weight:
        740 !important;

    line-height:
        1.03 !important;

    letter-spacing:
        -.045em !important;

    text-transform:
        none !important;
}


.vc-page-hero .lead,
.vc-page-hero p {
    max-width:
        700px;

    margin-bottom:
        0 !important;

    color:
        #a8b5bf !important;

    font-size:
        15px !important;

    line-height:
        1.7 !important;
}


.vc-punishments-hero {
    background-image:
        url("/assets/img/velocity-punishments-hero.webp") !important;
}


.vc-skins-hero {
    background-image:
        url("/assets/img/velocity-skins-hero.webp") !important;
}


/* ---------------------------------------------------------
   LOADING SCREEN
   --------------------------------------------------------- */

#loadScreen {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(43,140,224,.14),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #09111a,
            #060a0f
        ) !important;

    gap:
        15px !important;
}


#loadScreen .load-logo {
    width:
        76px !important;

    height:
        76px !important;

    margin:
        0 !important;

    font-size:
        0 !important;

    text-indent:
        -9999px !important;

    border-radius:
        17px !important;

    background:
        url("/assets/img/velocity-favicon.png")
        center / cover
        no-repeat !important;

    border:
        1px solid rgba(86,177,250,.22) !important;

    box-shadow:
        0 14px 45px rgba(0,0,0,.42),
        0 0 34px rgba(41,143,226,.13) !important;
}


#loadScreen .load-logo * {
    display:none !important;
}


#loadScreen .load-sub {
    margin:
        3px 0 0 !important;

    color:
        #b4c2cd !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        650 !important;

    letter-spacing:
        .05em !important;

    text-transform:
        none !important;
}


#loadScreen .load-bar-track {
    width:
        230px !important;

    height:
        3px !important;

    background:
        rgba(255,255,255,.075) !important;
}


#loadScreen .load-bar-fill {
    background:
        linear-gradient(
            90deg,
            #277bd0,
            #45a7f5,
            #82ceff
        ) !important;

    box-shadow:
        0 0 15px rgba(59,157,245,.32) !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

footer,
.footer {
    background:
        radial-gradient(
            620px 230px at 12% 0,
            rgba(46,136,215,.065),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            #080d13,
            #060a0f
        ) !important;

    border-top:
        1px solid rgba(73,159,233,.10) !important;
}


footer img[src*="velocity-favicon"],
.footer img[src*="velocity-favicon"] {
    width:
        52px !important;

    height:
        52px !important;

    padding:
        0 !important;

    object-fit:
        cover !important;

    border-radius:
        12px !important;

    background:
        #09182a !important;

    border:
        1px solid rgba(73,164,241,.20) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.28),
        0 0 28px rgba(45,144,228,.09) !important;
}


footer h3,
footer h4,
footer h5,
.footer h3,
.footer h4,
.footer h5 {
    margin-bottom:
        16px !important;

    color:
        #dce7ef !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .045em !important;

    text-transform:
        uppercase !important;
}


footer p,
.footer p {
    color:
        #8e9ca8 !important;

    font-size:
        13.5px !important;

    line-height:
        1.72 !important;
}


footer a,
.footer a {
    color:
        #8796a3 !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    letter-spacing:
        0 !important;

    text-decoration:
        none !important;

    transition:
        color .15s ease,
        transform .15s ease !important;
}


footer a:hover,
.footer a:hover {
    color:
        #68b8f8 !important;
}


footer nav svg,
footer .footer-links svg,
.footer nav svg,
.footer .footer-links svg {
    display:
        none !important;
}


/* ---------------------------------------------------------
   BLUE ACCENTS INSTEAD OF ORANGE
   --------------------------------------------------------- */

:root {
    --signal:
        #3b9df5 !important;

    --tactical:
        #3b9df5 !important;
}


.feature-icon,
.skin-login-icon {
    color:
        #65b6f8 !important;

    background:
        linear-gradient(
            145deg,
            rgba(59,157,245,.14),
            rgba(59,157,245,.055)
        ) !important;

    border-color:
        rgba(72,166,242,.20) !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:900px) {

    .nav-inner > .nav-links {
        display:none !important;
    }


    .vc-page-hero {
        min-height:
            315px !important;

        padding:
            62px 0 55px !important;

        background-position:
            65% center !important;
    }


    .vc-page-hero::after {
        background:
            linear-gradient(
                90deg,
                rgba(5,9,14,.96),
                rgba(5,9,14,.74) 70%,
                rgba(5,9,14,.50)
            ) !important;
    }
}


@media (max-width:520px) {

    .vc-page-hero {
        min-height:
            285px !important;
    }


    .vc-page-hero h1 {
        font-size:
            40px !important;
    }


    #loadScreen .load-logo {
        width:
            66px !important;

        height:
            66px !important;
    }
}


/* ========================================================= */

/* VC_CONTENT_POLISH_FINAL_START */


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Inter,
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;

    color:#e9eff4 !important;

    font-size:15px !important;
    line-height:1.65 !important;

    letter-spacing:0 !important;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:inherit !important;

    color:#f2f6f9 !important;

    text-transform:none !important;
    text-shadow:none !important;

    letter-spacing:-.025em !important;
}


h1 {
    font-weight:750 !important;
}


h2 {
    font-weight:720 !important;
}


h3 {
    font-weight:680 !important;
}


p,
.lead,
.section-head p {
    color:#9ba8b3 !important;

    line-height:1.72 !important;

    letter-spacing:0 !important;

    text-shadow:none !important;
}


.lead {
    color:#aab6c0 !important;

    font-size:
        clamp(15px,1.25vw,17px) !important;
}


.eyebrow {
    color:#68b9fa !important;

    font-family:inherit !important;

    font-weight:700 !important;

    letter-spacing:.07em !important;
}


/*
 * Mono ostaje samo tamo gdje stvarno treba,
 * ali bez razvučenih gaming slova.
 */
.mono {
    letter-spacing:0 !important;
}



/* =========================================================
   CLEAN NAV
   ========================================================= */

.vc-main-nav {
    display:flex !important;
    align-items:center !important;

    gap:3px !important;

    margin-left:8px !important;

    padding:5px !important;

    background:
        linear-gradient(
            180deg,
            rgba(17,25,34,.95),
            rgba(12,19,27,.95)
        ) !important;

    border:
        1px solid rgba(255,255,255,.07) !important;

    border-radius:12px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 8px 25px rgba(0,0,0,.14) !important;
}


.vc-main-nav > a {
    min-height:38px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    padding:
        0 11px !important;

    margin:0 !important;

    color:#8b99a5 !important;

    background:transparent !important;

    border:
        1px solid transparent !important;

    border-radius:8px !important;

    font-family:inherit !important;

    font-size:12.5px !important;
    font-weight:600 !important;

    line-height:1 !important;

    letter-spacing:0 !important;

    text-transform:none !important;

    white-space:nowrap !important;

    transform:none !important;
    translate:none !important;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease !important;
}


.vc-main-nav > a:hover {
    color:#e7eef4 !important;

    background:
        rgba(255,255,255,.045) !important;

    border-color:
        rgba(255,255,255,.06) !important;
}


.vc-main-nav > a.active {
    color:#eef8ff !important;

    background:
        linear-gradient(
            180deg,
            rgba(57,158,244,.17),
            rgba(57,158,244,.075)
        ) !important;

    border-color:
        rgba(75,170,246,.24) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


.vc-main-nav > a .vc-icon {
    width:15px !important;
    height:15px !important;

    min-width:15px !important;
    min-height:15px !important;

    flex:0 0 15px !important;

    color:#71879a !important;

    background:none !important;

    fill:none !important;
    stroke:currentColor !important;

    border-radius:0 !important;
}


.vc-main-nav > a.active .vc-icon {
    color:#69bbfb !important;
}


/* Ranking ostaje vertikalno potpuno poravnat. */

.vc-main-nav > a[href="/ranking.php"],
.vc-main-nav > a[href="/ranking.php"].active {
    top:auto !important;
    bottom:auto !important;

    transform:none !important;
    translate:none !important;
    scale:none !important;
}



/* =========================================================
   SKINOVI — TEAM / LOADOUT
   ========================================================= */


/*
 * T / CT izbor
 */

.team-tabs {
    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:12px !important;

    margin:
        24px 0 16px !important;
}


.team-tab {
    min-height:72px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:
        16px 20px !important;

    background:
        linear-gradient(
            180deg,
            #111a24,
            #0d151d
        ) !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    border-radius:13px !important;

    color:#97a5b1 !important;

    font-family:inherit !important;

    font-weight:650 !important;

    box-shadow:
        none !important;
}


.team-tab:hover {
    border-color:
        rgba(83,167,236,.20) !important;

    background:
        #111c27 !important;
}


.team-tab.active {
    color:#eef8ff !important;

    border-color:
        rgba(60,159,242,.35) !important;

    background:
        linear-gradient(
            180deg,
            rgba(50,146,229,.13),
            rgba(31,91,145,.07)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(62,160,243,.035) !important;
}


.team-tab .tt-name {
    font-family:inherit !important;

    font-size:17px !important;
    font-weight:700 !important;

    letter-spacing:-.01em !important;

    text-transform:none !important;
}



/*
 * LOADOUT PREVIEW
 */

#vcLoadoutPreview,
.vc-loadout-preview {
    width:100% !important;

    margin:
        0 0 28px !important;

    padding:
        20px !important;

    gap:
        14px !important;

    background:
        radial-gradient(
            500px 180px at 50% 0,
            rgba(50,146,229,.075),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #0f1822,
            #0b1219
        ) !important;

    border:
        1px solid rgba(75,164,238,.13) !important;

    border-radius:
        15px !important;

    box-shadow:
        0 14px 38px rgba(0,0,0,.18) !important;
}


.vc-loadout-item {
    min-width:155px !important;

    min-height:142px !important;

    padding:
        15px !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ),
        #101821 !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.15) !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease !important;
}


.vc-loadout-item:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(72,165,242,.28) !important;

    background:
        #121e29 !important;
}


.vc-loadout-item img {
    width:
        100% !important;

    max-width:
        155px !important;

    height:
        76px !important;

    object-fit:
        contain !important;

    filter:
        drop-shadow(0 7px 12px rgba(0,0,0,.24));
}


.vc-loadout-item > span {
    max-width:
        100%;

    color:
        #e6edf3 !important;

    font-family:
        inherit !important;

    font-size:
        12.5px !important;

    font-weight:
        650 !important;

    line-height:
        1.25 !important;

    text-align:
        center;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.vc-loadout-item small,
.vc-default-item {
    color:
        #71808c !important;

    font-family:
        inherit !important;

    font-size:
        9px !important;

    font-weight:
        650 !important;

    letter-spacing:
        .05em !important;

    text-transform:
        uppercase !important;
}


/*
 * Kategorije.
 */

.cat-tabs {
    display:flex !important;
    align-items:center !important;

    gap:7px !important;

    margin:
        17px 0 20px !important;

    padding:
        6px !important;

    border:
        1px solid rgba(255,255,255,.06) !important;

    border-radius:
        11px !important;

    background:
        #0c131a !important;
}


.cat-tabs .chip {
    min-height:38px !important;

    padding:
        8px 13px !important;

    border-radius:
        8px !important;
}


/*
 * Same weapon kartice za izbor.
 */

.weapon-grid {
    display:grid !important;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(165px,1fr)
        ) !important;

    gap:12px !important;
}


.weapon-card {
    min-height:
        132px !important;

    padding:
        15px !important;

    border-radius:
        12px !important;
}


.weapon-card img {
    height:
        70px !important;

    margin-bottom:
        8px !important;

    object-fit:
        contain !important;
}


.weapon-card .wn {
    font-size:
        13px !important;

    font-weight:
        650 !important;

    line-height:
        1.3 !important;
}


.weapon-card .ws {
    margin-top:
        4px !important;

    font-size:
        10.5px !important;
}



/* =========================================================
   KAZNE — SEARCH / FILTERS
   ========================================================= */


/*
 * Prvi filter red.
 */

.filter-bar {
    gap:
        10px !important;
}


.filter-bar:first-of-type {
    padding:
        12px !important;

    margin-bottom:
        12px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.005)
        ),
        #0d151d !important;

    border:
        1px solid rgba(255,255,255,.07) !important;

    border-radius:
        13px !important;
}


.search-box {
    min-height:
        48px !important;

    padding:
        0 15px !important;

    display:flex !important;
    align-items:center !important;

    gap:
        10px !important;

    background:
        #101923 !important;

    border:
        1px solid rgba(255,255,255,.085) !important;

    border-radius:
        10px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.015) !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease !important;
}


.search-box:focus-within {
    border-color:
        rgba(65,164,245,.42) !important;

    box-shadow:
        0 0 0 3px
        rgba(59,157,245,.07) !important;
}


.search-box .vc-icon,
.search-box svg {
    width:
        17px !important;

    height:
        17px !important;

    color:
        #5baef4 !important;

    background:
        none !important;

    stroke:
        currentColor !important;

    fill:
        none !important;
}


#searchInput {
    min-height:
        46px !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    color:
        #e9f0f5 !important;

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        450 !important;
}


#searchInput::placeholder {
    color:
        #667480 !important;
}


#statusSelect {
    min-height:
        48px !important;

    padding:
        0 36px 0 14px !important;

    background-color:
        #101923 !important;

    border:
        1px solid rgba(255,255,255,.085) !important;

    border-radius:
        10px !important;

    color:
        #a8b4be !important;

    font-size:
        13px !important;
}


#typeChips {
    margin-bottom:
        20px !important;

    padding:
        5px !important;

    gap:
        5px !important;

    background:
        #0b1219 !important;

    border:
        1px solid rgba(255,255,255,.055) !important;

    border-radius:
        11px !important;
}


#typeChips .chip {
    min-height:
        38px !important;

    padding:
        7px 12px !important;

    border:
        1px solid transparent !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    color:
        #82909c !important;
}


#typeChips .chip:hover {
    color:
        #e2eaf0 !important;

    background:
        rgba(255,255,255,.035) !important;
}


#typeChips .chip.active {
    color:
        #dcefff !important;

    background:
        rgba(57,157,242,.105) !important;

    border-color:
        rgba(68,164,243,.22) !important;

    box-shadow:
        none !important;
}



/* =========================================================
   KAZNE — PLAYER ROWS
   ========================================================= */

.p-table {
    overflow:
        visible !important;

    background:
        transparent !important;

    border:
        0 !important;
}


.p-row.head {
    margin-bottom:
        8px !important;

    padding:
        11px 15px !important;

    color:
        #687681 !important;

    background:
        #0a1118 !important;

    border:
        1px solid rgba(255,255,255,.05) !important;

    border-radius:
        9px !important;

    font-family:
        inherit !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .055em !important;

    text-transform:
        uppercase !important;
}


#pRows {
    display:flex !important;
    flex-direction:column !important;

    gap:
        8px !important;
}


#pRows .p-row,
#pRows .p-row-clickable {
    position:
        relative;

    margin:
        0 !important;

    padding:
        13px 15px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.006)
        ),
        #0e161e !important;

    border:
        1px solid rgba(255,255,255,.065) !important;

    border-radius:
        11px !important;

    box-shadow:
        0 7px 22px rgba(0,0,0,.10) !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease !important;
}


#pRows .p-row:hover,
#pRows .p-row-clickable:hover {
    transform:
        translateY(-1px);

    background:
        linear-gradient(
            90deg,
            rgba(50,148,231,.055),
            transparent 45%
        ),
        #101922 !important;

    border-color:
        rgba(70,164,239,.20) !important;
}


#pRows .p-row > div {
    color:
        #a6b2bc;

    font-family:
        inherit !important;

    font-size:
        12.5px;

    line-height:
        1.4;
}


#pRows .p-player,
#pRows .p-player strong,
#pRows .player-name {
    color:
        #e7edf2 !important;

    font-weight:
        650 !important;
}


#pRows .p-reason {
    color:
        #a7b2bb !important;
}


#pRows .p-admin {
    color:
        #8e9ca7 !important;
}


#pRows .p-duration,
#pRows .p-date {
    color:
        #8795a0 !important;

    font-family:
        inherit !important;
}


#pRows .avatar,
#pRows .p-avatar {
    border:
        1px solid rgba(75,164,238,.18) !important;

    box-shadow:
        0 6px 18px rgba(0,0,0,.20) !important;
}


.badge {
    border-radius:
        7px !important;

    font-family:
        inherit !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .025em !important;

    text-transform:
        uppercase !important;
}



/* =========================================================
   MODALS / SMALL TEXT
   ========================================================= */

.modal {
    color:
        #e8eef3 !important;
}


.modal .mono {
    color:
        #75838f !important;

    font-family:
        inherit !important;

    letter-spacing:
        .035em !important;
}


.modal-body {
    color:
        #9eabb5 !important;

    line-height:
        1.6 !important;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:900px) {

    .vc-main-nav {
        display:none !important;
    }


    .vc-mobile-nav {
        padding:
            8px !important;

        gap:
            3px !important;

        background:
            #091018 !important;

        border-top:
            1px solid rgba(255,255,255,.06) !important;
    }


    .vc-mobile-nav > a {
        width:
            100% !important;

        min-height:
            43px !important;

        display:flex !important;
        align-items:center !important;

        gap:
            9px !important;

        padding:
            0 12px !important;

        color:
            #92a0ac !important;

        border-radius:
            8px !important;
    }


    .weapon-grid {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(145px,1fr)
            ) !important;
    }


    .vc-loadout-item {
        min-width:
            135px !important;
    }
}


@media (max-width:600px) {

    .team-tab {
        min-height:
            62px !important;

        padding:
            13px 10px !important;
    }


    .vc-loadout-preview,
    #vcLoadoutPreview {
        padding:
            13px !important;
    }


    .vc-loadout-item {
        min-width:
            115px !important;

        min-height:
            125px !important;

        padding:
            11px !important;
    }


    .vc-loadout-item img {
        height:
            60px !important;
    }


    .weapon-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    .weapon-card {
        min-height:
            120px !important;
    }


    .filter-bar:first-of-type {
        padding:
            9px !important;
    }


    .search-box {
        width:
            100% !important;

        flex-basis:
            100% !important;
    }


    #statusSelect {
        width:
            100% !important;
    }
}


/* VC_CONTENT_POLISH_FINAL_END */


/* =========================================================
   VC FINAL CENTER NAV + LOADOUT + FOOTER
   ========================================================= */


/* ---------------------------------------------------------
   CENTERED DESKTOP NAV
   --------------------------------------------------------- */

@media (min-width:901px) {

    .nav-inner {
        position:relative !important;

        display:grid !important;

        grid-template-columns:
            minmax(170px,1fr)
            auto
            minmax(170px,1fr) !important;

        align-items:center !important;

        gap:18px !important;
    }


    .nav-inner > .brand {
        grid-column:1 !important;

        justify-self:start !important;
    }


    .nav-inner > .vc-main-nav,
    .nav-inner > .nav-links:not(#mobileNav) {
        grid-column:2 !important;

        justify-self:center !important;

        margin:
            0 !important;
    }


    .nav-inner > .nav-right {
        grid-column:3 !important;

        justify-self:end !important;

        margin-left:
            0 !important;
    }
}


/*
 * Nav malo uredniji i kompaktniji.
 */

.vc-main-nav {
    padding:
        5px !important;

    gap:
        3px !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            180deg,
            rgba(17,25,35,.97),
            rgba(12,19,27,.97)
        ) !important;

    border:
        1px solid rgba(255,255,255,.07) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 8px 26px rgba(0,0,0,.16) !important;
}


.vc-main-nav > a {
    min-height:
        38px !important;

    padding:
        0 12px !important;

    gap:
        7px !important;

    color:
        #8f9da9 !important;

    border-radius:
        8px !important;

    font-size:
        12.5px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;
}


.vc-main-nav > a:hover {
    color:
        #e8eff5 !important;

    background:
        rgba(255,255,255,.04) !important;
}


.vc-main-nav > a.active {
    color:
        #edf8ff !important;

    background:
        linear-gradient(
            180deg,
            rgba(55,158,245,.17),
            rgba(55,158,245,.075)
        ) !important;

    border-color:
        rgba(74,169,246,.24) !important;
}


.vc-main-nav > a .vc-icon {
    width:
        15px !important;

    height:
        15px !important;

    min-width:
        15px !important;

    min-height:
        15px !important;

    color:
        #72889a !important;
}


.vc-main-nav > a.active .vc-icon {
    color:
        #69bbfb !important;
}



/* ---------------------------------------------------------
   SKINOVI — BIGGER, CLEANER LOADOUT
   --------------------------------------------------------- */

#vcLoadoutPreview,
.vc-loadout-preview {
    width:
        100% !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px,1fr)
        ) !important;

    align-items:
        stretch !important;

    gap:
        16px !important;

    padding:
        20px !important;

    margin:
        0 0 30px !important;

    box-sizing:
        border-box !important;

    background:
        radial-gradient(
            600px 200px at 50% 0,
            rgba(56,154,239,.085),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #101923,
            #0b1219
        ) !important;

    border:
        1px solid rgba(74,165,239,.15) !important;

    border-radius:
        16px !important;

    box-shadow:
        0 16px 42px rgba(0,0,0,.20) !important;

    overflow:
        visible !important;
}


.vc-loadout-item {
    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    min-height:
        160px !important;

    padding:
        16px 14px !important;

    box-sizing:
        border-box !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        10px !important;

    overflow:
        hidden !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.006)
        ),
        #111a23 !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 9px 24px rgba(0,0,0,.17) !important;
}


.vc-loadout-item:hover {
    transform:
        translateY(-2px) !important;

    background:
        #13202b !important;

    border-color:
        rgba(70,165,242,.28) !important;
}


.vc-loadout-item img {
    display:
        block !important;

    width:
        100% !important;

    max-width:
        175px !important;

    height:
        92px !important;

    min-height:
        92px !important;

    margin:
        0 auto !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    opacity:
        1 !important;

    transform:
        none !important;

    filter:
        drop-shadow(
            0 9px 14px
            rgba(0,0,0,.28)
        ) !important;
}


.vc-loadout-item > span {
    display:block !important;

    width:
        100% !important;

    color:
        #e8eef3 !important;

    font-size:
        12.5px !important;

    font-weight:
        650 !important;

    line-height:
        1.3 !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}


.vc-loadout-item small {
    color:
        #70808d !important;

    font-size:
        9.5px !important;

    font-weight:
        650 !important;

    letter-spacing:
        .04em !important;
}


/*
 * T / CT izbor malo čvršći.
 */

.team-tabs {
    margin-bottom:
        16px !important;

    gap:
        12px !important;
}


.team-tab {
    min-height:
        72px !important;

    border-radius:
        13px !important;
}



/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

footer,
.footer {
    padding-top:
        54px !important;

    background:
        radial-gradient(
            600px 260px at 10% 0,
            rgba(42,136,216,.075),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            #080e14,
            #060a0f
        ) !important;

    border-top:
        1px solid rgba(69,157,233,.11) !important;
}


/*
 * Ako footer koristi grid.
 */

footer .footer-grid,
.footer .footer-grid {
    display:
        grid !important;

    grid-template-columns:
        minmax(250px,1.35fr)
        repeat(3,minmax(150px,1fr)) !important;

    gap:
        48px !important;

    align-items:
        start !important;
}


/*
 * Brand / lijevi dio.
 */

footer .footer-brand,
.footer .footer-brand {
    max-width:
        330px !important;
}


footer .footer-brand p,
.footer .footer-brand p {
    margin-top:
        18px !important;

    color:
        #98a6b2 !important;

    font-size:
        13.5px !important;

    line-height:
        1.75 !important;
}


/*
 * Lijevi Velocity logo:
 * nema više narandžaste pozadine / glow-a.
 */

footer img[src*="velocity"],
.footer img[src*="velocity"] {
    background:
        linear-gradient(
            145deg,
            #0c2740,
            #081624
        ) !important;

    border:
        1px solid rgba(73,166,244,.24) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.30),
        0 0 26px rgba(48,145,229,.11) !important;

    filter:
        none !important;
}


footer .footer-logo-wrap,
footer .footer-brand-icon,
footer .footer-mark,
footer .brand-emblem,
.footer .footer-logo-wrap,
.footer .footer-brand-icon,
.footer .footer-mark {
    background:
        linear-gradient(
            145deg,
            rgba(42,144,228,.18),
            rgba(18,61,99,.12)
        ) !important;

    border-color:
        rgba(72,165,242,.22) !important;

    box-shadow:
        none !important;
}


/*
 * Naslovi footer kolona.
 */

footer h3,
footer h4,
footer h5,
.footer h3,
.footer h4,
.footer h5 {
    position:
        relative;

    margin:
        0 0 18px !important;

    padding-bottom:
        10px !important;

    color:
        #dfe8ef !important;

    font-size:
        11.5px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .06em !important;

    text-transform:
        uppercase !important;
}


footer h3::after,
footer h4::after,
footer h5::after,
.footer h3::after,
.footer h4::after,
.footer h5::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        28px;

    height:
        2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #3b9df5,
            #70c5ff
        );
}


/*
 * Footer linkovi.
 */

footer a,
.footer a {
    display:
        inline-flex !important;

    align-items:
        center !important;

    min-height:
        31px !important;

    padding:
        3px 0 !important;

    color:
        #8796a3 !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.4 !important;

    text-decoration:
        none !important;

    letter-spacing:
        0 !important;

    transition:
        color .15s ease,
        transform .15s ease !important;
}


footer a:hover,
.footer a:hover {
    color:
        #69b9fa !important;

    transform:
        translateX(2px);
}


/*
 * Footer nav linkovi bez malih ikonica.
 */

footer nav svg,
footer .footer-links svg,
footer nav .vc-icon,
footer .footer-links .vc-icon,
.footer nav svg,
.footer .footer-links svg {
    display:
        none !important;
}



/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:900px) {

    .nav-inner {
        display:flex !important;

        align-items:center !important;
    }


    .vc-main-nav {
        display:none !important;
    }


    .nav-right {
        margin-left:
            auto !important;
    }


    #vcLoadoutPreview,
    .vc-loadout-preview {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(135px,1fr)
            ) !important;

        gap:
            12px !important;

        padding:
            14px !important;
    }


    .vc-loadout-item {
        min-height:
            145px !important;
    }


    .vc-loadout-item img {
        height:
            78px !important;

        min-height:
            78px !important;
    }


    footer .footer-grid,
    .footer .footer-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:
            32px !important;
    }
}


@media (max-width:580px) {

    #vcLoadoutPreview,
    .vc-loadout-preview {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }


    .vc-loadout-item {
        min-height:
            135px !important;

        padding:
            11px !important;
    }


    .vc-loadout-item img {
        height:
            66px !important;

        min-height:
            66px !important;
    }


    footer .footer-grid,
    .footer .footer-grid {
        grid-template-columns:
            1fr !important;

        gap:
            28px !important;
    }
}


/* ========================================================= */

/* VC_FOOTER_LINKS_FINAL_START */


/* =========================================================
   FOOTER — CLEAN VERTICAL LINK COLUMNS
   ========================================================= */


/*
 * Navigacija / Zajednica / Informacije
 * idu uredno jedan link ispod drugog.
 */

footer .footer-grid > *:not(:first-child),
.footer .footer-grid > *:not(:first-child),
footer .footer-col,
.footer .footer-col {
    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    gap:4px !important;
}


/*
 * Ako postoje posebni wrapperi za linkove.
 */

footer .footer-links,
.footer .footer-links,
footer nav,
.footer nav {
    display:flex !important;

    flex-direction:column !important;

    align-items:stretch !important;

    width:100% !important;

    gap:4px !important;
}


/*
 * Naslovi kolona.
 */

footer h3,
footer h4,
footer h5,
.footer h3,
.footer h4,
.footer h5 {
    width:100% !important;

    margin:
        0 0 14px !important;

    padding:
        0 0 11px !important;

    color:
        #e2ebf2 !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        750 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .07em !important;

    text-transform:
        uppercase !important;

    border-bottom:
        1px solid rgba(255,255,255,.055) !important;
}


/*
 * Mala plava linija ispod naslova.
 */

footer h3::after,
footer h4::after,
footer h5::after,
.footer h3::after,
.footer h4::after,
.footer h5::after {
    content:"";

    display:block;

    width:32px;
    height:2px;

    margin-top:10px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #3b9df5,
            #78c7ff
        ) !important;

    box-shadow:
        0 0 10px rgba(59,157,245,.15);
}


/*
 * Svaki link je zaseban red.
 */

footer .footer-grid > *:not(:first-child) > a,
.footer .footer-grid > *:not(:first-child) > a,
footer .footer-links > a,
.footer .footer-links > a,
footer nav > a,
.footer nav > a {
    position:relative;

    width:100% !important;

    min-height:34px !important;

    display:flex !important;

    align-items:center !important;

    padding:
        7px 10px 7px 17px !important;

    margin:0 !important;

    box-sizing:border-box !important;

    color:
        #8f9eaa !important;

    background:
        transparent !important;

    border:
        1px solid transparent !important;

    border-radius:
        7px !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        520 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        0 !important;

    text-decoration:
        none !important;

    transform:
        none !important;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease,
        padding-left .15s ease !important;
}


/*
 * Diskretna plava crtica umjesto ikonica.
 */

footer .footer-grid > *:not(:first-child) > a::before,
.footer .footer-grid > *:not(:first-child) > a::before,
footer .footer-links > a::before,
.footer .footer-links > a::before,
footer nav > a::before,
.footer nav > a::before {
    content:"";

    position:absolute;

    left:7px;

    width:3px;
    height:3px;

    border-radius:50%;

    background:
        #4ba7f2;

    opacity:.55;

    transition:
        height .15s ease,
        opacity .15s ease;
}


/*
 * Hover.
 */

footer .footer-grid > *:not(:first-child) > a:hover,
.footer .footer-grid > *:not(:first-child) > a:hover,
footer .footer-links > a:hover,
.footer .footer-links > a:hover,
footer nav > a:hover,
.footer nav > a:hover {
    color:
        #e5f2fc !important;

    background:
        rgba(54,151,234,.055) !important;

    border-color:
        rgba(68,162,240,.10) !important;

    padding-left:
        20px !important;
}


footer .footer-grid > *:not(:first-child) > a:hover::before,
.footer .footer-grid > *:not(:first-child) > a:hover::before,
footer .footer-links > a:hover::before,
.footer .footer-links > a:hover::before,
footer nav > a:hover::before,
.footer nav > a:hover::before {
    height:
        14px;

    border-radius:
        999px;

    opacity:
        1;
}


/*
 * Bez starih SVG / V ikonica u footer navigaciji.
 */

footer nav svg,
footer nav img,
footer .footer-links svg,
footer .footer-links img,
.footer nav svg,
.footer nav img,
.footer .footer-links svg,
.footer .footer-links img {
    display:none !important;
}


/*
 * Lijevi opis ostaje mirniji i odvojen.
 */

footer .footer-grid > :first-child,
.footer .footer-grid > :first-child {
    padding-right:
        22px !important;
}


footer .footer-grid > :first-child p,
.footer .footer-grid > :first-child p {
    max-width:
        315px;

    color:
        #94a2ae !important;

    font-size:
        13.5px !important;

    line-height:
        1.75 !important;
}


/*
 * Mobile.
 */

@media (max-width:900px) {

    footer .footer-grid,
    .footer .footer-grid {
        column-gap:
            28px !important;

        row-gap:
            34px !important;
    }
}


@media (max-width:580px) {

    footer .footer-grid > *:not(:first-child),
    .footer .footer-grid > *:not(:first-child) {
        width:
            100% !important;
    }


    footer .footer-grid > :first-child,
    .footer .footer-grid > :first-child {
        padding-right:
            0 !important;
    }
}


/* VC_FOOTER_LINKS_FINAL_END */


/* =========================================================
   VC FOOTER REAL VERTICAL LINKS FINAL
   ========================================================= */

footer .vc-footer-link-stack,
.footer .vc-footer-link-stack {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;

    gap:5px !important;

    height:auto !important;
}


/*
 * Svaki link je OBAVEZNO jedan zaseban red.
 */

footer a.vc-footer-link,
.footer a.vc-footer-link {
    width:100% !important;

    min-width:0 !important;
    max-width:none !important;

    min-height:38px !important;

    flex:
        0 0 auto !important;

    display:flex !important;

    align-items:center !important;
    justify-content:flex-start !important;

    gap:10px !important;

    box-sizing:border-box !important;

    margin:0 !important;

    padding:
        8px 11px !important;

    color:
        #96a5b1 !important;

    background:
        rgba(255,255,255,.008) !important;

    border:
        1px solid transparent !important;

    border-radius:
        8px !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Inter,
        Arial,
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        550 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        0 !important;

    text-decoration:
        none !important;

    white-space:
        normal !important;

    transform:
        none !important;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease,
        transform .15s ease !important;
}


/*
 * Proper outline ikonice.
 */

footer a.vc-footer-link .vc-icon,
.footer a.vc-footer-link .vc-icon {
    display:block !important;

    width:16px !important;
    height:16px !important;

    min-width:16px !important;
    min-height:16px !important;

    flex:
        0 0 16px !important;

    color:
        #559fdd !important;

    background:
        none !important;

    background-image:
        none !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    stroke:
        currentColor !important;

    fill:
        none !important;

    opacity:
        .86;
}


footer a.vc-footer-link .vc-icon *,
.footer a.vc-footer-link .vc-icon * {
    display:
        initial !important;
}


.vc-footer-label {
    display:block !important;

    min-width:0;

    color:
        inherit !important;

    font:
        inherit !important;
}


/*
 * Hover je diskretan ali jasno vidljiv.
 */

footer a.vc-footer-link:hover,
.footer a.vc-footer-link:hover {
    color:
        #e8f3fb !important;

    background:
        linear-gradient(
            90deg,
            rgba(52,150,234,.085),
            rgba(52,150,234,.025)
        ) !important;

    border-color:
        rgba(67,161,240,.12) !important;

    transform:
        translateX(2px) !important;
}


footer a.vc-footer-link:hover .vc-icon,
.footer a.vc-footer-link:hover .vc-icon {
    color:
        #70c3ff !important;

    opacity:
        1;
}


/*
 * Naslov svake kolone.
 */

footer .vc-footer-link-stack > h3,
footer .vc-footer-link-stack > h4,
footer .vc-footer-link-stack > h5,
.footer .vc-footer-link-stack > h3,
.footer .vc-footer-link-stack > h4,
.footer .vc-footer-link-stack > h5 {
    width:
        100% !important;

    margin:
        0 0 12px !important;

    padding:
        0 0 11px !important;

    color:
        #e2eaf1 !important;

    border-bottom:
        1px solid rgba(255,255,255,.055) !important;

    font-size:
        11.5px !important;

    font-weight:
        750 !important;

    letter-spacing:
        .065em !important;

    text-transform:
        uppercase !important;
}


/*
 * Ukloni stare bullets / pseudo znakove.
 */

footer a.vc-footer-link::before,
footer a.vc-footer-link::after,
.footer a.vc-footer-link::before,
.footer a.vc-footer-link::after {
    content:
        none !important;

    display:
        none !important;
}


/*
 * Mobile također ostaje vertikalno.
 */

@media (max-width:580px) {

    footer a.vc-footer-link,
    .footer a.vc-footer-link {
        min-height:
            42px !important;

        padding:
            10px 11px !important;
    }
}


/* ========================================================= */

/* VC_SKINS_LOADOUT_PREMIUM_START */


/* =========================================================
   SKINOVI — FINAL LOADOUT POLISH
   ========================================================= */

#vcLoadoutPreview,
.vc-loadout-preview {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(175px,1fr)
        ) !important;

    gap:
        18px !important;

    padding:
        22px !important;

    margin-bottom:
        32px !important;

    background:
        radial-gradient(
            700px 230px at 50% -40px,
            rgba(55,158,245,.11),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #101a24,
            #0a1219
        ) !important;

    border:
        1px solid rgba(73,167,243,.16) !important;

    border-radius:
        17px !important;

    box-shadow:
        0 18px 48px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.018) !important;
}


/* Standard loadout kartica */

.vc-loadout-item {
    position:
        relative !important;

    min-height:
        165px !important;

    padding:
        16px !important;

    gap:
        10px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.006)
        ),
        #101923 !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    border-radius:
        14px !important;

    overflow:
        hidden !important;

    box-shadow:
        0 9px 26px rgba(0,0,0,.17) !important;
}


.vc-loadout-item::before {
    content:"";

    position:absolute;

    left:18px;
    right:18px;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(91,181,255,.26),
            transparent
        );

    opacity:.65;
}


.vc-loadout-item:hover {
    transform:
        translateY(-3px) !important;

    border-color:
        rgba(71,166,243,.27) !important;

    background:
        linear-gradient(
            180deg,
            rgba(49,145,226,.045),
            transparent
        ),
        #111c27 !important;
}


/* Obični weapon / knife / gloves preview */

.vc-loadout-item:not(.vc-loadout-agent) img {
    width:
        100% !important;

    max-width:
        185px !important;

    height:
        92px !important;

    object-fit:
        contain !important;

    object-position:
        center !important;
}


/* =========================================================
   AGENT — VEĆI PRIKAZ
   ========================================================= */

.vc-loadout-agent {
    min-height:
        255px !important;

    padding:
        12px 14px 16px !important;

    justify-content:
        flex-end !important;

    background:
        radial-gradient(
            170px 190px at 50% 38%,
            rgba(51,151,235,.09),
            transparent 75%
        ),
        linear-gradient(
            180deg,
            #111c27,
            #0d151e
        ) !important;

    border-color:
        rgba(74,164,239,.15) !important;
}


.vc-loadout-agent img {
    width:
        100% !important;

    max-width:
        230px !important;

    height:
        190px !important;

    min-height:
        190px !important;

    margin:
        -5px auto 0 !important;

    object-fit:
        contain !important;

    object-position:
        center bottom !important;

    transform:
        scale(1.08) !important;

    transform-origin:
        center bottom !important;

    filter:
        drop-shadow(
            0 14px 18px
            rgba(0,0,0,.32)
        ) !important;
}


.vc-loadout-agent:hover img {
    transform:
        scale(1.11) !important;
}


/* naziv */

.vc-loadout-item > span {
    position:
        relative;

    z-index:2;

    color:
        #e7eef4 !important;

    font-family:
        inherit !important;

    font-size:
        12.5px !important;

    font-weight:
        650 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        0 !important;

    text-align:
        center !important;
}


.vc-loadout-agent > span {
    font-size:
        13px !important;

    color:
        #edf5fa !important;
}


/* Default tag */

.vc-loadout-item small,
.vc-default-item {
    position:
        relative;

    z-index:2;

    padding:
        3px 7px !important;

    color:
        #7c8d9a !important;

    background:
        rgba(255,255,255,.025) !important;

    border:
        1px solid rgba(255,255,255,.055) !important;

    border-radius:
        5px !important;

    font-family:
        inherit !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .045em !important;
}


/* =========================================================
   TEAM SELECT
   ========================================================= */

.team-tabs {
    gap:
        14px !important;

    margin-bottom:
        18px !important;
}


.team-tab {
    min-height:
        76px !important;

    background:
        linear-gradient(
            180deg,
            #111b25,
            #0c141c
        ) !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    border-radius:
        14px !important;
}


.team-tab.active {
    background:
        radial-gradient(
            350px 100px at 50% 0,
            rgba(54,155,240,.12),
            transparent 70%
        ),
        #101a24 !important;

    border-color:
        rgba(67,163,241,.31) !important;
}


/* =========================================================
   CATEGORY BAR
   ========================================================= */

.cat-tabs {
    padding:
        6px !important;

    margin-bottom:
        22px !important;

    background:
        #0b131b !important;

    border:
        1px solid rgba(255,255,255,.06) !important;

    border-radius:
        12px !important;
}


.cat-tabs .chip {
    min-height:
        39px !important;

    padding:
        8px 14px !important;

    border-radius:
        8px !important;

    font-size:
        12px !important;
}


/* =========================================================
   WEAPON SELECT GRID
   ========================================================= */

.weapon-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(175px,1fr)
        ) !important;

    gap:
        14px !important;
}


.weapon-card {
    min-height:
        140px !important;

    padding:
        15px !important;

    border-radius:
        13px !important;
}


.weapon-card img {
    height:
        76px !important;

    object-fit:
        contain !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px) {

    #vcLoadoutPreview,
    .vc-loadout-preview {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:
            12px !important;

        padding:
            14px !important;
    }


    .vc-loadout-agent {
        min-height:
            215px !important;
    }


    .vc-loadout-agent img {
        height:
            155px !important;

        min-height:
            155px !important;

        transform:
            scale(1.05) !important;
    }
}


@media (max-width:430px) {

    .vc-loadout-item {
        min-height:
            140px !important;

        padding:
            11px !important;
    }


    .vc-loadout-item:not(.vc-loadout-agent) img {
        height:
            72px !important;
    }


    .vc-loadout-agent {
        min-height:
            195px !important;
    }


    .vc-loadout-agent img {
        height:
            138px !important;

        min-height:
            138px !important;
    }
}


/* VC_SKINS_LOADOUT_PREMIUM_END */


/* =========================================================
   VC SAFE T/CT + LOADOUT FIX
   ========================================================= */


/* ---------------------------------------------------------
   T / CT izbor
   --------------------------------------------------------- */

.team-tabs {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:14px !important;

    margin-bottom:18px !important;
}


.team-tab {
    position:relative !important;

    min-height:78px !important;

    padding:16px 18px !important;

    overflow:hidden !important;

    border-radius:14px !important;

    transform:none !important;

    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease !important;
}


.team-tab::after {
    content:"";

    position:absolute;

    left:16px;
    right:16px;
    bottom:0;

    height:2px;

    opacity:.20;

    border-radius:999px;

    transition:
        opacity .15s ease,
        left .15s ease,
        right .15s ease !important;
}


/* T */

.team-tab[data-team="t"],
.team-tab.t-side {
    color:#b5a78b !important;

    background:
        linear-gradient(
            180deg,
            rgba(180,136,64,.045),
            transparent
        ),
        #101820 !important;

    border-color:
        rgba(194,151,77,.13) !important;
}


.team-tab[data-team="t"]::after,
.team-tab.t-side::after {
    background:#d0a157 !important;
}


.team-tab[data-team="t"].active,
.team-tab.t-side.active {
    color:#f1dbae !important;

    background:
        radial-gradient(
            400px 100px at 50% 0,
            rgba(191,141,58,.13),
            transparent 72%
        ),
        #121a22 !important;

    border-color:
        rgba(210,164,82,.38) !important;

    box-shadow:
        inset 0 0 0 1px rgba(216,167,81,.03),
        0 8px 25px rgba(79,55,18,.10) !important;
}


.team-tab[data-team="t"].active::after,
.team-tab.t-side.active::after {
    left:8px;
    right:8px;

    opacity:1;
}


/* CT */

.team-tab[data-team="ct"],
.team-tab.ct-side {
    color:#8daec8 !important;

    background:
        linear-gradient(
            180deg,
            rgba(50,145,225,.05),
            transparent
        ),
        #101820 !important;

    border-color:
        rgba(73,167,242,.14) !important;
}


.team-tab[data-team="ct"]::after,
.team-tab.ct-side::after {
    background:#55b3fa !important;
}


.team-tab[data-team="ct"].active,
.team-tab.ct-side.active {
    color:#dff3ff !important;

    background:
        radial-gradient(
            400px 100px at 50% 0,
            rgba(54,157,241,.15),
            transparent 72%
        ),
        #101b25 !important;

    border-color:
        rgba(74,174,250,.42) !important;

    box-shadow:
        inset 0 0 0 1px rgba(87,182,255,.03),
        0 8px 26px rgba(26,104,169,.12) !important;
}


.team-tab[data-team="ct"].active::after,
.team-tab.ct-side.active::after {
    left:8px;
    right:8px;

    opacity:1;
}


.team-tab .tt-name {
    position:relative;
    z-index:2;

    font-size:17px !important;
    font-weight:720 !important;

    letter-spacing:-.015em !important;
}



/* ---------------------------------------------------------
   LOADOUT — VRATI NORMALAN RASPORED
   --------------------------------------------------------- */

#vcLoadoutPreview,
.vc-loadout-preview {
    width:100% !important;

    display:grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px,1fr)
        ) !important;

    gap:18px !important;

    align-items:stretch !important;

    padding:22px !important;

    box-sizing:border-box !important;

    overflow:visible !important;

    background:
        radial-gradient(
            700px 220px at 50% -30px,
            rgba(52,151,235,.08),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #101923,
            #0b1219
        ) !important;

    border:
        1px solid rgba(74,165,240,.15) !important;

    border-radius:17px !important;
}


/*
 * Svaki item je samostalna kartica.
 * Nema spananja preko drugih kolona.
 */

.vc-loadout-item {
    grid-column:auto !important;
    grid-row:auto !important;

    width:100% !important;

    min-width:0 !important;
    max-width:none !important;

    min-height:170px !important;

    padding:15px !important;

    box-sizing:border-box !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    gap:9px !important;

    overflow:hidden !important;

    border-radius:14px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.006)
        ),
        #101922 !important;

    border:
        1px solid rgba(255,255,255,.075) !important;
}


/* normalne slike */

.vc-loadout-item:not(.vc-loadout-agent) img {
    display:block !important;

    width:100% !important;

    max-width:185px !important;

    height:92px !important;
    min-height:92px !important;

    margin:0 auto !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:none !important;
}



/* ---------------------------------------------------------
   AGENT PREVIEW — VEĆI, ALI NE KVARI GRID
   --------------------------------------------------------- */

.vc-loadout-agent {
    grid-column:auto !important;

    min-height:285px !important;

    padding:
        12px 14px 16px !important;

    justify-content:flex-end !important;

    background:
        radial-gradient(
            220px 220px at 50% 42%,
            rgba(55,155,240,.11),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            #111c27,
            #0c151e
        ) !important;

    border-color:
        rgba(74,167,242,.18) !important;
}


.vc-loadout-agent img {
    display:block !important;

    width:100% !important;

    max-width:255px !important;

    height:225px !important;
    min-height:225px !important;

    margin:
        -8px auto 0 !important;

    object-fit:contain !important;

    object-position:
        center bottom !important;

    transform:
        scale(1.08) !important;

    transform-origin:
        center bottom !important;

    opacity:1 !important;

    filter:
        drop-shadow(
            0 15px 20px
            rgba(0,0,0,.34)
        ) !important;
}


.vc-loadout-agent:hover img {
    transform:
        scale(1.10) !important;
}


.vc-loadout-agent > span {
    position:relative;

    z-index:2;

    width:100%;

    color:#ecf4f9 !important;

    font-size:13px !important;
    font-weight:680 !important;

    line-height:1.3 !important;

    text-align:center !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
}



/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:850px) {

    #vcLoadoutPreview,
    .vc-loadout-preview {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:12px !important;

        padding:14px !important;
    }


    .vc-loadout-item {
        min-height:145px !important;
    }


    .vc-loadout-agent {
        min-height:235px !important;
    }


    .vc-loadout-agent img {
        max-width:220px !important;

        height:180px !important;
        min-height:180px !important;

        transform:scale(1.04) !important;
    }
}


@media (max-width:430px) {

    #vcLoadoutPreview,
    .vc-loadout-preview {
        gap:9px !important;

        padding:10px !important;
    }


    .vc-loadout-item {
        padding:10px !important;
    }


    .vc-loadout-item:not(.vc-loadout-agent) img {
        height:68px !important;
        min-height:68px !important;
    }


    .vc-loadout-agent {
        min-height:205px !important;
    }


    .vc-loadout-agent img {
        height:150px !important;
        min-height:150px !important;
    }
}


/* ========================================================= */


/* =========================================================
   VC STAFF / LEADERSHIP 2026
   ========================================================= */


/* HERO */

.vc-staff-hero {
    position:relative;

    min-height:350px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,10,16,.97) 0%,
            rgba(5,10,16,.88) 39%,
            rgba(5,10,16,.48) 70%,
            rgba(5,10,16,.28) 100%
        ),
        linear-gradient(
            0deg,
            #080e14 0%,
            transparent 55%
        ),
        url("/assets/img/velocity-home-bg.webp")
        center 42% / cover
        no-repeat;

    border-bottom:
        1px solid rgba(71,163,239,.13);
}


.vc-staff-hero::after {
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            650px 230px at 70% 45%,
            rgba(46,146,231,.08),
            transparent 72%
        );
}


.vc-staff-hero-inner {
    position:relative;

    z-index:2;

    padding-top:70px;
    padding-bottom:70px;
}


.vc-staff-eyebrow {
    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:
        7px 11px;

    color:#70c2ff;

    background:
        rgba(47,148,233,.075);

    border:
        1px solid rgba(72,169,247,.17);

    border-radius:
        7px;

    font-size:
        10.5px;

    font-weight:
        750;

    letter-spacing:
        .085em;
}


.vc-staff-hero h1 {
    margin:
        17px 0 12px;

    max-width:
        650px;

    color:#f1f6fa !important;

    font-size:
        clamp(44px,6vw,70px) !important;

    font-weight:
        780 !important;

    line-height:
        .98;

    letter-spacing:
        -.05em !important;
}


.vc-staff-hero p {
    max-width:
        660px;

    margin:0;

    color:
        #a8b5bf !important;

    font-size:
        15px;

    line-height:
        1.7;
}



/* SECTION */

.vc-staff-section {
    padding-top:
        54px !important;
}



/* SECTION TITLES */

.vc-section-title,
.vc-management-header {
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;
}


.vc-section-title {
    margin-bottom:
        17px;
}


.vc-section-kicker {
    display:inline-flex;

    align-items:center;

    gap:7px;

    color:
        #65b8fa;

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;
}


.vc-section-title h2,
.vc-management-header h2 {
    margin:
        7px 0 0;

    color:
        #eef4f8 !important;

    font-size:
        24px !important;

    font-weight:
        730 !important;

    letter-spacing:
        -.025em !important;
}



/* =========================================================
   MAIN OWNER
   ========================================================= */

.vc-main-owner-card {
    position:relative;

    min-height:
        230px;

    display:flex;

    align-items:center;

    gap:
        28px;

    margin-bottom:
        58px;

    padding:
        30px 34px;

    overflow:hidden;

    background:
        radial-gradient(
            500px 260px at 15% 50%,
            rgba(48,153,239,.11),
            transparent 72%
        ),
        linear-gradient(
            120deg,
            rgba(44,137,218,.055),
            transparent 44%
        ),
        #0e1720;

    border:
        1px solid rgba(76,173,250,.24);

    border-radius:
        18px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.21),
        inset 0 1px 0 rgba(255,255,255,.025);
}


.vc-main-owner-card::before {
    content:"";

    position:absolute;

    left:0;
    top:26px;
    bottom:26px;

    width:3px;

    background:
        linear-gradient(
            #85d1ff,
            #3298ec
        );

    border-radius:
        0 999px 999px 0;

    box-shadow:
        0 0 20px rgba(63,167,247,.25);
}


.vc-main-owner-glow {
    position:absolute;

    width:320px;
    height:320px;

    left:-100px;
    top:50%;

    transform:
        translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(52,154,238,.11),
            transparent 68%
        );

    pointer-events:none;
}


.vc-main-owner-avatar {
    position:relative;

    z-index:2;

    width:
        132px;

    height:
        132px;

    flex:
        0 0 132px;

    display:grid;

    place-items:center;

    overflow:hidden;

    color:
        #6abcfb;

    background:
        linear-gradient(
            145deg,
            #112639,
            #08121c
        );

    border:
        2px solid rgba(80,177,253,.39);

    border-radius:
        24px;

    box-shadow:
        0 13px 34px rgba(0,0,0,.31),
        0 0 32px rgba(55,154,236,.10);
}


.vc-main-owner-avatar img {
    width:100%;
    height:100%;

    object-fit:cover;
}


.vc-main-owner-content {
    position:relative;

    z-index:2;

    min-width:0;
}


.vc-main-owner-top {
    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:
        10px;
}


.vc-owner-badge {
    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:
        5px 9px;

    color:
        #dff3ff;

    background:
        rgba(54,157,241,.12);

    border:
        1px solid rgba(75,170,246,.22);

    border-radius:
        6px;

    font-size:
        9.5px;

    font-weight:
        800;

    letter-spacing:
        .055em;
}


.vc-owner-status {
    display:inline-flex;

    align-items:center;

    gap:6px;

    color:
        #7f909d;

    font-size:
        11px;
}


.vc-owner-status i {
    width:6px;
    height:6px;

    border-radius:50%;

    background:
        #50d3a4;

    box-shadow:
        0 0 0 4px
        rgba(80,211,164,.08);
}


.vc-main-owner-name {
    margin:
        0 !important;

    color:
        #f3f7fa !important;

    font-size:
        clamp(34px,4.5vw,50px) !important;

    font-weight:
        790 !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.045em !important;
}


.vc-main-owner-role {
    margin-top:
        7px;

    color:
        #6dbcf8;

    font-size:
        13px;

    font-weight:
        650;
}


.vc-main-owner-desc {
    max-width:
        620px;

    margin:
        12px 0 17px !important;

    color:
        #9eacb7 !important;

    font-size:
        13.5px;

    line-height:
        1.65 !important;
}


.vc-main-owner-meta {
    display:flex;

    align-items:center;

    gap:
        8px;

    flex-wrap:wrap;
}


.vc-main-owner-meta span {
    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    color:
        #8395a3;

    background:
        rgba(255,255,255,.022);

    border:
        1px solid rgba(255,255,255,.06);

    border-radius:
        7px;

    font-size:
        10.5px;
}


.vc-main-owner-meta svg {
    color:
        #57aef3;
}



/* =========================================================
   MANAGEMENT
   ========================================================= */

.vc-management-header {
    margin-bottom:
        20px;
}


.vc-management-header p {
    max-width:
        620px;

    margin:
        6px 0 0 !important;

    color:
        #8e9da9 !important;

    font-size:
        13px;

    line-height:
        1.6 !important;
}


.vc-management-grid {
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(235px,1fr)
        );

    gap:
        14px;
}


.vc-management-card {
    position:relative;

    min-height:
        245px;

    padding:
        21px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.004)
        ),
        #0e161f;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:
        14px;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}


.vc-management-card::before {
    content:"";

    position:absolute;

    left:18px;
    right:18px;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(77,172,249,.24),
            transparent
        );
}


.vc-management-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(73,167,242,.22);

    background:
        linear-gradient(
            180deg,
            rgba(49,148,231,.04),
            transparent
        ),
        #101a24;
}


.vc-management-card-top {
    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;

    margin-bottom:
        17px;
}


.vc-management-avatar {
    width:72px;
    height:72px;

    display:grid;

    place-items:center;

    overflow:hidden;

    color:#66b8f8;

    background:
        #0b131b;

    border:
        1px solid rgba(78,169,243,.24);

    border-radius:
        16px;
}


.vc-management-avatar img {
    width:100%;
    height:100%;

    object-fit:cover;
}


.vc-management-role {
    display:inline-flex;

    align-items:center;

    min-height:
        26px;

    padding:
        4px 8px;

    color:
        #77bdf3;

    background:
        rgba(55,154,237,.075);

    border:
        1px solid rgba(69,165,243,.14);

    border-radius:
        6px;

    font-size:
        9.5px;

    font-weight:
        750;

    letter-spacing:
        .035em;
}


.vc-management-card h3 {
    margin:
        0 0 7px !important;

    color:
        #eaf1f6 !important;

    font-size:
        18px !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.018em !important;
}


.vc-management-card > p {
    min-height:
        43px;

    margin:
        0 !important;

    color:
        #8e9da8 !important;

    font-size:
        12.5px;

    line-height:
        1.6 !important;
}


.vc-management-bottom {
    margin-top:
        18px;

    padding-top:
        14px;

    border-top:
        1px solid rgba(255,255,255,.055);
}


.vc-management-bottom span {
    display:inline-flex;

    align-items:center;

    gap:6px;

    color:
        #748691;

    font-size:
        10.5px;
}


.vc-management-bottom svg {
    color:
        #4fc69d;
}



/* role variations */

.vc-role-owner {
    border-color:
        rgba(77,172,249,.16);
}


.vc-role-owner .vc-management-role {
    color:
        #8acaff;

    background:
        rgba(52,151,236,.105);
}


.vc-role-manager .vc-management-role {
    color:
        #b3c9dd;

    background:
        rgba(120,161,198,.075);
}


.vc-role-head-admin .vc-management-role {
    color:
        #80baf0;

    background:
        rgba(54,130,204,.085);
}



/* MOBILE */

@media (max-width:760px) {

    .vc-staff-hero {
        min-height:
            300px;

        background-position:
            65% center;
    }


    .vc-main-owner-card {
        align-items:flex-start;

        gap:
            18px;

        padding:
            23px;
    }


    .vc-main-owner-avatar {
        width:
            96px;

        height:
            96px;

        flex-basis:
            96px;

        border-radius:
            18px;
    }


    .vc-management-header {
        align-items:flex-start;

        flex-direction:
            column;
    }

}


@media (max-width:520px) {

    .vc-main-owner-card {
        flex-direction:
            column;
    }


    .vc-main-owner-avatar {
        width:
            108px;

        height:
            108px;

        flex-basis:
            108px;
    }


    .vc-management-grid {
        grid-template-columns:
            1fr;
    }

}


/* ========================================================= */


/* =========================================================
   VC LOADOUT SHOWCASE FINAL
   T / CT CHARACTER + LOADOUT
   ========================================================= */


/* ---------------------------------------------------------
   GLAVNI PREVIEW
   Ovo su dvije velike kartice: T + CT.
   --------------------------------------------------------- */

#vcLoadoutPreview,
.vc-loadout-preview {
    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:20px !important;

    width:100% !important;

    padding:0 !important;
    margin:22px 0 32px !important;

    background:none !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;
}



/* ---------------------------------------------------------
   CIJELA T / CT KARTICA
   --------------------------------------------------------- */

#vcLoadoutPreview .vc-loadout-card {
    --vc-team:#5faef0;
    --vc-team-rgb:95,174,240;

    position:relative !important;

    display:grid !important;

    grid-template-columns:
        190px minmax(0,1fr) !important;

    grid-template-rows:
        auto 1fr !important;

    column-gap:20px !important;

    min-width:0 !important;

    min-height:500px !important;

    padding:18px !important;

    overflow:hidden !important;

    background:
        radial-gradient(
            360px 300px at 0% 100%,
            rgba(var(--vc-team-rgb),.10),
            transparent 74%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.022),
            transparent 44%
        ),
        #0b131b !important;

    border:
        1px solid rgba(var(--vc-team-rgb),.17) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 16px 42px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    transform:none !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}


#vcLoadoutPreview .vc-loadout-card:hover {
    transform:
        translateY(-2px) !important;

    border-color:
        rgba(var(--vc-team-rgb),.29) !important;
}



/* ---------------------------------------------------------
   T — diskretno brončano/zlatno
   --------------------------------------------------------- */

#vcLoadoutPreview .vc-loadout-card.t {
    --vc-team:#c7a05f;
    --vc-team-rgb:199,160,95;
}


#vcLoadoutPreview .vc-loadout-card.t::before {
    content:"";

    position:absolute;

    left:0;
    top:24px;
    bottom:24px;

    width:3px;

    border-radius:
        0 999px 999px 0;

    background:
        linear-gradient(
            180deg,
            #e1bd75,
            #8c682e
        );

    opacity:.55;
}



/* ---------------------------------------------------------
   CT — Velocity plava
   --------------------------------------------------------- */

#vcLoadoutPreview .vc-loadout-card.ct {
    --vc-team:#55b2f5;
    --vc-team-rgb:85,178,245;
}


#vcLoadoutPreview .vc-loadout-card.ct::before {
    content:"";

    position:absolute;

    left:0;
    top:24px;
    bottom:24px;

    width:3px;

    border-radius:
        0 999px 999px 0;

    background:
        linear-gradient(
            180deg,
            #79cbff,
            #287fc5
        );

    opacity:.60;
}



/* ---------------------------------------------------------
   AKTIVNA STRANA
   --------------------------------------------------------- */

#vcLoadoutPreview .vc-loadout-card.active {
    border-color:
        rgba(var(--vc-team-rgb),.53) !important;

    box-shadow:
        0 0 0 1px rgba(var(--vc-team-rgb),.07),
        0 18px 48px rgba(0,0,0,.24),
        0 0 32px rgba(var(--vc-team-rgb),.08) !important;
}


#vcLoadoutPreview .vc-loadout-card.active::before {
    opacity:1;
}



/* =========================================================
   AGENT SHOWCASE
   ========================================================= */

#vcLoadoutPreview .vc-loadout-agent {
    position:relative !important;

    grid-column:1 !important;
    grid-row:1 / -1 !important;

    width:190px !important;
    min-width:190px !important;

    height:100% !important;
    min-height:462px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;

    align-items:flex-end !important;
    justify-content:center !important;

    overflow:hidden !important;

    border-radius:
        14px !important;

    background:
        radial-gradient(
            180px 240px at 50% 66%,
            rgba(var(--vc-team-rgb),.16),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            rgba(var(--vc-team-rgb),.025),
            rgba(var(--vc-team-rgb),.085)
        ),
        #101b25 !important;

    border:
        1px solid rgba(var(--vc-team-rgb),.14) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02) !important;

    transform:none !important;
}



/*
 * mala atmosfera iza lika
 */

#vcLoadoutPreview .vc-loadout-agent::before {
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    bottom:32px;
    left:50%;

    transform:
        translateX(-50%);

    border:
        1px solid rgba(var(--vc-team-rgb),.075);

    border-radius:50%;

    box-shadow:
        0 0 55px
        rgba(var(--vc-team-rgb),.07);

    pointer-events:none;
}



/*
 * AGENT — ovo je glavni fix.
 * Više nije mala sličica u donjem uglu.
 */

#vcLoadoutPreview .vc-loadout-agent img {
    position:relative !important;

    z-index:2 !important;

    display:block !important;

    width:245px !important;
    max-width:none !important;

    height:365px !important;
    min-height:365px !important;

    margin:
        0 -28px -6px !important;

    object-fit:contain !important;

    object-position:
        center bottom !important;

    opacity:1 !important;

    transform:
        scale(1.13) !important;

    transform-origin:
        center bottom !important;

    filter:
        drop-shadow(
            0 20px 22px
            rgba(0,0,0,.44)
        ) !important;

    transition:
        transform .20s ease !important;
}


#vcLoadoutPreview .vc-loadout-card:hover
.vc-loadout-agent img {
    transform:
        scale(1.16) !important;
}



/* =========================================================
   DESNI SADRŽAJ
   ========================================================= */

#vcLoadoutPreview
.vc-loadout-card > :not(.vc-loadout-agent) {
    min-width:0 !important;
}



/*
 * Header sa:
 * TERRORIST / CT
 * agent name
 * Promijeni agenta
 */

#vcLoadoutPreview .vc-change-agent {
    min-height:31px !important;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    padding:
        0 11px !important;

    color:
        #aab7c1 !important;

    background:
        rgba(255,255,255,.025) !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    border-radius:
        8px !important;

    font-family:
        inherit !important;

    font-size:
        10.5px !important;

    font-weight:
        600 !important;

    letter-spacing:
        0 !important;

    text-transform:
        none !important;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease !important;
}


#vcLoadoutPreview .vc-change-agent:hover {
    color:
        #edf6fc !important;

    background:
        rgba(var(--vc-team-rgb),.085) !important;

    border-color:
        rgba(var(--vc-team-rgb),.25) !important;
}



/* TVOJ LOADOUT */

#vcLoadoutPreview .vc-loadout-label {
    margin:
        12px 0 9px !important;

    color:
        #71808c !important;

    font-family:
        inherit !important;

    font-size:
        9.5px !important;

    font-weight:
        750 !important;

    letter-spacing:
        .075em !important;

    text-transform:
        uppercase !important;
}



/* =========================================================
   PRONAĐI AUTOMATSKI WRAPPER KOJI DRŽI ITEME
   bez potrebe da znamo staro ime klase
   ========================================================= */

#vcLoadoutPreview
.vc-loadout-card
:has(> .vc-loadout-item) {
    display:grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:10px !important;

    width:100% !important;

    align-items:stretch !important;
}



/* =========================================================
   LOADOUT ITEM KARTICE
   ========================================================= */

#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item {
    grid-column:auto !important;
    grid-row:auto !important;

    width:100% !important;

    min-width:0 !important;
    max-width:none !important;

    min-height:154px !important;

    margin:0 !important;

    padding:
        12px 9px 10px !important;

    box-sizing:
        border-box !important;

    display:flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

    overflow:hidden !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.022),
            rgba(255,255,255,.005)
        ),
        #121d27 !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    border-radius:
        12px !important;

    box-shadow:
        none !important;

    transform:
        none !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease !important;
}


#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item:hover {
    transform:
        translateY(-2px) !important;

    background:
        linear-gradient(
            180deg,
            rgba(var(--vc-team-rgb),.055),
            transparent
        ),
        #14212c !important;

    border-color:
        rgba(var(--vc-team-rgb),.25) !important;
}



/* weapon slike */

#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item img {
    display:block !important;

    width:100% !important;

    max-width:112px !important;

    height:76px !important;
    min-height:76px !important;

    margin:
        0 auto 3px !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    transform:
        none !important;

    filter:
        drop-shadow(
            0 7px 8px
            rgba(0,0,0,.28)
        ) !important;
}



/*
 * Više nema "Butterfly..."
 * Dozvoli 2 reda imena.
 */

#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item > span {
    width:100% !important;

    min-height:
        32px !important;

    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical !important;

    -webkit-line-clamp:
        2 !important;

    overflow:
        hidden !important;

    white-space:
        normal !important;

    text-overflow:
        ellipsis !important;

    color:
        #e4ebf1 !important;

    font-family:
        inherit !important;

    font-size:
        11.5px !important;

    font-weight:
        650 !important;

    line-height:
        1.35 !important;

    text-align:
        center !important;

    letter-spacing:
        0 !important;
}



/* DEFAULT */

#vcLoadoutPreview
.vc-loadout-card
.vc-default-item {
    margin-top:
        1px !important;

    padding:
        3px 6px !important;

    color:
        #697985 !important;

    background:
        rgba(255,255,255,.018) !important;

    border:
        1px solid rgba(255,255,255,.045) !important;

    border-radius:
        5px !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;
}



/* hint dole */

#vcLoadoutPreview .vc-loadout-hint {
    margin-top:
        10px !important;

    color:
        #667783 !important;

    font-family:
        inherit !important;

    font-size:
        9.5px !important;

    line-height:
        1.4 !important;

    letter-spacing:
        .025em !important;
}



/* =========================================================
   T / CT TEXT DIFFERENCE
   ========================================================= */

#vcLoadoutPreview .vc-loadout-card.t
.vc-loadout-label {
    color:
        #9f865b !important;
}


#vcLoadoutPreview .vc-loadout-card.ct
.vc-loadout-label {
    color:
        #618faf !important;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px) {

    #vcLoadoutPreview {
        grid-template-columns:
            1fr !important;
    }


    #vcLoadoutPreview .vc-loadout-card {
        grid-template-columns:
            210px minmax(0,1fr) !important;
    }


    #vcLoadoutPreview .vc-loadout-agent {
        width:
            210px !important;

        min-width:
            210px !important;
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:650px) {

    #vcLoadoutPreview .vc-loadout-card {
        display:block !important;

        min-height:
            0 !important;

        padding:
            12px !important;
    }


    #vcLoadoutPreview .vc-loadout-agent {
        width:
            100% !important;

        min-width:
            0 !important;

        height:
            270px !important;

        min-height:
            270px !important;

        margin-bottom:
            16px !important;
    }


    #vcLoadoutPreview .vc-loadout-agent img {
        width:
            245px !important;

        height:
            260px !important;

        min-height:
            260px !important;

        margin:
            0 auto -8px !important;

        transform:
            scale(1.08) !important;
    }


    #vcLoadoutPreview
    .vc-loadout-card
    :has(> .vc-loadout-item) {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:
            8px !important;
    }


    #vcLoadoutPreview
    .vc-loadout-card
    .vc-loadout-item {
        min-height:
            140px !important;
    }


    #vcLoadoutPreview
    .vc-loadout-card
    .vc-loadout-item img {
        height:
            66px !important;

        min-height:
            66px !important;
    }

}


/* =========================================================
   VC LOADOUT SHOWCASE FINAL END
   ========================================================= */


/* =========================================================
   VC LOADOUT POLISH V2
   larger skins + change-agent fix
   ========================================================= */

/* malo više prostora desnoj strani */
#vcLoadoutPreview .vc-loadout-card {
    grid-template-columns:
        174px minmax(0,1fr) !important;

    column-gap:
        16px !important;
}


/* agent ostaje velik iako smo mu suzili kolonu */
#vcLoadoutPreview .vc-loadout-agent {
    width:
        174px !important;

    min-width:
        174px !important;
}


#vcLoadoutPreview .vc-loadout-agent img {
    width:
        240px !important;

    height:
        370px !important;

    min-height:
        370px !important;

    margin:
        0 -33px -7px !important;
}



/* ---------------------------------------------------------
   VEĆI WEAPON / KNIFE / GLOVE PREVIEW
   --------------------------------------------------------- */

#vcLoadoutPreview
.vc-loadout-card
:has(> .vc-loadout-item) {
    gap:
        9px !important;
}


#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item {
    min-height:
        160px !important;

    padding:
        10px 7px 9px !important;

    gap:
        6px !important;
}


#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item img {
    width:
        118% !important;

    max-width:
        126px !important;

    height:
        91px !important;

    min-height:
        91px !important;

    margin:
        -2px auto 2px !important;

    object-fit:
        contain !important;

    filter:
        drop-shadow(
            0 8px 9px
            rgba(0,0,0,.33)
        ) !important;
}


/* knife/gloves izgledaju još malo punije */
#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item:nth-child(1) img,
#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item:nth-child(2) img {
    transform:
        scale(1.08) !important;
}



/* puni naziv ostaje uredno u dva reda */
#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item > span {
    min-height:
        31px !important;

    font-size:
        11.5px !important;

    line-height:
        1.32 !important;
}



/* ---------------------------------------------------------
   PROMIJENI AGENTA — TRENUTNO JE PREŠIROKO
   --------------------------------------------------------- */

#vcLoadoutPreview .vc-change-agent {
    flex:
        0 0 auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    min-height:
        30px !important;

    padding:
        0 8px !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    font-size:
        9.5px !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;
}



/* spriječi da sadržaj desne strane udara u rub */
#vcLoadoutPreview
.vc-loadout-card > :not(.vc-loadout-agent) {
    min-width:
        0 !important;

    max-width:
        100% !important;
}



/* TABLET */
@media (max-width:1100px) {

    #vcLoadoutPreview .vc-loadout-card {
        grid-template-columns:
            190px minmax(0,1fr) !important;
    }

    #vcLoadoutPreview .vc-loadout-agent {
        width:
            190px !important;

        min-width:
            190px !important;
    }

}


/* MOBILE */
@media (max-width:650px) {

    #vcLoadoutPreview .vc-loadout-agent {
        width:
            100% !important;

        min-width:
            0 !important;
    }

    #vcLoadoutPreview
    .vc-loadout-card
    .vc-loadout-item img {
        width:
            100% !important;

        height:
            78px !important;

        min-height:
            78px !important;
    }

}


/* VC LOADOUT POLISH V2 END */


/* =========================================================
   VC SERVER LIVE STATS POLISH
   ========================================================= */

#serverModal .modal {
    border-color:rgba(66,161,240,.16) !important;
    background:
        radial-gradient(
            500px 220px at 50% 0,
            rgba(51,149,233,.07),
            transparent 72%
        ),
        #0b1219 !important;
}


#serverModal .modal-body > div:nth-child(2) {
    border-color:
        rgba(75,165,239,.12) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.004)
        ),
        #0e1720 !important;

    border-radius:
        12px !important;
}


#srvModalPlayers,
#srvModalPing {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:
        30px !important;

    font-weight:
        750 !important;

    letter-spacing:
        -.035em !important;
}


#srvModalPlayers {
    color:
        #65b8f8 !important;
}


#srvModalPing {
    color:
        #dbe7ef !important;
}


#srvModalPlayerList {
    padding:
        13px 15px !important;

    color:
        #8999a5 !important;

    background:
        rgba(255,255,255,.018) !important;

    border:
        1px solid rgba(255,255,255,.06) !important;

    border-radius:
        9px !important;

    line-height:
        1.6 !important;
}


/* ========================================================= */

/* VC MANAGER GLOW FIX */
.vc-management-grid .vc-management-card.manager {
    border-color:rgba(80,174,245,.38) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.24),
        0 0 28px rgba(65,165,240,.13) !important;
}

.vc-management-grid .vc-management-card.manager:hover {
    border-color:rgba(96,190,255,.58) !important;
    box-shadow:
        0 20px 46px rgba(0,0,0,.28),
        0 0 38px rgba(65,165,240,.20) !important;
}

.vc-management-grid .vc-management-card.manager::before {
    background:linear-gradient(
        90deg,
        transparent,
        rgba(84,181,248,.85),
        transparent
    ) !important;
    opacity:.9 !important;
}

.vc-management-grid .vc-management-card.manager .badge,
.vc-management-grid .vc-management-card.manager .vc-management-rank,
.vc-management-grid .vc-management-card.manager .vc-staff-rank {
    color:#8dccfa !important;
    border-color:rgba(83,178,245,.30) !important;
    background:rgba(55,153,228,.10) !important;
    box-shadow:0 0 18px rgba(55,153,228,.10) !important;
}

/* VC MANAGER GLOW FIX END */


/* =========================================================
   VC CHANGE AGENT POSITION FINAL
   ========================================================= */

#vcLoadoutPreview .vc-loadout-card {
    position:relative !important;
}


/*
 * Parent headera ne smije biti containing block,
 * tako da se oba dugmeta ravnaju prema kartici.
 */
#vcLoadoutPreview
.vc-loadout-card
:has(> .vc-change-agent) {
    position:static !important;

    padding-right:
        105px !important;
}


/* potpuno isti položaj T i CT */
#vcLoadoutPreview
.vc-loadout-card
.vc-change-agent {
    position:absolute !important;

    top:
        38px !important;

    right:
        20px !important;

    left:
        auto !important;

    bottom:
        auto !important;

    margin:
        0 !important;

    transform:
        none !important;

    translate:
        none !important;

    z-index:
        10 !important;

    min-width:
        92px !important;

    max-width:
        92px !important;

    height:
        31px !important;

    padding:
        0 7px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    white-space:
        nowrap !important;

    font-size:
        9.5px !important;
}


/* eksplicitno isto za oba */
#vcLoadoutPreview
.vc-loadout-card.t
.vc-change-agent,
#vcLoadoutPreview
.vc-loadout-card.ct
.vc-change-agent {
    right:
        20px !important;

    margin:
        0 !important;
}


/* mobile se vraća u normalan flow */
@media(max-width:650px) {

    #vcLoadoutPreview
    .vc-loadout-card
    .vc-change-agent {
        position:static !important;

        max-width:none !important;

        width:auto !important;

        margin-left:auto !important;
    }

}


/* VC CHANGE AGENT POSITION FINAL END */


/* =========================================================
   VC LOADOUT — HIDE CHANGE AGENT
   ========================================================= */

#vcLoadoutPreview .vc-change-agent {
    display:none !important;
}


/*
 * ukloni rezervisani prostor koji je ostao
 * od starog dugmeta
 */
#vcLoadoutPreview
.vc-loadout-card
:has(.vc-change-agent) {
    padding-right:
        18px !important;
}


#vcLoadoutPreview
.vc-loadout-card
:has(> .vc-change-agent) {
    padding-right:
        0 !important;
}


/* ime agenta sada smije koristiti cijeli red */
#vcLoadoutPreview
.vc-loadout-card
.vc-agent-name,
#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-agent-name {
    width:
        100% !important;

    max-width:
        none !important;

    padding-right:
        0 !important;

    white-space:
        normal !important;

    overflow:
        visible !important;
}


/* VC LOADOUT — HIDE CHANGE AGENT END */


/* =========================================================
   VC LOADOUT SHOWCASE V4
   cleaner + larger item previews
   ========================================================= */


/* ---------------------------------------------------------
   cijela T / CT kartica
   --------------------------------------------------------- */

#vcLoadoutPreview .vc-loadout-card {
    padding:
        18px !important;

    border-radius:
        18px !important;

    background:
        radial-gradient(
            330px 310px at 0% 100%,
            rgba(var(--vc-team-rgb),.115),
            transparent 72%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.026),
            transparent 45%
        ),
        #09131b !important;

    box-shadow:
        0 18px 44px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.028) !important;
}


/* T dobija diskretan gold edge */
#vcLoadoutPreview .vc-loadout-card.t {
    border-color:
        rgba(199,160,95,.40) !important;
}


/* CT diskretno plavi */
#vcLoadoutPreview .vc-loadout-card.ct {
    border-color:
        rgba(74,166,235,.28) !important;
}



/* ---------------------------------------------------------
   CHANGE AGENT — nema više
   --------------------------------------------------------- */

#vcLoadoutPreview .vc-change-agent {
    display:none !important;
}


/*
 * Ako ostane neki stari reserved prostor,
 * poništi ga.
 */
#vcLoadoutPreview
.vc-loadout-card
:has(.vc-change-agent) {
    padding-right:
        18px !important;
}



/* ---------------------------------------------------------
   ime agenta
   --------------------------------------------------------- */

#vcLoadoutPreview
.vc-loadout-card
.vc-agent-name,

#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-agent-name {
    width:
        100% !important;

    max-width:
        none !important;

    padding-right:
        0 !important;

    font-size:
        14px !important;

    line-height:
        1.3 !important;

    white-space:
        normal !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;
}



/* ---------------------------------------------------------
   loadout grid
   --------------------------------------------------------- */

#vcLoadoutPreview
.vc-loadout-card
:has(> .vc-loadout-item),

#vcLoadoutPreview
.vc-loadout-card
:has(.vc-loadout-item) {
    gap:
        9px !important;
}



/* ---------------------------------------------------------
   ITEM KARTICE
   --------------------------------------------------------- */

#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item {
    min-height:
        172px !important;

    padding:
        10px 7px 9px !important;

    border-radius:
        13px !important;

    border:
        1px solid rgba(255,255,255,.085) !important;

    background:
        radial-gradient(
            120px 90px at 50% 38%,
            rgba(var(--vc-team-rgb),.035),
            transparent 78%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.006)
        ),
        #111d27 !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.018) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease !important;
}


#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item:hover {
    transform:
        translateY(-3px) !important;

    border-color:
        rgba(var(--vc-team-rgb),.30) !important;

    background:
        radial-gradient(
            130px 100px at 50% 38%,
            rgba(var(--vc-team-rgb),.09),
            transparent 76%
        ),
        #13212c !important;

    box-shadow:
        0 10px 22px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}



/* =========================================================
   VEĆE IKONE / SKIN SLIKE
   ========================================================= */

#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item img {
    display:block !important;

    width:
        calc(100% + 8px) !important;

    max-width:
        145px !important;

    height:
        108px !important;

    min-height:
        108px !important;

    margin:
        -4px auto 1px !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    transform:
        scale(1.08) !important;

    filter:
        drop-shadow(
            0 9px 10px
            rgba(0,0,0,.38)
        ) !important;
}


/*
 * knife + gloves imaju dosta praznog prostora
 * u samoj slici pa njih dignemo još malo.
 */
#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item:nth-child(1) img,

#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item:nth-child(2) img {
    transform:
        scale(1.15) !important;
}



/* ---------------------------------------------------------
   tekst itema
   --------------------------------------------------------- */

#vcLoadoutPreview
.vc-loadout-card
.vc-loadout-item > span {
    min-height:
        31px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    color:
        #e9f0f5 !important;

    font-size:
        11.5px !important;

    font-weight:
        700 !important;

    line-height:
        1.3 !important;

    text-align:
        center !important;
}



/* DEFAULT badge manje upadljiv */
#vcLoadoutPreview
.vc-loadout-card
.vc-default-item {
    color:
        #596a76 !important;

    background:
        rgba(255,255,255,.015) !important;

    border-color:
        rgba(255,255,255,.035) !important;

    font-size:
        7.5px !important;
}



/* ---------------------------------------------------------
   agent showcase
   --------------------------------------------------------- */

#vcLoadoutPreview .vc-loadout-agent {
    border-color:
        rgba(var(--vc-team-rgb),.18) !important;

    background:
        radial-gradient(
            205px 270px at 50% 72%,
            rgba(var(--vc-team-rgb),.18),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            rgba(var(--vc-team-rgb),.025),
            rgba(var(--vc-team-rgb),.08)
        ),
        #101c26 !important;
}


#vcLoadoutPreview
.vc-loadout-agent img {
    filter:
        drop-shadow(
            0 22px 25px
            rgba(0,0,0,.48)
        ) !important;
}



/* ---------------------------------------------------------
   hint dole
   --------------------------------------------------------- */

#vcLoadoutPreview .vc-loadout-hint {
    margin-top:
        12px !important;

    color:
        #697b87 !important;

    font-size:
        9.5px !important;

    opacity:
        .85 !important;
}



/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px) {

    #vcLoadoutPreview
    .vc-loadout-card
    .vc-loadout-item {
        min-height:
            150px !important;
    }


    #vcLoadoutPreview
    .vc-loadout-card
    .vc-loadout-item img {
        height:
            87px !important;

        min-height:
            87px !important;

        max-width:
            130px !important;

        transform:
            scale(1.05) !important;
    }

}


/* VC LOADOUT SHOWCASE V4 END */