:root{
    --bg:#0f172a;
    --panel:#182235;
    --panel2:#1d2940;
    --accent:#3b82f6;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --radius:14px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: system-ui, -apple-system, sans-serif;
}

body{
    background: radial-gradient(circle at top, #16233b, #0b1323);
    color:var(--text);
    min-height:100vh;
}
.dialog_wrapper{position:fixed;top:0;left:0;display:none;width:100%;height:100%;z-index:1500;padding:0 1rem;overflow-y:auto}
.dialog{display:none;align-items:center;max-width:40rem;margin:4rem auto;min-height:calc(100% - 8rem)}
.dialog.modal_small{max-width:31rem}
.dialog.modal_medium{max-width:40rem}
.dialog.modal_large{max-width:85rem}
.dialog.modal_xlarge{max-width:65vw}

.modal_wrap{width:100%;padding:2rem 3rem 2.5rem;border-radius:1.5rem;background-color:#fff;border-top:.6rem solid #F6282B;z-index:1503;position:relative}
.modal_wrap .icon_close{position:absolute;top:.5rem;right:.5rem;color:#F6282B;cursor:pointer;font-size:3rem;transition:color .3s linear}
.modal_wrap .icon_close:focus{color:#e0cca2}
.modal_wrap .icon_close .icon{display:block}
.modal_wrap .image_wrap{position:relative;width:7rem;height:7rem;line-height:7rem;margin:-5.5rem auto 0;border-radius:50%;text-align:center;background-color:#F6282B}
.modal_wrap .image_wrap .icon{height:4rem;width:4rem;color:#fff;animation:zoomIn .5s both;animation-delay:.2s}
.modal_wrap .modal_text{text-align:center;margin:2rem 0 .5rem}
.modal_wrap .modal_text .modal_title{font-size:2.4rem;line-height:1.4;font-weight:700;color:#000;text-transform:capitalize;margin:0 auto}
.modal_wrap .modal_text p{margin:.5rem auto;max-width:88%}
.modal_wrap .modal_buttons{font-size:0;text-align:center;margin:2rem auto 0;max-width:35rem}
.modal_wrap .modal_buttons .button{width:calc(50% - 1.4rem);min-width:unset;margin:.5rem .7rem}

.dialog_bg{position:fixed;left:0;top:0;display:none;width:100%;height:100%;background-color:rgba(33,33,33,0.55)}
.dialog_wrapper.visible,.dialog_bg.visible{display:block}
.dialog.visible{display:flex}
.dialog_opened{overflow:hidden;padding-right:.8rem}
.dialog_opened.dialog_scrollable_mobile{padding-right:0}
.dialog_opened .dialog_bg,.dialog_opened .modal_wrap{animation-duration:.3s;animation-fill-mode:both}
.dialog_opened .dialog_bg{animation-name:fadeIn}
.dialog_opened .modal_wrap{animation-name:showDialog}

.modal_status.dialog .modal_wrap{color:#000;background-color:#fff;text-align:center}
.modal_status.dialog .dialog_close.icon_close{display:none}
.modal_status.dialog .modal_text{margin:2rem 0}
.modal_status.dialog .modal_text .modal_title{font-size:2.6rem;font-weight:700;line-height:1.3;text-transform:initial;margin:0 auto 1rem;max-width:100%}
.modal_status.dialog .modal_text p{margin:.5rem auto;max-width:88%}

.modal_success.dialog .modal_wrap{border-top:.6rem solid #28a745}
.modal_success.dialog .check_wrap{border:.2rem solid #28a745;overflow:hidden;animation:wrap .3s ease-in-out forwards;animation-delay:.3s;transform:scale(0)}
.modal_success.dialog .check_wrap::before,.modal_success.dialog .check_wrap::after{content:"";position:absolute;background-color:#fff;width:0;height:.5rem;transform-origin:left;animation-duration:.3s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}
.modal_success.dialog .check_wrap::before{top:3.2rem;left:2.1rem;transform:rotate(45deg);animation-name:left;animation-delay:.8s}
.modal_success.dialog .check_wrap::after{top:4.2rem;left:2.9rem;transform:rotate(-45deg);animation-name:right;animation-delay:1.1s}

@keyframes wrap { 0%{background-color:transparent;transform:scale(0)} 100%{background-color:#28a745;transform:scale(1)} }
@keyframes left { 0%{width:0} 100%{width:1.5rem} }
@keyframes right { 0%{width:0} 100%{width:3rem} }
.modal_danger.dialog .modal_wrap{border-top:.6rem solid #F51015}
.modal_danger.dialog .checkmark{stroke-width:2;stroke:#fff;stroke-miterlimit:10;background-color:transparent;box-shadow:inset 0 0 0 #F51015;animation:fill .4s ease-in-out .4s forwards,scale2 .3s ease-in-out .9s both}
.modal_danger.dialog .checkmark_circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#F51015;fill:none;animation:stroke .6s cubic-bezier(0.65,0,0.45,1) forwards}
.modal_danger.dialog .checkmark_check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(0.65,0,0.45,1) .8s forwards}

@keyframes stroke { 100%{stroke-dashoffset:0} }
@keyframes scale2 { 0%,100%{transform:none} 50%{transform:scale3d(1.1,1.1,1)} }
@keyframes fill { 100%{box-shadow:inset 0 0 0 5rem #F51015} }

.modal_warning.dialog{border-top:.6rem solid #ffb92e}
.modal_warning.dialog .image_wrap{background-color:#ffb92e}
.modal_info.dialog{border-top:.6rem solid #119eb5}
.modal_info.dialog .image_wrap{background-color:#119eb5}

.dialog .contact_form .modal_text{margin:2rem 0}
.dialog .contact_form textarea.input{min-height:7.3rem}
.dialog .contact_form .button{display:block;width:100%;margin:2rem 0 0}
.dialog .contact_form .row_f [class*=col_]{width:calc(100% - 30.1px)}

.modal_video.dialog{padding:1.5rem;border:none;width:65vw;max-width:100%;flex-shrink:0}
.modal_video.dialog .video_frame{width:100%;height:40rem;border-radius:1.5rem}
.modal_video.dialog .icon_close{display:none}

.modal_form .form_title {margin: 2rem 0 2rem;text-align: center;}
.modal_form #form_s2, .modal_form #form_s3 {display: flex;flex-direction: column;}
.modal_form .modal {top: 1rem;right: 1rem;bottom: 1rem;left: 1rem}
.modal_form .modal-dialog {width: auto}
.modal_form .modal-content {box-shadow: unset}


.toast_notifications{position:fixed;bottom:3rem;right:2rem;z-index:99999999}
.toast_notifications .toast,.toast_notifications .column{display:flex;align-items:center}
.toast_notifications .toast{width:40rem;position:relative;overflow:hidden;list-style:none;padding:1.6rem 1.7rem;margin-bottom:1rem;background:#fff;justify-content:space-between;animation:show_toast .3s ease forwards;box-shadow:0 .2rem .8rem 0 rgba(99,99,99,0.2)}
@keyframes show_toast { 0%{transform:translateX(100%)} 40%{transform:translateX(-5%)} 80%{transform:translateX(0%)} 100%{transform:translateX(-10px)} }
.toast_notifications .toast.hide{animation:hide_toast .3s ease forwards}
@keyframes hide_toast { 0%{transform:translateX(-10px)} 40%{transform:translateX(0%)} 80%{transform:translateX(-5%)} 100%{transform:translateX(calc(100% + 20px))} }
.toast::before{position:absolute;content:"";height:.3rem;width:100%;bottom:0;left:0;animation:progress 4s linear forwards}
@keyframes progress { 100%{width:0} }
.toast.success::before{background-color:#43B14B}
.toast.error::before{background-color:#FF3F0A}
.toast.warning::before{background-color:#D8CD31}
.toast.info::before{background-color:#4fc8f4}
.toast .column svg{width:2.6rem;height:2.6rem;flex-shrink:0}
.toast.success .column svg,.toast.success .column span{color:#43B14B}
.toast.error .column svg,.toast.error .column span{color:#E24D4C}
.toast.warning .column svg,.toast.warning .column span{color:#D8CD31}
.toast.info .column svg,.toast.info .column span{color:#4fc8f4}
.toast .column span{font-size:1.6rem;font-weight:600;margin-left:1.2rem;color:#272727;flex-grow:1}
.toast_notifications .removeTOAST{display:flex;cursor:pointer;flex-shrink:0}
.toast_notifications .removeTOAST .icon{width:1.6rem;height:1.6rem;color:#000;transition:.3s linear}
footer p{display:block;color:#fff;font:400 16px/1.4 Nunito,sans-serif;margin:1rem 0}
footer a{display:inline-block;font:400 16px/1.4 Nunito,sans-serif;color:#fff;transition:.3s linear}
footer .footer_row{display: flex;justify-content: space-between;align-items: flex-start;gap: 3rem}

.row_f{margin:0 -15px;display:flex;flex-wrap:wrap}
.row_f .col_1,.row_f .col_2,.row_f .col_3,.row_f .col_4,.row_f .col_5,.row_f .col_6,.row_f .col_7,.row_f .col_8,.row_f .col_9,.row_f .col_10,.row_f .col_11,.row_f .col_12{margin:0 15px}
.row_f .col_1{width:calc(8.3333333333% - 30.1px)}
.row_f .col_2{width:calc(16.6666666667% - 30.1px)}
.row_f .col_3{width:calc(25% - 30.1px)}
.row_f .col_4{width:calc(33.3333333333% - 30.1px)}
.row_f .col_5{width:calc(41.6666666667% - 30.1px)}
.row_f .col_6{width:calc(50% - 30.1px)}
.row_f .col_7{width:calc(58.3333333333% - 30.1px)}
.row_f .col_8{width:calc(66.6666666667% - 30.1px)}
.row_f .col_9{width:calc(75.0000000019% - 30.1px)}
.row_f .col_10{width:calc(83.3333333333% - 30.1px)}
.row_f .col_11{width:calc(91.6666666667% - 30.1px)}
.row_f .col_12{width:calc(100% - 30.1px)}


.footer_bottom{padding:1rem 0 ;position:relative;z-index:3}
.footer_bottom p{font:500 16px/normal Nunito,sans-serif;color:#666}
.footer_bottom p b, .footer_bottom p strong{font-weight:900}
.footer_bottom a{font:900 16px/normal Nunito,sans-serif;color:#666}
.footer_bottom p{margin:.5rem 0}
.footer_bottom a{transition:.3s linear}
.footer_bottom br{display:none}
.footer_bottom .development{text-align:right}
.footer_bottom .development p{display:flex;justify-content:flex-end;align-items:center}
.footer_bottom .footer_bottom_row {display: flex;justify-content: center;gap: 0 3rem}

.pagination{padding:1rem 0;user-select:none;font-size:0}
.pagination li{display:inline-block;vertical-align:top;padding:0;margin:.4rem;list-style:none}
.pagination li.active a{background-color:#e4d0a8;color:#fff;pointer-events:none}
.pagination li.pagination_arrow .icon{position:relative;top:-.2rem}
.pagination li.pagination_arrow_prev .icon{transform:rotate(180deg)}
.pagination li a{font-size:1.6rem;font-weight:700;display:block;min-width:3rem;height:3rem;line-height:3.2rem;padding:0 .5rem;background-color:#030303;color:#fff;text-align:center;transition:.3s linear}

/* cards */

.styled_card{
    background:#16233b;
    border-radius:14px;
    padding:20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.styled_card h4{
    margin-top:0;
    margin-bottom:10px;
}

/* buttons */

.button{
    padding:8px 14px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    text-decoration:none;
}

.button_danger{
    background:#ef4444;
    color:white;
}

.button_success{
    background:#22c55e;
    color:white;
}

/* inputs */

.form-label{
    margin-bottom:5px;
}

.input{
    width:100%;
    padding:10px;
    border-radius:8px;
    border:1px solid #2b3a55;
    background:#0f1a2e;
    color:white;
}

.input:focus{
    outline:none;
    border-color:#3b82f6;
}

/* table */

.table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

.table th,
.table td{
    padding:12px;
    border-bottom:1px solid #243352;
}

.table th{
    color:#9ca3af;
}

/* referral badge */

.badge{
    background:#22c55e;
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
    word-break:break-all;
}

/* ===== Layout ===== */
.wrapper{
    width: 100%;
    max-width: 1400px;
}
.wrapper_grid{
    display:grid;
    grid-template-columns:260px 1fr;
    min-height:100vh;
}

/* ===== Sidebar ===== */
.sidebar{
    background:var(--panel);
    padding:24px;
}

.logo{
    font-weight:700;
    font-size:20px;
    margin-bottom:30px;
}
.logo img{max-width: 220px; width: 100%; margin: 0 auto; display: block}

.nav{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top: 10px;
}

.nav a{
    text-decoration:none;
    color:var(--muted);
    padding:12px 14px;
    border-radius:var(--radius);
    transition:.2s;
}

.nav a:hover,
.nav a.active{
    background:var(--panel2);
    color:#fff;
}

/* ===== Content ===== */
.content{
    padding:28px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* Header */
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.btn{
    background:var(--accent);
    border:none;
    color:#fff;
    padding:10px 16px;
    border-radius:10px;
    cursor:pointer;
}

/* Cards grid */
.grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
}

.card{
    background:var(--panel);
    border-radius:var(--radius);
    padding:20px;
}

/* Hero */
.hero{
    background:linear-gradient(120deg,#1f2d48,#253759);
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:180px;
}

.hero h2{
    font-size:24px;
    margin-bottom:8px;
}

/* Chat */
.chat{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:250px;
    overflow:auto;
}

.msg{
    background:var(--panel2);
    padding:10px 14px;
    border-radius:12px;
    width:fit-content;
}

.msg.me{
    align-self:flex-end;
    background:var(--accent);
}

/* Stats */
.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.stat{
    background:var(--panel);
    padding:18px;
    border-radius:var(--radius);
    text-align:center;
}

.stat h3{
    font-size:20px;
}

.stat p{
    font-size:13px;
    color:var(--muted);
    margin-top:6px;
}

/* ===== Server card ===== */
.server-card{
    position:relative;
    min-height:470px;
    border-radius:var(--radius);
    overflow:hidden;
    background:url("/img/cosac.jpg") top/cover;
}

.server-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
            90deg,
            rgba(0,0,0,.75),
            rgba(0,0,0,.35)
    );
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.server-card h2{
    font-size:22px;
    font-weight:700;
}

.server-info{
    color:#cbd5e1;
    font-size:14px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.server-online{
    position:absolute;
    right:20px;
    bottom:20px;
    font-weight:700;
    color:#22c55e;
    display:flex;
    align-items:center;
    gap:8px;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 8px #22c55e;
}

/* burger */
.burger{
    display:none;
    font-size:50px;
    background:none;
    border:none;
    color:white;
    cursor:pointer;
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 999999;
}

/* mobile sidebar */
@media (max-width:720px){
    .content{
        padding: 5px 15px;
        gap:20px;
    }
    .burger{
        display:block;
    }
    .sidebar{padding: 5px 0;}

    .sidebar .nav{
        position:fixed;
        left:-260px;
        top: 140px;
        height:100%;
        width:260px;
        z-index:999;
        transition:0.3s;
    }

    .sidebar.active .nav{
        background: #16233b;

        left:0;
    }

}

/* ===== Responsive ===== */
@media (max-width: 1000px){
    .grid{
        grid-template-columns:1fr;
    }
    .stats{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 720px){
    .wrapper_grid{
        grid-template-columns:1fr;
    }

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

@media only screen and (max-width: 767px) {
    .hide_mobile{display:none!important}
    .row.tablet .col_3,.row.tablet .col_4{width:calc(100% - 3rem)}
    .row.mobile .col_1,.row.mobile .col_2,.row.mobile .col_3,.row.mobile .col_4,.row.mobile .col_5,.row.mobile .col_6,.row.mobile .col_7,.row.mobile .col_8,.row.mobile .col_9,.row.mobile .col_10,.row.mobile .col_11,.row.mobile .col_12{width:calc(100% - 3rem)}
    .row_f .col_sm_1{width:calc(8.3333333333% - 30px)}
    .row_f .col_sm_2{width:calc(16.6666666667% - 30px)}
    .row_f .col_sm_3{width:calc(25% - 30px)}
    .row_f .col_sm_4{width:calc(33.3333333333% - 30px)}
    .row_f .col_sm_5{width:calc(41.6666666667% - 30px)}
    .row_f .col_sm_6{width:calc(50% - 30px)}
    .row_f .col_sm_7{width:calc(58.3333333333% - 30px)}
    .row_f .col_sm_8{width:calc(66.6666666667% - 30px)}
    .row_f .col_sm_9{width:calc(75.0000000019% - 30px)}
    .row_f .col_sm_10{width:calc(83.3333333333% - 30px)}
    .row_f .col_sm_11{width:calc(91.6666666667% - 30px)}
    .row_f .col_sm_12{width:calc(100% - 30px)}
}

.login-wrap{
    width:100%;
    margin:auto;
    max-width:525px;
    min-height:100vh;
    position:relative;
    background:url('/img/cosac.jpg') no-repeat 0 center;
    box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
    width:100%;
    height:100%;
    position:absolute;
    padding:90px 70px 50px 70px;
    background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    transform:rotateY(180deg);
    backface-visibility:hidden;
    transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
    display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
    text-transform:uppercase;
}
.login-html .tab{
    font-size:22px;
    margin-right:15px;
    padding-bottom:5px;
    margin:0 15px 10px 0;
    display:inline-block;
    border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
    color:#fff;
    border-color:#1161ee;
}
.login-form{
    min-height:345px;
    position:relative;
    perspective:1000px;
    transform-style:preserve-3d;
}
.login-form .group{
    margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
    width:100%;
    color:#fff;
    display:block;
}
.login-form .group .input,
.login-form .group .button{
    border:none;
    padding:15px 20px;
    border-radius:25px;
    background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
    text-security:circle;
    -webkit-text-security:circle;
}
.login-form .group .label{
    color:#aaa;
    font-size:12px;
}
.login-form .group .button{
    background:#1161ee;
}
.login-form .group label .icon{
    width:15px;
    height:15px;
    border-radius:2px;
    position:relative;
    display:inline-block;
    background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
    content:'';
    width:10px;
    height:2px;
    background:#fff;
    position:absolute;
    transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
    left:3px;
    width:5px;
    bottom:6px;
    transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
    top:6px;
    right:0;
    transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
    color:#fff;
}
.login-form .group .check:checked + label .icon{
    background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
    transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
    transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
    transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
    transform:rotate(0);
}

.hr{
    height:2px;
    margin:60px 0 50px 0;
    background:rgba(255,255,255,.2);
}
.foot-lnk{
    text-align:center;
}

/* TOP page */

.top_page{
    padding:30px;
}

/* title */

.page_title{
    margin-bottom:20px;
    font-size:24px;
}

/* table */

.top_table{
    width:100%;
    border-collapse:collapse;
}

.top_table th{
    text-align:left;
    padding:12px;
    font-weight:600;
    color:#9ca3af;
    border-bottom:2px solid #243352;
}

.top_table td{
    padding:12px;
    border-bottom:1px solid #1f2b45;
}

/* hover */

.top_table tbody tr:hover{
    background:#18243d;
}

/* top players */

.top_player{
    background:rgba(255,215,0,0.05);
}

.top_player td:first-child{
    font-weight:bold;
    color:#facc15;
}

/* player name */

.player{
    font-weight:500;
}

/* responsive */

@media(max-width:700px){

    .top_table th:nth-child(4),
    .top_table td:nth-child(4){
        display:none;
    }

}