@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');

:root {
    --accent-color-800:#FF9500;
    --accent-color-900:#995900;
    --font-700:#E8EAED;
    --font-800:rgba(255,255,255,.7);
    --font-900:#7b7b7b;
    --bg-700:#282828;
    --bg-800:#202020;
    --bg-900:#1d1b1a;
    --prod-trans-bg:rgba(0,0,0,.4);

    --g100:#d1d1d1;
    --g200:#b0b0b0;
    --g300:#888888;
    --g400:#6d6d6d;
    --g500:#5d5d5d;
    --g600:#4f4f4f;
    --g700:#454545;
    --g800:#1A1A1A;
    --g900:#0F0F0F;

    --shadow-default:0 2px 6px -1px rgba(0,0,0,.16),0 1px 4px -1px rgba(0,0,0,.04);
    --shadow-active:0 0 8px -2px rgba(0,0,0,.1),0 6px 20px -3px rgba(0,0,0,.2);

    --white:#fff;
    --black:#111213;
    --transparent:rgba(255,255,255,0);
    --overlay-default:#fff;
    --overlay-dark:#fff;
    --overlay-transparent:rgba(0,0,0,.1);

    --shadow-overlay:0 0 7px 0 rgba(0,0,0,.3);
}

:root[data-theme=red_black]{
    --accent-color-800:#FF9500;
    --accent-color-900:#995900;
    --font-700:#E8EAED;
    --font-800:rgba(255,255,255,.7);
    --font-900:#7b7b7b;
    --bg-800:#202020;
    --bg-700:#282828;
    --bg-900:#1d1b1a;
    --prod-trans-bg:rgba(0,0,0,.4);
}

*,*::before,*::after{
    font-family:'TikTok Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'!important;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html,body{
    color:var(--font-700);
    background-color:var(--g900);
    font-size:14px;
    line-height:1.5;
    letter-spacing:.3px;
}

h1,h2,h3,h4,h5,h6{
    font-weight:500;
    font-size:inherit;
    color:var(--font-700);
}

a,p,span,.HeaderNav-module__link{
    font-size:14px;
    color:var(--font-700);
}

.Banner-module__img{
    display:block;
    margin:0 auto;
    max-width:100%;
}

.Header-module__wrapper{
    background-color:var(--g800);
    border-radius:8px;
    margin-bottom:20px;
    padding:0 15px;
    min-height:50px;
    font-weight:500;
    width:100%;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

.Header-module__logoWrapper{
    display:flex;
    align-items:center;
    justify-content:center;
}

.Header-module__logoWrapper svg,
.Header-module__logoWrapper img{
    filter:brightness(0) saturate(100%) invert(64%) sepia(82%) saturate(2000%) hue-rotate(360deg);
}

.Header-module__logo{
    font-size:18px;
    text-transform:uppercase;
    color:var(--accent-color-800);
    white-space:nowrap;
    overflow:hidden;
    display:inline-block;
    width:0;
    animation:typingSmooth 1s steps(30,end) forwards;
    opacity:0;
}

@keyframes typingSmooth{
    0%{width:0;opacity:0;}
    1%{opacity:1;}
    100%{width:100%;opacity:1;}
}

.HeaderNav-module__wrapper{
    display:flex;
    align-items:center;
    column-gap:10px;
    margin-left:40px;
    text-transform:uppercase;
    flex-wrap:wrap;
}

.HeaderNav-module__link{
    cursor:pointer;
    padding:10px;
    transition:all .1s ease;
}

.HeaderNav-module__link:hover{
    color:var(--accent-color-800);
}

.boxHeader,
.boxBody,
.boxFooter{
    background:var(--g800);
}

.boxHeader{border-radius:8px 8px 0 0;}
.boxFooter{border-radius:0 0 8px 8px;}

.MonitoringServer-module__progressBarAnim{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:.8;
    background-color:transparent;
    background-image:linear-gradient(90deg,
        #6ea844 0,
        #6ea844 var(--online-players),
        #ffac4d var(--online-players),
        #ffac4d var(--joining-players),
        #ff4d4d var(--joining-players),
        #ff4d4d var(--queued-players),
        transparent var(--queued-players)
    );
}

.Servers-module__server{
    position:relative;
    cursor:pointer;
    background-color:var(--bg-700);
    padding:10px 15px;
    border-radius:6px;
    flex:1;
    margin:5px;
    min-width:200px;
    max-width:300px;
    overflow:hidden;
    transition:all .3s ease;
    font-weight:700;
    text-transform:uppercase;
    color:#fff;
    isolation:isolate;
}

.Servers-module__server::before{
    content:'';
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    filter:blur(10px) brightness(.4) grayscale(.6);
    z-index:-2;
    transition:filter .3s ease;
    pointer-events:none;
}

.Servers-module__server::after{
    content:'';
    position:absolute;
    inset:0;
    background-color:var(--bg-700);
    opacity:.65;
    z-index:-1;
    transition:opacity .3s ease;
    pointer-events:none;
}

.Servers-module__server.Servers-module__active::before{filter:blur(2px) brightness(1) saturate(1.2);}
.Servers-module__server.Servers-module__active::after{opacity:.25;}
.Servers-module__server:hover::before{filter:blur(1.5px) brightness(1.1) saturate(1.4);}
.Servers-module__server:hover::after{opacity:.15;}

.Servers-module__server[data-serverid="40222"]::before{background-image:url('https://i.ibb.co/YF9CyPd1/Ominous-Lighthouse-by-Matu-Zalon.jpg');}
.Servers-module__server[data-serverid="40223"]::before{background-image:url('https://i.ibb.co/WvfXCtzJ/Russia-Landscape-by-Toste.jpg');}
.Servers-module__server[data-serverid="40224"]::before{background-image:url('https://i.ibb.co/Mk2w0Tq2/Race-Track-by-Maples-Beef.jpg');}
.Servers-module__server[data-serverid="40695"]::before{background-image:url('https://i.ibb.co.com/N2HxzFT7/04.jpg');}

.Product-module__wrapper{
    background:var(--bg-700);
    position:relative;
    padding:0;
    cursor:pointer;
    border-radius:6px;
    overflow:hidden;
    animation:Product-module__productAnimation .15s ease;
}

@keyframes Product-module__productAnimation{
    from{opacity:0;transform:scale(.95);}
    to{opacity:1;transform:scale(1);}
}

.Product-module__price{
    position:absolute;
    top:5px;
    left:5px;
    padding:3px 10px;
    border-radius:6px;
    background-color:var(--prod-trans-bg, rgba(0,0,0,.4));
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    font-weight:700;
    z-index:2;
}

.boxHeader { border-radius: 12px 12px 0 0; }
.boxFooter { border-radius: 0 0 12px 12px; }

.productModalDescription {
    list-style: inside;
    text-align: left;
    padding: 10px;
    margin-bottom: 10px;
    background-color: transparent;
}

.ProductModal-module__command, .ProductModal-module__bp, .ProductModal-module__item, .ProductModal-module__dropdown {
    width: 650px;
}

.productModalImg {
    max-width: 500px;
    width: 100%;
    object-fit: contain;
    margin-bottom: 10px;
}

/* ===========================
   СЕТКА ТОВАРОВ (исправлено)
   1-я строка = 4 колонки, далее = 3
   =========================== */

/* Общая 12-колоночная сетка — перебиваем старую настройку */
.Products-module__wrapper{
    margin-top: 15px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    gap: 15px;
}

/* По умолчанию — 3 карточки в ряд (12 / 4) */
.Products-module__wrapper > .Product-module__wrapper{
    grid-column: span 4;
}

/* Первые 4 карточки — 4 в ряд (12 / 3) */
.Products-module__wrapper > .Product-module__wrapper:nth-child(-n+4){
    grid-column: span 3;
}

/* ====== Адаптив ====== */

/* ≤ 991.98px: делаем везде 3 в ряд для стабильности */
@media (max-width: 991.98px){
    .Products-module__wrapper{
        grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    }
    .Products-module__wrapper > .Product-module__wrapper{
        grid-column: span 4; /* 3 в ряд */
    }
}

/* ≤ 767.98px: 2 в ряд */
@media (max-width: 767.98px){
    .Products-module__wrapper > .Product-module__wrapper{
        grid-column: span 6; /* 2 в ряд */
    }
}

/* ≤ 575.98px: 1 в ряд */
@media (max-width: 575.98px){
    .Products-module__wrapper > .Product-module__wrapper{
        grid-column: span 12; /* 1 в ряд */
    }
}