@font-face {
    font-family: 'Conthrax Sb';
    src: url('ConthraxSb-Regular.eot');
    src: local('ConthraxSb-Regular'),
        url('fonts/ConthraxSb-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/ConthraxSb-Regular.woff2') format('woff2'),
        url('fonts/ConthraxSb-Regular.woff') format('woff'),
        url('fonts/ConthraxSb-Regular.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
 

.main-navigation .icon{display:inline-block}
	.main-navigation .icon:before{content:"";display:inline-block;background-image:url("/img/mobile/sprite.png")}
	.main-navigation .icon.-menu{padding:20px 14px 15px}
	.main-navigation .icon.-menu:before{width:21px;height:15px;background-position:-215px -34px}
	@media (min--moz-device-pixel-ratio:1.5),(min-resolution:1.5dppx){
		.main-navigation .icon:before{background-image:url("/img/mobile/sprite@2x.png")
		;background-size:280px auto}}
		.main-menu{display:flex;height:54px;background-color:#000;z-index: 999;
    position: fixed;
    width: 100%;}
		.main-menu .icon{height:100%;box-sizing:border-box;}
		.main-menu .icon:before{content:"";display:inline-block;background-image:url("/img/mobile/sprite.png")}
		.main-menu .icon.-main{cursor: pointer;padding:20px 14px}
		.main-menu .icon.-main:before{width:21px;height:15px;background-position:-215px -34px}
        .main-menu .icon.-tg{cursor: pointer;padding:20px 10px}
        .main-menu .icon.-tg:before{width:26px;height:26px;background-position:-181px -134px}
        .main-menu .icon.-vk{cursor: pointer;padding:20px 10px}
        .main-menu .icon.-vk:before{width:30px;height:26px;background-position:-237px -134px}
		.main-menu .icon.-logo{margin-right:auto;padding:11px 0;cursor: pointer;}
		.main-menu .icon.-logo a {position: absolute;
    padding: 20px 77px 35px 50px;
		top: 0;}
		.main-menu .icon.-logo:before{width:110px;height:32px;background-image:url("/img/mobile/logo@2x.png")
		;background-size:110px 32px;}
		.main-menu .icon.-search{padding:16px 10px}
		.main-menu .icon.-search:before{width:23px;height:23px;background-position:-245px -74px}
		.main-menu .icon.-icon{padding:16px 10px}
		.main-menu .icon.-icon:before{width:23px;height:23px;background-position: -211px -132px}
		.main-menu .icon.-telephone{cursor: pointer; padding:16px 10px 14px}
		
		
		.main-menu .icon.-telephone:before{width:22px;height:22px;background-position:-215px -53px}
		.main-menu .icon.-user{cursor: pointer; padding:15px 10px}
		.main-menu .icon.-user:before{width:25px;height:25px;background-position:-247px -26px}
		.main-menu .icon.-cart{cursor: pointer; position:relative;padding:16px 16px 10px 10px}
		.main-menu .icon.-cart:before{width:29px;height:27px;background-position:-216px -3px}
		.main-menu .icon.-cart .bage{position:absolute;border:2px solid #fff;border-radius:50%;
		top:10px;right:13px;padding:0 3px;height:20px;min-width:20px;box-sizing:border-box;
		background-color:#3caa3c;color:#fff;font-size:10px;line-height:17px;text-align:center}
		@media (min--moz-device-pixel-ratio:1.5),(min-resolution:1.5dppx){
			.main-menu .icon:before{background-image:url("/img/mobile/sprite@2x.png");
			background-size:280px auto;}
			.main-menu .icon.-logo:before{background-image:url("/img/mobile/logo@2x.png")}}
			.main-menu span:hover {background: #004ef7; color: #fff;}
			.main-menu .logo {margin: 10px 0 0 0px;}
			.main-menu .dropdown span:hover {background: #fff; color: #000;}
.btn {
	background-color: transparent;
}

.main-menu a{
	color: #0a0a0a;
    margin-right: 10px;
    font-size: 20px;
    text-decoration: none;
}
.phonedown {
	position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 12px 20px;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown span{display:block;font-weight:400;line-height:2.0em;font-size:1.15em;color:#777;text-shadow:0 1px 0 #fefefe;}
 .dropdown i{vertical-align:top;font-size:1.3em;min-width:20px;text-align:center;margin:4px 5px 0 0;}
 .dropdown i.fa-share{margin-top:7px;font-size:1.0em;}
 .dropdown i.fa-mobile{margin-top:2px;font-size:1.7em;color: #18c139;}
 .dropdown i.fa-phone{margin-top:5px;font-size:1.3em;color: #18c139;}
 .dropdown i.fa-fax{font-size:1.2em;}
 .dropdown i.fa-envelope-o{font-size:1.2em;    color: #0b82f7;}


.main {
	display: flex;
    height: 54px;
    background-color: #EB6E44;
    top: 0;
    left: 0;
    z-index: 999999;
    flex-direction: column;
	width: 100%;
}
.main.fix{
	position: fixed;
}


.b-page {padding: 10px 0 10px;
    background: linear-gradient(to bottom, #ea8462 0%,#eb4f1a 100%);
    color: #fff;
    border-top: solid 7px #333;}
.wall {
	border: 2px solid #ee5800;
    border-radius: 10px;
    text-align: center;
	    margin: 8px 0 1px 22px;
		float:left;
		}
		@media (min-width: 992px){
	.visibl {
	display: none!important;
	
}	.main-menu {
	display: none!important;
}

		}
		@media (max-width: 992px){
			.hidd {
	display: none!important;
}
		}
.wall:hover {
  border: 0px solid #f30d02; /* Рамка становится заметной, при наведении курсора. */
}

/* задаем относительное позиционирование контейнеру */
.block{position:relative;
cursor: help;}
/* Оформление скрытого элемента по умолчанию */ 
.hiddentr
{display: none;
position: absolute;
bottom: 130%;
left: -23px;
background-color: #fff;
color: #3aaeda;
padding: 5px;
text-align:;
line-height: 22px;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.16);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16);
box-shadow: 0 1px 1px rgba(0,0,0,.16);
font-size: 14px;}
/* Дополнительное оформление скрытого элемента(необязательно) */
.titr + .hiddentr:before
{content: " ";
position: absolute;
top: 98%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #fff;
border-color: #fff transparent transparent transparent;
z-index: 2;}
/* Дополнительное оформление скрытого элемента(необязательно) */
.titr + .hiddentr:after
{content: " ";
position: absolute;
top: 100%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #fff;
border-color: rgba(0,0,0,.16) transparent transparent transparent;
z-index: 1;}
/* Появление скрытого элемента при наведении */
.titr:hover + .hiddentr{display: block;}
.open.dropdown-menu {
    display: block;
}
.dropdown-menu-left {
    right: auto;
    left: 0;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

        
        /* Игровая зона для кликов */

.zone-highlight {
    position: absolute;
    pointer-events: none;  /* чтобы не мешать клику */
    background: rgba(255, 215, 0, 0.25);
    border: 2px solid #ffcc00;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
    transition: all 0.1s ease;
    z-index: 10;
}

        .game-zone {
            background: repeating-linear-gradient(45deg, #0b1120 0px, #0b1120 2px, #111826 2px, #111826 8px);
            border-radius: 28px;
            border: 2px solid #00ffff80;
            box-shadow: 0 0 20px #00ffff40, inset 0 0 15px #00ffff20;
            cursor: crosshair;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            backdrop-filter: blur(1px);
            position: relative;
        }
        .game-zone:hover {
            border-color: #ff00ff80;
            box-shadow: 0 0 25px #ff00ff60, inset 0 0 10px #ff00ff30;
        }
        .game-zone h2 {
            color: #0ff;
            text-shadow: 0 0 8px #0ff, 0 0 2px #0ff;
            font-size: 2.2rem;
            letter-spacing: 3px;
            background: #000000aa;
            padding: 10px 25px;
            border-radius: 40px;
            border-left: 4px solid #0ff;
            border-right: 4px solid #0ff;
        }
        .game-zone p {
            color: #ccf;
            font-family: 'Share Tech Mono', monospace;
            margin-top: 20px;
            font-size: 1rem;
            background: #00000080;
            padding: 6px 15px;
            border-radius: 20px;
        }
        .game-zone i {
            font-size: 3rem;
            color: #0ff;
            margin-top: 25px;
            text-shadow: 0 0 6px cyan;
        }

        /* Стиль модального окна — компьютерный клуб */
        .modal-club {
            position: fixed;
            display: none;
            background: #0c0e17e6;
            backdrop-filter: blur(12px);
            border: 1px solid #ff00e138;
            border-radius: 20px;
            box-shadow: 0 0 30px rgb(198 137 214 / 63%), 0 10px 25px rgba(0, 0, 0, 0.5);
            min-width: 260px;
            max-width: 320px;
            z-index: 9999999 !important;
            overflow: hidden;
            animation: neonPulse 0.2s ease-out;
            transition: all 0.1s linear;
        }
        @keyframes neonPulse {
            0% { opacity: 0; transform: scale(0.92) translateY(8px); filter: blur(2px);}
            100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0);}
        }
        .modal-header-club {
            /* background: linear-gradient(135deg, #0b1022, #03050f); */
            padding: 12px 18px;
            border-bottom: 2px solid #0ff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* color: #0ff; */
            font-weight: 900;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-size: 0.9rem;
        }
        .modal-header-club i {
            font-size: 1.2rem;
            filter: drop-shadow(0 0 3px cyan);
        }
        .modal-content-club {
            padding: 18px;
            color: #e0e5ff;
            font-size: 0.8rem;
            line-height: 1.5;
            background: #070b14cc;
            border-radius: 0 0 18px 18px;
        }
        .modal-content-club img {
            max-width: 100%;
            border-radius: 12px;
            margin: 8px 0;
            border: 1px solid cyan;
            box-shadow: 0 0 8px cyan;
        }
        .modal-content-club a {
            color: #ff44ff;
            text-decoration: none;
            border-bottom: 1px dashed #ff44ff;
        }
        .modal-content-club a:hover {
            color: #fff;
            text-shadow: 0 0 4px magenta;
        }
        .modal-content-club button {
            background: #1e2a3e;
            border: 1px solid #0ff;
            color: #0ff;
            font-family: 'Orbitron', monospace;
            font-weight: bold;
            padding: 6px 12px;
            border-radius: 30px;
            cursor: pointer;
            transition: 0.1s;
            margin-top: 10px;
            width: 100%;
        }
        .modal-content-club button:hover {
            background: #0dcaf0;
            color: #000;
            box-shadow: 0 0 12px cyan;
        }
        .modal-content-club input {
            background: #010101cc;
            border: 1px solid #0ff;
            padding: 8px;
            border-radius: 40px;
            color: #0ff;
            width: calc(100% - 20px);
            margin: 6px 0;
        }
        .modal-footer-club {
            background: #03050faa;
            padding: 8px 16px;
            text-align: right;
            border-top: 1px solid #0ff66a;
        }
        .close-modal-club {
            background: none;
            border: none;
            color: #ff44ff;
            font-size: 1.2rem;
            cursor: pointer;
            transition: 0.1s;
        }
        .close-modal-club:hover {
            color: #fff;
            text-shadow: 0 0 8px magenta;
            transform: scale(1.1);
        }
        .club-badge {
            font-size: 0.7rem;
            background: #000000aa;
            display: inline-block;
            padding: 2px 8px;
            border-radius: 20px;
            margin-top: 6px;
            border-left: 3px solid #0ff;
        }
    .card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.modal-content-club span{
color: yellow;
}

.about-section {
      padding: 80px 0;
      position: relative;
    }

    /* Заголовок с анимацией glow */
    .glow-title {
      font-weight: 800;
      font-size: 3.5rem;
      background: linear-gradient(135deg, #ffffff, #b4f0ff, #7a2eff);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      text-shadow: 0 0 15px rgba(122, 46, 255, 0.3);
      letter-spacing: -0.02em;
    }

    .lead {
      font-size: 1.3rem;
      font-weight: 500;
      color: #a5b3cf;
    }

    /* Карточки */
    .gaming-card {
      background: rgba(18, 22, 30, 0.85);
      backdrop-filter: blur(3px);
      border: 1px solid rgba(80, 100, 160, 0.25);
      border-radius: 32px;
      transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      overflow: hidden;
      box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.5);
      height: 100%;
      position: relative;
    }

    .gaming-card:hover {
      transform: translateY(-12px);
      border-color: rgba(0, 255, 255, 0.4);
      box-shadow: 0 30px 40px -15px rgba(0, 255, 255, 0.2);
      background: rgba(22, 28, 40, 0.95);
    }

    /* Картинка (SVG контейнер) */
    .card-img-svg {
      background: radial-gradient(circle at 30% 10%, rgba(30, 45, 80, 0.6), rgba(10, 15, 25, 0.9));
      padding: 24px 12px;
      transition: transform 0.3s ease;
      text-align: center;
      border-bottom: 1px solid rgba(100, 150, 255, 0.2);
    }

    .gaming-card:hover .card-img-svg {
      transform: scale(1.02);
    }

    svg {
      filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
      transition: filter 0.2s;
      max-width: 100%;
      height: auto;
    }

    .gaming-card:hover svg {
      filter: drop-shadow(0 0 8px rgba(0, 230, 250, 0.6));
    }

    /* Заголовки в карточках */
    .card-title {
      font-weight: 800;
      letter-spacing: 0.99em;
      background: linear-gradient(120deg, #fff, #7fbcff);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      display: inline-block;
      margin-bottom: 16px;
      font-size: 1.2rem;
    }

    /* Список характеристик */
    .spec-list {
      list-style: none;
      padding-left: 0;
      margin: 20px 0;
color: aqua;
    }

    .spec-list li {
      margin-bottom: 12px;
      font-weight: 900;
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.03);
      padding: 6px 12px;
      border-radius: 60px;
      backdrop-filter: blur(2px);
	  font-size: 1.0rem;
	  
    }

    .spec-list li i {
      width: 24px;
      color: #2ef7f7;
      font-size: 1rem;
    }

    /* Кнопка */
    .btn-neon {
      background: linear-gradient(95deg, #1f2a44, #111827);
      border: 1px solid rgba(0, 210, 255, 0.5);
      color: #eef5ff;
      font-weight: 600;
      padding: 10px 0;
      border-radius: 60px;
      transition: all 0.25s;
      width: 100%;
      letter-spacing: 0.5px;
	  font-size: 1.0rem;
    }

    .btn-neon:hover {
      background: linear-gradient(95deg, #2c3a66, #1a253f);
      border-color: #0ff;
      color: white;
      box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
      transform: scale(1.01);
    }

    /* Нижняя часть карточки */
    .card-footer-custom {
      background: transparent;
      border-top: none;
      padding: 0 1.5rem 1.8rem 1.5rem;
    }

    /* Бадж для индикации тарифа */
    .badge-vip {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255, 215, 0, 0.9);
      color: #000;
      font-weight: bold;
      padding: 5px 12px;
      border-radius: 30px;
      font-size: 1.7rem;
      backdrop-filter: blur(3px);
      z-index: 2;
    }

    /* Адаптив */
    @media (max-width: 768px) {
      .glow-title {
        font-size: 2.5rem;
      }
      .about-section {
        padding: 50px 0;
      }
      .card-title {
        font-size: 1.6rem;
      }
    }

    /* анимация появления карточек */
    .animate-fade-up {
      animation: fadeUp 0.6s ease-out forwards;
      opacity: 0;
    }

    @keyframes fadeUp {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }


    .cookie-consent-overlay {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(5px);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      transition: opacity 0.4s ease, visibility 0.4s;
      opacity: 1;
      visibility: visible;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .cookie-consent-overlay.hide {
      opacity: 0;
      visibility: hidden;
    }

    .cookie-consent-card {
      max-width: 550px;
      width: 100%;
      background: #1a1e2a;
      border-radius: 28px;
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
      padding: 1.8rem 2rem;
      color: #f0f3fc;
      text-align: center;
      transform: scale(1);
      transition: transform 0.2s;
    }

    .cookie-consent-card h3 {
      margin-top: 0;
      margin-bottom: 0.75rem;
      font-size: 1.8rem;
      font-weight: 700;
      background: linear-gradient(120deg, #fff, #9b8cff);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      display: inline-block;
    }

    .cookie-consent-card p {
      font-size: 0.95rem;
      line-height: 1.5;
      margin: 1rem 0 1.5rem;
      color: #cbd5f0;
    }

    .cookie-buttons {
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-cookie {
      padding: 10px 24px;
      border-radius: 60px;
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      background: none;
    }

    .btn-accept {
      background: linear-gradient(95deg, #2a3a7a, #0f1a3a);
      color: white;
      border: 1px solid rgba(100, 150, 255, 0.5);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .btn-accept:hover {
      background: linear-gradient(95deg, #3d51a0, #1f2e60);
      border-color: #7cb9ff;
      transform: translateY(-2px);
      box-shadow: 0 10px 20px -5px rgba(0, 100, 255, 0.3);
    }

    .btn-decline {
      background: rgba(255, 255, 255, 0.05);
      color: #ddddff;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .btn-decline:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.5);
      transform: translateY(-2px);
    }

    /* Адаптив */
    @media (max-width: 550px) {
      .cookie-consent-card {
        padding: 1.4rem;
      }
      .cookie-buttons {
        flex-direction: column;
      }
      .btn-cookie {
        width: 100%;
      }
    }

    /* Иконка файла cookie */
    .cookie-icon {
      font-size: 2.5rem;
      margin-bottom: 8px;
      display: inline-block;
    }

    a {
      color: #9db9ff;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
/* Стили модального окна (оставлены как в предыдущем примере) */
    .register-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.8);
        backdrop-filter: blur(5px);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .register-modal-content {
        background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
        margin: 0% auto;
        width: 90%;
        max-width: 500px;
        border-radius: 20px;
        border: 1px solid #6c00ff;
        box-shadow: 0 0 30px rgba(108,0,255,0.3);
        animation: modalFadeIn 0.3s ease;
    }
    @keyframes modalFadeIn {
        from { opacity: 0; transform: translateY(-30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .register-modal-header {
        padding: 20px 25px 10px;
        border-bottom: 1px solid #2a2a3a;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .register-modal-header h3 {
        margin: 0;
        color: #fff;
        font-weight: bold;
        letter-spacing: 1px;
    }
    .register-modal-close {
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.2s;
    }
    .register-modal-close:hover {
        color: #ff3366;
    }
    .register-modal-body {
        padding: 20px 25px 30px;
    }
    .form-group {
        margin-bottom: 18px;
    }
    .form-group label {
        display: block;
        color: #ccc;
        margin-bottom: 6px;
        font-size: 14px;
    }
    .form-group input {
        width: 100%;
        padding: 12px 15px;
        background: #0a0a14;
        border: 1px solid #333;
        border-radius: 12px;
        color: white;
        font-size: 16px;
        transition: 0.2s;
    }
    .form-group input:focus {
        outline: none;
        border-color: #6c00ff;
        box-shadow: 0 0 8px rgba(108,0,255,0.5);
    }
    .form-text {
        font-size: 11px;
        color: #888;
        display: block;
        margin-top: 5px;
    }
    .checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .checkbox input {
        width: auto;
        transform: scale(1.1);
        margin-right: 8px;
    }
    .checkbox label {
        margin-bottom: 0;
        font-size: 13px;
    }
    .checkbox a {
        color: #6c00ff;
        text-decoration: none;
    }
    .btn-register {
        width: 100%;
        padding: 12px;
        background: linear-gradient(90deg, #6c00ff, #9900ff);
        border: none;
        border-radius: 40px;
        color: white;
        font-weight: bold;
        font-size: 16px;
        cursor: pointer;
        transition: 0.2s;
        margin-top: 10px;
    }
    .btn-register:hover {
        transform: scale(1.02);
        box-shadow: 0 0 15px #6c00ff;
    }
    @media (max-width: 600px) {
        .register-modal-content { width: 95%; margin: 10% auto; }
        .register-modal-body { padding: 15px; }
    }
	
	/* Область для кликов */
        .click-area {
            
        }
        .click-area:active {
            transform: scale(0.98);
        }

        /* Модальное окно (сначала скрыто) */
        .custom-modal {
            position: absolute;
            display: none;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            min-width: 200px;
            max-width: 280px;
            padding: 0;
            z-index: 1000;
            font-family: Arial, sans-serif;
            overflow: hidden;
            animation: fadeIn 0.15s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .modal-header {
            background: #2575fc;
            color: white;
            padding: 12px 16px;
            font-weight: bold;
            cursor: move;
        }
        .modal-content {
            padding: 16px;
            font-size: 14px;
            line-height: 1.4;
            color: #333;
        }
        .modal-content img {
            max-width: 100%;
            border-radius: 8px;
        }
        .modal-content input {
            width: calc(100% - 16px);
            padding: 8px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 6px;
        }
         .form-check-input[type=checkbox] {
          width: 4%;
		 }
        .modal-footer {
            background: #f5f5f5;
            padding: 8px 16px;
            text-align: right;
            border-top: 1px solid #eee;
        }
        .close-modal-btn {
            background: #2575fc;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 12px;
        }
        .close-modal-btn:hover {
            background: #1a5bbf;
        }
		* {
            box-sizing: border-box;
        }

        

        /* главный контейнер */
        .pricing-container {
            max-width: 1300px;
            margin: 0 auto;
            background: #10121f;
            border-radius: 2rem;
            box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.6);
            overflow: hidden;
            padding: 1.5rem 1.8rem 2.2rem 1.8rem;
            transition: all 0.2s;
        }

        /* группа кнопок-табов */
        .tabs-bar {
            /* display: flex; */
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 2rem;
            border-bottom: 1px solid #2a2e44;
            padding-bottom: 0.75rem;
        }

        .tablink {
            background: #1e2235;
            border: none;
            color: #ccd6f0;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.8rem 1.6rem;
            border-radius: 3rem;
            cursor: pointer;
            transition: all 0.25s ease;
            letter-spacing: 0.3px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }

        .tablink:hover {
            background: #2d324f;
            color: white;
            transform: translateY(-2px);
        }

        /* активная вкладка получит индивидуальный цвет (red/green/blue/orange) через JS,
           но базовый стиль задаём */
        .tablink.active-tab {
           /*  background: #ff4d4d; */
            color: white;
            /* box-shadow: 0 4px 12px rgba(255, 77, 77, 0.3); */
        }

        /* контент вкладок */
        .tabcontent {
            display: none;
            animation: fadeEffect 0.3s ease-in-out;
        }

        @keyframes fadeEffect {
            from { opacity: 0; transform: translateY(6px);}
            to { opacity: 1; transform: translateY(0);}
        }

        .tabcontent h1 {
            font-size: 1.9rem;
            font-weight: 700;
            margin: 0 0 0.25rem 0;
            background: linear-gradient(135deg, #f0f3ff, #b9c3ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: -0.3px;
        }

        .tabcontent p {
            color: #9aa2c0;
            margin-top: 0.25rem;
            margin-bottom: 1.5rem;
            
            border-left: 3px solid #ff4d4d;
            padding-left: 0.9rem;
        }

        /* стили таблиц (сохраняем класс iksweb, но осовремениваем) */
        table.iksweb {
            width: 100%;
            border-collapse: collapse;
            background: #13172a;
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
            margin: 1rem 0 0.5rem 0;
        }

        table.iksweb td, table.iksweb th {
            padding: 14px 12px;
            text-align: center;
            font-weight: 500;
            border-bottom: 1px solid #262c44;
            font-size: 0.7rem;
        }

        /* ячейки с красным фоном (часы, тип мест) */
        table.iksweb td[style*="background: red"],
        table.iksweb td[style*="background: red;"] {
            background-color: #c4282c !important;
            font-weight: 900;
            color: white;
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
            letter-spacing: 0.3px;
        }

        /* первая колонка (название тарифа) - полужирное */
        table.iksweb td:first-child {
            font-weight: 900;
            background-color: #1a1e32;
            color: #e2eaff;
            text-align: left;
            padding-left: 1.2rem;
        }

        /* стиль для заголовочной строки (МЕСТО / ВРЕМЯ) */
        table.iksweb tr:first-child td {
            background-color: #0f1223;
            font-weight: 1200;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #b9c6ff;
            border-bottom: 2px solid #2f3657;
        }

        /* подсветка строк при наведении */
        table.iksweb tr:hover td {
            background-color: #1b203b;
            transition: 0.1s;
        }

        /* адаптив для маленьких экранов */
        @media (max-width: 760px) {
            .pricing-container {
                padding: 1rem;
            }
            .tablink {
                padding: 0.5rem 1.2rem;
                font-size: 0.65rem;
            }
            table.iksweb td, table.iksweb th {
                padding: 10px 6px;
                font-size: 0.8rem;
            }
            .tabcontent h1 {
                font-size: 1.5rem;
            }
        }

        /* дополнительная стилизация для цен */
        table.iksweb td:not(:first-child) {
            font-weight: 900;
            color: #f0f3ff;
        }

        footer {
            text-align: center;
            margin-top: 2rem;
            font-size: 1.0rem;
            color: #5b6285;
        }
		@media (max-width: 768px) {
    .card-title {
        font-size: 1.3rem;
    }
}
.site-content__center h1{
font-size: 9.375rem;	
}

 /* Сам блок бронирования */
        .join_us_section {
            background: rgba(18, 22, 35, 0.9);
            backdrop-filter: blur(4px);
            border-radius: 32px;
            padding: 3rem 2rem;
            text-align: center;
            max-width:100%;
            width: 100%;
            border: 1px solid rgba(0, 255, 255, 0.3); /* Неоновая окантовка */
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.1), inset 0 0 10px rgba(0, 255, 255, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .join_us_section:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 45px rgba(255, 0, 255, 0.2); /* Фиолетовое свечение при наведении */
            border-color: rgba(255, 0, 255, 0.5);
        }

        /* Кибер-заголовок */
        .join_us_section h1 {
            font-family: 'Orbitron', monospace;
            font-weight: 900;
            font-size: 2rem;
            text-transform: uppercase;
            background: linear-gradient(135deg, #ffffff, #00ffff, #ff00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 2px;
            margin-bottom: 1rem;
            text-shadow: 0 0 5px rgba(0,255,255,0.5);
        }

        /* Номер телефона (стиль глитч) */
        .join_us_section h4 {
            font-family: 'Orbitron', monospace;
            font-size: 1.8rem;
            font-weight: 700;
            color: #0ff;
            text-shadow: 0 0 8px #0ff, 0 0 2px #fff;
            background: #00000050;
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            backdrop-filter: blur(5px);
            letter-spacing: 2px;
            margin: 0.5rem 0 1.5rem 0;
            border: 1px solid #0ff;
        }

        /* Кнопка-киберпанк */
        .join_us_section a {
            text-decoration: none;
        }

        .join_us_section button {
            background: linear-gradient(90deg, #ff00cc, #333399);
            border: none;
            font-family: 'Orbitron', monospace;
            font-weight: bold;
            font-size: 1.2rem;
            padding: 14px 40px;
            border-radius: 40px;
            color: white;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: 0.2s;
            box-shadow: 0 0 15px rgba(255, 0, 204, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .join_us_section button::before {
            content: "⚡ ";
            font-size: 1.2rem;
            filter: drop-shadow(0 0 2px white);
        }

        .join_us_section button:hover {
            background: linear-gradient(90deg, #ff66e5, #5555ff);
            box-shadow: 0 0 25px #ff00cc;
            transform: scale(1.02);
        }

        /* Мобильная адаптация */
        @media (max-width: 650px) {
            .join_us_section {
                padding: 2rem 1rem;
            }
            .join_us_section h1 {
                font-size: 1.4rem;
            }
            .join_us_section h4 {
                font-size: 1.2rem;
            }
            .join_us_section button {
                font-size: 0.9rem;
                padding: 10px 20px;
            }
        }
/* Анимация появления */
        .animate-fade-up {
            animation: fadeUp 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
            opacity: 0;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Модальное окно (кастомный фон) */
        .modal-content {
            background: rgba(10, 20, 35, 0.98);
            backdrop-filter: blur(16px);
            border: 1px solid #0ff;
            border-radius: 32px;
            color: #fff;
        }

        .modal-header {
            border-bottom: 1px solid #2c3e66;
        }

        .btn-close-white {
            filter: invert(1);
        }

        .time-badge {
            background: #1e2a47;
            padding: 5px 12px;
            border-radius: 40px;
            font-size: 0.85rem;
            display: inline-block;
            margin: 5px 0;
        }

        .price-big {
            font-size: 2.5rem;
            font-weight: 800;
            color: #facc15;
        }

        hr {
            background: linear-gradient(90deg, #0ff, #a020f0, #0ff);
            height: 2px;
        }

        @media (max-width: 768px) {
            .glow-title {
                font-size: 2.2rem;
            }
            .card-title {
                font-size: 1.2rem;
            }
        }
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

@media (max-width: 768px) {
    .busy-overlay, .free-overlay {
        border-radius: 4px !important;
        border-width: 1px !important;
        box-shadow: 0 0 4px rgba(0,0,0,0.3) !important;
    }
    .busy-overlay {
        border: 1px solid #dc3545 !important;
        background-color: rgba(220, 53, 69, 0.35) !important;
    }
    .free-overlay {
        border: 1px solid #28a745 !important;
        background-color: rgba(40, 167, 69, 0.2) !important;
    }
}


        /* Плавающая кнопка вызова рулетки */
        .float-roulette-btn {
            position: fixed;
            right: 30px;
            bottom: 30px;
            background: linear-gradient(145deg, #1e2a3a, #0f1722);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 5px 15px black;
            border: 2px solid #0ff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.2s;
            z-index: 999;
        }
        .float-roulette-btn:hover {
            transform: scale(1.07);
            box-shadow: 0 0 28px cyan;
        }
        .float-roulette-btn span {
            font-size: 36px;
            filter: drop-shadow(0 0 4px white);
        }

        /* Модальное окно с рулеткой */
        .modal-roulette {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(12px);
            align-items: center;
            justify-content: center;
            z-index: 99;
        }
        .modal-roulette-content {
            background: rgba(10, 20, 30, 0.95);
            border-radius: 60px;
            max-width: 750px;
            width: 95%;
            padding: 20px 20px 35px;
            border: 2px solid #0ff;
            box-shadow: 0 0 50px rgba(0, 255, 255, 0.5);
            position: relative;
            max-height: 95vh;
            overflow-y: auto;
            scrollbar-width: thin;
        }
        .close-modal-x {
            position: absolute;
            top: 18px;
            right: 25px;
            font-size: 32px;
            color: #0ff;
            cursor: pointer;
            background: none;
            border: none;
            font-weight: bold;
            transition: 0.1s;
        }
        .close-modal-x:hover {
            text-shadow: 0 0 8px white;
            transform: scale(1.1);
        }
        .wheel-container {
            position: relative;
            display: flex;
            justify-content: center;
            margin: 30px 0 10px;
        }
        canvas {
            display: block;
            margin: 0 auto;
            width: 100%;
            height: auto;
            max-width: 550px;
            border-radius: 50%;
            box-shadow: 0 0 0 6px #0a111f, 0 20px 30px rgba(0,0,0,0.5), 0 0 0 2px #0ff;
            cursor: pointer;
        }
        .pointer {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-top: 55px solid #ffcc44;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
            z-index: 10;
        }
        .pointer::after {
            content: "⚡";
            position: absolute;
            font-size: 28px;
            top: -58px;
            left: -14px;
            color: #fff700;
            text-shadow: 0 0 5px #ff00aa;
        }
        .spin-btn {
            background: linear-gradient(135deg, #1e2a3a, #0f1722);
            border: none;
            font-size: 1.6rem;
            font-weight: bold;
            font-family: 'Orbitron', monospace;
            padding: 14px 25px;
            margin: 15px auto 10px;
            width: 80%;
            border-radius: 60px;
            color: #0ff;
            text-transform: uppercase;
            letter-spacing: 3px;
            cursor: pointer;
            box-shadow: 0 6px 0 #001133;
            transition: 0.05s linear;
            display: block;
            border: 1px solid cyan;
        }
        .spin-btn:active {
            transform: translateY(4px);
            box-shadow: 0 2px 0 #001133;
        }
        .spin-btn:disabled {
            opacity: 0.6;
            transform: none;
            cursor: not-allowed;
        }
        .result-panel {
            background: #050b14cc;
            border-radius: 48px;
            margin-top: 20px;
            padding: 12px 15px;
            text-align: center;
            border: 1px solid #0ff;
        }
        .result-text {
            font-size: 1.3rem;
            font-weight: bold;
            color: #f2eaff;
            text-shadow: 0 0 6px #ff44cc;
        }
        .timer-block {
            background: #0a111faa;
            border-radius: 40px;
            padding: 6px 12px;
            margin-top: 15px;
            text-align: center;
            font-family: monospace;
            border: 1px solid cyan;
        }
        .timer-value {
            font-size: 1.2rem;
            font-weight: bold;
            color: #ffcc44;
        }
        .test-mode-toggle {
            margin-top: 12px;
            text-align: center;
        }
        .test-btn {
            background: #2c2c3e;
            border: 1px solid #f0b27a;
            color: #ffcd94;
            padding: 5px 12px;
            border-radius: 60px;
            font-size: 0.7rem;
            cursor: pointer;
        }
        .test-btn.active {
            background: #5a3e1f;
            border-color: #ffaa44;
            box-shadow: 0 0 6px orange;
        }
        .glow-text {
            text-align: center;
            font-size: 0.65rem;
            color: #2affb0;
            margin-top: 12px;
        }
        .audio-note {
            font-size: 0.6rem;
            color: #77aaff;
            text-align: center;
        }
        /* Модальное окно для номера телефона + условия */
        .phone-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(8px);
            align-items: center;
            justify-content: center;
            z-index: 2100;
        }
        .phone-modal-content {
            background: #0e1a2a;
            border-radius: 48px;
            max-width: 420px;
            width: 90%;
            padding: 25px;
            text-align: center;
            border: 2px solid #0ff;
        }
        .phone-modal-content input {
            width: 100%;
            padding: 12px;
            border-radius: 60px;
            background: #1e2f3f;
            color: white;
            font-size: 1.1rem;
            text-align: center;
            margin: 15px 0;
            border: 1px solid #0ff;
        }
        .phone-modal-content button {
            background: #0ff;
            border: none;
            padding: 8px 20px;
            border-radius: 40px;
            font-weight: bold;
            margin: 5px;
            cursor: pointer;
        }
        .conditions-text {
            background: #00000066;
            border-radius: 30px;
            padding: 8px;
            margin-top: 10px;
            font-size: 0.75rem;
            color: #ffdd99;
            border-left: 3px solid #ffaa44;
        }
        @media (max-width: 560px) {
            .float-roulette-btn { width: 55px; height: 55px; right: 20px; bottom: 20px; }
            .float-roulette-btn span { font-size: 28px; }
            .spin-btn { font-size: 1.2rem; }
            .result-text { font-size: 1rem; }
        }
.lan{
position:absolute; 
bottom:4px; 
right:8px; 
background:#000; 
color:#ff8888; 
font-size:8px; 
padding:2px 6px; 
border-radius:12px; 
z-index:1000; 
font-weight:bold;
pointer-events:none
}
/* ========== ВСПЛЫВАЮЩАЯ ПОДСКАЗКА (TOAST) ========== */
        .notification-toast {
            position: fixed;
            bottom: 110px;
            right: 30px;
            background: linear-gradient(135deg, #1f2a3a, #0b1018);
            backdrop-filter: blur(12px);
            border-left: 6px solid #ffaa33;
            border-radius: 20px;
            padding: 12px 20px;
            padding-right: 44px;
            min-width: 240px;
            max-width: 320px;
            z-index: 99;
            font-weight: bold;
            color: #ffefcf;
            box-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,200,100,0.3);
            transition: all 0.3s ease;
            cursor: pointer;
            backdrop-filter: blur(18px);
            font-size: 0.95rem;
            letter-spacing: 0.5px;
            animation: slideFadeIn 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }
        @keyframes slideFadeIn {
            from {
                opacity: 0;
                transform: translateX(60px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .notification-toast.hide-toast {
            animation: fadeOut 0.25s forwards;
        }
        @keyframes fadeOut {
            to {
                opacity: 0;
                visibility: hidden;
                transform: translateX(50px);
            }
        }
        .toast-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .toast-icon {
            font-size: 28px;
            filter: drop-shadow(0 0 4px gold);
        }
        .toast-text {
            flex: 1;
            line-height: 1.3;
        }
        .toast-title {
            font-size: 1rem;
            font-weight: 800;
            color: #ffcc66;
        }
        .toast-desc {
            font-size: 0.8rem;
            opacity: 0.9;
        }
        .toast-close {
            position: absolute;
            top: 8px;
            right: 12px;
            font-size: 18px;
            background: rgba(255,255,200,0.2);
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.2s;
            color: #ffcc88;
        }
        .toast-close:hover {
            background: rgba(255,100,50,0.7);
            color: white;
        }
.cloud-tooltip {
            position: fixed;
            background: #fff9e8;
            color: #222;
            padding: 10px 18px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 600;
            font-family: 'Segoe UI', sans-serif;
            box-shadow: 0 8px 20px rgba(0,0,0,0.25);
            border: 1px solid #ffcc44;
            z-index: 999;
            white-space: nowrap;
            pointer-events: none;
            transition: opacity 0.12s ease;
            opacity: 0;
        }
        /* Стиль облачка для автоматической подсказки над admin */
        .auto-tooltip {
            position: fixed;
            background: #1e1e2f;
            color: #ffcc44;
            padding: 12px 20px;
            border-radius: 36px;
            font-size: 1rem;
            font-weight: bold;
            box-shadow: 0 12px 28px rgba(0,0,0,0.5);
            border: 1px solid #ffcc00;
            backdrop-filter: blur(8px);
            z-index: 98;
            white-space: nowrap;
            font-family: 'Segoe UI', sans-serif;
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.2s ease;
            opacity: 0;
            transform: scale(0.9);
        }
        .auto-tooltip::before {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 247px;
            border-width: 12px 12px 0;
            border-style: solid;
            border-color: #ffcc00 transparent transparent;
        }
        .auto-tooltip::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 248px;
            border-width: 10px 10px 0;
            border-style: solid;
            border-color: #1e1e2f transparent transparent;
        }
        .auto-tooltip.show {
            opacity: 1;
            transform: scale(1);
        }
/* Фильтр ПК */
.filters{
position: absolute;
    top: 70%;
z-index: 90;
}
.filter-toggle-btn {
    background: #ffcc00;
    color: #111;
    border: none;
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 15px;
    transition: 0.2s;
    font-size: 0.8rem;
}
.filter-toggle-btn:hover {
    background: #ffaa00;
    transform: scale(1.02);
}
.slide-panel {
    background: rgba(30,30,46,0.95);
    backdrop-filter: blur(8px);
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,204,0,0.3);
    transition: all 0.3s ease;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 20px;
    visibility: hidden;
font-size: 0.6rem;
}
.slide-panel.show {
    max-height: 90%; /* достаточно для содержимого */
    opacity: 1;
    visibility: visible;
    padding: 20px;
    margin-bottom: 20px;
}
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.close-filter {
    background: none;
    border: none;
    font-size: 28px;
    color: #ffcc00;
    cursor: pointer;
    line-height: 1;
}
.close-filter:hover {
    color: #fff;
}
.filter-group {
    display: flex;
    gap: 15px;
    background: #1e1e2a;
    padding: 1px 15px;
    border-radius: 40px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.filter-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ddd;
    cursor: pointer;
}
.filter-group input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #ffcc00;
}
.clear-filters-btn {
    background: #ffcc00;
    color: #111;
    border: none;
    padding: 6px 18px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}
.namestyle{
background:rgba(0,0,0,0.7); 
padding:4px 8px;
border-radius:20px; 
font-size:10px;"
}
@media (max-width: 560px) {
            .filters{
    position: relative;
z-index: 99;
}
.lan{

display:none
}
.namestyle{
font-size:2px;
}

        }
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.user-name {
    color: #ffcc00;
    font-weight: bold;
    font-size: 1rem;
}
#logout-btn {
    background: #dc3545;
    padding: 8px 16px;
    border-radius: 30px;
    border: none;
    color: white;
    cursor: pointer;
}
#logout-btn:hover {
    background: #c82333;
}
.user-balance {
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #ffcc00;
    margin-left: 10px;
}
.refresh-balance-btn {
    background: none;
    border: none;
    color: #ffcc00;
    cursor: pointer;
    margin-left: 8px;
    font-size: 1rem;
    padding: 0 4px;
    transition: transform 0.2s;
}
.refresh-balance-btn:hover {
    transform: rotate(180deg);
    color: #ffaa00;
}
.refresh-balance-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.user-avatar-wrapper {
    position: relative;
    display: inline-block;
}

.icon.-user.user {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.4);
    border-radius: 40px;
    padding: 6px 12px;
    transition: background 0.2s;
}

.icon.-user.user:hover {
    background: rgba(0,0,0,0.6);
}

.header-balance {
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffcc00;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #1e1e2f;
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 1000;
    display: none;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}

.user-dropdown.show {
    display: block;
}

.dropdown-item {
    padding: 10px 20px;
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.dropdown-item i {
    width: 20px;
    font-size: 1.1rem;
}

.dropdown-item:hover {
    background: #2a2a3e;
}

.balance-item {
    background: #0f0f1a;
    cursor: default;
    font-weight: 600;
}

.balance-item:hover {
    background: #0f0f1a;
}

.dropdown-divider {
    height: 1px;
    background: #3a3a4e;
    margin: 6px 0;
}

.logout-btn {
    color: #ff8888;
}

.logout-btn:hover {
    background: #dc3545;
    color: white;
}
.icon.-user.user.logged {
    background: linear-gradient(145deg, #2a2e4a, #1a1e32);
    border: 1px solid #ffcc33;
    box-shadow: 0 0 8px #ffcc33, 0 0 15px rgba(255,204,51,0.4);
    animation: glowPulse 2s infinite;
}
@keyframes glowPulse {
    0% { box-shadow: 0 0 5px #ffcc33; }
    50% { box-shadow: 0 0 15px #ffcc33, 0 0 20px rgba(255,204,51,0.6); }
    100% { box-shadow: 0 0 5px #ffcc33; }
}
.icon.-user.user.logged i {
    color: #ffcc33;
}
.balance-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 12px;
    border-radius: 20px;
    margin-left: 10px;
    color: #ffcc00;
}
.refresh-btn {
    background: none;
    border: none;
    color: #ffcc00;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}
.refresh-btn:hover {
    color: white;
    transform: rotate(180deg);
    transition: 0.3s;
}
.modal-content.bg-dark {
    background: linear-gradient(145deg, #0f1225, #080a17);
    border: 1px solid #f0b90b;
}
.modal-header.border-secondary {
    border-bottom-color: #f0b90b !important;
}
.modal-footer.border-secondary {
    border-top-color: #f0b90b !important;
}
.modal-body h5 {
    color: #ffcc66;
    margin-top: 1rem;
}