body{
    margin:0;
    font-family:'Segoe UI',sans-serif;
    background:#0b0f1a;
    color:white;
    font-size:14px;
}

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

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

a{
    text-decoration:none;
    color:inherit;
}

/* =========================
   BACKGROUND
========================= */

.index-page{

    background:
    radial-gradient(circle at top right,
    rgba(34,197,94,0.05),
    transparent 30%),

    radial-gradient(circle at bottom left,
    rgba(59,130,246,0.04),
    transparent 30%),

    linear-gradient(
    rgba(11,15,26,0.94),
    rgba(11,15,26,0.98)),

    url('assets/img/background.png');

    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

/* =========================
   LAYOUT
========================= */

.layout{
    display:flex;
}

/* =========================
   SIDEBAR
========================= */

.sidebar{

    width:220px;

    min-height:100vh;

    background:
    linear-gradient(
    180deg,
    rgba(2,6,23,0.98),
    rgba(15,23,42,0.98));

    border-right:1px solid #1f2937;

    padding:16px;

    position:sticky;
    top:0;

    backdrop-filter:blur(10px);
}

/* LOGO */

.logo{

    width:100%;
    max-width:180px;

    display:block;

    margin:0 auto 16px;

    transition:0.2s;
}

.logo:hover{
    transform:scale(1.02);
}

/* =========================
   USER BOX
========================= */

.user-box{

    background:#020617;

    border:1px solid #1f2937;

    border-radius:8px;

    padding:10px;

    margin-bottom:16px;
}

.user-name{

    display:block;

    font-size:14px;
    font-weight:bold;

    color:#22c55e;

    margin-bottom:8px;
}

.user-link{

    display:block;

    color:#9ca3af;

    font-size:13px;

    margin-bottom:5px;

    transition:0.2s;
}

.user-link:hover{
    color:white;
}

.logout{
    color:#ef4444;
}

/* =========================
   NAVIGATION
========================= */

.sidebar nav{

    border-top:1px solid #1f2937;

    padding-top:14px;
}

.sidebar nav a{

    display:block;

    padding:9px 11px;

    margin-bottom:6px;

    border-radius:6px;

    color:white;

    font-size:13px;

    transition:0.2s;
}

.sidebar nav a:hover{

    background:#111827;

    color:#22c55e;

    transform:translateX(3px);
}

/* ADD SERVER */

.add-server{

    margin-top:14px;

    text-align:center;

    background:
    linear-gradient(
    90deg,
    #22c55e,
    #16a34a);

    padding:10px;

    border-radius:6px;

    color:white;

    font-size:13px;
    font-weight:bold;

    box-shadow:
    0 5px 18px rgba(34,197,94,0.20);

    transition:0.2s;
}

.add-server:hover{

    transform:translateY(-1px);

    box-shadow:
    0 8px 20px rgba(34,197,94,0.28);
}

/* =========================
   SEARCH
========================= */

.search-box{

    display:flex;

    gap:6px;

    margin-top:16px;
}

.search-box input{

    flex:1;

    padding:9px;

    border:none;

    border-radius:6px;

    background:#0f172a;

    color:white;

    font-size:13px;

    border:1px solid #1f2937;
}

.search-box input:focus{

    outline:none;

    border-color:#22c55e;
}

.search-box button{

    border:none;

    background:#22c55e;

    color:white;

    border-radius:6px;

    padding:9px 11px;

    cursor:pointer;
}

/* =========================
   MAIN
========================= */

.main{

    flex:1;

    padding:16px;

    padding-bottom:80px;
}

/* =========================
   HEADER
========================= */

.header-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:14px;

    margin-bottom:16px;
}

.title{

    font-size:28px;

    margin:0;

    font-weight:800;

    letter-spacing:0.3px;
}

/* =========================
   ADS
========================= */

.header-ads{

    display:flex;

    gap:10px;
}

.header-ad{

    width:165px;
    height:55px;

    background:#020617;

    border:1px solid #1f2937;

    border-radius:8px;

    overflow:hidden;

    display:flex;

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

    transition:0.2s;
}

.header-ad img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.header-ad:hover{

    border-color:#22c55e;
}

/* =========================
   GRID
========================= */

.grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-bottom:16px;
}

/* =========================
   BOXES
========================= */

.box{

    background:
    linear-gradient(
    180deg,
    rgba(2,6,23,0.98),
    rgba(15,23,42,0.98));

    border:1px solid #1f2937;

    border-radius:10px;

    padding:14px;
}

.box h2{

    margin-top:0;
    margin-bottom:12px;

    font-size:16px;
}

.box.premium{

    border:1px solid rgba(255,215,0,0.25);
}

/* =========================
   MINI SERVERS
========================= */

.mini{

    background:
    linear-gradient(
    180deg,
    rgba(15,23,42,0.98),
    rgba(17,24,39,0.98));

    border:1px solid transparent;

    border-left:3px solid gold;

    border-radius:8px;

    padding:10px;

    margin-bottom:7px;

    transition:0.2s;
}

.mini:hover{

    border-color:#22c55e;
}

.mini-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:5px;
}

.mini-top strong{

    font-size:13px;
}

.mini-votes{

    font-size:12px;

    color:gold;

    font-weight:bold;
}

.mini-info{

    font-size:11px;

    opacity:0.8;
}

/* =========================
   PREMIUM
========================= */

.premium-box{

    position:relative;

    overflow:hidden;
}

.premium-label{

    position:absolute;

    top:8px;
    right:8px;

    background:
    linear-gradient(
    90deg,
    #facc15,
    #eab308);

    color:black;

    padding:4px 9px;

    border-radius:999px;

    font-size:10px;
    font-weight:900;

    letter-spacing:0.5px;
}

.premium-open{

    margin-top:9px;

    color:#facc15;

    font-size:11px;

    font-weight:bold;
}

/* =========================
   ALL SERVERS
========================= */

.card{

    display:flex;

    justify-content:space-between;

    gap:18px;

    background:
    linear-gradient(
    180deg,
    rgba(2,6,23,0.98),
    rgba(15,23,42,0.98));

    border:1px solid #1f2937;

    border-radius:10px;

    padding:14px;

    margin-bottom:10px;

    transition:0.2s;
}

.card:hover{

    border-color:#22c55e;
}

.left{
    flex:1;
}

.card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-bottom:6px;
}

.card-top h3{

    margin:0;

    font-size:17px;
}

/* BADGES */

.top-badges{

    display:flex;

    flex-wrap:wrap;

    gap:6px;
}

.server-badge{

    background:
    linear-gradient(
    90deg,
    #22c55e,
    #16a34a);

    color:white;

    padding:4px 9px;

    border-radius:999px;

    font-size:11px;

    font-weight:bold;
}

.chronicle-badge{

    background:#172554;

    border:1px solid #1d4ed8;

    color:#bfdbfe;

    padding:4px 9px;

    border-radius:999px;

    font-size:11px;

    font-weight:bold;
}

/* DESCRIPTION */

.server-desc{

    margin:6px 0 10px;

    font-size:12px;

    line-height:1.5;

    color:#9ca3af;
}

/* RATES */

.server-rates{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:8px;
}

.rate-badge{

    background:#0f172a;

    border:1px solid #1f2937;

    color:#cbd5e1;

    padding:4px 9px;

    border-radius:999px;

    font-size:11px;
}

/* FEATURES */

.features-list{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:10px;
}

.feature-tag{

    background:#111827;

    border:1px solid #1f2937;

    color:#22c55e;

    padding:4px 9px;

    border-radius:999px;

    font-size:11px;
}

/* RIGHT */

.right{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:8px;
}

/* VOTES */

.vote-count{

    color:gold;

    font-size:15px;

    font-weight:bold;
}

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

.btn{

    background:#111827;

    border:1px solid #1f2937;

    color:white;

    padding:6px 10px;

    border-radius:6px;

    font-size:12px;

    transition:0.2s;
}

.btn:hover{

    border-color:#22c55e;
}

.vote{

    background:
    linear-gradient(
    90deg,
    #22c55e,
    #16a34a);

    border:none;

    font-weight:bold;
}

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

.form-wrapper{

    display:flex;

    justify-content:center;

    padding:30px;
}

.form-card-modern{

    width:100%;
    max-width:650px;

    background:
    linear-gradient(
    180deg,
    rgba(2,6,23,0.98),
    rgba(15,23,42,0.98));

    border:1px solid #1f2937;

    border-radius:10px;

    padding:24px;
}

.form-card-modern h1{

    margin-top:0;

    margin-bottom:18px;

    text-align:center;
}

.modern-form input,
.modern-form select{

    width:100%;

    background:#020617;

    border:1px solid #1f2937;

    color:white;

    padding:11px;

    border-radius:7px;

    margin-bottom:10px;
}

.modern-form input:focus,
.modern-form select:focus{

    outline:none;

    border-color:#22c55e;
}

/* GRID */

.grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

/* RATES */

.rates-box{

    background:#111827;

    border:1px solid #1f2937;

    border-radius:8px;

    padding:14px;

    margin-bottom:16px;
}

.rates-box h3{

    margin-top:0;

    margin-bottom:12px;

    font-size:14px;
}

.rates-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;
}

/* FEATURES */

.features-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:6px;

    margin-bottom:14px;
}

.features-grid label{

    font-size:13px;
}

/* SERVER TYPE */

.server-type-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin-bottom:14px;
}

.server-type-option{

    display:flex;

    align-items:center;

    gap:8px;

    background:#020617;

    border:1px solid #1f2937;

    border-radius:7px;

    padding:11px;

    cursor:pointer;
}

.server-type-option:hover{

    border-color:#22c55e;
}

.server-type-option span{

    font-size:12px;
}

/* RADIO */

.server-type-option input[type="radio"]{

    appearance:none;

    width:16px;
    height:16px;

    border-radius:50%;

    border:2px solid #4b5563;

    position:relative;
}

.server-type-option input[type="radio"]:checked{

    border-color:#22c55e;
}

.server-type-option input[type="radio"]:checked::before{

    content:"";

    width:7px;
    height:7px;

    background:#22c55e;

    border-radius:50%;

    position:absolute;

    top:2px;
    left:2px;
}

/* ALERT */

.alert{

    background:#1f2937;

    padding:11px;

    border-radius:7px;

    margin-bottom:14px;

    text-align:center;

    font-size:13px;
}

/* SUBMIT */

.submit-btn{

    width:100%;

    border:none;

    background:
    linear-gradient(
    90deg,
    #22c55e,
    #16a34a);

    color:white;

    padding:13px;

    border-radius:7px;

    font-weight:bold;

    cursor:pointer;
}

/* =========================
   FOOTER
========================= */

.footer-pro{

    position:fixed;

    bottom:0;
    left:0;
    right:0;

    background:#020617;

    border-top:1px solid #1f2937;

    z-index:999;
}

.footer-inner{

    display:grid;

    grid-template-columns:1fr 1fr auto;

    align-items:center;

    padding:10px 16px;

    margin-left:220px;
}

.footer-links{

    display:flex;

    gap:12px;
}

.footer-links a{

    color:#9ca3af;

    font-size:12px;
}

.footer-links a:hover{
    color:white;
}

.footer-ads{

    display:flex;

    gap:8px;
}

.ad-banner{

    width:130px;
    height:40px;

    object-fit:cover;

    border-radius:6px;

    border:1px solid #1f2937;
}

/* =========================
   SCROLLBAR
========================= */

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

::-webkit-scrollbar-track{
    background:#020617;
}

::-webkit-scrollbar-thumb{

    background:#1f2937;

    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#22c55e;
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .layout{
        flex-direction:column;
    }

    .sidebar{

        width:100%;

        min-height:auto;

        position:relative;
    }

    .main{
        padding:12px;
    }

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

    .card{

        flex-direction:column;
    }

    .right{

        align-items:flex-start;
    }

    .header-bar{

        flex-direction:column;

        align-items:flex-start;
    }

    .header-ads{
        width:100%;
    }

    .header-ad{

        flex:1;
    }

    .rates-grid{
        grid-template-columns:1fr;
    }

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

    .footer-inner{

        grid-template-columns:1fr;

        gap:10px;

        margin-left:0;

        text-align:center;
    }

    .footer-links,
    .footer-ads{

        justify-content:center;

        flex-wrap:wrap;
    }

}
/* =========================
   MOBILE FIX FINAL
========================= */

@media (max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    .index-page{
        background-attachment:scroll;
        background-position:center top;
    }

    .layout{
        flex-direction:column;
        width:100%;
    }

    .sidebar{

        width:100%;
        min-height:auto;

        position:relative;

        padding:14px;

        overflow-x:hidden;

        border-right:none;
        border-bottom:1px solid #1f2937;
    }

    .logo{
        max-width:150px;
    }

    .sidebar nav a{

        font-size:14px;

        padding:12px;
    }

    .search-box{
        margin-top:14px;
    }

    .main{

        width:100%;

        padding:12px;

        overflow-x:hidden;
    }

    .title{
        font-size:22px;
    }

    .header-bar{

        flex-direction:column;

        align-items:flex-start;
    }

    .header-ads{

        width:100%;

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:8px;
    }

    .header-ad{

        width:100%;

        height:50px;
    }

    .grid{

        grid-template-columns:1fr;

        gap:12px;
    }

    .box{

        padding:12px;
    }

    .mini{

        padding:10px;
    }

    .mini-top{

        gap:8px;
    }

    .mini-top strong{

        font-size:12px;
    }

    .mini-info{

        font-size:11px;

        line-height:1.5;
    }

    .card{

        flex-direction:column;

        gap:14px;

        padding:12px;
    }

    .card-top{

        flex-direction:column;

        align-items:flex-start;
    }

    .card-top h3{

        font-size:16px;
    }

    .top-badges{

        width:100%;
    }

    .server-desc{

        font-size:12px;
    }

    .server-rates{

        gap:5px;
    }

    .rate-badge{

        font-size:10px;
    }

    .features-list{

        gap:5px;
    }

    .feature-tag{

        font-size:10px;
    }

    .right{

        width:100%;

        align-items:stretch;
    }

    .btn{

        width:100%;

        text-align:center;

        padding:10px;
    }

    .vote-count{

        font-size:14px;

        margin-bottom:4px;
    }

    .grid-2{
        grid-template-columns:1fr;
    }

    .rates-grid{
        grid-template-columns:1fr;
    }

    .features-grid{
        grid-template-columns:1fr;
    }

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

    .footer-pro{
        position:relative;
    }

    .footer-inner{

        grid-template-columns:1fr;

        margin-left:0;

        gap:10px;

        text-align:center;

        padding:14px;
    }

    .footer-links,
    .footer-ads{

        justify-content:center;

        flex-wrap:wrap;
    }

    .ad-banner{

        width:100px;
        height:35px;
    }

}
------------------------------
/* =========================
   ALL SERVERS FIX
========================= */

.modern-card{

    margin-bottom:16px;

    border-radius:12px;

    overflow:hidden;
}

.modern-card .left{
    width:100%;
}

.modern-card .right{

    min-width:120px;

    justify-content:center;
}

.modern-card h3{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    margin-bottom:10px;
}

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:10px;
}

.tags span{

    background:#111827;

    border:1px solid #1f2937;

    color:#22c55e;

    padding:4px 8px;

    border-radius:999px;

    font-size:11px;
}

.badge{

    padding:4px 8px;

    border-radius:999px;

    font-size:10px;

    font-weight:bold;
}

.badge.premium{

    background:gold;

    color:black;
}

.badge.new{

    background:#22c55e;

    color:white;
}

.badge.coming{

    background:#3b82f6;

    color:white;
}

.start-date{

    margin-top:10px;

    color:#facc15;

    font-size:12px;

    font-weight:bold;
}
////////////reklama sidebar nowa
/* =========================
   LAYOUT FIX
========================= */

.layout{

    display:flex;

    align-items:flex-start;

    gap:14px;

    max-width:1450px;

    margin:0 auto;

    padding-right:14px;
}

/* =========================
   MAIN
========================= */

.main{

    flex:1;

    min-width:0;
}

/* =========================
   RIGHT SIDEBAR
========================= */

.right-sidebar{

    width:140px;

    flex-shrink:0;

    padding-top:16px;
}

/* =========================
   RIGHT AD
========================= */

.right-ad{

    width:140px;

    height:600px;

    background:
    linear-gradient(
    180deg,
    rgba(2,6,23,0.98),
    rgba(15,23,42,0.98));

    border:1px solid #1f2937;

    border-radius:10px;

    overflow:hidden;

    position:sticky;

    top:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:0.2s;
}

.right-ad:hover{

    border-color:#22c55e;
}

.right-ad img{

    width:100%;

    height:100%;

    object-fit:cover;
}

.right-ad.empty{

    color:#4b5563;

    font-size:12px;
}

/* =========================
   FOOTER FIX
========================= */

.footer-inner{

    margin-left:220px;

    margin-right:140px;
}

/* =========================
   MOBILE
========================= */

@media (max-width:1200px){

    .right-sidebar{
        display:none;
    }

    .footer-inner{
        margin-right:0;
    }
}