/*******************************/
/********* General CSS *********/
/*******************************/
body {
    color: #000000;
    background: #a6e98e55;
    font-family: 'Tahoma', sans-serif;
    font-size: large;
    font-weight: bold;
    background-image: url("/assets/img/back.jpeg");
    background-size: cover;      /* чтобы на весь экран */
    background-position: center; /* по центру */
    background-repeat: no-repeat; /* без повторов */
    overflow-x: hidden;
}

a {
    color: #4F84C4;
    transition: .3s;
}

a:hover,
a:active,
a:focus {
    color: #00539C;
    outline: none;
    text-decoration: none;
}

.btn:focus {
    box-shadow: none;
}

.wrapper {
    position: relative;
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    /* background: #24461c; */
}

.container {
    max-width: 1050px;
}


/*******************************/
/********** Header CSS *********/
/*******************************/
.header {
    position: relative;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #ffffff;
    background: #0e252f;
}

@media (min-width: 1200px) {
    .header .container-fluid {
        padding-left: 60px;
        padding-right: 60px;
    }
}
/* СКРЫВАЕМ ЛОГО НА МАЛЕНЬКИХ ЭКРАНАХ */
@media (max-width: 600px) {
    .brand {
        display: none;
    }
}

.header .brand {
    position: relative;
}

.header .brand img {
    width: 100px;
    max-width: 150px;
    height: 100px;
    max-height: 100px;
    border-radius: 100px;
    box-shadow: 2px 1px 24px 6px rgb(0, 14, 2), 3px 2px 23px 8px rgb(23, 165, 127);
    background-color: rgb(2, 45, 11);
}

.header .topbar {
    position: relative;
    text-align: right;
}

.header .topbar .topbar-col {
    display: inline-block;
    padding: 0 15px;
    margin-bottom: 15px;
}

.header .topbar-col a {
    color: #a3b8a9;
    font-size: 13px;
}

.header .topbar-col a i {
    margin-right: 10px;
    color: #96dcb5;
}

.header .topbar-social {
    position: relative;
}

.header .topbar-social a {
    display: inline-block;
}

.header .topbar-social a i {
    margin-right: 10px;
    font-size: 18px;
    color: #bbbbbb;
}

.header .topbar-social a:last-child i {
    margin: 0;
}

.header .topbar-social a:hover i {
    color: #4F84C4;
}

.header .dropdown-menu {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: #bbbbbb;
}

.header .dropdown-menu a.active {
    color: #4F84C4;
}
/* navbar */
@media (min-width: 992px) {
    
    .header .navbar {
        background: #203347 !important;
        box-shadow: 1px 1px 10px 4px rgb(248, 125, 250);
    }
    
    .header .navbar-brand {
        display: none;
    }
    
    .header .navbar-light a.nav-link {
        position: relative;
        padding: 8px 10px;
        color: #9af4fb;
        text-shadow: 1px 1px 4px rgb(10, 1, 22);
        font-size: 16px;
        font-weight: bold;
        z-index: 1;
    }
    
    .header .navbar-light a.nav-link:hover,
    .header .navbar-light a.nav-link.active {
        color: #21fb25;
    }
}

@media (max-width: 992px) {
    
    .header .brand {
        text-align: center;
        margin-bottom: 15px;
    }
    
    .header .topbar {
        text-align: center;
        margin-bottom: 15px;
    }
    
    .header .topbar .topbar-col {
        margin: 0;
    }
    
    .header .topbar .topbar-social {
        margin-top: 5px;
    }
    
    .header .navbar {
        background: #203347 !important;
        border: 1px solid #eeeeee;
        z-index: 1;
    }
    
    .header a.nav-link {
        padding: 5px 0;
    }
    
    .header .dropdown-menu {
        box-shadow: none;
    }
}

.header .navbar .btn {
    position: relative;
    margin-left: 15px;
    padding: 12px 25px 10px 25px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    background: linear-gradient(#4F84C4, #00539C);
    transition: .5s;
}

.header .navbar .btn:hover {
    background: linear-gradient(#00539C, #4F84C4);
}

.header .navbar .btn i {
    font-size: 16px;
    margin-right: 8px;
}

/* hamburger menu color in dark theme */
body.dark .navbar-light .navbar-toggler {
    border-color: #ffd966;
}

body.dark .navbar-light .navbar-toggler-icon {
    filter: invert(88%) sepia(50%) saturate(500%) hue-rotate(10deg);
}

body.dark .navbar-brand{
    color:#ffffff !important;
}

@media (max-width: 992px) {
    .header .navbar .btn {
        margin: 15px 0 10px 0;
    }
}


/*******************************/
/******* Page Header CSS *******/
/*******************************/
.page-header {
    position: relative;
    margin-bottom: 45px;
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(to right, #00539C, #4F84C4 50%);
}

.page-header h2 {
    color: #ffffff;
    font-size: 35px;
    font-weight: 700;
    text-transform: uppercase;
}

.page-header a {
    position: relative;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
}

.page-header a::after {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    top: 6.5px;
    right: -6px;
    border-radius: 7px;
    background: #ffffff;
}

.page-header a:last-child::after {
    display: none;
}


/*******************************/
/*********** Hero CSS **********/
/*******************************/
.hero {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

@media (min-width: 768px) {
    .hero {
        padding: 45px 60px;
    }
}

.hero h2 {
    margin: 0;
    font-size: 45px;
    font-weight: 800;
}

.hero h4 span {
    color: #4F84C4;
}

.hero p {
    margin: 10px 0 20px 0;
    font-size: 18px;
    font-weight: 500;
}

.hero a.btn {
    position: relative;
    padding: 10px 35px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    background: linear-gradient(#4F84C4, #00539C);
    transition: .5s;
}

.hero a.btn:hover {
    background: linear-gradient(#00539C, #4F84C4);
}

.hero img {
    max-width: 80%;
    max-height: 500px;
}

@media (max-width: 767.98px) {
    .hero img {
        margin-top: 30px;
    }
}


/*******************************/
/******* Section Header ********/
/*******************************/
.section-header {
    position: relative;
    width: 100%;
    max-width: 550px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 60px;
    padding-bottom: 15px;
}

.section-header::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 3px;
    left: calc(50% - 30px);
    bottom: 0;
    background: linear-gradient(to left, #4F84C4, #00539C, #4F84C4);
    border-radius: 100%;
}

.section-header h2 {
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

.section-header p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}


/*******************************/
/********* Service CSS *********/
/*******************************/
.service {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

@media (min-width: 768px) {
    .service {
        padding: 45px 60px 15px 60px;
    }
}

.service .service-item {
    position: relative;
    width: 100%;
    padding: 25px 30px;
    background: linear-gradient(to bottom, rgba(198, 232, 234, 0.276) 10%, rgba(120, 208, 222, 0.249), rgba(69, 175, 175, 0.269));
    border-radius: 30px 30px 0 0;
    margin-bottom: 30px;
    border: 4px solid #000000;
    box-shadow: 3px 8px 10px 6px rgb(3, 45, 90);
    font-weight: bold;
}

.service .service-item:hover {
    background: linear-gradient(to bottom, rgba(197, 14, 38, 0.162) 99%, rgba(170, 17, 17, 0.249), rgba(0, 0, 0, .4));
    zoom: 104%;
    cursor:pointer;
    font-weight: bold;
}

.service .service-item h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    align-content: center;
}

.service .service-item img {
    height: 80px;
}

.service .service-item p {
    position: relative;
    margin: 20px 0 0 0;
    font-size: 16px;
}

.service .video-player {
    position: relative;
    padding-bottom: 41.7%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #ffffff;
    margin: 30px 0 0 0;
    border-radius: 8px;
}

.service .video-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #000000;
    z-index: -1;
}

.service .video-player img {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    border: none;
    height: auto;
    border-radius: 8px;
    filter: opacity(75%);
    -webkit-filter: opacity(75%);
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
    z-index: 1;
}

.service .video-player:hover img {
    filter: opacity(100%);
    -webkit-filter: opacity(100%);
}

.service .video-player .play {
    height: 100px;
    width: 100px;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    position: absolute;
    background: url("../img/play.png") no-repeat;
    cursor: pointer;
    z-index: 2;
}

.service .video-player .play:hover {
    background: url("../img/play-hover.png") no-repeat;
}

@media (max-width: 575.98px) {  
     
    .service .video-player .play {
        height: 60px;
        width: 60px;
        left: 50%;
        top: 50%;
        margin-left: -30px;
        margin-top: -30px;
        background: url("../img/play-60.png") no-repeat;
    }
    
    .service .video-player .play:hover {
        background: url("../img/play-hover-60.png") no-repeat;
    }
}


/*******************************/
/******* Service Row CSS *******/
/*******************************/
.service-row {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.service-row .service-row-img {
    position: relative;
    width: 100%;
    padding: 0 30px;
    overflow: hidden;
}

.service-row .service-row-img img {
    max-width: 100%;
}

@media(max-width: 767.98px) {
    .service-row .service-row-img {
        margin-bottom: 30px;
    }
}

.service-row .service-row-text {
    position: relative;
    width: 100%;
    padding: 0 30px;
}

.service-row h2.section-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.service-row h2.section-title::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 3px;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, #4F84C4, #00539C, #4F84C4);
    border-radius: 0 100% 100% 0; 
}

.service-row p {
    font-size: 16px;
}

.service-row a.btn {
    margin-top: 15px;
    padding: 10px 35px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    background: linear-gradient(#4F84C4, #00539C);
    transition: .5s;
}

.service-row a.btn:hover {
    background: linear-gradient(#00539C, #4F84C4);
}

.service-row .service-row-col .col-sm-6 {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.service-row .service-row-col-icon {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    padding: 8px 0;
    text-align: center;
    color: #ffffff;
    background: #4F84C4;
}

.service-row .service-row-col-text {
    width: calc(100% - 55px);
}

.service-row .service-row-col-text h3 {
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 3px;
}

.service-row .service-row-col-text p {
    margin: 0;
    font-size: 10px;
    font-weight: 400;
}

@media (max-width: 768px) {
    .service-row .service-row-img,
    .service-row .service-row-text {
        padding: 0;
    }
}


/*******************************/
/********** About CSS **********/
/*******************************/
.about {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

@media (min-width: 768px) {
    .about .container-fluid {
        padding: 0;
    }
    
    .about .row {
        margin: 0;
    }
    
    .about .col-md-6:first-child {
        padding: 0;
    }
    
    .about .col-md-6:last-child {
        padding: 0 60px;
    }
}

.about h2.section-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.about h2.section-title::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 3px;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, #4F84C4, #00539C, #4F84C4);
    border-radius: 0 100% 100% 0;
}

.about p {
    color: #213546;
    font-size: 19px;
    margin-bottom: 30px;
}

.about a.btn {
    padding: 10px 35px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    background: linear-gradient(#4F84C4, #00539C);
    transition: .5s;
}

.about a.btn:hover {
    background: linear-gradient(#00539C, #4F84C4);
}

.about img {
    max-width: 100%;
    border-radius: 0 30px 30px 0;
}

@media(max-width: 767.98px) {
    .about img {
        margin-bottom: 30px;
        border-radius: 30px 30px 0 0;
    }
}

.about .youtube-player {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #ffffff;
    margin: 0;
    border-radius: 0 30px 30px 0;
}

@media (max-width: 991.98px) {
    .about .youtube-player {
        padding-bottom: 50%;
    }
}

@media (max-width: 767.98px) {
    .about .youtube-player {
        padding-bottom: 56.23%;
        margin-bottom: 30px;
        border-radius: 30px 30px 0 0;
    }
}

.about .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}

.about .youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}

.about .youtube-player img:hover {
    -webkit-filter: brightness(90%);
    filter: brightness(90%);
}

.about .youtube-player .play {
    height: 100px;
    width: 100px;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    position: absolute;
    background: url("../img/play.png") no-repeat;
    cursor: pointer;
}

.about .youtube-player .play:hover {
    background: url("../img/play-hover.png") no-repeat;
}

@media (max-width: 575.98px) {   
    .about .youtube-player .play {
        height: 60px;
        width: 60px;
        left: 50%;
        top: 50%;
        margin-left: -30px;
        margin-top: -30px;
        background: url("../img/play-60.png") no-repeat;
    }
    
    .about .youtube-player .play:hover {
        background: url("../img/play-hover-60.png") no-repeat;
    }
}


/*******************************/
/*********** FAQs CSS **********/
/*******************************/
.faqs {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

@media (min-width: 768px) {
    .faqs .container-fluid {
        padding: 0;
    }
    
    .faqs .row {
        margin: 0;
    }
    
    .faqs .col-md-6:first-child {
        padding: 0 60px;
    }
    
    .faqs .col-md-6:last-child {
        padding: 0;
    }
}

.faqs h2.section-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.faqs h2.section-title::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 3px;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, #4F84C4, #00539C, #4F84C4);
    border-radius: 0 100% 100% 0;
}

.faqs .card {
    margin-bottom: 15px;
    border: none;
    border-radius: 0;
}

.faqs .card:last-child {
    margin-bottom: 0;
}

.faqs .card-header {
    padding: 0;
    border: none;
    background: #0b0135;
}

.faqs .card-header a {
    display: block;
    width: 100%;
    padding: 15px 20px 12px 20px;
    color: #f8f6bd;
    font-size: 16px;
    font-weight: 400;
    background: #000000;
    border: 2px solid #01d1ca;
    border-radius: 0 30px 30px 0;
}

.faqs .card-header [data-toggle="collapse"]:after {
    font-family: 'font Awesome 5 Free';
    content: "\f067";
    float: right;
    color: #f00707;
    font-size: 12px;
    font-weight: 900;
    transition: .3s;
}

.faqs .card-header [data-toggle="collapse"][aria-expanded="true"]:after {
    font-family: 'font Awesome 5 Free';
    content: "\f068";
    float: right;
    color: #fff200;
    font-size: 12px;
    font-weight: 900;
    transition: .3s;
}

.faqs .card-body {
    padding: 15px 0;
    font-size: 16px;
    font-weight: 400;
    border: none;
    background: #000000;
    color: #f8f6bd;
}

.faqs a.btn {
    margin-top: 40px;
    padding: 10px 35px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    background: linear-gradient(#4F84C4, #00539C);
    transition: .5s;
}

.faqs a.btn:hover {
    background: linear-gradient(#00539C, #4F84C4);
}

.faqs img {
    max-width: 100%;
    border-radius: 30px 0 0 30px;
}

@media (max-width: 767.98px) {
    .faqs img {
        margin-top: 30px;
        border-radius: 0 0 30px 30px;
    }
}


/*******************************/
/******* Testimonial CSS *******/
/*******************************/
.testimonial {
    position: relative;
    width: 100%;
    padding: 45px 0;
    text-align: center;
}

.testimonial .container {
    max-width: 960px;
}

.about-page .testimonial {
    padding-bottom: 90px;
}

.testimonial .testimonial-slider-nav {
    position: relative;
    width: 300px;
    margin: 0 auto;
}

.testimonial .testimonial-slider-nav .slick-slide {
    position: relative;
    opacity: 0;
    transition: .5s;
}

.testimonial .testimonial-slider-nav .slick-active {
    opacity: 1;
    transform: scale(1.3);
}

.testimonial .testimonial-slider-nav .slick-center {
    transform: scale(2);
    z-index: 1;
}

.testimonial .testimonial-slider-nav .slick-slide img {
    position: relative;
    display: block;
    margin-top: 37px;
    width: 100%;
    height: auto;
    border-radius: 100px;
}

.testimonial .testimonial-slider-nav .slick-center img {
    border: 5px solid #ffffff;
}

.testimonial .testimonial-slider {
    position: relative;
    margin-top: 15px;
    padding-top: 50px;
}

.testimonial .testimonial-slider::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 50px;
    top: 0;
    left: calc(50% - 30px);
    background: url(../img/quote.png) top center no-repeat;
}

.testimonial .testimonial-slider h3 {
    font-size: 20px;
    font-weight: 700;
}

.testimonial .testimonial-slider h4 {
    font-size: 14px;
}

.testimonial .testimonial-slider p {
    font-size: 18px;
    font-style: italic;
    margin: 0;
}


/*******************************/
/*********** News CSS **********/
/*******************************/
.news {
    position: relative;
    width: 100%;
    padding: 45px 0 60px 0;
}

@media (min-width: 768px) {
    .news .container-fluid {
        padding: 0;
    }
    
    .news .row {
        margin: 0;
    }
    
    .news .col-md-6:first-child {
        padding: 0;
    }
    
    .news .col-md-6:last-child {
        padding: 0 60px;
    }
}

.news h2.section-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.news h2.section-title::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 3px;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, #4F84C4, #00539C, #4F84C4);
    border-radius: 0 100% 100% 0; 
}

.news p {
    font-size: 16px;
    margin-bottom: 30px;
}

.news a.btn {
    padding: 10px 35px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    background: linear-gradient(#4F84C4, #00539C);
    transition: .5s;
}

.news a.btn:hover {
    background: linear-gradient(#00539C, #4F84C4);
}

.news img {
    max-width: 100%;
    border-radius: 0 30px 30px 0;
}

@media (max-width: 767.98px) {
    .news img {
        margin-bottom: 30px;
        border-radius: 30px 30px 0 0;
    }
}


/*******************************/
/******* Call to Action ********/
/*******************************/
.call-to-action {
    position: relative;
    padding: 50px 0;
    background: linear-gradient(to right, #00539C, #4F84C4 50%);
}

.service-page .call-to-action {
    margin-top: 45px;
}

.call-to-action h2 {
    color: #ffffff;
    font-size: 35px;
    font-weight: 600;
    text-transform: uppercase;
}

.call-to-action p {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
}

.call-to-action a {
    float: right;
    padding: 10px 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #2c3035;
    background: #ffffff;
    border-radius: 30px;
}

@media (max-width: 768px) {
    .call-to-action a {
        float: left;
        margin-top: 30px;
    }
}


/*******************************/
/********** Story CSS **********/
/*******************************/
.story {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

@media(min-width: 768px) {
    .story {
        padding: 45px 60px 15px 60px;
    }
}

.story .story-container {
    position: relative;
    width: 100%;
}

.story .story-end,
.story .story-start,
.story .story-year {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 1;
}

.story .story-end p,
.story .story-start p,
.story .story-year p {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0;
    padding: 30px 0;
    text-align: center;
    background: linear-gradient(#4F84C4, #00539C);
    border-radius: 100px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
}

.story .story-year {
    margin: 30px 0;
}

.story .story-continue {
    position: relative;
    width: 100%;
    padding: 60px 0;
}

.story .story-continue::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -1px;
    background: #4F84C4;
}

.story .row.story-left,
.story .row.story-right .story-date {
    text-align: right;
}

.story .row.story-right,
.story .row.story-left .story-date {
    text-align: left;
}

.story .story-date {
    font-size: 14px;
    font-weight: 600;
    margin: 41px 0 0 0;
}

.story .story-date::after {
    content: '';
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    top: 45px;
    background: linear-gradient(#4F84C4, #00539C);
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    border-radius: 15px;
    z-index: 1;
}

.story .row.story-left .story-date::after {
    left: -7px;
}

.story .row.story-right .story-date::after {
    right: -7px;
}

.story .story-box,
.story .story-launch {
    position: relative;
    display: inline-block;
    margin: 15px;
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    background: #ffffff;
}

.story .story-launch {
    width: 100%;
    margin: 15px 0;
    padding: 0;
    border: none;
    text-align: center;
    background: transparent;
}

.story .story-box::after,
.story .story-box::before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.story .row.story-left .story-box::after,
.story .row.story-left .story-box::before {
    left: 100%;
}

.story .row.story-right .story-box::after,
.story .row.story-right .story-box::before {
    right: 100%;
}

.story .story-launch .story-box::after,
.story .story-launch .story-box::before {
    left: 50%;
    margin-left: -10px;
}

.story .story-box::after {
    top: 26px;
    border-color: transparent transparent transparent #ffffff;
    border-width: 10px;
}

.story .story-box::before {
    top: 25px;
    border-color: transparent transparent transparent #dddddd;
    border-width: 11px;
}

.story .row.story-right .story-box::after {
    border-color: transparent #ffffff transparent transparent;
}

.story .row.story-right .story-box::before {
    border-color: transparent #dddddd transparent transparent;
}

.story .story-launch .story-box::after {
    top: -20px;
    border-color: transparent transparent #dddddd transparent;
}

.story .story-launch .story-box::before {
    top: -19px;
    border-color: transparent transparent #ffffff transparent;
    border-width: 10px;
    z-index: 1;
}

.story .story-box .story-icon {
    position: relative;
    width: 40px;
    height: auto;
    float: left;
}

.story .story-icon i {
    font-size: 25px;
    color: #4F84C4;
}

.story .story-icon img {
    width: 25px;
}

.story .story-box .story-text {
    position: relative;
    width: calc(100% - 40px);
    float: left;
}

.story .story-launch .story-text {
    width: 100%;
}

.story .story-text h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
}

.story .story-text p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .story .story-continue::after {
        left: 40px;
    }
    
    .story .story-end,
    .story .story-start,
    .story .story-year,
    .story .row.story-left,
    .story .row.story-right .story-date,
    .story .row.story-right,
    .story .row.story-left .story-date,
    .story .story-launch {
        text-align: left;
    }
    
    .story .row.story-left .story-date::after,
    .story .row.story-right .story-date::after {
        left: 47px;
    }
    
    .story .story-box,
    .story .row.story-right .story-date,
    .story .row.story-left .story-date {
        margin-left: 55px;
    }
    
    .story .story-launch .story-box {
        margin-left: 0;
    }
    
    .story .row.story-left .story-box::after {
        left: -20px;
        border-color: transparent #ffffff transparent transparent;
    }

    .story .row.story-left .story-box::before {
        left: -22px;
        border-color: transparent #dddddd transparent transparent;
    }
    
    .story .story-launch .story-box::after,
    .story .story-launch .story-box::before {
        left: 30px;
        margin-left: 0;
    }
}


/*******************************/
/*********** Team CSS **********/
/*******************************/
.team {
    position: relative;
    width: 100%;
    padding: 45px 0 60px 0;
}

@media (min-width: 768px) {
    .team {
        padding: 45px 60px 60px 60px;
    }
}


.team .team-item {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    padding: 30px;
    background: rgba(0, 0, 0, .05);
    border-radius: 300px 300px 5px 5px;
}

.team .team-img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.team .team-img img {
    width: 100%;
    border-radius: 300px;
}

.team .team-text {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.team .team-text h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.team .team-text p {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

.team .team-social {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 30px 20px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(79, 132, 196, .92);
    border-radius: 300px 300px 5px 5px;
    opacity: 0;
    transition: .5s;
}

.team .team-item:hover .team-social {
    opacity: 1;
}

.team .team-social a {
    color: #ffffff;
    font-size: 22px;
    padding: 0 10px;
}


/*******************************/
/******** Portfolio CSS ********/
/*******************************/
.portfolio {
    position: relative;
    padding: 45px 0;
    background: #ffffff;
}

.portfolio #portfolio-flters {
    padding: 0;
    margin: -15px 0 25px 0;
    list-style: none;
    font-size: 0;
    text-align: center;
}

.portfolio #portfolio-flters li,
.portfolio .load-more .btn {
    cursor: pointer;
    display: inline-block;
    margin: 5px;
    padding: 10px 25px;
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 30px;
    background: linear-gradient(#4F84C4, #00539C);
    border: 1px solid #4F84C4;
    transition: .5s;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
    background: #ffffff;
    color: #213546;
}

.portfolio .load-more {
    text-align: center;
}

.portfolio .load-more .btn {
    margin: 25px 0;
    padding: 15px 40px;
    transition: .5s;
}

.portfolio .load-more .btn:hover {
    background: linear-gradient(#00539C, #4F84C4);
}

.portfolio .portfolio-item {
    position: relative;
    height: 280px;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.portfolio .portfolio-item figure {
    background: #ffffff;
    overflow: hidden;
    height: 280px;
    position: relative;
    border-radius: 30px 30px 0 0;
    margin: 0; 
}

.portfolio .portfolio-item figure img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 8px;
}

.portfolio .portfolio-item figure:hover img {
    opacity: 0.3;
    transition: 0.3s;
}

.portfolio .portfolio-item figure .link-preview,
.portfolio .portfolio-item figure .link-details {
    position: absolute;
    display: inline-block;
    opacity: 0;
    line-height: 1;
    text-align: center;
    width: 45px;
    height: 35px;
    border-radius: 6px;
    background: linear-gradient(#4F84C4, #00539C);
    transition: 0.5s;
}

.portfolio .portfolio-item figure .link-preview i,
.portfolio .portfolio-item figure .link-details i {
    color: #ffffff;
    padding-top: 9px;
    font-size: 16px;
}

.portfolio .portfolio-item figure .link-preview:hover,
.portfolio .portfolio-item figure .link-details:hover {
    background: linear-gradient(#00539C, #4F84C4);
}

.portfolio .portfolio-item figure .link-preview:hover i,
.portfolio .portfolio-item figure .link-details:hover i {
    color: #ffffff;
}

.portfolio .portfolio-item figure .link-preview {
    top: 50%;
    left: calc(50% - 61px);
}

.portfolio .portfolio-item figure .link-details {
    top: 50%;
    right: calc(50% - 61px);
}

.portfolio .portfolio-item figure:hover .link-preview {
    opacity: 1;
    top: calc(50% - 50px);
}

.portfolio .portfolio-item figure:hover .link-details {
    opacity: 1;
    top: calc(50% - 50px);
}

.portfolio .portfolio-item figure .portfolio-title {
    position: absolute;
    margin: 0;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    background: rgba(79, 132, 196, .8);
    border-radius: 0;
}

.portfolio .portfolio-item figure .portfolio-title:hover {
    text-decoration: none;
}


/*******************************/
/********* Contact CSS *********/
/*******************************/
.contact {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.contact h2.section-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 45px;
    padding-bottom: 15px;
}

.contact h2.section-title::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 3px;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, #4F84C4, #00539C, #4F84C4);
    border-radius: 0 100% 100% 0;
}

.contact .contact-info {
    position: relative;
    width: 100%;
    margin-bottom: 45px;
}

.contact .contact-info iframe {
    width: 100%;
    height: 300px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.contact .contact-info h3 {
    color: #3f4b5a;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.contact .contact-info h3 span {
    font-weight: 400;
    padding-left: 5px;
}

.contact .contact-info p {
    color: #3f4b5a;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
}

.contact .editor-info {
    position: relative;
    width: 100%;
    margin-bottom: 45px;
}

@media (min-width: 992px) {
    .contact .editor-info {
        padding-left: 30px;
    }
}

.contact .editor-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #dddddd;
}

.contact .editor-item:last-child {
    margin: 0;
    padding: 0;
    border: none;
}

.contact .editor-img {
    width: 120px;
    height: 120px;
    margin-right: 20px;
}

.contact .editor-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.contact .editor-text {
    width: auto;
}

.contact .editor-text h3 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.contact .editor-text a {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}


/*******************************/
/******* Single Page CSS *******/
/*******************************/
.single {
    position: relative;
    width: 100%;
    padding: 45px 0 65px 0;
}

.single h2.section-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 45px;
    padding-bottom: 15px;
}

.single h2.section-title::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 3px;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, #4F84C4, #00539C, #4F84C4);
    border-radius: 0 100% 100% 0; 
}

.single h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
}

.single p {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 25px;
}

.single .table,
.single .list-group {
    margin-bottom: 30px;
}


/*******************************/
/********* Footer CSS **********/
/*******************************/
.footer {
    position: relative;
    padding-top: 90px;
    background: #2c3035;
}

.footer .footer-about,
.footer .footer-link {
    position: relative;
    margin-bottom: 45px;
}

@media(min-width: 992px) {
    .footer .container:first-child {
        max-width: 960px;
        margin-bottom: 30px;
    }
    
    .footer .footer-about,
    .footer .footer-link {
        padding: 0 30px;
    }
}

.footer .footer-about h2,
.footer .footer-link h2 {
    position: relative;
    margin-bottom: 45px;
    padding-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999999;
}

.footer .footer-about h2::after,
.footer .footer-link h2::after{
    position: absolute;
    content: "";
    width: 60px;
    height: 3px;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, #999999, #ffffff, #999999);
    border-radius: 0 100% 100% 0; 
}

.footer .footer-about p {
    margin-bottom: 8px;
    font-size: 14px;
    color: #999999;
}

.footer .footer-about p i {
    width: 20px;
}

.footer .footer-link a {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: #999999;
    
}

.footer .footer-link a::before {
    position: relative;
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .footer-link a:hover {
    color: #ffffff;
}

.footer .copyright {
    padding: 15px;
    border-top: 1px solid #3b3e43;
}

.footer .copyright p {
    margin: 0;
    font-size: 14px;
    color: #999999;
}

.footer .copyright .col-md-6:last-child p {
    text-align: right;
}

.footer .copyright p a {
    color: #999999;
}

.footer .copyright p a:hover {
    color: #ffffff;
}

@media (max-width: 768px) {
    .footer .copyright p,
    .footer .copyright .col-md-6:last-child p {
        margin: 5px 0;
        text-align: center;
    }
}

/* ЗВАНИЕ */
.customer {
    display: inline-block; /* или inline */
    background-color: rgb(64, 149, 253);
    color: rgb(219, 242, 249);
    font-weight: bolder;
    text-shadow: 1px 1px 2px rgb(0, 0, 0);
    padding: 2px 6px;
    border-radius: 2px;
    box-shadow: 1px 2px 2px rgb(0, 0, 0);
}
.sponsor {
    display: inline-block; /* или inline */
    background-color: rgb(173, 0, 0);
    color: rgb(248, 220, 220);
    font-weight: bolder;
    text-shadow: 1px 1px 2px rgb(0, 0, 0);
    padding: 2px 6px;
    border-radius: 2px;
    box-shadow: 1px 2px 2px rgb(0, 0, 0);
}
.tester {
    display: inline-block; /* или inline */
    background-color: rgb(174, 43, 197);
    color: rgb(250, 204, 240);
    font-weight: bolder;
    text-shadow: 1px 1px 2px rgb(0, 0, 0);
    padding: 2px 6px;
    border-radius: 2px;
    box-shadow: 1px 2px 2px rgb(0, 0, 0);
}

/* LOGIN */
#login {
    background-color: #000;
    color: #fff;
    box-shadow: 6px -6px 7px -4px rgb(254, 220, 1), -6px 6px 7px -4px rgb(3, 213, 255);
}
#login-body {
    background-color: #27263a;
}
@media (max-width: 600px){

#login{
    font-size:20px;
}

#login input{
    font-size:20px;
    padding:12px;
}

#login button{
    font-size:20px;
    padding:12px;
}

}

/* ================================= */
/* TARIFS BADGES */
/* ================================= */

.tariff-badge{
position:absolute;
top:12px;
right:12px;
padding:6px 12px;
font-size:13px;
font-weight:600;
border-radius:14px;
backdrop-filter:blur(6px);
}

/* SUPREME — финальная люкс версия */

.tariff-supreme{
position:absolute;
overflow:hidden;

background:
linear-gradient(135deg,#fff6b0 0%,#ffd700 25%,#ffb300 50%,#ff8c00 75%,#ffd700 100%);

color:#000;

font-weight:800 !important;
font-size:13px;
letter-spacing:.3px;

border-radius:6px;

box-shadow:
0 0 6px rgba(255,215,0,.6),
0 0 18px rgba(255,200,0,.8),
inset 0 1px 2px rgba(255,255,255,.7),
inset 0 -2px 4px rgba(0,0,0,.15);

transition:all .4s ease;

animation:supremeGlow 3.5s ease-in-out infinite;
}


/* ✨ золотая пыль */

.tariff-supreme::before{
content:"";
position:absolute;
inset:0;

background-image:
radial-gradient(circle,rgba(255,255,255,.95) 1px,transparent 1px),
radial-gradient(circle,rgba(255,255,255,.75) 1px,transparent 1px),
radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1px);

background-size:
30px 30px,
50px 50px,
70px 70px;

background-position:
0 0,
20px 10px,
10px 30px;

opacity:.45;

animation:supremeParticles 8s linear infinite;

pointer-events:none;
}


/* ✨ стеклянный блик */

.tariff-supreme::after{
content:"";
position:absolute;

top:0;
left:-150%;

width:70%;
height:100%;

background:linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,.8) 45%,
rgba(255,255,255,.95) 50%,
rgba(255,255,255,.8) 55%,
transparent 100%
);

transform:skewX(-25deg);

animation:supremeShine 6s infinite;
}


/* ✨ микро искры */

.tariff-supreme span::after{
content:"";
position:absolute;

width:4px;
height:4px;

background:white;
border-radius:50%;

top:20%;
left:70%;

box-shadow:
0 0 4px white,
0 0 8px white,
0 0 14px rgba(255,255,255,.8);

animation:supremeSpark 3s infinite ease-in-out;
}


/* hover эффект люкса */

.tariff-supreme:hover{

background:
linear-gradient(135deg,#fff9c4,#ffe066,#ffc107,#ff9800,#ffd700);

box-shadow:
0 0 12px rgba(255,215,0,.9),
0 0 30px rgba(255,200,0,1),
inset 0 1px 3px rgba(255,255,255,.9),
inset 0 -3px 5px rgba(0,0,0,.25);

transform:translateY(-1px);
}


/* движение блика */

@keyframes supremeShine{

0%{ left:-150%; }

60%{ left:160%; }

100%{ left:160%; }

}


/* движение частиц */

@keyframes supremeParticles{

0%{
background-position:
0 0,
20px 10px,
10px 30px;
}

100%{
background-position:
140px 70px,
90px 60px,
80px 110px;
}

}


/* искра */

@keyframes supremeSpark{

0%{
opacity:0;
transform:scale(.5);
}

50%{
opacity:1;
transform:scale(1.2);
}

100%{
opacity:0;
transform:scale(.5);
}

}


/* дыхание свечения */

@keyframes supremeGlow{

0%{
box-shadow:
0 0 6px rgba(255,215,0,.6),
0 0 16px rgba(255,200,0,.8),
inset 0 1px 2px rgba(255,255,255,.7),
inset 0 -2px 4px rgba(0,0,0,.15);
}

50%{
box-shadow:
0 0 10px rgba(255,215,0,.9),
0 0 26px rgba(255,200,0,1),
inset 0 1px 3px rgba(255,255,255,.9),
inset 0 -2px 4px rgba(0,0,0,.2);
}

100%{
box-shadow:
0 0 6px rgba(255,215,0,.6),
0 0 16px rgba(255,200,0,.8),
inset 0 1px 2px rgba(255,255,255,.7),
inset 0 -2px 4px rgba(0,0,0,.15);
}

}

/* Essential */

.tariff-essential{
background:linear-gradient(45deg,#005a5b,#017cb0);
color:#7edbff;
box-shadow:0 0 10px rgb(98, 200, 255);
font-weight: bolder !important;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

/* No license */

.tariff-none{
background:#2a2f3a;
color:#ff6969;
box-shadow:0 0 6px rgb(254, 75, 75);
font-weight: bolder !important;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

/* ============================= */
/* GREETING EDITOR */
/* ============================= */

.editor-card{
background:white;
border-radius:20px;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
max-width:1100px;
margin:auto;
}

body.dark .editor-card{
background:#11151d;
color:white;
}

.editor-title{
margin-bottom:20px;
font-weight:700;
}

#editor{
height:260px;
background:white;
border-radius:10px;
}

body.dark #editor{
background:#0f1115;
color:white;
}

.editor-buttons{
margin-top:15px;
display:flex;
gap:10px;
flex-wrap:wrap;
}

.btn-save{
background:#28a745;
color:white;
border:none;
padding:10px 18px;
border-radius:10px;
cursor:pointer;
}

.btn-preview{
background:#007bff;
color:white;
border:none;
padding:10px 18px;
border-radius:10px;
cursor:pointer;
}

.btn-emoji{
background:#ffc107;
border:none;
padding:10px 18px;
border-radius:10px;
cursor:pointer;
}

.preview-box{
display:none;
margin-top:20px;
padding:15px;
background:#f3f3f3;
border-radius:10px;
}

body.dark .preview-box{
background:#151922;
}

/* ============================= */
/* TOAST */
/* ============================= */

#toastBox{
position:fixed;
bottom:30px;
right:30px;
z-index:9999;
}

.toast-msg{
background:#28a745;
color:white;
padding:12px 18px;
border-radius:10px;
margin-top:10px;
box-shadow:0 10px 20px rgba(0,0,0,.25);
animation:toastIn .3s;
}

@keyframes toastIn{

from{
opacity:0;
transform:translateY(10px);
}

to{
opacity:1;
}

}

/* ============================= */
/* PRO SAVE BUTTON */
/* ============================= */

.btn-save-pro{

position:relative;

background:linear-gradient(135deg,#4f7cff,#00d4ff);

color:white;

border:none;

padding:12px 26px;

font-size:15px;

font-weight:700;

border-radius:14px;

cursor:pointer;

display:flex;

align-items:center;

gap:8px;

box-shadow:
0 8px 20px rgba(0,120,255,.35),
inset 0 -3px 0 rgba(0,0,0,.25);

transition:all .18s ease;

}

/* glow */
.btn-save-pro::before{

content:"";

position:absolute;

inset:0;

border-radius:14px;

background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);

opacity:0;

transition:.3s;

}

/* hover */
.btn-save-pro:hover{

transform:translateY(-2px);

box-shadow:
0 14px 35px rgba(0,120,255,.45),
inset 0 -3px 0 rgba(0,0,0,.25);

}

.btn-save-pro:hover::before{

opacity:1;

}

/* click effect */
.btn-save-pro:active{

transform:translateY(2px);

box-shadow:
0 4px 10px rgba(0,0,0,.25),
inset 0 3px 6px rgba(0,0,0,.4);

}

/* disabled */

.btn-save-pro[disabled]{

opacity:.55;

cursor:not-allowed;

box-shadow:none;

}

/* dark mode */

body.dark .btn-save-pro{

background:linear-gradient(135deg,#2b6cff,#00c3ff);

box-shadow:
0 10px 25px rgba(0,140,255,.35),
inset 0 -3px 0 rgba(0,0,0,.5);

}

/* ============================= */
/* MOBILE NAVBAR BUTTON STYLE */
/* ============================= */

@media (max-width: 991px){

.navbar-nav{
margin-top:15px;
}

.navbar-nav .nav-link{

display:block;

padding:12px 16px;

margin-bottom:18px;

border-radius:10px;

font-weight:800;

background:#020118;

color:#feae6d !important;

text-align:center;

box-shadow: 6px -6px 7px -3px rgb(0, 255, 191), -6px 6px 7px -3px rgb(251, 255, 1);

transition:.2s;

}

.navbar-nav .nav-link:hover{

background:#fbf4c6;

transform:translateY(-2px);

}

/* Logout кнопка */

.navbar-nav .nav-link.text-warning{

border-radius:10px;

font-weight:800;

background:#020118;

color:#e3ff7e !important;

text-align:center;

box-shadow: 6px -6px 7px -3px rgb(0, 255, 191), -6px 6px 7px -3px rgb(251, 255, 1);

}

}

/* ============================= */
/* MOBILE NAVBAR LAYOUT */
/* ============================= */

@media (max-width: 991px){

.navbar-collapse .d-flex{

flex-direction:column;

align-items:flex-start !important;

gap:10px;

margin-top:15px;

}

.theme-toggle{

margin-left:0 !important;

}

.search-bar{

width:100%;

}

}

/* SAVE BUTTON */
#saveBtn{
    display:inline-flex; align-items:center; gap:8px;
    background:rgb(0, 255, 8); border:1px solid rgba(16, 24, 40, 0.13);
    padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700;
    box-shadow: 5px 3px 6px 0px rgba(0, 1, 8, 0.73), 7px -4px 9px -3px rgba(2, 20, 50, 0.91);
    transition:transform .12s ease, box-shadow .12s;
    color: rgba(4, 6, 60, 0.87);
}
#saveBtn:hover{
    transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,6,23,0.08); 
}
body.dark #saveBtn{
    background:#1eff00; border:1px solid rgba(255,255,255,0.03); color:#e6e6e6; box-shadow:none; 
    box-shadow: -2px 4px 8px -2px rgb(0, 255, 17), 2px -4px 8px -2px rgb(0, 255, 140);
    color: rgb(0, 0, 0);
}

/* STATUS */
.status{
    display: block;
    background-color: #01000d;
    text-align: center;
    font-weight: 1100;
    font-size:larger;
}

/* ChatID copy */

.copy-chatid{
cursor:pointer;
user-select:none;
position:relative;
transition:.2s;
}

.copy-chatid:hover{
background:#eaf3ff;
}

body.dark .copy-chatid:hover{
background:#1c2430;
}

/* popup */

#copyPopup{

position:fixed;

background:#1f2937;
color:#fff;

padding:6px 12px;

border-radius:8px;

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

opacity:0;

transform:translateY(8px);

pointer-events:none;

transition:all .25s ease;

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

z-index:9999;

}

#copyPopup.show{

opacity:1;

transform:translateY(0);

}

/* LANG FLAG */
.flag{
    width:38px;
    height:30px;
    margin-right:8px;
    vertical-align:middle;
    border-radius:3px;
}
/* LANG SELECT */
.lang { display: none; }
.lang-toggle {
    display: flex;
    align-items: center;
    padding-block: 10px;
}

.toggle-track {
    position: relative;
    width: 70px;
    height: 32px;
    background: #01072a;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-shadow: 0px 0px 2px 1px lab(88.6% -78.08 76.84), 0px 0px 3px 1px lab(40.28% 23.08 -64.46);
}

.toggle-track img {
    width: 18px;
    z-index: 2;
}

.toggle-thumb {
    position: absolute;
    width: 26px;
    height: 26px;
    background: rgba(239, 244, 223, 0);
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: 0.3s ease;
    box-shadow: 0px 0px 2px 2px rgb(0, 255, 17), 0px 0px 3px 2px lab(76.42% -32.72 -25.28);
}

/* положение вправо */
.toggle-track.active .toggle-thumb {
    left: 41px;
}

/* dark theme */
body.dark .toggle-track {
    background: #01072a;
}

/* --- CHAT CARDS BASE --- */
.chat-card {
    background: #8288a022;
    border-radius: 18px;
    padding: 20px;
    /* Твоя тень */
    box-shadow: 2px 3px 4px 3px rgba(3, 10, 59, 0.453); 
    text-align: center;
    margin-bottom: 25px;
    transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border: 1px solid transparent;
    overflow: hidden; /* Чтобы ничего не вылетало за границы */
}

.chat-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 3px 3px rgba(226, 0, 0, 0.75);
}

/* --- DARK MODE --- */
body.dark .chat-card {
    background: rgba(6, 1, 19, 1);
    /* Твое неоновое свечение */
    box-shadow: 2px 2px 12px rgba(66, 244, 179, 0.5); 
    border: 1px solid rgba(96, 247, 206, 0.2);
    color: #e6e6e6;
}

body.dark .chat-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 3px 3px rgb(0, 255, 153);
}

.modules-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); 
    gap:28px;
    margin-top: 30px;
    width: 100%;
}

.module-card:not(.live-monitor-card) {
    aspect-ratio: 3 / 2;
}
/* 🔥 Главный монитор — фулл ширина */
.live-monitor-card {
    grid-column: 1 / -1;
}


/* 📦 Остальные карточки — 3 в ряд */
.module-card {
    min-width: 0;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 
        0 10px 25px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
    transition: all 0.25s ease;
    position: relative;
    background:white; border-radius:22px; padding:35px; box-shadow:0px 0px 8px 1px rgba(0, 0, 0, 0.64); 
    cursor:pointer; transition:.25s; min-height:190px; display:flex; flex-direction:column; justify-content:center; 
}

.module-card:hover:not(.live-monitor-card) {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 
        0 15px 35px rgba(0,0,0,0.12),
        0 0 12px rgba(0,255,150,0.2);
}

/* DARK */
body.dark .module-card {
    background: linear-gradient(145deg, #0f141c, #0b0f15);
    border: 1px solid rgba(0,255,150,0.15);
    box-shadow: 
        0 0 20px rgba(0,255,150,0.08),
        inset 0 0 10px rgba(0,255,150,0.05);
}

/* КАРТОЧКИ НА РАЗНЫХ УСТРОЙСТВАХ */

@media (max-width: 480px) {
    .modules-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .module-card,
    .core-card {
        grid-column: 1 / -1;
    }

    .live-monitor-card {
        grid-column: 1 / -1;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .modules-grid {
        grid-template-columns: repeat(2, 1fr); /* 1 2 / 3 4 */
        gap: 14px;
    }

    .module-card {
        grid-column: auto;
    }

    .live-monitor-card {
        grid-column: 1 / -1;
    }
}

/* 📱 iPad / большие планшеты (вертикально) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    body {
        font-size: 18px;
    }

    .module-title {
        font-size: 26px;
    }

    .stat-box span {
        font-size: 18px;
    }

    .stat-box b {
        font-size: 20px;
    }

    .monitor-btn {
        font-size: 18px;
        padding: 14px;
    }

    .radar {
        width: 260px;
        height: 260px;
    }
}

@media (max-width: 1024px) {
    .modules-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* Состояние неактивной карточки */
.module-card.disabled {
    opacity: 0.6;              /* Делаем полупрозрачной */
    filter: grayscale(1);      /* Делаем серой (черно-белой) */
    cursor: not-allowed;       /* Меняем курсор на "запрещено" */
    pointer-events: none;      /* Самое важное: клики не будут срабатывать */
    box-shadow: none !important; /* Убираем тень, чтобы не выделялась */
    transform: none !important;  /* Отключаем анимацию поднятия при ховере */
}

/* --- ВЕРХНИЕ ЭЛЕМЕНТЫ (ID и Робот) --- */
.card-id-badge {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    opacity: 0.7;
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 4px;
}
body.dark .card-id-badge {
    background: rgba(255,255,255,0.1);
    color: #00fd4c;
}

.bot-indicator {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    transition: 0.3s;
}

/* Статусы робота */
.bot-online { 
    color: #00fd4c; 
    filter: drop-shadow(0 0 5px #00fd4c); 
    animation: pulse-neon 2s infinite;
}
.bot-offline { 
    filter: grayscale(1) opacity(0.4); 
    color: #ff3e3e;
}

@keyframes pulse-neon {
    0% { opacity: 0.8; }
    50% { opacity: 1; filter: drop-shadow(0 0 10px #00fd4c); }
    100% { opacity: 0.8; }
}

/* --- КОНТЕНТ КАРТОЧКИ --- */
.chat-avatar {
    content-visibility: auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 15px 0 10px 0;
    border: 3px solid #eaeaea;
    object-fit: cover;
}
body.dark .chat-avatar { 
    content-visibility: auto;
    border-color: rgba(96, 247, 206, 0.3); 
}

.chat-title-modern {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 10px 0 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Текстовый статус под названием */
.status-text-msg {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.text-online { color: #28a745; }
.text-offline { color: #ff3e3e; }

/* Кнопка */
.chat-btn {
    background: #28a745;
    color: white !important;
    border-radius: 25px;
    padding: 8px 20px;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: 0.2s;
}

.open-chat {
    box-shadow: 1px 1px 2px 1px black;
}

.chat-btn:hover {
    background: #218838;
    transform: scale(1.05);
}

/* ВЕРХНЕЕ МЕНЮ ВСЕГДА ЗАКРЕПЛЕНО */
/* Прижимаем шапку к верху */
.header {
    position: fixed;   /* Фиксируем на экране */
    top: 0;
    left: 0;
    width: 100%;       /* Растягиваем на всю ширину */
    height: 13%;
    z-index: 1000;     /* Чтобы меню было поверх всего контента */
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* Компенсируем отступ, чтобы контент не заезжал ПОД меню */
body {
    padding-top: 120px; /* Настрой это число под высоту своего меню (обычно 70-90px) */
    margin-top: 50px;
}

/* Если в темной теме нужен другой фон для прилипшего меню */
body.dark .header {
    background: #151922; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- КИБЕР-ДИЗАЙН: LIVE HEARTBEAT EDITION (FULL CODE) --- */
.live-monitor-card {
    background: #0d1117 !important;
    border: 1px solid #00f2ff55;
    color: #00d9ff !important;
    position: relative;
    overflow: hidden;
    justify-content: flex-start !important;
    padding: 18px 20px;
    min-height: auto;
}

/* Адаптивность для iPhone SE */
@media (max-width: 768px) {
    .live-monitor-card { grid-column: span 1; }
    .tech-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- ШРИФТЫ: Исключаем "прыжки" текста --- */
.threat-info { font-family: Verdana, sans-serif; }
.threat-user { font-weight: 700; color: #fff; }
.threat-meta { 
    font-family: 'Courier New', Courier, monospace; 
    font-size: 13px; 
    color: #8899a6; 
    margin-top: 2px;
}
.threat-meta span { margin-right: 12px; }

/* Копирование */
.copyable { cursor: pointer; transition: 0.2s; }
.copyable:hover { color: #fff; text-shadow: 0 0 5px #00f2ff; }
.copy-success { color: #5eff00 !important; }

.tech-label {
    margin-top: 40px;
}

/* --- АНИМАЦИЯ: Живые столбики (Рандомный пульс) --- */
.activity-visualizer { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    height: 40px; 
    margin-top: 15px; 
}

.bar {
    width: 4px;
    background: #28a745;
    margin: 0 2px;
    transition: height 0.5s ease-in-out;
    animation: pulseBar 2s infinite alternate;
}

@keyframes pulseBar {
    from { opacity: 1; }
    to { opacity: 0.5; transform: scaleY(0.9); }
}

/* Разные высоты и задержки для хаоса */
.bar:nth-child(1) { animation-delay: 0.1s; height: 14px; animation-duration: 0.8s; }
.bar:nth-child(2) { animation-delay: 0.4s; height: 30px; animation-duration: 1.1s; }
.bar:nth-child(3) { animation-delay: 0.2s; height: 6px; animation-duration: 0.9s; }
.bar:nth-child(4) { animation-delay: 0.6s; height: 53px; animation-duration: 1.3s; }
.bar:nth-child(5) { animation-delay: 0.3s; height: 26px; animation-duration: 0.7s; }
.bar:nth-child(6) { animation-delay: 0.4s; height: 19px; animation-duration: 0.6s; }
.bar:nth-child(7) { animation-delay: 0.5s; height: 4px; animation-duration: 1.3s; }
.bar:nth-child(8) { animation-delay: 0.6s; height: 36px; animation-duration: 0.4s; }
.bar:nth-child(9) { animation-delay: 0.9s; height: 22px; animation-duration: 1.9s; }
.bar:nth-child(10) { animation-delay: 0.1s; height: 51px; animation-duration: 1.5s; }


@keyframes live-heartbeat { 
    0% { transform: scaleY(0.5); opacity: 0.3; } 
    50% { transform: scaleY(1.3); opacity: 1; }
    100% { transform: scaleY(0.8); opacity: 0.6; } 
}

/* --- ОСТАЛЬНЫЕ СТИЛИ (Твоя база) --- */
.mini-label { color: #8899a6; font-size: 12px; margin-bottom: 5px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
.toggle-name { 
    color: #d80000 !important; 
    font-size: 11px;
    padding-block: 4px;
    text-shadow: 
        1px 1px 2px rgb(2, 0, 7),
        0 0 1em rgb(1, 0, 16),
        0 0 0.2em rgb(0, 0, 0);
}
.status-badge { padding: 1px 6px; border-radius: 4px; font-size: 8px; font-weight: bold; margin-right: 5px; }
.status-on { background: #28a745; color: white; box-shadow: 0 0 8px #28a745; }
.status-off { background: #dc3545; color: white; box-shadow: 0 0 8px #dc3545; }
.tech-header { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-family: monospace; color: #57fce1; }
.status-dot-pulse { width: 8px; height: 8px; background: #5eff00; border-radius: 50%; box-shadow: 0 0 8px #04ff00; animation: pulse-tech 1.5s infinite; }
@keyframes pulse-tech { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.tag-neon { 
    font-size: 10px; 
    padding: 2px 6px; 
    border: 1px solid #00f2ff; 
    color: #00f2ff; 
    margin-right: 5px; 
    border-radius: 4px;
} 

.tag-neon:hover { 
    font-size: 11px; 
    padding: 2px 6px; 
    border: 1px solid #11ff00; 
    color: #00f2ff; 
    margin-right: 5px; 
    border-radius: 4px;
} 
    
.tag-neon.pulse { animation: pulse-red 1s infinite; border-color: #ff0055; color: #ff0055; }
.threat-log {
    display: flex; 
    align-items: flex-start; 
    background: rgba(131, 2, 15, 0.091); 
    border-left: 3px solid #f90404ff; 
    padding: 10px; 
    margin-bottom: 8px; 
    border-radius: 8px;
}
.threat-avatar { font-size: 20px; margin-right: 10px; }
.tech-footer { display: flex; gap: 20px; margin-top: auto; padding-top: 15px; border-top: 1px dashed rgba(0,242,255,0.2); }
.fast-toggle { 
    display: flex; 
    align-items: center; 
    font-weight: bold; 
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.switch-small { position: relative; width: 34px; height: 18px; margin: 0; }
.switch-small.disabled {
    opacity: 0.6;              /* Делаем полупрозрачной */
    filter: grayscale(1);      /* Делаем серой (черно-белой) */
    cursor: not-allowed;       /* Меняем курсор на "запрещено" */
    pointer-events: none;      /* Самое важное: клики не будут срабатывать */
    box-shadow: none !important; /* Убираем тень, чтобы не выделялась */
    transform: none !important;  /* Отключаем анимацию поднятия при ховере */
}
.switch-small input { opacity: 0; width: 0; height: 0; }
.slider-small { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 20px; }
.slider-small:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider-small { background-color: #00f2ff; }
input:checked + .slider-small:before { transform: translateX(16px); }
.danger input:checked + .slider-small { background-color: #ff0055; box-shadow: 0 0 10px #ff0055; }

.tech-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

/* важное: разрешаем сжиматься */
.tech-stats-grid > * {
    min-width: 0;
}

.stat-box {
    background: rgba(0,255,150,0.05);
    border: 1px solid rgba(0,255,150,0.2);
    border-radius: 10px;
    padding: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

.stat-box span {
    display: block;
    font-size: 16px;
    color: #eaff04a3;
    word-break: break-word;
}

.stat-box b {
    font-size: 16px;
    color: #04abff;
    word-break: break-word;
}

.online {
    color: #00ff88;
    text-shadow: 0 0 8px #00ff88;
}

/* ТОЧКА */
.ecg-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
}

/* RADAR */
.radar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 2px;
}

.radar {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, #001a1f 40%, #000 100%);
    border: 1px solid #00f2ff33;
    position: relative;
    overflow: hidden;
    animation: radarPulse 4s infinite ease-in-out;
}

/* круги */
.radar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        repeating-radial-gradient(
            circle,
            rgba(0,255,255,0.1) 0px,
            rgba(0,255,255,0.1) 2px,
            transparent 2px,
            transparent 40px
        );
}

/* луч */
.radar-sweep {
    position: absolute;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        rgba(0,255,150,0.0) 0deg,
        rgba(0,255,150,0.4) 20deg,
        rgba(0,255,150,0.0) 60deg
    );
    animation: sweep 3s linear infinite;
}

@keyframes sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* точки атак */
.radar-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ff0033;
    border-radius: 50%;
    box-shadow: 0 0 6px #ff0033;
    opacity: 0.3;
    transform: scale(0.7);
    transition: all 0.3s ease;
}

@keyframes blink {
    0%,100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.radar::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 60%, rgba(0,255,150,0.08));
    pointer-events: none;
}

@keyframes radarPulse {
    0%,100% { box-shadow: 0 0 20px rgba(0,255,150,0.1); }
    50% { box-shadow: 0 0 40px rgba(0,255,150,0.3); }
}

/* SCROLLING */
.threat-list {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #00f2ff transparent;
    max-height: 180px; 
    overflow-y: auto; 
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px -1px yellow;
}

/* Chrome / Edge */
.threat-list::-webkit-scrollbar {
    width: 6px;
}

.threat-list::-webkit-scrollbar-track {
    background: transparent;
}

.threat-list::-webkit-scrollbar-thumb {
    background: #00f2ff;
    border-radius: 10px;
}

/* hover эффект */
.threat-list::-webkit-scrollbar-thumb:hover {
    background: #00ffaa;
}

/* BOTONES DE CONFIGURACION */
.monitor-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}


.monitor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background: linear-gradient(145deg, rgba(0,255,150,0.08), rgba(0,0,0,0.3));
    border: 1px solid rgba(0,255,150,0.25);
    color: #00f2ff;

    font-size: 16px;
    padding: 10px 8px;
    border-radius: 12px;

    cursor: pointer;
    transition: 0.25s;

    box-shadow: 0 0 10px rgba(0,255,150,0.1);
}

.monitor-btn.disabled {
    opacity: 0.6;              /* Делаем полупрозрачной */
    filter: grayscale(1);      /* Делаем серой (черно-белой) */
    cursor: not-allowed;       /* Меняем курсор на "запрещено" */
    pointer-events: none;      /* Самое важное: клики не будут срабатывать */
    box-shadow: none !important; /* Убираем тень, чтобы не выделялась */
    transform: none !important;  /* Отключаем анимацию поднятия при ховере */
}

.monitor-btn i {
    font-size: 18px;
}

.monitor-btn:hover {
    background: rgba(0,255,150,0.2);
    box-shadow: 0 0 18px rgba(0,255,150,0.5);
    transform: translateY(-2px);
}

/* 📱 адаптив */
@media (max-width: 768px) {
    .monitor-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* SISTEMA DE REGALOS */
.gift {
  position: relative;
  display: inline-block;

  width: 60px;
  height: 60px;

  border-radius: 50%;
  overflow: hidden;

  /* более глубокая “премиум тень” */
  filter: drop-shadow(0 10px 25px rgba(255,255,255,0.12));

  transition: transform .4s ease;

  /* 🌟 внешнее мягкое свечение вокруг стикера */
    box-shadow:
    0 0 20px 6px rgba(255, 230, 0, 0.18),
    0 0 45px 14px rgba(255, 230, 0, 0.10),
    0 0 80px 25px rgba(255, 230, 0, 0.06);
}

.gift:hover {
  position: relative;
  display: inline-block;

  width: 300px;
  height: 300px;

  border-radius: 50%;
  overflow: hidden;

  /* более глубокая “премиум тень” */
  filter: drop-shadow(0 10px 25px rgba(255,255,255,0.12));

  transition: transform .4s ease;

  /* 🌟 внешнее мягкое свечение вокруг стикера */
    box-shadow:
    0 0 20px 6px rgba(255, 230, 0, 0.18),
    0 0 45px 14px rgba(255, 230, 0, 0.10),
    0 0 80px 25px rgba(255, 230, 0, 0.06);
}

/* сама гифка */
.gift-img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: contrast(1.18) saturate(1.15) brightness(1.05);
}

/* ✨ ГЛАВНЫЙ ПЛАВАЮЩИЙ СТЕКЛЯННЫЙ БЛИК */
.shine-sweep {
  position: absolute;
  top: 0;
  left: -260%;
  width: 260%;
  height: 100%;
  z-index: 2;

  background: linear-gradient(
    120deg,
    transparent 18%,
    rgba(255,255,255,0.03) 30%,
    rgba(255,255,255,0.18) 42%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.18) 58%,
    rgba(255,255,255,0.03) 70%,
    transparent 82%
  );

  animation: premiumShine 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes premiumShine {
  0%   { transform: translateX(-110%); }
  55%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

/* 💎 МИКРО СТЕКЛЯННЫЕ БЛИКИ */
.gift::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;

  background:
    radial-gradient(2px 2px at 22% 28%, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 72% 38%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 48% 72%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 60% 20%, rgba(255,255,255,0.35), transparent);

  opacity: 0.7;
  mix-blend-mode: screen;

  animation: tinySpark 4s ease-in-out infinite alternate;
}

@keyframes tinySpark {
  0%   { opacity: 0.35; transform: scale(0.985); }
  100% { opacity: 0.85; transform: scale(1.015); }
}

/* 🧊 СТЕКЛЯННАЯ РАМА + ГЛУБИНА */
.gift::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 4;

  border: 3px solid rgb(255, 217, 0);

  box-shadow:
    inset 0 0 5px 2px rgb(0, 0, 0),
    inset 0 0 3px 2px rgb(0, 0, 0),
    0 10px 22px rgb(255, 230, 0),
    0 0 0 1px rgb(234, 255, 0);
}

/* EXTRA */
.gift.normal {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.41);
}

.gift.vip {
  box-shadow:
    0 0 20px rgba(1, 95, 113, 0.389),
    0 8px 25px rgba(0, 0, 0, 0.452);
  border: 2px solid rgba(3, 81, 115, 0.468);
}

.gift.ultra {
  box-shadow:
    0 0 25px rgba(255, 136, 0, 0.461),
    0 0 60px rgba(255, 204, 0, 0.343),
    0 10px 30px rgba(0, 0, 0, 0.506);
  border: 2px solid rgba(255, 204, 0, 0.684);
}

/* GRAFICA ALESTILO BINANCE */
/* Полностью замени свой старый кусок кода этим вариантом */
.stat-box { position: relative; } /* Чтобы тултип не улетал за границы карточки */

/* Наша живая неоновая точка на графике */
.wave-point {
    fill: #00ff88;
    stroke: #0f1115;
    stroke-width: 1.5;
    cursor: pointer;
    transition: r 0.2s, fill 0.2s, stroke 0.2s, filter 0.2s;
}

.wave-point:hover {
    r: 5;
    fill: #fff;
    stroke: #00ff88;
    filter: drop-shadow(0 0 6px #00ff88); /* Красивое неоновое свечение при наведении */
}

/* Инфо-панель между Активностью и Статусом */
.monitor-info-bar {
    min-height: 40px; /* Минимальная высота, когда просто "Готово" */
    height: auto;     /* Позволяет расти вниз */
    white-space: pre-line;
    grid-column: span 2; /* Растягиваем на всю ширину сетки */
    background: #0b0e11; /* Глубокий премиальный темный цвет графиков Binance */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    display: flex;
    align-items: center; /* Выравниваем всё ровненько */
    justify-content: center;
    font-size: 13px;
    color: #848e9c; /* Фирменный мягкий текст */
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    margin: 5px 0;
    padding: 10px 16px; /* Плотные аккуратные отступы, убирающие лишние пустоты */
    overflow: hidden;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.monitor-info-bar.active {
    background: #12161a;
    border-color: rgba(0, 255, 136, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(0, 255, 136, 0.02);
}

.monitor-info-bar .icon {
    margin-right: 8px;
    font-size: 14px;
}

.monitor-info-bar.active span {
    animation: notify-pulse 1.5s infinite;
}

#monitorInfoBar {
    justify-content: center;
}

#infoLoader {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 255, 136, 0.1);
    border-top: 2px solid #00ff88;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden {
    display: none !important;
}

/* SPINNER PARA BOTONES */
.spin {
    display: inline-block;
    animation: spin 0.8s linear infinite;
    margin-right: 6px;
}

/* INFO BAR */
#infoBarText,
#infoBarTextRu {
    white-space: pre-line;
}


/* ==========================================================================
   УЛЬТРА-ПРЕМИУМ КИБЕР-ИНТЕРФЕЙС (Адаптированный под телефоны)
   ========================================================================== */

/* Главный контейнер панели — сам выравнивает элементы сверху вниз и не вылезает за экран */
.monitor-info-bar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
}

/* Главная надпись статуса системы — сияющий квантовый маркер */
#infoBarText, #infoBarTextRu {
    font-size: 20px;
    font-weight: 800;
    color: #00ffaa;
    text-shadow: 0 0 15px rgba(0, 255, 170, 0.6), 0 0 30px rgba(0, 255, 170, 0.2);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace;
}

/* Роскошная обсидиановая панель со сложным неоновым свечением */
.monitor-info-bar.active {
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(135deg, #0b0f17 0%, #111622 100%);
    border: 1px solid rgba(0, 255, 170, 0.35);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 255, 170, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 18px !important;
    position: relative;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Декоративная хакерская полоса сверху панели */
.monitor-info-bar.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00ffaa, #00bfff);
}

/* Верхняя строчка-командер (Иконка и Кнопка всегда строго НАД данными) */
.monitor-header-row {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

/* Пульсация спутника оставлена без изменений */
.monitor-header-row .icon {
    font-size: 22px;
    filter: drop-shadow(0 0 8px #00bfff);
    animation: pulseGlow 2s infinite alternate;
}

/* Потрясающая футуристичная кнопка "Свернуть" */
.close-info-btn {
    background: rgba(255, 46, 92, 0.07);
    border: 1px solid rgba(255, 46, 92, 0.4);
    color: #ff2e5c;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(255, 46, 92, 0.05);
}

.close-info-btn:hover {
    background: #ff2e5c;
    color: #ffffff;
    border-color: #ff2e5c;
    box-shadow: 0 0 15px rgba(255, 46, 92, 0.5);
    transform: translateY(-1px);
}

/* Контейнер для карточек — выстраивает их в один аккуратный столбец */
.premium-data-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Чтобы мини-карточки на телефонах вставали друг под друга, а на ПК были рядышком */
.premium-data-box-top {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Сами плашки данных: фон и рамки ПОЛНОСТЬЮ СТАТИЧНЫ, никакого мерцания! */
.premium-item {
    background: rgba(22, 30, 45, 0.9) !important; 
    border: 1px solid rgba(0, 255, 150, 0.3) !important;
    border-radius: 8px;
    padding: 12px 16px !important;
    color: #a0aec0;
    font-size: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    word-break: break-word !important; 
    /* Анимация borderPulse полностью удалена, чтобы не раздражать глаза */
}

/* Эффект сканирования при наведении мышки на ПК */
.premium-item:hover {
    background: rgba(26, 38, 58, 0.9) !important;
    border-color: rgba(0, 191, 255, 0.5) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Маленькие карточки статистики сверху — теперь дата падает вниз, если не помещается */
.premium-item.stat-mini {
    display: flex !important;
    flex-wrap: wrap !important; /* Даёт дате возможность опуститься ниже и не ломать текст */
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 150px !important; 
}

/* КРУПНЫЙ БЛОК: Досье пользователя */
.premium-item.user-box {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, rgba(18, 26, 40, 0.8) 0%, rgba(13, 19, 30, 0.9) 100%) !important;
    border-left: 3px solid #00bfff !important; 
}

.user-box-header, .msg-box-header {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #718096;
    margin-bottom: 4px;
    text-transform: uppercase;
}

/* Каждая строчка внутри досье пользователя */
.user-data-line {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #e2e8f0;
    flex-wrap: wrap; 
}

.user-data-line .lbl {
    color: #718096;
    width: 110px; 
    font-weight: 500;
}

.cyber-bullet {
    color: #00bfff;
    margin-right: 10px;
    font-size: 10px;
    text-shadow: 0 0 5px #00bfff;
}

/* БЛОК СООБЩЕНИЯ: Строгий, без лишнего декора */
.premium-item.msg-box {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    background: rgba(10, 14, 22, 0.5) !important;
    border-left: 3px solid #00ffaa !important; 
}

/* Текст сообщения: Полный оригинал, никакого капса и курсива! */
.text-msg {
    color: #ffffff;
    line-height: 1.6;
    font-size: 14px;
    font-family: system-ui, -apple-system, sans-serif;
    word-break: break-word !important;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    text-transform: none !important; 
    font-weight: normal !important;   
    white-space: pre-wrap !important; 
}

/* Неоновые индикаторы числовых значений */
.badge-neon {
    background: rgba(0, 255, 170, 0.12);
    color: #00ffaa;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-family: monospace;
    border: 1px solid rgba(0, 255, 170, 0.2);
    box-shadow: 0 0 8px rgba(0, 255, 170, 0.1);
}

.badge-neon-blue {
    background: rgba(0, 191, 255, 0.15);
    color: #00bfff;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-family: monospace;
    border: 1px solid rgba(0, 191, 255, 0.25);
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.1);
}

/* Цвета выделений */
.text-highlight { color: #ffffff; font-weight: 700; font-family: Verdana, Geneva, Tahoma, sans-serif; text-transform: none !important;}
.text-username { color: #00bfff; font-weight: 600; font-family: Verdana, Geneva, Tahoma, sans-serif; text-transform: none !important; }
.text-id { color: #ffb700; font-weight: 600; font-family: monospace; }
.p-icon { font-size: 16px; margin-right: 2px; }

/* Красивая пульсация для иконки спутника */
@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}