* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

}

body {
background: #060F21;
color: #e8f0ff;
min-height: 100vh;
overflow-x: hidden;
padding-bottom: 80px;
background-attachment: fixed;
background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(255, 215, 0, 0.025) 40px,
            rgba(255, 215, 0, 0.025) 41px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 40px,
            rgba(255, 215, 0, 0.025) 40px,
            rgba(255, 215, 0, 0.025) 41px
        ),
        #0a0a1a !important;
    background-attachment: fixed !important;

}
footer{
  background: black;
  padding:20px;
  position: relative;
  top:24px;
}
footer p{
text-align: center;
}
/* ============================================================
	ХЕДЕР
	============================================================ */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(4, 10, 25, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 1000;
border-bottom: 1px solid rgba(0, 255, 180, 0.12);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.header-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 64px;
}

.logo {
font-size: 22px;
font-weight: 900;
background: linear-gradient(135deg, #00f5d4, #00b4d8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
text-decoration: none;
flex-shrink: 0;
}

.logo i {
-webkit-text-fill-color: #00f5d4;
font-size: 22px;
}

.header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

.balance {
padding: 6px 14px;
border-radius: 30px;
background: linear-gradient(135deg, rgba(0, 255, 180, 0.12), rgba(0, 180, 216, 0.12));
border: 1px solid rgba(0, 255, 180, 0.2);
font-size: 13px;
font-weight: 700;
color: #00f5d4;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 0 20px rgba(0, 255, 180, 0.06);
white-space: nowrap;
}

.balance i {
font-size: 14px;
color: #ffd700;
}

.lang-switcher {
position: relative;
cursor: pointer;
user-select: none;
flex-shrink: 0;
}

.lang-current {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 10px 4px 8px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
font-size: 12px;
font-weight: 600;
color: #9ab0d0;
transition: 0.3s;
}
.lang-current:hover {
background: rgba(0, 255, 180, 0.04);
border-color: rgba(0, 255, 180, 0.1);
color: #00f5d4;
}

.lang-current .flag { font-size: 16px; line-height: 1; }
.lang-current .label { font-size: 11px; font-weight: 600; }
.lang-current .arrow { font-size: 8px; transition: 0.3s; color: #5a7a9a; margin-left: 2px; }
.lang-current:hover .arrow { color: #00f5d4; }

.lang-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 120px;
background: rgba(4, 10, 30, 0.98);
backdrop-filter: blur(20px);
border-radius: 14px;
border: 1px solid rgba(0, 255, 180, 0.06);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
padding: 4px;
opacity: 0;
transform: translateY(-10px) scale(0.95);
pointer-events: none;
transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 100;
}

.lang-dropdown.open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: all;
}

.lang-dropdown .lang-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 10px;
font-size: 12px;
font-weight: 500;
color: #9ab0d0;
transition: 0.2s;
cursor: pointer;
border: none;
background: none;
width: 100%;
font-family: inherit;
text-align: left;
}

.lang-dropdown .lang-option:hover {
background: rgba(0, 255, 180, 0.06);
color: #00f5d4;
}

.lang-dropdown .lang-option.active {
background: rgba(0, 255, 180, 0.08);
color: #00f5d4;
}

.lang-dropdown .lang-option .flag { font-size: 18px; line-height: 1; }
.lang-dropdown .lang-option .label { font-size: 12px; }

/* ============================================================
	ВЕРХНЕЕ МЕНЮ
	============================================================ */
.header-menu {
display: flex;
gap: 4px;
padding: 0 12px 10px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}

.header-menu::-webkit-scrollbar { display: none; }

.header-menu .menu-item {
flex-shrink: 0;
padding: 8px 16px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
color: #6a8aaa;
transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
text-decoration: none;
font-family: inherit;
position: relative;
background: transparent;
border: 1px solid transparent;
letter-spacing: 0.3px;
}

.header-menu .menu-item i { font-size: 13px; transition: 0.3s; }

.header-menu .menu-item::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50px;
padding: 1px;
background: linear-gradient(135deg, rgba(0, 255, 180, 0.2), rgba(0, 180, 216, 0.1));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: 0.4s;
}

.header-menu .menu-item:hover {
color: #b0d0e8;
transform: translateY(-1px);
}

.header-menu .menu-item:hover i { transform: scale(1.1); }

.header-menu .menu-item.active {
color: #00f5d4;
background: linear-gradient(135deg, rgba(0, 255, 180, 0.08), rgba(0, 180, 216, 0.05));
border-color: rgba(0, 255, 180, 0.15);
box-shadow: 0 0 30px rgba(0, 255, 180, 0.03), inset 0 0 30px rgba(0, 255, 180, 0.02);
}

.header-menu .menu-item.active::before { opacity: 1; }

.header-menu .menu-item.active i {
color: #00f5d4;
text-shadow: 0 0 20px rgba(0, 255, 180, 0.2);
}

.header-menu .menu-item.active::after {
content: '';
position: absolute;
bottom: 3px;
left: 25%;
right: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, #00f5d4, transparent);
border-radius: 4px;
box-shadow: 0 0 20px rgba(0, 255, 180, 0.15);
animation: neonLinePulse 2s ease-in-out infinite;
}

@keyframes neonLinePulse {
0%, 100% { opacity: 0.6; transform: scaleX(1); }
50% { opacity: 1; transform: scaleX(1.2); }
}

/* ============================================================
	ОСНОВНОЙ КОНТЕНТ
	============================================================ */
main {

padding-top: 125px;
max-width: 600px;
margin: 0 auto;
background: radial-gradient(circle at 20% 30%, #0f2847, #050d1e 50%, #020611 100%);
border-radius: 15px;
box-shadow:
        0 0 30px rgba(128, 0, 255, 0.15),
        0 0 60px rgba(128, 0, 255, 0.08),
        0 0 100px rgba(128, 0, 255, 0.04) !important;
}

/* ============================================================
	СТРАНИЦЫ (переключение)
	============================================================ */
.section-page {
display: none;
animation: fadeUp 0.4s ease;
}

.section-page.active {
display: block;
}

/* ============================================================
	КАРУСЕЛЬ
	============================================================ */
.hero { padding: 12px 16px 8px; }

.carousel-container {
position: relative;
border-radius: 28px;
overflow: hidden;
height: 200px;
box-shadow: 0 8px 40px rgba(0, 255, 180, 0.06);
}

.carousel-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-slide {
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px 30px;
position: relative;
overflow: hidden;
}

.carousel-slide::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 40%, rgba(0, 255, 180, 0.05) 0%, transparent 60%);
animation: bannerGlow 6s ease-in-out infinite alternate;
}

@keyframes bannerGlow {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(10%, 10%) scale(1.2); }
}

.carousel-slide .slide-badge {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
color: #00f5d4;
background: rgba(0, 255, 180, 0.12);
padding: 3px 14px;
border-radius: 40px;
margin-bottom: 8px;
position: relative;
z-index: 1;
}

.carousel-slide .slide-title {
font-size: 32px;
font-weight: 900;
position: relative;
z-index: 1;
letter-spacing: -1px;
}

.carousel-slide .slide-title.gradient-text {
background: linear-gradient(135deg, #00f5d4, #00b4d8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.carousel-slide .slide-title.gold-text { color: #ffd700; text-shadow: 0 0 40px rgba(255, 215, 0, 0.15); }
.carousel-slide .slide-title.pink-text { color: #ff6b8a; text-shadow: 0 0 40px rgba(255, 107, 138, 0.15); }
.carousel-slide .slide-title.purple-text { color: #a855f7; text-shadow: 0 0 40px rgba(168, 85, 247, 0.15); }

.carousel-slide .slide-sub {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
margin-top: 4px;
position: relative;
z-index: 1;
letter-spacing: 0.5px;
}

.slide-bg-1 { background: linear-gradient(145deg, rgba(0, 217, 255, 0.12), rgba(0, 255, 180, 0.08)); border: 1px solid rgba(0, 255, 180, 0.15); }
.slide-bg-2 { background: linear-gradient(145deg, rgba(255, 215, 0, 0.08), rgba(255, 107, 138, 0.06)); border: 1px solid rgba(255, 215, 0, 0.12); }
.slide-bg-3 { background: linear-gradient(145deg, rgba(168, 85, 247, 0.08), rgba(0, 217, 255, 0.06)); border: 1px solid rgba(168, 85, 247, 0.12); }
.slide-bg-4 { background: linear-gradient(145deg, rgba(255, 107, 138, 0.08), rgba(255, 215, 0, 0.06)); border: 1px solid rgba(255, 107, 138, 0.12); }

.carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
padding: 12px 0 4px;
}

.carousel-dots .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: none;
cursor: pointer;
transition: 0.3s;
padding: 0;
}

.carousel-dots .dot.active {
background: #00f5d4;
width: 24px;
border-radius: 6px;
box-shadow: 0 0 20px rgba(0, 255, 180, 0.15);
}

.carousel-dots .dot:hover { background: rgba(0, 255, 180, 0.3); }

.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.05);
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: 0.3s;
font-size: 14px;
}

.carousel-arrow:hover { background: rgba(0, 255, 180, 0.15); border-color: rgba(0, 255, 180, 0.1); }
.carousel-arrow.prev { left: 12px; }
.carousel-arrow.next { right: 12px; }

/* ============================================================
	КОНТЕНТ СТРАНИЦ
	============================================================ */
.page-content {
padding: 12px 16px 20px;
}

.page-content .section-title {
font-size: 18px;
font-weight: 700;
color: #00f5d4;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}

.page-content .section-title i { font-size: 20px; }

.page-content .card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

.page-content .card-grid .item-card {
background: rgba(255, 255, 255, 0.02);
border-radius: 16px;
padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.04);
text-align: center;
transition: 0.3s;
}

.page-content .card-grid .item-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 255, 180, 0.1);
}

.page-content .card-grid .item-card .icon { font-size: 30px; margin-bottom: 6px; }
.page-content .card-grid .item-card .name { font-size: 13px; font-weight: 600; color: #e0ecff; }
.page-content .card-grid .item-card .desc { font-size: 11px; color: #5a7a9a; margin-top: 4px; }

.page-content .feature-list {
display: flex;
flex-direction: column;
gap: 8px;
}

.page-content .feature-list .feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.04);
}

.page-content .feature-list .feature-item i {
font-size: 20px;
color: #00f5d4;
width: 32px;
text-align: center;
}

.page-content .feature-list .feature-item .info .title {
font-size: 14px;
font-weight: 600;
color: #e0ecff;
}

.page-content .feature-list .feature-item .info .sub {
font-size: 12px;
color: #5a7a9a;
}

/* ============================================================
	ФОРМА РЕГИСТРАЦИИ / ВХОДА
	============================================================ */
.auth-section {
padding: 12px 16px 20px;
}

.auth-container {
background: rgba(255, 255, 255, 0.02);
border-radius: 24px;
padding: 24px 20px;
border: 1px solid rgba(0, 255, 180, 0.06);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

.auth-tabs {
display: flex;
gap: 10px;
margin-bottom: 24px;
background: rgba(255, 255, 255, 0.02);
border-radius: 50px;
padding: 4px;
border: 1px solid rgba(255, 255, 255, 0.04);
}

.auth-tab {
flex: 1;
padding: 10px 16px;
border: none;
border-radius: 40px;
font-size: 14px;
font-weight: 700;
background: transparent;
color: #5a7a9a;
transition: 0.3s;
cursor: pointer;
font-family: inherit;
}

.auth-tab.active {
background: linear-gradient(135deg, rgba(0, 255, 180, 0.15), rgba(0, 180, 216, 0.15));
color: #00f5d4;
box-shadow: 0 0 30px rgba(0, 255, 180, 0.05);
}

.auth-form {
display: none;
flex-direction: column;
gap: 16px;
}

.auth-form.active { display: flex; }

.auth-form .form-group {
display: flex;
flex-direction: column;
gap: 4px;
}

.auth-form .form-group label {
font-size: 12px;
font-weight: 600;
color: #9ab0d0;
letter-spacing: 0.3px;
}

.auth-form .form-group input {
padding: 12px 16px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
color: #e8f0ff;
font-size: 14px;
transition: 0.3s;
outline: none;
font-family: inherit;
}

.auth-form .form-group input:focus {
border-color: rgba(0, 255, 180, 0.3);
box-shadow: 0 0 30px rgba(0, 255, 180, 0.05);
background: rgba(255, 255, 255, 0.04);
}

.auth-form .form-group input::placeholder { color: #3a5a7a; }

.auth-submit {
padding: 14px;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 800;
background: linear-gradient(135deg, #00f5d4, #00b4d8);
color: #050d1e;
cursor: pointer;
transition: 0.3s;
margin-top: 4px;
font-family: inherit;
box-shadow: 0 6px 30px rgba(0, 255, 180, 0.15);
}

.auth-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 40px rgba(0, 255, 180, 0.25);
}

.auth-submit:active { transform: scale(0.96); }

.auth-message {
text-align: center;
font-size: 13px;
margin-top: 2px;
min-height: 20px;
color: #5a7a9a;
}

.auth-message.success { color: #00f5d4; }
.auth-message.error { color: #ff6b8a; }

.auth-switch {
text-align: center;
font-size: 13px;
color: #5a7a9a;
margin-top: 2px;
}

.auth-switch span {
color: #00f5d4;
cursor: pointer;
font-weight: 700;
transition: 0.3s;
}

.auth-switch span:hover { text-shadow: 0 0 20px rgba(0, 255, 180, 0.2); }

/* ============================================================
	НИЖНЕЕ МЕНЮ
	============================================================ */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 62px;
background: rgba(4, 10, 25, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1500;
border-top: 1px solid rgba(0, 255, 180, 0.06);
padding: 0 6px;
}

.bottom-nav .nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
font-size: 9px;
font-weight: 600;
color: #5a7a9a;
transition: 0.3s;
cursor: pointer;
padding: 4px 10px;
border-radius: 14px;
position: relative;
background: none;
border: none;
font-family: inherit;
text-decoration: none;
}

.bottom-nav .nav-item i { font-size: 20px; transition: 0.3s; }
.bottom-nav .nav-item span { font-size: 9px; letter-spacing: 0.3px; }

.bottom-nav .nav-item.active {
color: #00f5d4;
}

.bottom-nav .nav-item.active i {
text-shadow: 0 0 20px rgba(0, 255, 180, 0.3);
}

.bottom-nav .nav-item.active::before {
content: '';
position: absolute;
top: -1px;
left: 30%;
right: 30%;
height: 2px;
background: linear-gradient(90deg, #00f5d4, #00b4d8);
border-radius: 4px;
}

.bottom-nav .nav-item:active { transform: scale(0.9); }

/* ============================================================
	АДАПТИВ
	============================================================ */
@media (max-width: 480px) {
.header-top { height: 56px; padding: 0 12px; }
.logo { font-size: 18px; }
.logo i { font-size: 18px; }
.balance { padding: 4px 10px; font-size: 11px; border-radius: 24px; gap: 4px; }
.balance i { font-size: 12px; }
.lang-current { padding: 3px 7px 3px 6px; font-size: 10px; border-radius: 24px; gap: 3px; }
.lang-current .flag { font-size: 14px; }
.lang-current .label { font-size: 9px; }
.lang-current .arrow { font-size: 7px; }
.lang-dropdown { min-width: 100px; right: -4px; padding: 4px; }
.lang-dropdown .lang-option { padding: 6px 10px; font-size: 11px; gap: 6px; }
.lang-dropdown .lang-option .flag { font-size: 15px; }
.lang-dropdown .lang-option .label { font-size: 11px; }
.header-menu { padding: 0 8px 8px; gap: 3px; }
.header-menu .menu-item { font-size: 11px; padding: 6px 12px; gap: 4px; }
.header-menu .menu-item i { font-size: 11px; }
main { padding-top: 110px; }
.carousel-container { height: 160px; border-radius: 20px; }
.carousel-slide .slide-title { font-size: 24px; }
.carousel-slide .slide-sub { font-size: 12px; }
.carousel-slide { padding: 16px 20px; }
.carousel-arrow { width: 28px; height: 28px; font-size: 11px; }
.carousel-arrow.prev { left: 6px; }
.carousel-arrow.next { right: 6px; }
.carousel-dots .dot { width: 6px; height: 6px; }
.carousel-dots .dot.active { width: 18px; }
.page-content .card-grid { gap: 8px; }
.page-content .card-grid .item-card { padding: 12px; }
.page-content .card-grid .item-card .icon { font-size: 24px; }
.page-content .card-grid .item-card .name { font-size: 12px; }
.page-content .card-grid .item-card .desc { font-size: 10px; }
.auth-container { padding: 18px 14px; }
.auth-tab { font-size: 12px; padding: 8px 12px; }
.auth-form .form-group input { padding: 10px 14px; font-size: 13px; }
.auth-submit { font-size: 14px; padding: 12px; }
.bottom-nav { height: 56px; }
.bottom-nav .nav-item i { font-size: 18px; }
.bottom-nav .nav-item span { font-size: 8px; }
}

@media (max-width: 380px) {
.header-top { padding: 0 8px; gap: 4px; }
.logo { font-size: 16px; }
.logo i { font-size: 16px; }
.balance { font-size: 10px; padding: 3px 8px; }
.balance i { font-size: 10px; }
.lang-current { padding: 2px 5px 2px 4px; }
.lang-current .flag { font-size: 12px; }
.lang-current .label { font-size: 8px; }
.header-menu .menu-item { font-size: 10px; padding: 5px 10px; }
.header-menu .menu-item i { font-size: 10px; }
main { padding-top: 100px; }
.carousel-container { height: 140px; }
.carousel-slide .slide-title { font-size: 20px; }
.carousel-arrow { display: none; }
.page-content .card-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.page-content .card-grid .item-card { padding: 10px; }
.page-content .card-grid .item-card .icon { font-size: 20px; }
.page-content .card-grid .item-card .name { font-size: 11px; }
}

@media (min-width: 600px) {
.page-content .card-grid { grid-template-columns: repeat(3, 1fr); }
.carousel-container { height: 220px; }
}

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

.lang-switcher {
    position: relative;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 12px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    font-weight: 600;
    color: #9ab0d0;
    transition: 0.3s;
    cursor: pointer;
}

.lang-current:hover {
    background: rgba(0, 255, 180, 0.04);
    border-color: rgba(0, 255, 180, 0.1);
    color: #00f5d4;
}

.lang-current .flag {
    font-size: 18px;
    line-height: 1;
}

.lang-current .label {
    font-size: 13px;
    font-weight: 600;
}

.lang-current .arrow {
    font-size: 10px;
    transition: 0.3s;
    color: #5a7a9a;
    margin-left: 2px;
}

.lang-current:hover .arrow {
    color: #00f5d4;
}

/* ===== ВЫПАДАЮЩИЙ СПИСОК ===== */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 150px;
    background: rgba(4, 10, 30, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 14px;
    border: 1px solid rgba(0, 255, 180, 0.06);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    padding: 6px;
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 100;
}

/* ===== ОТКРЫТОЕ СОСТОЯНИЕ ===== */
.lang-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ===== ОПЦИИ В ВЫПАДАЮЩЕМ СПИСКЕ ===== */
.lang-dropdown .lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #9ab0d0;
    transition: 0.2s;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.lang-dropdown .lang-option:hover {
    background: rgba(0, 255, 180, 0.06);
    color: #00f5d4;
}

.lang-dropdown .lang-option .flag {
    font-size: 20px;
    line-height: 1;
}

.lang-dropdown .lang-option .label {
    font-size: 13px;
}

.lang-dropdown .lang-option.active {
    background: rgba(0, 255, 180, 0.08);
    color: #00f5d4;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 480px) {
    .lang-current {
        padding: 4px 10px 4px 8px;
        font-size: 11px;
        gap: 4px;
    }

    .lang-current .flag {
        font-size: 15px;
    }

    .lang-current .label {
        font-size: 11px;
    }

    .lang-current .arrow {
        font-size: 8px;
    }

    .lang-dropdown {
        min-width: 130px;
        right: -4px;
        padding: 4px;
    }

    .lang-dropdown .lang-option {
        padding: 8px 12px;
        font-size: 12px;
    }

    .lang-dropdown .lang-option .flag {
        font-size: 17px;
    }

    .lang-dropdown .lang-option .label {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .lang-current {
        padding: 3px 7px 3px 6px;
        font-size: 10px;
    }

    .lang-current .flag {
        font-size: 13px;
    }

    .lang-current .label {
        font-size: 9px;
    }

    .lang-current .arrow {
        font-size: 7px;
    }

    .lang-dropdown {
        min-width: 110px;
        right: -8px;
        padding: 4px;
    }

    .lang-dropdown .lang-option {
        padding: 6px 10px;
        font-size: 11px;
    }

    .lang-dropdown .lang-option .flag {
        font-size: 15px;
    }

    .lang-dropdown .lang-option .label {
        font-size: 11px;
    }
}








/* ============================================================
   БЛОК БОНУСА — ПРЕМИУМ КАЗИНО
   ============================================================ */

.bonus-block-premium {
    padding: 12px 16px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.bonus-card-premium {
    position: relative;
    border-radius: 32px;
    padding: 32px 24px 28px;
    overflow: hidden;
    background: linear-gradient(145deg, #0a1428, #060d1a);
    border: 1px solid rgba(255, 215, 0, 0.08);
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 215, 0, 0.02);
    animation: fadeUp 0.6s ease;
    text-align: center;
}

/* ===== ФОНОВЫЕ ЭФФЕКТЫ ===== */
.bonus-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: orbFloat 8s ease-in-out infinite alternate;
}

.orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15), transparent 70%);
    top: -100px;
    right: -80px;
    animation-delay: 0s;
}

.orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 255, 180, 0.08), transparent 70%);
    bottom: -80px;
    left: -60px;
    animation-delay: -3s;
}

.orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.05), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -5s;
}

@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(20px, 20px) scale(1.1);
    }
}

.bg-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 215, 0, 0.02) 50%, transparent 60%);
    animation: shineMove 8s ease-in-out infinite;
}

@keyframes shineMove {
    0% {
        transform: translateX(-100%) rotate(25deg);
    }
    100% {
        transform: translateX(200%) rotate(25deg);
    }
}

/* ===== ЧАСТИЦЫ ===== */
.particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    color: rgba(255, 215, 0, 0.15);
    font-size: 14px;
    animation: particleFloat 12s linear infinite;
}

.particle:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.particle:nth-child(2) { top: 20%; right: 8%; animation-delay: -2s; }
.particle:nth-child(3) { top: 60%; left: 3%; animation-delay: -4s; }
.particle:nth-child(4) { top: 70%; right: 5%; animation-delay: -6s; }
.particle:nth-child(5) { top: 40%; left: 10%; animation-delay: -8s; }
.particle:nth-child(6) { top: 85%; right: 12%; animation-delay: -10s; }
.particle:nth-child(7) { top: 15%; left: 50%; animation-delay: -3s; }
.particle:nth-child(8) { top: 50%; right: 2%; animation-delay: -7s; }

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.15;
    }
    50% {
        transform: translateY(-40px) rotate(180deg);
        opacity: 0.4;
    }
}

/* ===== ЛИМИТИРОВАННОЕ ПРЕДЛОЖЕНИЕ ===== */
.bonus-limited {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 18px;
    border-radius: 40px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.12), rgba(255, 107, 107, 0.12));
    border: 1px solid rgba(255, 215, 0, 0.06);
    animation: limitedPulse 2s ease-in-out infinite;
}

.bonus-limited span {
    font-size: 10px;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@keyframes limitedPulse {
    0%, 100% {
        border-color: rgba(255, 215, 0, 0.06);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.02);
    }
    50% {
        border-color: rgba(255, 215, 0, 0.15);
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.05);
    }
}

/* ===== ИКОНКА ===== */
.bonus-icon-premium {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 14px;
}

.icon-glow {
    position: relative;
    display: inline-block;
}

.icon-glow i {
    font-size: 52px;
    color: #ffd700;
    animation: giftPulsePremium 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.2));
}

@keyframes giftPulsePremium {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.15));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 60px rgba(255, 215, 0, 0.3));
    }
}

.icon-glow::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.04), transparent 70%);
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.6;
    }
}

.bonus-badge-premium {
    position: absolute;
    top: -6px;
    right: -48px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #050d1e;
    background: linear-gradient(135deg, #ffd700, #f5a623);
    padding: 3px 14px;
    border-radius: 30px;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.2);
    animation: badgePulsePremium 2s ease-in-out infinite;
}

@keyframes badgePulsePremium {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 60px rgba(255, 215, 0, 0.25);
        transform: scale(1.05);
    }
}

/* ===== КОНТЕНТ ===== */
.bonus-content-premium {
    position: relative;
    z-index: 1;
}

.bonus-title-premium {
    font-size: 20px;
    font-weight: 800;
    color: #e8f0ff;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

/* ===== СУММА ===== */
.bonus-amount-premium {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin: 8px 0 12px;
    animation: amountPulse 2s ease-in-out infinite;
}

@keyframes amountPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.bonus-currency-premium {
    font-size: 28px;
    font-weight: 600;
    color: #ffd700;
}

.bonus-number-premium {
    font-size: 64px;
    font-weight: 900;
    background: linear-gradient(135deg, #ffd700, #f5a623, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-shadow: 0 0 60px rgba(255, 215, 0, 0.1);
    animation: numberGlow 3s ease-in-out infinite;
}

@keyframes numberGlow {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.05));
    }
    50% {
        filter: drop-shadow(0 0 60px rgba(255, 215, 0, 0.15));
    }
}

.bonus-currency-text-premium {
    font-size: 22px;
    font-weight: 800;
    color: #ffd700;
    margin-left: 4px;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.1);
}

/* ===== ФИЧИ ===== */
.bonus-features {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 10px 0 8px;
}

.feature-tag {
    font-size: 12px;
    font-weight: 600;
    color: #7a9abb;
    background: rgba(255, 255, 255, 0.02);
    padding: 4px 14px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    animation: tagFade 0.6s ease both;
}

.feature-tag:nth-child(1) { animation-delay: 0.1s; }
.feature-tag:nth-child(2) { animation-delay: 0.2s; }
.feature-tag:nth-child(3) { animation-delay: 0.3s; }

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

.bonus-desc-premium {
    font-size: 13px;
    color: #5a7a9a;
    margin: 6px 0 18px;
    letter-spacing: 0.3px;
}

/* ===== КНОПКА ===== */
.bonus-btn-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 60px;
    background: linear-gradient(135deg, #ffd700, #f5a623, #ffd700);
    background-size: 200% 200%;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 4px 40px rgba(255, 215, 0, 0.15);
    animation: btnGradient 3s ease-in-out infinite;
    overflow: hidden;
    transition: 0.3s;
}

@keyframes btnGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.bonus-btn-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 60px rgba(255, 215, 0, 0.25);
}

.bonus-btn-premium:active {
    transform: scale(0.96);
}

.btn-text {
    position: relative;
    z-index: 2;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 800;
    color: #050d1e;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* ===== ТАЙМЕР ===== */
.bonus-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 10px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.timer-label {
    font-size: 12px;
    color: #5a7a9a;
}

.timer-value {
    font-size: 16px;
    font-weight: 700;
    color: #ffd700;
    font-variant-numeric: tabular-nums;
    min-width: 70px;
    text-align: center;
}

/* ===== ФУТЕР ===== */
.bonus-footer-premium {
    margin-top: 12px;
    font-size: 11px;
    color: #3a5a7a;
    letter-spacing: 0.3px;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */

@media (max-width: 480px) {
    .bonus-block-premium {
        padding: 8px 12px 16px;
    }

    .bonus-card-premium {
        padding: 24px 16px 20px;
        border-radius: 24px;
    }

    .bonus-limited span {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .icon-glow i {
        font-size: 40px;
    }

    .bonus-badge-premium {
        font-size: 8px;
        right: -40px;
        padding: 2px 10px;
    }

    .bonus-title-premium {
        font-size: 17px;
    }

    .bonus-currency-premium {
        font-size: 22px;
    }

    .bonus-number-premium {
        font-size: 48px;
    }

    .bonus-currency-text-premium {
        font-size: 18px;
    }

    .bonus-features {
        gap: 8px;
    }

    .feature-tag {
        font-size: 10px;
        padding: 3px 10px;
    }

    .btn-text {
        font-size: 15px;
        padding: 14px 24px;
    }

    .bonus-btn-premium {
        max-width: 100%;
    }

    .bonus-timer {
        padding: 4px 12px;
    }

    .timer-value {
        font-size: 14px;
        min-width: 60px;
    }
}

@media (max-width: 380px) {
    .bonus-card-premium {
        padding: 18px 12px 16px;
        border-radius: 20px;
    }

    .bonus-number-premium {
        font-size: 38px;
    }

    .bonus-currency-premium {
        font-size: 18px;
    }

    .bonus-currency-text-premium {
        font-size: 15px;
    }

    .bonus-title-premium {
        font-size: 15px;
    }

    .btn-text {
        font-size: 13px;
        padding: 12px 18px;
    }

    .icon-glow i {
        font-size: 34px;
    }

    .bonus-badge-premium {
        font-size: 7px;
        right: -34px;
        padding: 1px 8px;
    }

    .timer-value {
        font-size: 12px;
        min-width: 50px;
    }
}

@media (min-width: 600px) {
    .bonus-block-premium {
        max-width: 560px;
        padding: 16px 20px 24px;
    }

    .bonus-card-premium {
        padding: 40px 32px 32px;
        border-radius: 36px;
    }

    .icon-glow i {
        font-size: 60px;
    }

    .bonus-number-premium {
        font-size: 72px;
    }

    .bonus-title-premium {
        font-size: 22px;
    }
}

/* ============================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ
   ============================================================ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
</style>