:root { --primary: #FF6B6B; --secondary: #4ECDC4; --bg: #F7FFF7; --accent: #FFE66D; --dark: #2F2F2F; }
        
        body { 
            font-family: 'Nunito', sans-serif; 
            background-color: var(--bg); 
            margin: 0; 
            padding: 10px; 
            color: var(--dark); 
            -webkit-user-select: none; 
            user-select: none; 
        }

        #main-content { max-width: 1200px; margin: 0 auto; }
        
        .grid { 
            display: flex; 
            flex-direction: column-reverse; 
            gap: 20px; 
        }

        @media (min-width: 900px) {
            .grid { flex-direction: row; align-items: flex-start; }
            .player-box { flex: 0 0 450px; position: sticky; top: 20px; }
            .lists-side { flex: 1; }
        }

        .player-box { 
            background: white; 
            padding: 15px; 
            border-radius: 30px; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
            border: 4px solid white; 
            text-align: center;
        }
        
        /* Контейнер для YouTube чтобы сохранять пропорции */
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 177.77%; /* Соотношение сторон 9:16 для Shorts */
            height: 0;
            overflow: hidden;
            border-radius: 20px;
            background: #000;
            border: 3px solid var(--primary);
            display: none;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        
        audio { width: 100%; margin-top: 10px; }
        
        .download-btn { 
            display: none; 
            background: var(--accent); 
            color: #856404; 
            text-decoration: none; 
            padding: 15px; 
            border-radius: 15px; 
            margin-top: 15px; 
            font-weight: 900; 
            border: 2px dashed #e6c200; 
        }

        h2 { font-size: 20px; color: var(--primary); margin: 15px 0 10px 0; display: flex; align-items: center; gap: 10px; }
        
        .card { 
            background: white; 
            padding: 12px 15px; 
            border-radius: 18px; 
            cursor: pointer; 
            display: flex; 
            align-items: center; 
            gap: 12px; 
            margin-bottom: 8px; 
            border: 3px solid transparent; 
            box-shadow: 0 3px 0 #eee; 
            transition: 0.2s; 
        }
        
        .card:active { transform: scale(0.98); }
        .card.active { border-color: var(--secondary); background: #e0f7f5; }
        
        .icon-circle { 
            width: 40px; 
            height: 40px; 
            background: #f8f8f8; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 18px; 
        }

        .title { font-size: 15px; font-weight: 800; line-height: 1.2; }

        /* Кнопка Телеграм */
        .tg-floating-button {
            position: fixed;
            left: 0;
            bottom: 50px;
            z-index: 1000;
            background-color: #0088cc; /* Фирменный цвет Telegram */
            color: white;
            text-decoration: none;
            padding: 12px 20px;
            border-radius: 0 30px 30px 0; /* Закругление только справа */
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        .tg-floating-button:hover {
            background-color: #00aaff;
            transform: translateX(5px); /* Легкий эффект при наведении */
        }

        .tg-icon {
            width: 24px;
            height: 24px;
            fill: white;
        }

        /* Основной контейнер-обертка */
        .extra-links-wrapper {
            margin-top: 40px;
            padding: 25px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            background: #ffffff;
            border-radius: 30px;
            border: 4px dashed #48c9b0;
            box-sizing: border-box;
        }

        .extra-links-title {
            display: flex;
            justify-content: center;
            text-align: center;
            margin-bottom: 10px;
            color: #2c3e50;
            font-size: 24px;
            font-family: 'Segoe UI', Roboto, sans-serif;
        }

        /* Базовый стиль для всех кнопок */
        .extra-btn-el {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 16px 20px;
            text-decoration: none;
            border-radius: 20px;
            font-weight: 900;
            font-size: 16px;
            line-height: 1.2;
            transition: all 0.3s ease;
            font-family: 'Segoe UI', Roboto, sans-serif;
        }

        /* Цвета кнопок */
        .btn-yellow { background: #f1c40f; color: #856404; box-shadow: 0 5px 0 #d4ac0d; }
        .btn-yellow:hover { background: #f4d03f; transform: translateY(-3px); box-shadow: 0 8px 0 #d4ac0d; }

        .btn-teal { background: #48c9b0; color: white; box-shadow: 0 5px 0 #3dbbb2; }
        .btn-teal:hover { background: #76d7c4; transform: translateY(-3px); box-shadow: 0 8px 0 #3dbbb2; }

        .btn-red { background: #e74c3c; color: white; box-shadow: 0 5px 0 #d65555; }
        .btn-red:hover { background: #ff5e4d; transform: translateY(-3px); box-shadow: 0 8px 0 #d65555; }

        .btn-purple { background: #9b59b6; color: white; box-shadow: 0 5px 0 #8e44ad; }
        .btn-purple:hover { background: #af7ac5; transform: translateY(-3px); box-shadow: 0 8px 0 #8e44ad; }

        .btn-orange { background: #e67e22; color: white; box-shadow: 0 5px 0 #d35400; }
        .btn-orange:hover { background: #eb984e; transform: translateY(-3px); box-shadow: 0 8px 0 #d35400; }

        .btn-blue { background: #3498db; color: white; box-shadow: 0 5px 0 #2980b9; }
        .btn-blue:hover { background: #5dade2; transform: translateY(-3px); box-shadow: 0 8px 0 #2980b9; }

        .btn-pink { background: #fd79a8; color: white; box-shadow: 0 5px 0 #e84393; }
        .btn-pink:hover { background: #fab1a0; transform: translateY(-3px); box-shadow: 0 8px 0 #e84393; }

        .btn-green { background: #2ecc71; color: white; box-shadow: 0 5px 0 #27ae60; }
        .btn-green:hover { background: #58d68d; transform: translateY(-3px); box-shadow: 0 8px 0 #27ae60; }

        /* Эффект нажатия */
        .extra-btn-el:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0 rgba(0,0,0,0.2);
        }

/* Кнопка VK */

.vk-floating-button{
    position:fixed;
    left:0;
    bottom:120px;
    z-index:1000;

    background-color:#0077ff;

    color:white;
    text-decoration:none;

    padding:12px 20px;

    border-radius:0 30px 30px 0;

    font-weight:800;

    display:flex;
    align-items:center;
    gap:10px;

    box-shadow:4px 4px 15px rgba(0,0,0,0.2);

    transition:
        transform .3s ease,
        background-color .3s ease;
}

.vk-floating-button:hover{
    background-color:#2894ff;
    transform:translateX(5px);
}

.vk-icon{
    width:24px;
    height:24px;
    fill:white;
}

/* ===== Рекламная секция ===== */

.promo-sima-section{
    margin-top:40px;
    padding:25px;
    background:#ffffff;
    border-radius:30px;
    text-align:center;
    border:4px solid #FFE66D;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* Картинка */
.promo-sima-image{
    max-width:100%;
    border-radius:25px;
    display:block;
    margin:0 auto 20px auto;
}

/* Заголовок */
.promo-sima-title{
    font-size:34px;
    line-height:1.2;
    color:#FF6B6B;
    margin-bottom:25px;
    font-weight:900;
}

/* Кнопка */
.promo-sima-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:18px 32px;
    background:#4ECDC4;
    color:white;
    text-decoration:none;
    border-radius:20px;
    font-size:20px;
    font-weight:900;
    transition:all 0.3s ease;
    box-shadow:0 6px 0 #34b3aa;
}

/* Hover */
.promo-sima-btn:hover{
    transform:translateY(-4px);
    background:#67ddd5;
    box-shadow:0 10px 0 #34b3aa;
}

/* Нажатие */
.promo-sima-btn:active{
    transform:translateY(2px);
    box-shadow:0 3px 0 #34b3aa;
}

/* Адаптив */
@media(max-width:768px){

    .promo-sima-section{
        padding:18px;
        border-radius:24px;
    }

    .promo-sima-title{
        font-size:26px;
    }

    .promo-sima-btn{
        width:100%;
        font-size:18px;
        padding:16px 20px;
    }
}

/* =========================================================
   TELEGRAM / VK
   ========================================================= */

.tg-floating-button,
.vk-floating-button {
    position: fixed !important;

    left: 0 !important;

    z-index: 99999 !important;

    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    width: auto !important;
    height: auto !important;

    padding: 8px 14px !important;

    color: #fff !important;
    text-decoration: none !important;

    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    border-radius: 0 18px 18px 0 !important;

    box-shadow: 3px 3px 12px rgba(0,0,0,.2) !important;

    transform: none !important;
}

.tg-floating-button {
    bottom: 65px !important;
    background: #0088cc !important;
}

.vk-floating-button {
    bottom: 20px !important;
    background: #0077ff !important;
}

.tg-floating-button:hover {
    background: #00aaff !important;
}

.vk-floating-button:hover {
    background: #2894ff !important;
}

.tg-floating-button .tg-icon,
.vk-floating-button .vk-icon {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;
    max-width: 20px !important;

    min-height: 20px !important;
    max-height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    fill: #fff !important;
}