:root{--brand-primary:#10b981;--brand-primary-light:#34d399;--brand-primary-dark:#059669;--brand-primary-darker:#047857;--accent:var(--brand-primary);--accent-2:var(--brand-primary-light);--bg-1:#0f1123;--bg-2:#1b1e3d;--glass:rgba(255, 255, 255, 0.09);--glass-2:rgba(255, 255, 255, 0.06);--glass-border:rgba(255, 255, 255, 0.18);--text:#e9ecf1;--muted:#b7c0cf;--shadow:0 10px 40px rgba(0, 0, 0, 0.35)}*{box-sizing:border-box}body,html{height:100%}
        
        body{
            margin:0;
            font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
            color:var(--text);
            background:radial-gradient(1200px 800px at 10% 10%,rgba(28,32,80,.6) 0,transparent 70%),radial-gradient(1000px 700px at 90% 90%,rgba(38,27,83,.55) 0,transparent 65%),linear-gradient(135deg,var(--bg-1),var(--bg-2));
            overflow: hidden;
        }
        
        body.mobile-menu-open {
            overflow: hidden;
        }

body::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    background-image: url('/api/img/albums/placeholder.avif');
}

        .haze{position:fixed;inset:-20vmax;z-index:0;pointer-events:none;background:conic-gradient(from 0deg,color-mix(in oklab,var(--brand-primary-light),transparent 40%),color-mix(in oklab,var(--brand-primary),transparent 40%),color-mix(in oklab,var(--brand-primary-dark),transparent 45%),color-mix(in oklab,var(--brand-primary-darker),transparent 45%),color-mix(in oklab,var(--brand-primary-light),transparent 40%));filter:blur(80px) saturate(140%);opacity:.35;transform:rotate(0);animation:haze-rot 36s linear infinite}@keyframes haze-rot{to{transform:rotate(360deg)}}#bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}.vignette{position:fixed;inset:0;z-index:0;background:radial-gradient(80% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.5));pointer-events:none}
        
        .wrap{
            position: relative;
            z-index: 1;
            min-height: auto;
            display: contents;
            padding: 0;
        }
        
        .page-container {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
            perspective: 1000px;
            z-index: 1;
        }
        .page-section {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
            padding: 32px 20px 80px;
            visibility: hidden;
            opacity: 0;
            transform-origin: 50% 0%;
        }

        .card {
            width: min(760px, 92vw);
            padding: clamp(24px, 4vw, 48px);
            text-align: center;
            background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 45%),
                        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.03));
            backdrop-filter: blur(20px) saturate(140%);
            -webkit-backdrop-filter: blur(20px) saturate(140%);
            border: 1px solid var(--glass-border);
            box-shadow: 0 12px 40px color-mix(in oklab, var(--accent), transparent 75%),
                        inset 0 0 0 1.5px rgba(255, 255, 255, 0.15);
            border-radius: 28px;
            position: relative;
            overflow: visible;
            transform-style: preserve-3d;
        }

        .card::before{content:"";position:absolute;inset:-2px;background:conic-gradient(from 220deg,color-mix(in oklab,var(--accent),transparent 70%),color-mix(in oklab,var(--accent-2),transparent 70%),color-mix(in oklab,var(--accent),transparent 70%));filter:blur(44px);z-index:-1}h1{margin:0 0 12px;letter-spacing:.5px;font-size:clamp(42px,7vw,82px);line-height:.95;text-shadow:0 6px 30px rgba(20,40,120,.45)}html[data-script=latin] h1{font-family:'Metal Mania',system-ui,sans-serif;font-weight:400}html[data-script=cyrillic] h1{font-family:Montserrat,system-ui,sans-serif;font-weight:800}p.subtitle{margin:0 0 28px;font-size:clamp(16px,2.1vw,20px);color:var(--muted)}
        
        .timer{
            display:flex;
            justify-content:center;
            gap:clamp(10px,2.5vw,24px);
            margin:0 auto; 
        }
        .timer-block{min-width:clamp(60px,12vw,90px);background:rgba(0,0,0,.15);border-radius:12px;padding:10px 4px;border:1px solid transparent}.timer-value{display:block;font-size:clamp(28px,5vw,44px);font-weight:700;line-height:1.1;color:#fff}.timer-label{font-size:clamp(11px,1.8vw,14px);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
        
        .logo {
            position: absolute;
            top: clamp(16px, 3vw, 24px);
            left: clamp(16px, 3vw, 24px);
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }
        .logo a {
            font-family: 'Metal Mania', system-ui, sans-serif;
            font-size: clamp(24px, 4vw, 32px);
            line-height: 1;
            color: var(--text);
            text-decoration: none;
            font-weight: 400;
            text-shadow: 0 3px 15px rgba(0,0,0,.3);
            position: relative;
            display: inline-block;
        }
        
        @keyframes letterFadeIn {
            from {
                opacity: 0;
                transform: translateY(15px) rotateX(-90deg);
            }
            to {
                opacity: 1;
                transform: translateY(0) rotateX(0);
            }
        }
        
        .logo-letters {
            display: flex;
            perspective: 400px;
        }

        .logo-letters span {
            display: inline-block;
            opacity: 0;
            transform-origin: bottom center;
        }

        .logo-letters span:nth-child(1) { --delay: 0.1s; }
        .logo-letters span:nth-child(2) { --delay: 0.2s; }
        .logo-letters span:nth-child(3) { --delay: 0.3s; }
        .logo-letters span:nth-child(4) { --delay: 0.4s; }
        .logo-letters span:nth-child(5) { --delay: 0.5s; }
        .logo-letters span:nth-child(6) { --delay: 0.6s; }
        .logo-letters span:nth-child(7) { --delay: 0.7s; }
        .logo-letters span:nth-child(8) { --delay: 0.8s; }
        .logo-letters span:nth-child(9) { --delay: 0.9s; }

        @keyframes badgeFadeIn {
            from { 
                opacity: 0; 
                transform: translateY(10px) rotate(-10deg);
            }
            to   { 
                opacity: 1; 
                transform: translateY(0) rotate(-10deg);
            }
        }

        .logo a .badge {
            position: absolute; 
            top: 100%; 
            right: 0;
            font-family: Montserrat, system-ui, sans-serif;
            font-size: 10px;
            font-weight: 700;
            background: var(--brand-primary);
            color: var(--bg-1);
            padding: 2px 6px;
            border-radius: 6px;
            line-height: 1;
            margin-top: -8px; 
            margin-right: -5px; 
            opacity: 0;
            transform: translateY(10px) rotate(-10deg); 
            animation-delay: 1s; 
        }

        .lang-wrap{
            position:absolute;
            top:clamp(16px,3vw,24px);
            right:clamp(16px,3vw,24px);
            z-index:3;
            opacity: 0;
            visibility: hidden;
        }
.lang-toggle{border:2px solid color-mix(in oklab,var(--accent),#fff 50%);color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:700;transition:transform .2s ease,background .25s ease,border .25s ease,box-shadow .25s ease;display:inline-flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 0 0 0 color-mix(in oklab, var(--brand-primary), transparent 100%)}


.lang-toggle:hover{transform:translateY(-1px);background:rgba(255,255,255,.1);border-color:var(--accent);box-shadow:0 6px 24px color-mix(in oklab, var(--brand-primary), transparent 75%)}.lang-toggle img{width:22px;height:16px;border-radius:3px;object-fit:cover;display:block}.lang-portal{position:fixed;top:0;left:0;transform:translate(-9999px,-9999px);z-index:9999;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s ease}

.lang-portal.open{opacity:1;visibility:visible}


.listeners-trigger{
    position: absolute;
    top: clamp(12px, 2.5vw, 20px);
    right: clamp(12px, 2.5vw, 20px);
    z-index: 3;
    display: flex; 

    
    padding: 6px 10px;
    gap: 6px;
    font-size: 0.9rem;
    
   
    border: 2px solid color-mix(in oklab,var(--accent),#fff 40%);
    color: var(--text);
    background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: transform .2s ease,background .25s ease,border .25s ease,box-shadow .25s ease;
    cursor: pointer;
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-primary), transparent 100%);}


.listeners-trigger:hover{transform:translateY(-1px);background:rgba(255,255,255,.1);border-color:var(--accent);box-shadow:0 6px 24px color-mix(in oklab, var(--brand-primary), transparent 75%)}.lang-toggle img{width:22px;height:16px;border-radius:3px;object-fit:cover;display:block}.lang-portal{position:fixed;top:0;left:0;transform:translate(-9999px,-9999px);z-index:9999;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s ease}



        
        .lang-portal .panel,
        .support-portal .panel,
        .friends-portal .panel {
            background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
            backdrop-filter:blur(50px) saturate(130%);
            -webkit-backdrop-filter:blur(50px) saturate(130%);
            border:1px solid var(--glass-border);
            border-radius:16px;
            padding:10px;
            box-shadow:var(--shadow)
        }
        
        .panel-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            margin: 4px 6px 12px;
            text-align: left;
        }

        .lang-grid{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }

.lang-grid .lang-btn:last-child:nth-child(odd) {
    grid-column: span 2;
}
        
        .lang-btn{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);border-radius:12px;padding:8px 10px;cursor:pointer;display:flex;align-items:center;gap:8px;justify-content:flex-start;color:var(--text);font-weight:600;transition:border .2s ease,transform .2s ease,background .25s ease,box-shadow .25s ease;}
        .lang-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.1)}.lang-btn.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),transparent 80%) inset}.lang-btn img{width:22px;height:16px;border-radius:3px;object-fit:cover;display:block}
        
        .socials-fixed {
            position: fixed;
            right: clamp(8px, 2vw, 12px);
            bottom: clamp(8px, 2vw, 12px);
            z-index: 110;
        }
        
        .socials {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 12px 8px;
            background: rgba(30, 30, 45, 0.5); 
            border: 1px solid var(--glass-border);
            border-radius: 999px;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            opacity: 0;
            visibility: hidden;
        }
        
        .socials a {
            display:inline-flex;
            justify-content:center;
            align-items:center;
            width: 44px;
            height: 44px;
            border-radius:50%;
            background: transparent;
            transition: all 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
            text-decoration:none;
            padding: 8px;
            position: relative;
            
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
        }
        .socials a:hover{
            transform:scale(1.1) translateY(0);
            background:var(--glass-2);
        }
        .socials svg{
            width:100%;
            height:100%;
            fill: var(--muted);
            transition: fill 0.2s ease;
        }
        .socials a:hover svg {
            fill: var(--text);
        }
        
        .social-text {
            position: absolute;
            right: 100%;
            top: 50%;
            background: var(--brand-primary);
            color: var(--bg-1);
            padding: 6px 14px;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 700;
            white-space: nowrap;
            margin-right: 16px;
            
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(-50%) translateX(10px);
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        }
        
        .socials a:hover .social-text {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(-50%) translateX(0);
        }
        
        
.footer{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    display:flex;
    justify-content:center;
    padding:14px 16px;
    background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,0)); 
    font-size:14px;
    color:var(--muted);
    opacity: 0;
    visibility: hidden;
}
        
        .footer-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
        }
        
        .footer-separator {
            display: inline-block; 
            opacity: 0.5;
        }

        .footer-links {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 600;
        }
        
        
        .footer-links button {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            color: var(--text); 
            cursor: pointer;
            font: inherit;
            font-weight: 700; 
            border-bottom: 1px dashed color-mix(in oklab,var(--accent),#fff 35%); 
            transition: color 0.2s ease, border-color 0.2s ease;
        }
        .footer-links button:hover {
            color: var(--brand-primary-light);
            border-bottom-color: transparent;
        }
        .footer-links span {
            opacity: 0.5;
        }
        
        .footer-copyright {
            font-size: 13px;
        }
        
        .footer-copyright a{
            color:var(--text);
            text-decoration:none;
            font-weight:700;
            border-bottom:1px dashed color-mix(in oklab,var(--accent),#fff 35%);
            transition: color 0.2s ease, border-color 0.2s ease;
        }
        .footer-copyright a:hover{
            color: var(--brand-primary-light);
            border-bottom-color:transparent;
        }
       

        .socials-container-mobile {
            display: none;
        }

        @media (max-width: 1200px) {
            .sidebar {
                display: none;
            }
            
            .socials-fixed {
                display: none;
            }

            .socials-container-mobile {
                display: block;
                width: 100%;
            }
            
            .socials-container-mobile .socials {
                flex-direction: row;
                justify-content: center;
                gap: 12px;
                background: transparent;
                border: none;
                backdrop-filter: none;
                padding: 0;
                opacity: 1; 
                visibility: visible;
            }
            .socials-container-mobile .socials a {
                width: 40px;
                height: 40px;
                background: rgba(255,255,255,.08);
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
            .socials-container-mobile .socials a:hover {
                transform: scale(1.1);
                background: var(--accent);
            }
            .socials-container-mobile .socials svg {
                fill: var(--text);
            }
            .socials-container-mobile .social-text {
                display: none;
            }

          
            .footer {
                flex-direction: column; 
                align-items: center;
                gap: 12px;
                padding-bottom: calc(16px + env(safe-area-inset-bottom));
            }
            
            .footer-content {
                flex-direction: column; 
                gap: 10px;
            }
            
            .footer-separator {
                display: none; 
            }

            .footer-links button,
            .footer-copyright a {
                border-bottom: none;
            }
            .footer-links button:hover {
                color: var(--brand-primary-light);
            }

            .lang-wrap {
                right: 70px; 
            }
        }


        @media (max-width:1024px){
            .page-section{padding:28px 16px 84px}
            .card{width:min(820px,94vw)}
        }
        
        @media (max-width:768px){
            .page-section{padding:24px 14px 90px}
            .card{width:96vw;padding:clamp(18px,5vw,32px);border-radius:22px}p.subtitle{font-size:clamp(15px,2.8vw,18px);margin-bottom:24px}
            
            .footer {
                font-size:12px;
            }
            .footer-links {
                font-size: 12px;
            }
            .footer-copyright {
                font-size: 12px;
            }

            .lang-wrap {
                right: clamp(60px, 18vw, 70px);
            }
        }
        
        @media (max-width:600px){
            h1{font-size:clamp(28px,12vw,48px);line-height:1.05;letter-spacing:.2px;text-shadow:0 4px 18px rgba(0,0,0,.25)}p.subtitle{font-size:clamp(14px,4vw,17px);margin-bottom:16px}.card{padding:clamp(16px,5vw,26px);border-radius:18px;box-shadow:0 10px 26px rgba(0,0,0,.28)}
            
            .timer{margin-bottom:0;}
            .card::before{filter:blur(32px)}
            
            .lang-toggle{padding:10px 14px;min-height:44px;gap:8px;border-width:2px}.lang-toggle img{width:20px;height:14px;border-radius:2px}
            
            .lang-portal .panel{width:min(92vw,420px);max-height:52vh;overflow:auto;-webkit-overflow-scrolling:touch}
            
            .lang-btn{padding:10px 12px}
            
            .socials-container-mobile .socials {
                gap: 10px;
            }
            .socials-container-mobile .socials a{width:38px;height:38px;}
            
            .footer{
                padding-bottom:calc(12px + env(safe-area-inset-bottom));
                gap: 10px;
            }
            .footer-links, .footer-copyright {
                font-size: 11.5px;
                text-align: center;
            }
            
            .page-section {
                padding: 24px 14px 90px;
            }
            
            .logo {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .support-portal .panel {
                width:min(92vw,420px);
                max-height:52vh;
                overflow:auto;
                -webkit-overflow-scrolling:touch
            }
        }
        @media (max-width:380px){h1{font-size:clamp(26px,11.5vw,42px)}.timer-block{min-width:0}.timer-value{font-size:clamp(24px,6vw,32px)}.lang-toggle{padding:9px 12px;min-height:40px}}@media (prefers-reduced-motion:reduce){.haze{animation:none!important}.card,.lang-btn,.lang-toggle,.socials a{transition:none!important}}@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){.card,.lang-portal .panel{background:rgba(17,24,39,.75)}}.lang-btn img{flex:0 0 auto}.lang-btn .label,.lang-btn span{line-height:1.2}body,html{background-color:#053f35}@supports (padding:max(0px)){body{padding-bottom:env(safe-area-inset-bottom)}}
        

        .mobile-menu-toggle {
            display: none; 
            position: absolute;
            top: clamp(16px, 3vw, 24px);
            right: clamp(16px, 3vw, 24px);
            z-index: 1001; 
            width: 44px;
            height: 44px;
            padding: 0;
            background: transparent;
            border: none;
            color: var(--text);
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
        }
        
        .mobile-menu-toggle .icon-burger,
        .mobile-menu-toggle .icon-close {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        
        .mobile-menu-toggle .icon-close {
            opacity: 0;
            transform: translate(-50%, -50%) rotate(90deg);
        }

        .mobile-menu-toggle.is-open .icon-burger {
            opacity: 0;
            transform: translate(-50%, -50%) rotate(-90deg);
        }
        
        .mobile-menu-toggle.is-open .icon-close {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(0deg);
        }

        .mobile-nav {
            display: none; 
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-50px);
            transition: opacity 0.4s ease, visibility 0.4s, transform 0.4s ease;
        }
        
        .mobile-nav.is-open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .mobile-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
        }
        
        .mobile-nav a {
            text-decoration: none;
            color: var(--muted);
            font-size: 2rem; 
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: color 0.2s ease, transform 0.2s ease;
        }
        
        .mobile-nav a:hover {
            color: var(--text);
            transform: scale(1.05);
        }
        
        .mobile-nav a.active {
            color: var(--brand-primary);
        }
        
        .mobile-nav a .nav-text {
            display: block;
        }
        
        .mobile-nav a .material-icons-outlined {
            font-size: 2.2rem;
        }

        @media (max-width: 1200px) {
            .mobile-menu-toggle {
                display: block;
            }
            .mobile-nav {
                display: flex;
            }
        }

        .sidebar {
            position: fixed;
            left: clamp(8px, 2vw, 16px);
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
            padding: 0;
            background: transparent;
            border-radius: 0;
            transition: all 0.3s ease;
            opacity: 0;
            visibility: hidden;
        }
        .sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
        .sidebar li { position: relative; }
        .sidebar a::before { content: ''; position: absolute; display: none; width: 4px; height: 70%; background: var(--brand-primary); border-radius: 999px; left: -10px; top: 50%; transform: translateY(-50%); transition: all 0.25s ease; }
        .sidebar a { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 1.1rem; width: auto; height: auto; background: transparent; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
        .sidebar a .material-icons-outlined { font-size: 28px; line-height: 1; transition: all 0.25s ease; }
        .sidebar a:not(.active):hover .material-icons-outlined { transform: rotate(-15deg); }
        .sidebar a:not(.active):hover { color: var(--text); transform: translateX(5px); background: var(--glass-2); }
        .sidebar a.active:hover { color: var(--brand-primary-light); }
        .sidebar a.active { color: var(--brand-primary); background: transparent; width: auto; height: auto; transform: translateX(0); }
        .sidebar a.active::before { display: block; }
        .sidebar .nav-text { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; background: transparent; color: inherit; padding: 0; margin: 0; font-size: 1.1rem; font-weight: 600; }

        
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(16px, 3vw, 24px);
            margin-top: 24px;
        }
        
        .stat-block {
            background: var(--glass-2);
            border-radius: 16px;
            padding: clamp(16px, 3vw, 24px);
            text-align: center;
            border: 1px solid var(--glass-border);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .stat-block .material-icons-outlined {
            font-size: clamp(32px, 6vw, 44px);
            color: var(--brand-primary);
            line-height: 1;
        }
        
        .stat-block .stat-value {
            display: block;
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 700;
            color: var(--text);
            margin-top: 8px;
            line-height: 1.1;
            min-height: 1.1em; 
        }
        
        .stat-block .stat-label {
            display: block;
            font-size: clamp(12px, 2.5vw, 15px);
            color: var(--muted);
            margin-top: 6px;
            font-weight: 600;
        }

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

        .support-wrap {
            opacity: 0;
            visibility: hidden;
        }
        
.support-toggle {
    border: 2px solid var(--brand-primary-dark);
    background: var(--brand-primary);
    color: var(--bg-1); 
    box-shadow: 0 4px 20px color-mix(in oklab, var(--brand-primary), transparent 70%);
    padding: 8px 14px; 
    font-size: 0.95rem; 
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: transform .2s ease,background .25s ease,border .25s ease,box-shadow .25s ease, color .25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.support-toggle:hover {
    transform: translateY(-1px) scale(1.03); 
    background: var(--brand-primary-light);
    border-color: var(--brand-primary);
    color: var(--bg-1);
    box-shadow: 0 6px 24px color-mix(in oklab, var(--brand-primary), transparent 60%);
}
        .support-toggle .material-icons-outlined {
            font-size: 20px;
        }
        
        .support-portal {
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-9999px, -9999px);
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
        }
.support-portal .panel {
    
    width: 320px;
}
        .support-portal.open {
            opacity: 1;
            visibility: visible;
        }
        
        .support-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            min-width: 220px; 
        }
        
        .support-grid a {
            border: 1px solid rgba(255,255,255,.2);
            background: rgba(255,255,255,.06);
            border-radius: 12px;
            padding: 10px 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px; 
            justify-content: flex-start;
            color: var(--text);
            font-weight: 600;
            transition: border .2s ease,transform .2s ease,background .25s ease,box-shadow .25s ease;
            text-decoration: none;
            font-size: 1rem; 
        }
        .support-grid a:hover {
            transform: translateY(-1px);
            background: rgba(255,255,255,.1);
            border-color: var(--accent);
        }
        
        .support-grid a .support-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            object-fit: contain;
        }
        .support-icon[src*="cafecito"] {
            filter: invert(1); 
        }

        .friends-wrap {
            position: fixed;
            left: clamp(8px, 2vw, 12px);
            bottom: clamp(8px, 2vw, 12px);
            z-index: 90;
            opacity: 0;
            visibility: hidden;
        }
        
.friends-toggle {
    border: 2px solid color-mix(in oklab,var(--accent),#fff 40%);
    color: var(--text);
    background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: transform .2s ease,background .25s ease,border .25s ease,box-shadow .25s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-primary), transparent 100%); 
}
.friends-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.1);
    border-color: var(--accent); 
    box-shadow: 0 6px 24px color-mix(in oklab, var(--brand-primary), transparent 75%); 
}
        .friends-toggle .material-icons-outlined {
            font-size: 22px;
        }
        
        .friends-portal {
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-9999px, -9999px);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
        }
        .friends-portal.open {
            opacity: 1;
            visibility: visible;
        }
        
        .friends-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); 
            gap: 8px;
            max-width: 280px; 
        }
        
        .friends-grid a {
            display: flex; 
            align-items: center; 
            justify-content: center; 
            background: rgba(0,0,0,0.2);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--glass-border);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .friends-grid a:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .friends-grid img {
            display: block;
            width: 100%;
            height: 40px; 
            object-fit: contain; 
            padding: 5px; 
        }
        
        .friends-mobile-container {
            display: none;
            margin-top: 32px;
            border-top: 1px solid var(--glass-border);
            padding-top: 24px;
        }
        .friends-mobile-container h3 {
            font-family: 'Metal Mania', system-ui, sans-serif;
            font-weight: 400;
            font-size: clamp(28px, 6vw, 40px);
            margin: 0 0 20px;
            color: var(--brand-primary-light);
        }
        
        .friends-grid-mobile {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 12px;
        }
        
        .friends-grid-mobile a {
            display: flex; 
            align-items: center; 
            justify-content: center; 
            background: rgba(0,0,0,0.2);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--glass-border);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .friends-grid-mobile a:hover {
            transform: scale(1.03);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .friends-grid-mobile img {
            display: block;
            width: 100%;
            height: 50px; 
            object-fit: contain; 
            padding: 8px; 
        }
        
        @media (max-width: 1200px) {
            .friends-wrap, .friends-portal {
                display: none;
            }
            .friends-mobile-container {
                display: block;
            }
        }
        
        .scroll-indicator {
            position: fixed;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 50;
            width: 24px;
            height: 40px;
            border: 3px solid var(--muted);
            border-radius: 999px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        .scroll-indicator::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 8px;
            width: 4px;
            height: 8px;
            background: var(--muted);
            border-radius: 999px;
            transform: translateX(-50%);
            animation: scroll-bob 1.8s ease-in-out infinite;
        }
        @keyframes scroll-bob {
            0%   { transform: translate(-50%, 0); opacity: 0.8; }
            50%  { transform: translate(-50%, 10px); opacity: 1; }
            100% { transform: translate(-50%, 0); opacity: 0.8; }
        }
        
        @media (max-width: 600px) {
            .scroll-indicator {
                bottom: 120px; 
            }
            .socials-fixed {
                bottom: calc(40px + env(safe-area-inset-bottom));
            }
        }
        
     
        .inline-nav {
            display: none; 
            position: absolute;
            top: clamp(90px, 20vw, 130px); 
            left: 50%;
            transform: translateX(-50%); 
            z-index: 100;
            width: 100%;
            padding: 0 20px;
            text-align: center;
            white-space: nowrap; 
            overflow-x: auto; 
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; 
            opacity: 0; 
        }
        
        
        .inline-nav::-webkit-scrollbar {
             display: none; 
        }

        .inline-nav a,
        .inline-nav span {
            display: none; 
            vertical-align: middle;
            font-family: 'Montserrat', system-ui, sans-serif;
            font-weight: 700;
            color: var(--muted);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
            margin: 0 4px;
        }
        
        .inline-nav a.is-visible,
        .inline-nav span.is-visible {
             display: inline-block; 
        }

        .inline-nav a {
            font-size: 14px; 
            opacity: 0.7;
            transform: scale(1);
            cursor: pointer;
        }
        
        .inline-nav span {
            font-size: 14px;
            opacity: 0.5;
            margin: 0;
        }

        .inline-nav a.active {
            font-size: 18px; 
            color: var(--brand-primary-light);
            opacity: 1;
            transform: scale(1.1);
        }
        
        .inline-nav a:not(.active):hover {
            color: var(--text);
            opacity: 1;
        }

        @media (max-width: 1200px) {
            .inline-nav {
                display: block;
            }
        }
        
        @media (max-width: 600px) {
             .inline-nav {
                top: clamp(80px, 19vw, 110px); 
             }
             .inline-nav a {
                font-size: 13px;
                margin: 0 2px;
             }
             .inline-nav span {
                font-size: 13px;
             }
             .inline-nav a.active {
                font-size: 16px; 
             }
        }
        
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .modal-overlay.open {
            opacity: 1;
            visibility: visible;
        }
        
        .modal-content {
            background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: clamp(20px, 4vw, 32px);
            width: min(90vw, 600px);
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 20px 50px rgba(0,0,0,0.4);
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }
        
        .modal-overlay.open .modal-content {
            transform: scale(1);
        }
        
        .modal-content h2 {
            font-family: 'Metal Mania', system-ui, sans-serif;
            font-weight: 400;
            font-size: clamp(28px, 6vw, 40px);
            margin: 0 0 20px;
            color: var(--brand-primary-light);
            padding-right: 40px; 
        }
        
        .modal-content .modal-body {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--muted);
        }
        
        .modal-content .modal-body p {
            margin: 0 0 1em;
        }
        
        .modal-close {
            position: absolute;
            top: clamp(12px, 3vw, 20px);
            right: clamp(12px, 3vw, 20px);
            width: 36px;
            height: 36px;
            background: var(--glass-2);
            border: 1px solid var(--glass-border);
            border-radius: 50%;
            color: var(--text);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: background 0.2s ease, transform 0.2s ease;
        }
        .modal-close:hover {
            background: var(--glass);
            transform: rotate(90deg);
        }


#about-content-wrapper {

    max-height: clamp(300px, 45vh, 450px);
    
    
    overflow-y: auto;
    
    
    padding-right: 12px;
    

    overscroll-behavior: contain;
    
    touch-action: pan-y;
}




#about-content-wrapper::-webkit-scrollbar {
    width: 10px;
}


#about-content-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 4px 0; /* Небольшие отступы сверху/снизу дорожки */
}


#about-content-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px;
    
    border: 2px solid transparent;
    background-clip: content-box;
}

#about-content-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary-light);
}


@supports (scrollbar-color: auto) {
  #about-content-wrapper {
    scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
  }
}


@media (max-width: 600px) {
    #about-content-wrapper {
        max-height: 40vh; 
        
        padding-right: 8px;
    }
    
    #about-content-wrapper::-webkit-scrollbar {
        width: 8px;
    }
}

#about-content-wrapper {
    text-align: left;
}

#about-content-wrapper h2 {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(24px, 5vw, 32px);
    color: var(--brand-primary-light);
    margin: 0 0 16px 0;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,.3);
}

#about-content-wrapper h2:first-of-type {
    margin-top: 4px;
}

#about-content-wrapper h2:not(:first-of-type) {
    margin-top: 28px;
}

#about-content-wrapper p {
    font-size: 1rem; 
    line-height: 1.65; 
    color: var(--muted);
    margin: 0 0 16px 0;
}

#about-content-wrapper p:last-of-type {
    margin-bottom: 0;
}

#about-content-wrapper ul {
    list-style: none; 
    padding-left: 20px; 
    margin: 0 0 16px 0;
}

#about-content-wrapper li {
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
    padding-left: 24px;
    margin-bottom: 10px; 
}

#about-content-wrapper li::before {
    content: '🤘'; 
    position: absolute;
    left: 0;
    top: -2px; 
    font-size: 16px;
    color: var(--brand-primary); 
}
            
#rules-modal-content,
#privacy-modal-content {
    /* Ограничиваем максимальную высоту */
    max-height: clamp(300px, 60vh, 500px);
    
    /* Включаем скролл, если контент не помещается */
    overflow-y: auto;
    
    /* Отступ справа, чтобы текст не "прыгал" */
    padding-right: 12px;
    
    overscroll-behavior: contain;
    touch-action: pan-y;
    
    /* Выравнивание текста и стили */
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
}

#rules-modal-content p,
#privacy-modal-content p {
    margin: 0 0 1em;
}

/* Стили для заголовков внутри модалок */
#rules-modal-content h3,
#privacy-modal-content h3 {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 4vw, 28px);
    color: var(--brand-primary-light);
    margin: 20px 0 12px 0;
}
#rules-modal-content h3:first-of-type,
#privacy-modal-content h3:first-of-type {
    margin-top: 4px;
}

/* Стили для ссылок (которые создает autoLink) */
#rules-modal-content a,
#privacy-modal-content a {
    color: var(--brand-primary-light);
    text-decoration: none;
    border-bottom: 1px dashed var(--brand-primary-light);
    transition: color 0.2s ease, border-color 0.2s ease;
}

#rules-modal-content a:hover,
#privacy-modal-content a:hover {
    color: var(--text);
    border-bottom-color: transparent;
}

/* --- Стилизация самого скроллбара (Chrome, Safari, Edge) --- */
#rules-modal-content::-webkit-scrollbar,
#privacy-modal-content::-webkit-scrollbar {
    width: 10px;
}

#rules-modal-content::-webkit-scrollbar-track,
#privacy-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 4px 0; 
}

#rules-modal-content::-webkit-scrollbar-thumb,
#privacy-modal-content::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

#rules-modal-content::-webkit-scrollbar-thumb:hover,
#privacy-modal-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary-light);
}

/* --- Адаптация для Firefox --- */
@supports (scrollbar-color: auto) {
    #rules-modal-content,
    #privacy-modal-content {
    scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
    }
}

/* --- Адаптация для мобильных --- */
@media (max-width: 600px) {
    #rules-modal-content,
    #privacy-modal-content {
        max-height: 65vh; 
        padding-right: 8px;
    }
    
    #rules-modal-content::-webkit-scrollbar,
    #privacy-modal-content::-webkit-scrollbar {
        width: 8px;
    }
}
/* === КОНЕЦ Секции скролла модальных окон === */

.panel-subtitle {
            font-size: 0.875rem; /* 14px */
            font-weight: 400;
            color: var(--muted);
            margin: -8px 6px 14px;
            text-align: left;
            line-height: 1.4;
        }
/* === АНИМАЦИЯ СМЕНЫ ЯЗЫКА === */
.text-swapping {
    /* Плавный переход для появления */
    transition: opacity 0.15s ease-out, filter 0.15s ease-out;
    opacity: 1;
    filter: blur(0);
}

.text-swapping.swapping-out {
    /* Фаза 1: Исчезновение и размытие */
    opacity: 0 !important; /* !important нужен для перебивания inline-стилей, если они есть */
    filter: blur(4px);
    
    /* Ускоряем исчезновение */
    transition: opacity 0.15s ease-in, filter 0.15s ease-in;
}
/* === КОНЕЦ АНИМАЦИИ === */
/* === СТИЛИ ФОРМЫ ОБРАТНОЙ СВЯЗИ === */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
    margin-top: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* На десктопах ставим причину и тему в ряд */
@media (min-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.form-group label {
    font-size: 0.9rem; /* 14.4px */
    font-weight: 700;
    color: var(--muted);
    padding-left: 4px;
}

.form-group input[type="email"],
.form-group textarea,
.form-group select {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1rem;
    color: var(--text);
    transition: all 0.2s ease;
}

.form-group input[type="email"]::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-group input[type="email"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab,var(--accent),transparent 80%);
}

.form-group select {
    /* Стилизуем стрелку */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b7c0cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Кнопка отправки */
.form-submit {
    align-items: center;
    margin-top: 10px;
}

.form-submit button {
    width: 100%;
    padding: 16px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--bg-1);
    background: var(--brand-primary);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.form-submit button:hover:not(:disabled) {
    background: var(--brand-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--brand-primary);
}

.form-submit button:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* Лоадер */
.btn-loader {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-top-color: var(--bg-1);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none; /* Показывается JS */
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Сообщения об ошибках/успехе */
.form-message {
    padding: 14px 16px;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-message.success {
    background: color-mix(in oklab, var(--brand-primary-darker), transparent 70%);
    color: var(--brand-primary-light);
    border: 1px solid var(--brand-primary-dark);
}

.form-message.error {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171; /* Tailwind 'red-400' */
    border: 1px solid rgba(220, 38, 38, 0.3);
}
/* === СТИЛИ ДЛЯ hCaptcha === */

.captcha-wrapper {
    /* Центрируем капчу */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Отступ снизу, как у других элементов */
    margin: 0 0 10px;
}

.h-captcha {
    border-radius: 12px; /* Скругляем углы */
    overflow: hidden;    /* Прячем углы iframe */
    border: 1px solid var(--glass-border);
    line-height: 0; /* Убираем лишнее пространство */
}

/* === КОНЕЦ СТИЛЕЙ hCaptcha === */

/* === СТИЛИ КАСТОМНЫХ СЕЛЕКТОВ === */
.custom-select-wrapper {
    position: relative;
    user-select: none;
}

.custom-select {
    /* Используем те же стили, что и у .form-group input */
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1rem;
    color: var(--text);
    transition: all 0.2s ease;
    cursor: pointer;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-select-value {
    /* Предотвращаем перенос длинного текста */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
}

.custom-select-value.is-placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.custom-select-arrow {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Состояния .open (применяется к .custom-select-wrapper) */
.custom-select-wrapper.open .custom-select {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab,var(--accent),transparent 80%);
}

.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-2); /* Темный фон */
    border: 1px solid var(--brand-primary);
    border-radius: 12px;
    margin-top: 8px;
    z-index: 10;
    
    max-height: 200px;
    overflow-y: auto;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-option {
    padding: 12px 16px;
    font-size: 1rem;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-option:hover,
.custom-option.is-focused {
    background: var(--glass);
    color: var(--text);
}

.custom-option.is-selected {
    background: var(--brand-primary-dark);
    color: var(--text);
    font-weight: 700;
}

/* Стили скроллбара для опций */
.custom-options::-webkit-scrollbar {
    width: 8px;
}
.custom-options::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.custom-options::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px;
}
@supports (scrollbar-color: auto) {
    .custom-options {
        scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
        scrollbar-width: thin;
    }
}
/* === КОНЕЦ СТИЛЕЙ СЕЛЕКТОВ === */

/* === ИСПРАВЛЕНИЕ: Компактная форма (v5) + Фикс размера H1 === */

/* 1. Уменьшаем H1 для ВСЕХ секций, КРОМЕ главной (#home) */
/* Это освободит много места */
.page-section:not(#home) .card h1 {
    /* Используем шрифт поменьше, как в модальных окнах */
    font-size: clamp(28px, 6vw, 40px);
    margin-bottom: 20px; /* Стандартный отступ снизу */
}

/* 2. Убираем любую прокрутку, которую я добавлял ранее */
#contact-form {
    max-height: none;
    overflow-y: visible;
    padding: 0;
    margin-top: -45px; /* Сбрасываем, чтобы установить ниже */
}

/* 3. Делаем всю форму компактнее */
.contact-form {
    gap: 14px;         /* Уменьшаем главный верт. отступ (было 20px) */
    margin-top: 16px;  /* Уменьшаем отступ от заголовка (было 24px) */
}

/* 4. Уменьшаем грид с селектами */
.form-grid {
    gap: 14px; /* (было 20px) */
}

/* 5. Уменьшаем отступ между лейблом и полем */
.form-group {
    gap: 5px; /* (было 8px) */
}

/* 6. Уменьшаем сами лейблы */
.form-group label {
    font-size: 0.85rem; /* (было 0.9rem) */
}

/* 7. Делаем поля (input, select, textarea) ниже */
.form-group input[type="email"],
.form-group textarea,
.custom-select { /* Применяем и к кастомному селекту */
    padding-top: 11px;    /* (было 14px) */
    padding-bottom: 11px; /* (было 14px) */
    border-radius: 10px;  /* (было 12px) */
    font-size: 0.95rem;   /* (было 1rem) */
}

/* 8. Уменьшаем опции в выпадающем списке */
.custom-option {
    padding: 10px 14px;
    font-size: 0.95rem;
}

/* 9. Уменьшаем текстовое поле */
.form-group textarea {
    min-height: 80px; /* (было 120px) */
}

/* 10. Уменьшаем отступы вокруг капчи */
.captcha-wrapper {
    margin-top: 4px;
    margin-bottom: 4px; /* (было 10px) */
}

/* 11. Уменьшаем отступ перед кнопкой */
.form-submit {
    margin-top: 4px; /* (было 10px) */
}

/* 12. Делаем кнопку ниже */
.form-submit button {
    padding-top: 12px;    /* (было 16px) */
    padding-bottom: 12px; /* (было 16px) */
    font-size: 1rem;      /* (было 1.1rem) */
}
/* === КОНЕЦ ИСПРАВЛЕНИЯ === */
/* === КАСТОМНЫЙ СКРОЛЛ ДЛЯ TEXTAREA === */
textarea::-webkit-scrollbar {
    width: 10px;
}

textarea::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 4px 0;
}

textarea::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary-light);
}

/* Firefox */
@supports (scrollbar-color: auto) {
  textarea {
    scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
  }
}

/* Адаптация для мобильных */
@media (max-width: 600px) {
  textarea::-webkit-scrollbar {
    width: 8px;
  }
}
/* === ЛОГИКА СМЕНЫ ЛОГОТИПА === */

/* 1. Возвращаем стартовую анимацию через классы */
.logo-letters.initial-animate span {
    animation: letterFadeIn 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    animation-delay: var(--delay);
}

.badge.initial-animate {
    animation: badgeFadeIn 0.6s ease-out forwards;
    animation-delay: 1s; /* Синхронизируем с оригиналом */
}

/* 2. Стилизация .logo-letters-alt (аналогично .logo-letters) */
.logo-letters-alt {
    display: flex; /* по умолчанию display: none; в inline-стиле */
    perspective: 400px;
}

.logo-letters-alt span {
    display: inline-block;
    opacity: 0;
    transform-origin: bottom center;
}

/* 3. Стилизация .badge-alt (аналогично .badge) */
.badge-alt {
    /* Копируем стили из .logo a .badge */
    position: absolute; 
    top: 100%; 
    right: 0;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    background: var(--brand-primary);
    color: var(--bg-1);
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
    margin-top: -8px; 
    margin-right: -5px; 
    opacity: 0;
    transform: translateY(10px) rotate(-10deg);
}

/* 4. Анимации, управляемые JS */

/* -- Буквы -- */
@keyframes letterFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
    to {
        opacity: 0;
        transform: translateY(-15px) rotateX(90deg);
    }
}

/* Класс для запуска анимации "IN" */
.logo-letters.animate-in span {
    opacity: 0; /* Сброс */
    transform: translateY(15px) rotateX(-90deg); /* Сброс */
    animation: letterFadeIn 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    animation-delay: var(--delay);
}

/* Класс для запуска анимации "OUT" */
.logo-letters.animate-out span {
    opacity: 1; /* Сброс */
    transform: translateY(0) rotateX(0); /* Сброс */
    animation: letterFadeOut 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
    animation-delay: var(--delay); /* Можно использовать тот же delay */
}

/* -- Бейджи -- */
@keyframes badgeFadeOut {
    from { 
        opacity: 1; 
        transform: translateY(0) rotate(-10deg);
    }
    to   { 
        opacity: 0; 
        transform: translateY(10px) rotate(-10deg);
    }
}

/* Класс для запуска анимации "IN" (копия существующей) */
.badge.animate-in {
    opacity: 0; /* Сброс */
    transform: translateY(10px) rotate(-10deg); /* Сброс */
    animation: badgeFadeIn 0.6s ease-out forwards;
    animation-delay: 0.5s; /* Задержка, чтобы появилось после букв */
}

/* Класс для запуска анимации "OUT" */
.badge.animate-out {
    opacity: 1; /* Сброс */
    transform: translateY(0) rotate(-10deg); /* Сброс */
    animation: badgeFadeOut 0.4s ease-in forwards;
    animation-delay: 0s; /* Сразу */
}

/* 5. Применение --delay для .logo-letters-alt[data-logo-set="2"] (11 букв, 0.05с шаг) */
[data-logo-set="2"] span:nth-child(1) { --delay: 0.05s; }
[data-logo-set="2"] span:nth-child(2) { --delay: 0.1s; }
[data-logo-set="2"] span:nth-child(3) { --delay: 0.15s; }
[data-logo-set="2"] span:nth-child(4) { --delay: 0.2s; }
[data-logo-set="2"] span:nth-child(5) { --delay: 0.25s; }
[data-logo-set="2"] span:nth-child(6) { --delay: 0.3s; } /* space */
[data-logo-set="2"] span:nth-child(7) { --delay: 0.35s; }
[data-logo-set="2"] span:nth-child(8) { --delay: 0.4s; }
[data-logo-set="2"] span:nth-child(9) { --delay: 0.45s; }
[data-logo-set="2"] span:nth-child(10) { --delay: 0.5s; }
[data-logo-set="2"] span:nth-child(11) { --delay: 0.55s; }

/* 6. Применение --delay для .logo-letters-alt[data-logo-set="3"] (14 букв, 0.05с шаг) */
[data-logo-set="3"] span:nth-child(1) { --delay: 0.05s; }
[data-logo-set="3"] span:nth-child(2) { --delay: 0.1s; }
[data-logo-set="3"] span:nth-child(3) { --delay: 0.15s; }
[data-logo-set="3"] span:nth-child(4) { --delay: 0.2s; }
[data-logo-set="3"] span:nth-child(5) { --delay: 0.25s; } /* пробел */
[data-logo-set="3"] span:nth-child(6) { --delay: 0.3s; }
[data-logo-set="3"] span:nth-child(7) { --delay: 0.35s; }
[data-logo-set="3"] span:nth-child(8) { --delay: 0.4s; } /* пробел */
[data-logo-set="3"] span:nth-child(9) { --delay: 0.45s; }
[data-logo-set="3"] span:nth-child(10) { --delay: 0.5s; }
[data-logo-set="3"] span:nth-child(11) { --delay: 0.55s; }
[data-logo-set="3"] span:nth-child(12) { --delay: 0.6s; }
[data-logo-set="3"] span:nth-child(13) { --delay: 0.65s; } /* пробел */
[data-logo-set="3"] span:nth-child(14) { --delay: 0.7s; } /* 💙 */

/* === КОНЕЦ ЛОГИКИ СМЕНЫ ЛОГОТИПА === */

/* === Логика режима WIP (Work in Progress) === */

/* 1. КОГДА РЕЖИМ WIP АКТИВЕН (.wip-mode на <body>) */

/* 1.1. Скрываем всю навигацию */
.wip-mode .sidebar,
.wip-mode .mobile-menu-toggle,
.wip-mode .mobile-nav,
.wip-mode .inline-nav,
.wip-mode .friends-wrap,
.wip-mode .friends-mobile,
.wip-mode .scroll-indicator {
    display: none !important;
}

/* 1.2. Убираем отступ от сайдбара на десктопе */
@media (min-width: 1024px) {
    .wip-mode .card,
    .wip-mode .footer,
    .wip-mode .socials-fixed {
        margin-left: 0;
    }
}

/* 1.3. Скрываем "живой" контент */
.wip-mode #live-block {
    display: none !important;
}

/* 1.4. Показываем WIP контент (таймер) */
.wip-mode #wip-block {
    display: block !important;
}


/* 2. КОГДА РЕЖИМ WIP НЕ АКТИВЕН (нет .wip-mode на <body>) */

/* 2.1. Скрываем WIP контент (таймер) */
body:not(.wip-mode) #wip-block {
    display: none !important;
}

/* 2.2. Показываем "живой" контент */
body:not(.wip-mode) #live-block {
    display: block !important;
}

/* 2.3. Навигация отображается по умолчанию (CSS не нужен) */

/* === Конец логики WIP === */
/* === PLAYER STYLES (ОБНОВЛЕННЫЙ БЛОК) === */

:root {
    /* Резервные цвета плеера (будут перезаписаны JS) */
    --player-bg-color: var(--bg-1);
    --player-accent-color: var(--brand-primary);
    --player-text-color: var(--text);
    --player-muted-color: var(--muted);
}

/* Этот класс будет добавлен на <body> через JS 
  после нажатия Play для смены темы
*/
.player-active {
    transition: background .8s ease-out, color .8s ease-out;
    
    /* Определение основных цветов плеера */
    --brand-primary: var(--player-accent-color);
    --brand-primary-light: color-mix(in oklab, var(--player-accent-color), white 20%);
    --brand-primary-dark: color-mix(in oklab, var(--player-accent-color), black 30%);
    --brand-primary-darker: color-mix(in oklab, var(--player-accent-color), black 40%);
    
    /* Переопределение --accent */
    --accent: var(--brand-primary);
    --accent-2: var(--brand-primary-light);

    --bg-1: var(--player-bg-color);
    --bg-2: color-mix(in oklab, var(--player-bg-color), black 30%);
    
    --text: var(--player-text-color);
    --muted: var(--player-muted-color);
}

/* Плавные переходы для элементов, которые меняют цвет.
  Это предотвратит "прыжок" цвета при активации .player-active
*/
.haze, body, .lang-toggle, .friends-toggle, .sidebar a,
.footer-links button, .footer-copyright a, .stat-block .material-icons-outlined,
.support-toggle, .support-grid a, .friends-grid a, .scroll-indicator,
.inline-nav a, .modal-close, #about-content-wrapper::-webkit-scrollbar-thumb,
.form-group input, .form-group textarea, .custom-select,
.custom-options::-webkit-scrollbar-thumb, .form-submit button {
    transition: all 0.5s ease-out;
}
/* === Конец плавных переходов === */


/* Стили самого плеера */
.player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 3vw, 20px); /* Уменьшен gap */
    width: 100%;
    margin-top: 0; /* Убран margin-top */
}

/* НОВЫЙ БЛОК: Горизонтальный контейнер для инфо */
.player-info-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 4vw, 20px);
    width: 100%;
}

.player-album-art {
    position: relative;
    /* ИЗМЕНЕНО: применил размеры и радиус из примера */
    width: clamp(100px, 18vw, 90px);
    height: clamp(100px, 18vw, 90px);
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    /* ИЗМЕНЕНО: применил тень из примера */
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
    perspective: 1000px; /* Для 3D-эффекта */
    /* ИЗМЕНЕНО: применил transition из примера */
    transition: transform .3s ease,box-shadow .3s ease;
    cursor: pointer; 
}


.player-album-art:hover {
    transform: scale(1.05); 
    /* ИЗМЕНЕНО: применил тень из примера */
    box-shadow: 0 10px 32px rgba(0,0,0,.5);
}

.player-album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transform-style: preserve-3d;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.player-album-art:hover img {
    transform: rotateX(5deg) rotateY(-5deg) translateZ(10px);
}

/* Класс для анимации смены обложки */
.player-album-art img.fading-out {
    opacity: 0;
    transform: scale(0.95);
}

.player-album-art .player-art-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
}

.player-info {
    text-align: left; /* Выравнивание по левому краю */
    flex: 1; /* Занять оставшееся место */
    min-width: 0; /* Для корректной работы flex-truncate */
}

.player-info h2 {
    /* font-family и font-weight управляются секциями [data-script] ниже */
    font-size: clamp(1.2rem, 3.5vw, 1.5rem);
    color: var(--text);
    margin: 0 0 4px;
    line-height: 1.3;
    min-height: 1.3em; /* Предотвращает "прыжок" высоты */
    
    /* Обрезка длинного текста */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* НОВАЯ ЛОГИКА ШРИФТОВ */
//html[data-script=latin] .player-info h2 {
//    font-family: 'Metal Mania', system-ui, sans-serif;
//   font-weight: 400;
//}
//html[data-script=cyrillic] .player-info h2 {
//    font-family: 'Montserrat', system-ui, sans-serif;
//    font-weight: 800;
//}
/* КОНЕЦ ЛОГИКИ ШРИФТОВ */

.player-info h2 {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
}


.player-info p {
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    color: var(--muted);
    margin: 0;
    min-height: 1.2em; /* Предотвращает "прыжок" высоты */
    
    /* Обрезка длинного текста */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    margin-top: 0; /* Убран margin-top */
}

.player-btn {
    background: var(--brand-primary);
    color: var(--bg-1); /* Цвет иконки будет зависеть от фона */
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Тень от акцентного цвета */
    box-shadow: 0 4px 15px color-mix(in oklab, var(--brand-primary), transparent 60%);
    transition: all 0.2s ease-out;
}

.player-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px color-mix(in oklab, var(--brand-primary), transparent 50%);
}

.player-btn .material-icons-outlined {
    font-size: 36px;
    line-height: 1;
}

.player-btn .icon-play,
.player-btn .icon-stop {
    display: none;
}

/* Начальное состояние: Play виден */
.player-btn:not(.is-playing) .icon-play {
    display: block;
}

/* Состояние "Играет": Stop виден */
.player-btn.is-playing .icon-stop {
    display: block;
}

.player-btn-icon {
    /* Копируем стили .listeners-trigger */
    border: 2px solid color-mix(in oklab,var(--accent),#fff 40%);
    color: var(--text);
    background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
    border-radius: 999px; /* Делаем кругом */
    
    /* * === ИСПРАВЛЕНИЕ ===
     * Используем padding: 6px. Это соответствует вертикальному
     * отступу оригинальных кнопок (у которых padding: 6px 10px),
     * что сделает кнопки одинаковыми по высоте.
    */
    padding: 6px;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-out;
    flex-shrink: 0; 
}
.player-btn-icon:hover {
    /* Копируем hover-стили .listeners-trigger */
    transform: translateY(-1px);
    background: rgba(255,255,255,.1);
    border-color: var(--accent);
    box-shadow: 0 6px 24px color-mix(in oklab, var(--brand-primary), transparent 75%);
    color: var(--text); /* Добавляем из старого hover */
}

.player-btn-icon .material-icons-outlined {
    font-size: 14px; /* Уменьшаем иконку, как у .listeners-trigger */
    transition: color 0.2s ease;
}

.player-btn-icon .material-icons-outlined {
    font-size: 18px;
    transition: color 0.2s ease;
}

.player-btn-icon .icon-on,
.player-btn-icon .icon-off {
    display: none;
}

/* По умолчанию (активно) - On виден */
.player-btn-icon.is-active .icon-on {
    display: block;
    color: var(--brand-primary); /* Показываем акцентный цвет */
}
.player-btn-icon.is-active {
    border-color: var(--brand-primary);
    box-shadow: 0 0 10px color-mix(in oklab, var(--brand-primary), transparent 80%);
}

/* Неактивно - Off виден */
.player-btn-icon:not(.is-active) .icon-off {
    display: block;
}

.player-volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 200px;
    color: var(--muted);
}

.player-volume-control .icon-volume {
cursor: pointer;
    transition: color 0.2s ease;
}

.player-volume-control:hover .icon-volume {
    color: var(--text);
}

/* Стилизация ползунка громкости */
input[type="range"]#player-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--glass-2);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transition: all 0.5s ease-out;
}

input[type="range"]#player-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--text);
    border-radius: 50%;
    border: none;
    transition: background 0.2s ease;
}

input[type="range"]#player-volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--text);
    border-radius: 50%;
    border: none;
    transition: background 0.2s ease;
}

input[type="range"]#player-volume-slider:hover::-webkit-slider-thumb { background: var(--brand-primary); }
input[type="range"]#player-volume-slider:hover::-moz-range-thumb { background: var(--brand-primary); }

/* Адаптация для мобильных */
@media (max-width: 600px) {
    .player-container {
        margin-top: 0;
    }
    .player-info-block {
        gap: 16px; /* Чуть меньше gap */
    }
    .player-controls {
        gap: 16px;
    }
    .player-btn {
        width: 54px;
        height: 54px;
    }
    .player-btn .material-icons-outlined {
        font-size: 32px;
    }
    .player-volume-control {
        max-width: 150px; /* Уменьшаем слайдер */
    }
}

/* === КОНЕЦ PLAYER STYLES === */

/* === СТИЛИ КАРАОКЕ (ПОЛНАЯ ЗАМЕНА) === */

.karaoke-container {
    /* 1. Абсолютное позиционирование, чтобы "вырвать" из потока */
    position: absolute;
    top: 100%; /* Размещаем сразу ПОД карточкой (100% ее высоты) */
    left: 50%;
    transform: translateX(-50%);
    
    /* 2. Задаем ту же ширину, что и у .card */
    width: min(760px, 92vw);
    margin-top: 20px; /* Отступ от карточки */
    
    /* 3. Убираем рамку, т.к. блок теперь "снаружи" */
    border-top: none;
    padding-top: 0;
    
    /* 4. Стили для АНИМАЦИИ (по умолчанию блок скрыт) */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(20px); /* Начальное смещение для анимации */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    
    /* 5. Flex-стили для выравнивания */
    min-height: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* <-- ВОТ ЭТО НУЖНО ВЕРНУТЬ */
    
    /* 6. Важно, чтобы лирика не мешала кликать по карточке, когда она невидима */
    pointer-events: none; 
}

/* 5. Класс .is-visible (добавляется/удаляется через JS) для показа */
.karaoke-container.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto; /* Возвращаем кликабельность (если нужна) */
}

.karaoke-line {
    transition: opacity 0.3s ease-out;
    text-align: center;
    width: 100%;
    
    /* --- 🎯 РЕШЕНИЕ БАГА 2 (Обрезка) --- */
    
    /* УБИРАЕМ '...' и разрешаем перенос строк */
    white-space: normal;
    overflow: visible;
    
    /* 'text-wrap: balance' — это новое CSS свойство.
      Оно красиво отбалансирует строки, 
      чтобы они были примерно одинаковой длины.
      (Поддерживается в Chrome / Edge / Safari)
    */
    text-wrap: balance;
    
    /* --- 🎯 КОНЕЦ РЕШЕНИЯ БАГА 2 --- */
    
    /* Плавный переход для текста (из app2.js) */
    transition: opacity 0.15s ease-out, filter 0.15s ease-out;
}

/* Стилизация шрифта в зависимости от языка (как в плеере) */
//html[data-script=latin] .karaoke-line {
//    font-family: 'Metal Mania', system-ui, sans-serif;
//    font-weight: 400;
//}
//html[data-script=cyrillic] .karaoke-line {
//    font-family: 'Montserrat', system-ui, sans-serif;
//    font-weight: 800;
//}

.karaoke-line {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
}

.karaoke-current {
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 800;
    color: var(--brand-primary-light);
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.karaoke-next {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--muted);
    opacity: 0.7;
    margin-top: 12px;
    line-height: 1.4;
}

/* Адаптация для мобильных */
@media (max-width: 600px) {
    .karaoke-container {
        margin-top: 16px;
        min-height: 70px;
    }
    .karaoke-next {
        margin-top: 8px;
    }
}

/* === КОНЕЦ БЛОКА СТИЛЕЙ КАРАОКЕ === */

/* === Стили для "Лирика не найдена" === */

/* * Этот класс (.is-static) добавляется через JS, 
 * когда лирика не синхронизирована.
*/
.karaoke-container.is-static .karaoke-current {
    /* Используем не-metal шрифт для читаемости */
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 2.5vw, 1.3rem); /* Делаем шрифт чуть меньше */
    color: var(--muted); /* Используем приглушенный цвет */
    opacity: 0.9;
    
    /* Убираем анимацию и тень */
    text-shadow: none;
    transition: none;
}

/* * Когда лирика не найдена, мы принудительно 
 * скрываем вторую строку (.karaoke-next)
*/
.karaoke-container.is-static .karaoke-next {
    display: none;
}

/* === Стили для Компактного Модального Окна Обложки === */

/* 1. Сам контейнер (блок .modal-content-art) */
.modal-content-art {
    width: auto; /* Ширина по содержимому (по картинке) */
    max-width: min(90vw, 600px); /* Не шире 90% экрана или 600px */
    max-height: 90vh; /* Не выше 90% экрана */
    
    /* Убираем стили по умолчанию */
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    
    /* Важно, чтобы тень от картинки была видна */
    overflow: visible; 
    border-radius: 0;
}

/* 2. Заголовок (h2#album-art-modal-title) */
.modal-content-art #album-art-modal-title {
    position: absolute; /* Позиционируем поверх картинки */
    top: 0;
    left: 0;
    right: 0;
    z-index: 5; /* Над картинкой */
    margin: 0; /* Сбрасываем родные отступы h2 */
    
    /* Стилизация "стеклянного" заголовка, как в примере */
    background: rgba(15, 17, 35, 0.7); /* Темный фон из :root --bg-1 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    
    color: var(--text);
    font-size: clamp(1rem, 4vw, 1.15rem); /* Компактный шрифт */
    font-weight: 600;
    text-align: center;
    
    /* Отступы (по 45px по бокам для кнопки "X") */
    padding: 12px 45px;
    
    /* Скругляем только верхние углы */
    border-radius: 18px 18px 0 0;
}

/* 3. Кнопка "Закрыть" (.modal-close) */
.modal-content-art .modal-close {
    position: absolute; /* Позиционируем в углу */
    top: 8px; /* Отступ сверху */
    right: 8px; /* Отступ справа */
    z-index: 10; /* Поверх заголовка */
    
    /* Делаем кнопку компактной и круглой */
    width: 30px;
    height: 30px;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--text);
}

/* 4. Контейнер картинки (.modal-body-art) */
.modal-content-art .modal-body-art {
    padding: 0; /* Убираем отступы */
    max-height: none; /* Снимаем ограничение высоты (убирает скролл) */
    overflow: visible;
    line-height: 0; /* Убираем лишний отступ под картинкой */
}

/* 5. Сама картинка (img#album-art-modal-image) */
.modal-content-art #album-art-modal-image {
    display: block;
    width: 100%; /* Картинка заполняет контейнер */
    height: auto;
    
    /* ЭТО ГЛАВНОЕ: Ограничиваем высоту, чтобы не было скролла */
    max-height: 85vh; 
    
    /* Вписываем картинку, сохраняя пропорции (убирает скролл) */
    object-fit: contain; 
    
    /* Скругляем всю картинку (верхние углы скроются под заголовком) */
    border-radius: 18px; 
    
    /* Тень, как у всплывашки */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
/* === Плавная смена обложки в модальном окне === */
.modal-content-art #album-art-modal-image {
    /* Плавный переход для прозрачности */
    transition: opacity 0.4s ease-out;
}

.modal-content-art #album-art-modal-image.fading-out {
    /* Класс для исчезновения */
    opacity: 0;
}
/* === 2. СТИЛИ ЭКВАЛАЙЗЕРА (НОВАЯ ВЕРСИЯ) === */
.equalizer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; 
    display: flex;
    align-items: flex-end; 
    gap: 1px; 
    padding: 0; 
    z-index: 1; 
    pointer-events: none; 
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0.4; /* <-- ДОБАВЛЕНА ПРОЗРАЧНОСТЬ */
    transform: translateY(0);
}

.equalizer-container.is-hidden {
    opacity: 0;
    transform: translateY(100%); 
}

.eq-bar {
    flex-grow: 1; 
    flex-basis: 0; 
    
    background-color: var(--brand-primary); 
    border-radius: 3px 3px 0 0; 
    
    /* === ✅ ОПТИМИЗАЦИЯ === */
    height: 100%;             /* 1. Высота всегда 100% */
    transform-origin: bottom;  /* 2. Рост снизу вверх */
    transform: scaleY(0);      /* 3. Начальное состояние - 0 */
    
    /* 4. CSS-переход для цвета, но НЕ для transform (им рулит JS) */
    transition: background-color 0.5s ease-out; 
    /* === КОНЕЦ ОПТИМИЗАЦИИ === */
}

/* Адаптация для мобильных (оставляем старую, она скрывает кнопки) */
@media (max-width: 600px) {
    .equalizer-container {
        height: 40px; 
        gap: 1px;
    }
}
}
/*
================================================================
================================================================
                СТИЛИ ВИДЖЕТА СЛУШАТЕЛЕЙ (V4)
================================================================
================================================================
*/

/* === 1. СТИЛИ ТРИГГЕРА (КНОПКИ) - ИСПРАВЛЕНО === */

/*
 * FIX 1, 2, 3: Position & Resize Listeners Trigger
 * Мы переопределяем стили, которые кнопка наследовала от .friends-toggle
*/
.listeners-trigger {
    border: 2px solid color-mix(in oklab,var(--accent),#fff 40%);
    color: var(--text);
    background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: transform .2s ease,background .25s ease,border .25s ease,box-shadow .25s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-primary), transparent 100%); 
}

/* Применяем hover-эффект отдельно */
.listeners-trigger:hover  {
    transform: translateY(-1px);
    background: rgba(255,255,255,.1);
    border-color: var(--accent); 
    box-shadow: 0 6px 24px color-mix(in oklab, var(--brand-primary), transparent 75%); 
}


.listeners-trigger .material-icons-outlined {
    /* 4. Уменьшение размера (иконка) */
    font-size: 18px;
}

#listeners-trigger-count {
    min-width: 0.8em;
    text-align: center;
    color: inherit; /* <-- ИСПРАВЛЕНИЕ ЦВЕТА (было var(--bg-1)) */
    font-weight: 700;
}

/* 5. Убираем старые @media правила, т.к. кнопка теперь привязана к .card */
@media (max-width: 1200px) {
    .listeners-trigger {
        right: clamp(12px, 2.5vw, 20px); /* Сбрасываем старое правило */
    }
}
@media (max-width: 768px) {
    .listeners-trigger {
        right: clamp(12px, 2.5vw, 20px); /* Сбрасываем старое правило */
    }
}


/* === 2. СТИЛИ ВСПЛЫВАЮЩЕГО ОКНА (HOVER) === */
.listeners-portal {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-9999px, -9999px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    width: 320px;
}
.listeners-portal.open {
    opacity: 1;
    visibility: visible;
}
.listeners-portal .panel {
    background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--shadow);
    width: 100%;
}
.listeners-portal .panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 4px 6px 12px;
    text-align: left;
}
.listeners-portal-summary {
    display: flex;
    flex-direction: row;  /* <-- ИЗМЕНЕНО: теперь в строку */
    flex-wrap: wrap;      /* <-- ДОБАВЛЕНО: перенос на след. строку, если не влезают */
    align-items: center;
    gap: 8px 16px;        /* 8px отступ по вертикали, 16px между странами */
    padding: 4px 6px;
    margin-bottom: 12px;
}
.listeners-portal-summary .summary-item {
    display: inline-flex; /* Чтобы элемент занимал только нужное место */
    align-items: center;
    gap: 6px;             /* Чуть уменьшили отступ флага */
    font-size: 0.95rem;   /* Чуть компактнее шрифт */
    font-weight: 700;
    color: var(--text);
}
.summary-item img.flag-icon {
    width: 20px;
    height: 15px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
}
.listeners-portal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--glass-border);
    padding-top: 10px;
}

/* Общий стиль для элемента списка (и в портале, и в модалке) */
.listener-item {
    display: grid;
    grid-template-areas: 
        "flag country time"
        "flag agent agent";
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px 8px;
    padding: 8px;
    background: var(--glass-2);
    border-radius: 10px;
    border: 1px solid transparent;
}
.listener-item img.flag-icon {
    grid-area: flag;
    width: 32px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
}
.listener-item .country {
    grid-area: country;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.listener-item .time {
    grid-area: time;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-primary-light);
    display: flex;
    align-items: center;
    gap: 4px;
}
.listener-item .time .material-icons-outlined {
    font-size: 16px;
    line-height: 1;
}
.listener-item .agent {
    grid-area: agent;
    font-size: 0.85rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.listener-item .agent .material-icons-outlined {
    font-size: 16px;
    line-height: 1;
}

.listeners-portal-more {
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--glass-border);
}

/* === 3. СТИЛИ МОДАЛЬНОГО ОКНА (CLICK) === */

.modal-overlay#listeners-modal .modal-content-art,
.modal-overlay#playlist-modal .modal-content-art {
    border-radius: 20px; 
    overflow: hidden; 
    background: transparent; 
    box-shadow: var(--shadow); 
    width: min(90%, 500px); 
}

.modal-overlay#listeners-modal .modal-content-art > .modal-close,
.modal-overlay#playlist-modal .modal-content-art > .modal-close {
    position: absolute;
    top: 12px; 
    right: 12px;
    z-index: 20; 
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    padding: 2px; 
    width: 28px;  
    height: 28px; 
    opacity: 0.8;
}
.modal-overlay#listeners-modal .modal-content-art > .modal-close:hover,
.modal-overlay#playlist-modal .modal-content-art > .modal-close:hover {
    opacity: 1;
    background: rgba(255,255,255,0.2);
}
.modal-overlay#listeners-modal .modal-content-art > .modal-close .material-icons-outlined,
.modal-overlay#playlist-modal .modal-content-art > .modal-close .material-icons-outlined {
    font-size: 18px; 
}


.listeners-modal-subtitle {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(20px, 3.5vw, 26px); 
    color: var(--brand-primary-light);
    margin: 14px 0 14px 4px; 
    text-shadow: 0 0 6px rgba(var(--brand-primary-rgb), 0.3); 
}

.modal-body-scrollable {
    max-height: clamp(280px, 55vh, 450px); 
    overflow-y: auto; 
    overscroll-behavior: contain;
    touch-action: pan-y;
    text-align: left;
    color: var(--muted);
    background-color: var(--bg-2); 
    border-radius: 0 0 18px 18px; 
    padding: 10px clamp(10px, 3vw, 20px) 10px; 
    /* margin-right: -10px; */ /* <-- ✅ УБРАНО */
    padding-right: 12px; /* <-- ✅ ИЗМЕНЕНО (как у других модалок) */
}
.modal-body-scrollable .listeners-modal-subtitle:first-of-type {
    margin-top: 0;
}

.listeners-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); 
    gap: 10px; 
}
.listeners-modal-grid .summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px; 
    padding: 10px; 
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 10px; 
}
.listeners-modal-grid .summary-item .country-line {
    display: flex;
    align-items: center;
    gap: 6px; 
}
.listeners-modal-grid .summary-item img.flag-icon {
    width: 22px; 
    height: 16px; 
    border-radius: 3px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
}
.listeners-modal-grid .summary-item .country-name {
    font-size: 0.9rem; 
    font-weight: 700;
    color: var(--text);
}
.listeners-modal-grid .summary-item .country-count {
    font-size: 0.85rem; 
    font-weight: 600;
    color: var(--muted);
}

.listeners-modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px; 
}
.listeners-modal-list .listener-item {
    padding: 8px 10px; 
    border: 1px solid var(--glass-border);
}
.listeners-modal-list .listener-item .country {
    font-size: 0.9rem; 
}
.listeners-modal-list .listener-item .time {
    font-size: 0.85rem; 
}
.listeners-modal-list .listener-item .agent {
    font-size: 0.8rem; 
}

/* --- Стилизация скроллбара для .modal-body-scrollable --- */
.modal-body-scrollable::-webkit-scrollbar {
    width: 10px; /* <-- ✅ ИЗМЕНЕНО */
}
.modal-body-scrollable::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px; /* <-- ✅ ИЗМЕНЕНО */
    margin: 4px 0; 
}
.modal-body-scrollable::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px; /* <-- ✅ ИЗМЕНЕНО */
    border: 2px solid transparent;
    background-clip: content-box;
}
.modal-body-scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary-light);
}
@supports (scrollbar-color: auto) {
    .modal-body-scrollable {
        scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
        scrollbar-width: thin;
    }
}
@media (max-width: 600px) {
    .modal-body-scrollable {
        padding-right: 12px;
    }
    .modal-body-scrollable::-webkit-scrollbar {
        width: 6px; 
    }
}

/* === Обёртка для кнопок плеера (Слушатели + Плейлист) === */
.player-aside-buttons {
    position: absolute;
    top: clamp(12px, 2.5vw, 20px);
    right: clamp(12px, 2.5vw, 20px);
    z-index: 3;
    display: flex;
    gap: 8px; /* Расстояние между кнопками */
}

/* Сбрасываем позиционирование для кнопок внутри обёртки */
.player-aside-buttons .listeners-trigger {
    position: static; /* Убираем absolute */
    top: auto;
    right: auto;
}

/* === Новые стили для портала плейлиста === */
.playlist-section {
    padding: 4px 6px;
    margin-bottom: 12px;
}
.playlist-section:last-child {
    margin-bottom: 0;
}

.playlist-subtitle {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--brand-primary-light);
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--glass-border);
}

/* Секция "Сейчас играет" */
#playlist-portal-now {
    padding-top: 0;
    margin-bottom: 16px;
}
#playlist-portal-now .playlist-subtitle {
    margin-bottom: 12px;
}

/* Секция "Далее" */
#playlist-portal-next .playlist-subtitle {
    color: var(--text);
}

/* Секция "Прошлые" */
#playlist-portal-prev {
     margin-bottom: 0;
}
#playlist-portal-prev .playlist-subtitle {
    color: var(--muted);
    opacity: 0.8;
}

.playlist-portal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 200px; /* Ограничиваем высоту */
    overflow-y: auto;
    padding-right: 5px; /* Место для скроллбара */
    margin-right: -5px;
}

/* Стили для одного трека в списке */
.playlist-item {
    display: grid;
    grid-template-areas: "art info" "art info";
    grid-template-columns: auto 1fr;
    gap: 0 10px;
    padding: 6px;
    background: var(--glass-2);
    border-radius: 10px;
}

.playlist-item img.album-art {
    grid-area: art;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
}

.playlist-item .track-info {
    grid-area: info;
    min-width: 0;
        }
/* === Стили для модального окна Плейлиста (ИСПРАВЛЕННАЯ ВЕРСИЯ) === */
/* === ИСПРАВЛЕНИЕ ШАПОК МОДАЛЬНЫХ ОКОН (v4 - c правильной логикой) === */

/* 1. ОБЩИЕ стили для ОБЕИХ шапок (фон, отступы и т.д.) */
.modal-overlay#listeners-modal .modal-content-art h2,
.modal-overlay#playlist-modal .modal-content-art h2 {
    position: relative;
    z-index: 10;
    margin: 0;
    padding: 12px 40px; 
    background-color: var(--bg-1); 
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: clamp(22px, 4.5vw, 32px); /* Размер по умолчанию (для Metal Mania) */
    text-align: center;
}

/* 2. ШРИФТ ДЛЯ ЛАТИНИЦЫ (Metal Mania, зеленый) */
/* Это правило сработает, если data-script="latin" */
html[data-script=latin] .modal-overlay#listeners-modal .modal-content-art h2,
html[data-script=latin] .modal-overlay#playlist-modal .modal-content-art h2 {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
    color: var(--brand-primary-light); /* Зеленый цвет */
}

/* 3. ШРИФТ ДЛЯ КИРИЛЛИЦЫ (Montserrat, белый) */
/* Это правило сработает, если data-script="cyrillic" */
html[data-script=cyrillic] .modal-overlay#listeners-modal .modal-content-art h2,
html[data-script=cyrillic] .modal-overlay#playlist-modal .modal-content-art h2 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800; /* Жирный, как h1 */
    color: var(--brand-primary-light);
    /* Немного уменьшаем, т.к. Montserrat "крупнее", чем Metal Mania */
    font-size: clamp(18px, 4vw, 22px); 
}

/* 4. Убираем старый градиент, который был у модалки статистики */
.modal-overlay#listeners-modal .modal-content-art h2::after {
    display: none;
}

/* Отступы для секций (остаются без изменений) */
#playlist-modal-body .playlist-section {
    margin-bottom: 20px;
}
#playlist-modal-body .playlist-section:last-child {
    margin-bottom: 0;
}

/* === ИСПРАВЛЕНИЕ 1: ДВОЙНОЙ СКРОЛЛБАР === */
/* Контейнер списка */
.playlist-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* max-height: 220px; (УДАЛЕНО, чтобы убрать внутренний скроллбар) */
    
    /* Эти стили нужны, но max-height убран */
    overflow-y: auto; 
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-right: 8px;
}

/* Стили для одного трека в списке (по скриншоту) */
.playlist-item {
    display: grid;
    grid-template-areas: "art info" "art info";
    grid-template-columns: auto 1fr;
    gap: 0 12px;
    padding: 8px;
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.playlist-item img.album-art {
    grid-area: art;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
}

.playlist-item .track-info {
    grid-area: info;
    min-width: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

/* === ИСПРАВЛЕНИЕ 2: ШРИФТ === */
.playlist-item .track-title {
    /* font-family: 'Metal Mania' ... (УДАЛЕНО) */
    font-weight: 700; /* (ИЗМЕНЕНО НА 700, чтобы было жирным) */
    font-size: 1.1rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item .track-artist {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item .track-meta {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--muted);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Стили для "Now Playing" (остаются без изменений) */
.playlist-item.is-now-playing {
     border-color: var(--brand-primary);
     box-shadow: 0 0 0 3px color-mix(in oklab,var(--accent),transparent 80%) inset;
}
.playlist-item.is-now-playing .track-title {
    color: var(--brand-primary-light);
}

/* Скроллбар (теперь он применяется к .modal-body-scrollable, а не .playlist-modal-list) */
.playlist-modal-list::-webkit-scrollbar {
    width: 8px;
}
.playlist-modal-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 4px 0;
}
.playlist-modal-list::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.playlist-modal-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary-light);
}
@supports (scrollbar-color: auto) {
    .playlist-modal-list {
        scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
        scrollbar-width: thin;
    }
}
/* === СТИЛИ ДЛЯ ТАЙМЕРА ПЕРЕД ЛИРИКОЙ === */
        
/* === СТИЛИ ДЛЯ ТАЙМЕРА ПЕРЕД ЛИРИКОЙ === */
        
.pre-lyric-timer {
    position: absolute;
    
    /* --- ДЕСКТОП ( > 840px ) --- */
    /* Справа от контейнера лирики */
    left: 100%;
    margin-left: 15px;
    right: auto; /* Сброс */
    
    /* Y-позиция (top) управляется JS для точного выравнивания */
    top: 0; 
    margin-top: 6px; /* <-- ИСПРАВЛЕНИЕ 2: Смещение 5-7px */
    
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    pointer-events: none;
    
    /* Плавные переходы */
    transition: opacity 0.4s ease, 
                transform 0.4s ease, 
                visibility 0.4s, 
                background 0.2s linear, 
                top 0.3s ease-out, /* Плавность для JS-позиционирования */
                left 0.3s ease,    /* Плавность для @media */
                right 0.3s ease;
    
    /* * Фон (conic-gradient) 
     * --timer-progress-remaining (0-360deg) управляется JS
    */
    background: conic-gradient(
        var(--brand-primary) var(--timer-progress-remaining, 360deg), 
        rgba(255, 255, 255, 0.15) var(--timer-progress-remaining, 360deg)
    );
}

.pre-lyric-timer.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* "Дырка" бублика (внутренний элемент) */
.pre-lyric-timer::after {
    content: '';
    position: absolute;
    /* Отступ 4px от края = толщина 4px */
    inset: 4px;
    border-radius: 50%;
    /* Используем фон --bg-1 (основной фон страницы) */
    background: var(--bg-1);
    z-index: 1;
}

/* Цифра (внутри) */
.pre-lyric-timer .timer-value {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
    font-size: 32px;
    color: var(--text);
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    z-index: 2; /* Над ::after */
}

/* --- ПЛАНШЕТЫ ( < 840px ) --- */
/* (760px (лирика) + 60px (таймер) + 15px (отступ)) > 835px */
@media (max-width: 840px) {
     .pre-lyric-timer {
        /* ИСПРАВЛЕНИЕ: Перемещаем ВНУТРЬ контейнера, справа */
        left: auto;
        right: 5px;
        /* Y-позиция (top) все еще управляется JS! */
        margin-left: 0;
        width: 50px;
        height: 50px;
    }
    .pre-lyric-timer.is-visible {
        /* Полупрозрачный, т.к. может быть над текстом */
        opacity: 0.8; 
    }
     .pre-lyric-timer .timer-value {
        font-size: 26px;
    }
    .pre-lyric-timer::after {
        inset: 3px; /* Толщина 3px */
    }
}

/* --- МОБИЛЬНЫЕ ( < 480px ) --- */
@media (max-width: 480px) {
    .pre-lyric-timer {
        right: 0;
        width: 44px;
        height: 44px;
    }
    .pre-lyric-timer .timer-value {
        font-size: 24px;
    }
}
/* === LAST.FM BUTTON STATES === */

/* Базовые стили для SVG-иконки внутри кнопки */
#player-lastfm-toggle .lastfm-icon img {
    display: block; /* Убирает лишние пробелы под img */
    width: 24px;
    height: 24px;
    transition: filter 0.2s ease, transform 0.2s ease; /* Добавлен transform */
    filter: grayscale(100%) brightness(0.7); /* Изначально серый для "неактивен" */
}

/* Красный цвет для активной кнопки Last.fm */
#player-lastfm-toggle.is-active {
    color: #d90000; 
    border-color: #d90000;
    box-shadow: 0 0 10px rgba(217, 0, 0, 0.5);
}

/* Изменяем цвет иконки, когда кнопка активна */
#player-lastfm-toggle.is-active .lastfm-icon img {
    filter: none; /* Убираем серый фильтр, возвращаем оригинальный цвет SVG */
}

/* Спиннер при подключении */
#player-lastfm-toggle.is-connecting .lastfm-icon img {
    animation: spin 1s linear infinite;
}

/* Изменение фильтра при наведении на кнопку (для неактивного состояния) */
#player-lastfm-toggle:not(.is-active):hover .lastfm-icon img {
    filter: grayscale(0%) brightness(1); /* Делаем иконку цветной при наведении */
}

/* === LAST.FM BUTTON STATES === */

/* Контейнер для иконки, чтобы JS мог вставить <img> */
#player-lastfm-toggle .lastfm-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Размеры иконки (24px) + отступы (2*1px) = 26px */
    width: 16px; 
    height: 16px;
}

#player-lastfm-toggle .lastfm-icon-svg {
    display: block;
    width: 24px;
    height: 24px;
    color: var(--brand-primary);
    fill: currentColor;
    transition: transform 0.2s ease;
}


/* Красный цвет для активной кнопки Last.fm */
#player-lastfm-toggle.is-active {
    color: #d90000; 
    border-color: #d90000;
    box-shadow: 0 0 10px rgba(217, 0, 0, 0.5);
}

/* Изменяем цвет иконки, когда кнопка активна */
#player-lastfm-toggle.is-active .lastfm-icon-svg {
    filter: none; /* Убираем серый фильтр, возвращаем оригинальный цвет SVG */
}

/* Спиннер при подключении */
#player-lastfm-toggle.is-connecting .lastfm-icon-svg {
    animation: spin 1s linear infinite;
}
/* (Анимация @keyframes spin уже есть в вашем CSS) */


/* Изменение фильтра при наведении на кнопку (для неактивного состояния) */
#player-lastfm-toggle:not(.is-active):hover .lastfm-icon-svg {
    filter: grayscale(0%) brightness(1); /* Делаем иконку цветной при наведении */
}

/* === LAST.FM MODAL STYLES === */
#lastfm-modal .modal-content h2 {
    /* Стилизуем заголовок модалки Last.fm (красный) */
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
    color: #d90000;
}

#lastfm-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
    text-align: left;
}

#lastfm-user-status {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.lastfm-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.lastfm-setting-row span {
    font-weight: 600;
}

.lastfm-toggle-btn {
    font-family: 'Montserrat', system-ui, sans-serif;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Стиль кнопки "Выключено" */
.lastfm-toggle-btn:not(.is-active) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--muted);
}
.lastfm-toggle-btn:not(.is-active):hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Стиль кнопки "Включено" (зеленый) */
.lastfm-toggle-btn.is-active {
    background: color-mix(in oklab, var(--brand-primary), transparent 80%);
    color: var(--brand-primary-light);
}
.lastfm-toggle-btn.is-active:hover {
    background: color-mix(in oklab, var(--brand-primary), transparent 70%);
}

.lastfm-logout-btn {
    font-family: 'Montserrat', system-ui, sans-serif;
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Стили как у ошибки в форме */
    background: rgba(220, 38, 38, 0.15);
    color: #f87171; /* red-400 */
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.lastfm-logout-btn:hover {
    background: rgba(220, 38, 38, 0.25);
    color: #ef4444; /* red-500 */
    border-color: rgba(220, 38, 38, 0.5);
}

@media (min-width: 841px) {
    .karaoke-container {
        overflow: visible;
    }
}

/* === СТИЛИ ДЛЯ КНОПОК LIKE/DISLIKE === */

/* Общий стиль для кнопки голосования */
.player-vote-btn {
    position: relative; /* Для позиционирования badge */
}

/* Скрываем/показываем нужную иконку (как у других кнопок) */
.player-vote-btn .icon-on { display: none; }
.player-vote-btn .icon-off { display: block; }
.player-vote-btn.is-active .icon-on { display: block; }
.player-vote-btn.is-active .icon-off { display: none; }

/* Активный ЛАЙК (красный) */
#player-like-btn.is-active {
    color: #ef4444; /* red-500 */
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* Активный ДИЗЛАЙК (синий) */
#player-dislike-btn.is-active {
    color: #3b82f6; /* blue-500 */
    border-color: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* Стиль для badge (счетчика) */
.player-vote-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    
    background-color: #ef4444; /* По умолчанию красный (для лайков) */
    color: #ffffff;
    
    font-size: 11px;
    font-weight: 700;
    line-height: 18px; /* Выравнивание по центру */
    text-align: center;
    
    border-radius: 999px;
    border: 1px solid var(--bg-1); /* Рамка в цвет фона */
    
    display: flex; /* Используем flex для центровки */
    align-items: center;
    justify-content: center;
    
    /* Анимация появления/исчезновения */
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Показываем badge, если у него display: flex (управляется JS) */
.player-vote-badge[style*="display: flex"] {
    transform: scale(1);
    opacity: 1;
}

/* Цвет для badge дизлайков */
#player-dislike-count {
    background-color: #3b82f6; /* синий */
}

/* Запрещаем клики во время загрузки (добавляется JS) */
.player-vote-btn.is-loading {
    cursor: wait;
    opacity: 0.7;
}

/* === КОНЕЦ СТИЛЕЙ LIKE/DISLIKE === */

/* === COOKIE BANNER STYLES === */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990; /* High, but below portals/modals */
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    
    padding: 20px clamp(16px, 3vw, 24px);
    
    /* Glass effect */
    background: rgba(15, 17, 35, 0.7); /* --bg-1 with alpha */
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);

    /* Animation */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), 
                visibility 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cookie-banner.is-visible {
    transform: translateY(0);
    visibility: visible;
}

.cookie-banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cookie-banner-content .cookie-icon {
    font-size: 32px;
    color: var(--brand-primary-light);
    flex-shrink: 0;
}

.cookie-banner-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.5;
}

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Secondary button (Learn More) */
.cookie-btn.btn-secondary {
    /* Style like lang-toggle */
    border: 2px solid color-mix(in oklab,var(--accent),#fff 40%);
    color: var(--text);
    background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
}
.cookie-btn.btn-secondary:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.1);
    border-color: var(--accent);
}

/* Primary button (Accept) */
.cookie-btn.btn-primary {
    /* Style like support-toggle */
    border: 2px solid var(--brand-primary-dark);
    background: var(--brand-primary);
    color: var(--bg-1);
}
.cookie-btn.btn-primary:hover {
    transform: translateY(-1px) scale(1.03); 
    background: var(--brand-primary-light);
    border-color: var(--brand-primary);
}

/* Mobile styles */
@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        /* Add padding for safe area */
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    
    .cookie-banner-content .cookie-icon {
        font-size: 28px;
    }
    
    .cookie-banner-content p {
        font-size: 0.85rem;
    }

    .cookie-banner-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .cookie-banner-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .cookie-btn {
        text-align: center;
    }
}

/* Add modal content scroller for cookie modal */
#cookie-modal-content {
    max-height: clamp(300px, 60vh, 500px);
    overflow-y: auto;
    padding-right: 12px;
    overscroll-behavior: contain;
    touch-action: pan-y;
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
}
#cookie-modal-content p { margin: 0 0 1em; }

#cookie-modal-content::-webkit-scrollbar { width: 10px; }
#cookie-modal-content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 10px; margin: 4px 0; }
#cookie-modal-content::-webkit-scrollbar-thumb { background-color: var(--brand-primary); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
#cookie-modal-content::-webkit-scrollbar-thumb:hover { background-color: var(--brand-primary-light); }
@supports (scrollbar-color: auto) {
    #cookie-modal-content { scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2); scrollbar-width: thin; }
}
@media (max-width: 600px) {
    #cookie-modal-content { max-height: 65vh; padding-right: 8px; }
    #cookie-modal-content::-webkit-scrollbar { width: 8px; }
}

/* === PiP Button Absolute Positioning === */
#player-pip-toggle-btn {
    position: absolute;
    bottom: clamp(12px, 2.5vw, 20px);
    right: clamp(12px, 2.5vw, 20px);
    z-index: 3;
    
    /* JS будет управлять видимостью, 
      меняя 'display: none' на 'display: inline-flex' 
    */
}

/* === Контейнер для кнопок в правом нижнем углу === */
.player-bottom-right-buttons {
    position: absolute;
    bottom: clamp(12px, 2.5vw, 20px);
    right: clamp(12px, 2.5vw, 20px);
    z-index: 3;
    display: flex;
    gap: 8px; /* Расстояние между кнопками */
}

/* * Убираем 'position: absolute' у PiP-кнопки, 
 * так как теперь она внутри позиционированного контейнера
*/
#player-pip-toggle-btn {
    position: static;
    bottom: auto;
    right: auto;
}

/* Стили для иконки 'share' (она не имеет on/off состояния) */
#player-share-toggle-btn .icon-on {
    display: none;
}
#player-share-toggle-btn .icon-off {
    display: block;
}
/* Активное состояние кнопки "Поделиться" (когда портал открыт) */
#player-share-toggle-btn.is-active {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: 0 0 10px color-mix(in oklab, var(--brand-primary), transparent 80%);
}


/* === Стили для портала "Поделиться" (копия .support-portal) === */
.share-portal {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-9999px, -9999px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.share-portal .panel {
    /* Копируем стили .support-portal .panel */
    background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--shadow);
    width: 320px; /* Фиксированная ширина, как у support-portal */
}
.share-portal.open {
    opacity: 1;
    visibility: visible;
}

/* Стили для сетки иконок "Поделиться" */
.share-grid {
    display: flex;
    flex-direction: row; /* Горизонтальное расположение */
    justify-content: center; /* Центрируем иконки */
    gap: 16px; /* Расстояние между иконками */
    margin-top: 10px; /* Отступ от текста */
}

/* Стили для иконок (копия .socials a) */
.share-grid a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    transition: all 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    text-decoration: none;
    padding: 8px;
    position: relative;
}
.share-grid a:hover {
    transform: scale(1.1) translateY(-2px);
    background: var(--accent);
    border-color: var(--accent);
}
.share-grid a img {
    width: 24px;
    height: 24px;
    /* Убедимся, что SVG-иконки (если они inline) меняют цвет */
    fill: var(--text);
    filter: none; /* Сброс фильтров, если они есть */
}
.share-grid a:hover img {
    fill: var(--bg-1);
}

@media (max-width: 1200px) {
    .player-bottom-right-buttons {
        flex-direction: column-reverse;
    }
}
/* === НОВЫЕ СТИЛИ ДЛЯ ПОРТАЛА НАСТРОЕК === */

/* Используем .support-portal для стилизации фона/тени */
#settings-portal .panel {
    width: 280px; /* Немного уже, чем у "Support" */
}

.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.settings-separator {
    height: 1px;
    background: var(--glass-border);
    margin: 4px 0;
}

/* * Стилизуем кнопки внутри портала (.settings-btn)
 * (копируем стили из .support-grid a)
*/
.settings-btn {
    /* Сброс стилей <button> */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    
    /* Стили как у .support-grid a */
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px; 
    justify-content: flex-start;
    color: var(--text);
    font-weight: 600;
    transition: border .2s ease,transform .2s ease,background .25s ease,box-shadow .25s ease;
    text-decoration: none;
    font-size: 1rem;
    width: 100%; /* Убедимся, что кнопка на всю ширину */
}

.settings-btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.1);
    border-color: var(--accent);
}

/* Стили для иконок внутри кнопок */
.settings-btn .material-icons-outlined,
.settings-btn .lastfm-icon-container {
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: color 0.2s ease;
}

/* Контейнер иконки Last.fm */
.settings-btn .lastfm-icon-container .lastfm-icon-svg {
     width: 24px;
     height: 24px;
     /* Фильтры и состояния (is-active) управляются из player.js */
}

/* Лейбл (текст) */
.settings-btn .label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* * Логика вкл/выкл для кнопок-переключателей
 * (Lyrics, EQ, Colors)
*/
.settings-btn .icon-on { display: none; }
.settings-btn .icon-off { display: block; }

.settings-btn.is-active .icon-on { display: block; }
.settings-btn.is-active .icon-off { display: none; }

/* * Стилизация состояния .is-active 
 * (для Lyrics, EQ, Colors, Last.fm)
*/
.settings-btn.is-active {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab,var(--accent),transparent 80%) inset;
    color: var(--brand-primary-light);
}

.settings-btn.is-active .material-icons-outlined,
.settings-btn.is-active .lastfm-icon-container {
    color: var(--brand-primary);
}

/* Отдельный стиль для Last.fm (красный) */
#player-lastfm-toggle.is-active {
    border-color: #d90000;
    box-shadow: 0 0 0 3px rgba(217, 0, 0, 0.2) inset;
    color: #f87171; /* red-400 */
}
#player-lastfm-toggle.is-active .lastfm-icon-container {
    color: #d90000;
}
/* === КОНЕЦ СТИЛЕЙ ДЛЯ ПОРТАЛА НАСТРОЕК === */
/*
================================================================
================================================================
     ПОЛНЫЕ СТИЛИ СТРАНИЦЫ ЗАКАЗОВ (v18 - Фикс СТИЛЯ скроллбара модалки)
================================================================
================================================================
*/

/* --- 1. Карточка #order-card --- */
#order-card {
    width: min(840px, 94vw); 
    padding: clamp(12px, 2vw, 16px); 
}

/* --- 2. Элементы управления (ПОИСК + АЛФАВИТ В 1 СТРОКУ) --- */
.order-controls {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 12px; 
    align-items: center; 
    margin-bottom: 12px; 
}

/* --- 3. Стили поиска (Компактный) --- */
.order-search-wrapper {
    position: relative;
    width: 100%; 
}
.order-search-wrapper .material-icons-outlined {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 20px; 
    pointer-events: none;
}
#order-search-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 8px; 
    padding: 8px 12px 8px 40px; 
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.9rem; 
    color: var(--text);
    transition: all 0.2s ease;
}
#order-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
#order-search-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab,var(--accent),transparent 80%);
}

/* --- Стилизация "крестика" (X) в поле поиска --- */
#order-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none; 
    appearance: none;
    width: 20px; 
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
#order-search-input::-webkit-search-cancel-button:hover {
    opacity: 1;
    transform: rotate(90deg) scale(1.1);
}
/* --- КОНЕЦ БЛОКА КРЕСТИКА --- */


/* --- 4. Стили алфавитного фильтра (СУПЕР-КОМПАКТНЫЙ) --- */
.order-alphabet-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    gap: 3px; 
    width: 100%; 
}
.order-alphabet-filter button {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.7rem; 
    border: 1px solid var(--glass-border);
    background: var(--glass-2);
    color: var(--muted);
    border-radius: 5px; 
    padding: 0;
    min-width: 26px; 
    height: 26px; 
    cursor: pointer;
    transition: all 0.2s ease;
}
.order-alphabet-filter button:hover {
    background: var(--glass);
    color: var(--text);
}
.order-alphabet-filter button.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary-dark);
    color: var(--bg-1);
    transform: scale(1.05);
}

/* --- 5. Контейнер результатов (БЕЗ СКРОЛЛА) --- */
.order-results-container {
    min-height: 280px; 
    position: relative;
    margin-bottom: 12px; 
}

.order-loader,
.order-no-results {
    position: absolute;
    inset: 0;
    min-height: 280px; 
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 600;
}
.order-no-results .material-icons-outlined {
    font-size: 44px;
}

/* --- 6. Сетка (3 КОЛОНКИ) --- */
.order-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px; 
}

/* --- 7. Карточка трека (СУПЕР-КОМПАКТНАЯ) --- */
.order-track-card {
    display: grid;
    grid-template-columns: 36px 1fr; 
    grid-template-rows: auto auto auto; 
    grid-template-areas: 
        "art artist"
        "art title"
        "art album";
    gap: 0 8px; 
    padding: 4px; 
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 8px; 
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    position: relative; 
}
.order-track-card:hover {
    background: var(--glass);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.order-track-card .art {
    grid-area: art;
    width: 36px; 
    height: 36px; 
    border-radius: 4px; 
    object-fit: cover;
    background-color: var(--bg-1);
    align-self: center; 
}

.order-track-card .artist {
    grid-area: artist;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.85rem; 
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 36px; 
}
.order-track-card .title {
    grid-area: title;
    font-size: 0.75rem; 
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.order-track-card .album {
    grid-area: album;
    font-size: 0.7rem; 
    color: var(--muted);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-track-card .highlight {
    color: var(--brand-primary-light);
    background: color-mix(in oklab, var(--brand-primary), transparent 80%);
    border-radius: 3px;
    padding: 0 2px;
}

.order-track-card .time {
    position: absolute;
    top: 4px; 
    right: 6px; 
    font-size: 0.8rem; 
    font-weight: 700;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 2px; 
}
.order-track-card .time .material-icons-outlined {
    font-size: 12px; 
}

/* --- 8. Стили пагинации (Компактный) --- */
.order-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px; 
    flex-wrap: wrap; 
    margin-top: 12px; 
}
.order-pagination button {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.75rem; 
    border: 1px solid var(--glass-border);
    background: var(--glass-2);
    color: var(--muted);
    border-radius: 6px; 
    padding: 0;
    min-width: 30px; 
    height: 30px; 
    cursor: pointer;
    transition: all 0.2s ease;
}
.order-pagination button:hover:not(:disabled) {
    background: var(--glass);
    color: var(--text);
}
.order-pagination button.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary-dark);
    color: var(--bg-1);
    transform: scale(1.05);
}
.order-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- 9. Стили модального окна (СУПЕР-КОМПАКТНОЕ) --- */
.modal-overlay#order-modal .modal-content {
    width: min(90vw, 420px); 
    /* (ИСПРАВЛЕНО) ВОЗВРАЩАЕМ СКРОЛЛБАР */
    overflow-y: auto; 
    max-height: 90vh; 
    padding: clamp(12px, 3vw, 16px); 
}
.modal-overlay#order-modal .modal-content h2 {
    margin-bottom: 12px; 
}
.modal-overlay#order-modal .modal-body {
    max-height: none; 
    overflow-y: visible;
}

/* --- (НОВЫЙ БЛОК) СТИЛИЗАЦИЯ СКРОЛЛБАРА ДЛЯ МОДАЛКИ ЗАКАЗА --- */
.modal-overlay#order-modal .modal-content::-webkit-scrollbar {
    width: 10px;
}
.modal-overlay#order-modal .modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px; 
    margin: 4px; 
}
.modal-overlay#order-modal .modal-content::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px; 
    border: 2px solid transparent;
    background-clip: content-box;
}
.modal-overlay#order-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary-light);
}
@supports (scrollbar-color: auto) {
    .modal-overlay#order-modal .modal-content {
        scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
        scrollbar-width: thin;
    }
}
/* --- КОНЕЦ НОВОГО БЛОКА --- */


#order-modal-track-card {
    display: none;
}

/* Компактный хедер модалки */
.order-modal-track-info {
    display: grid;
    grid-template-columns: 36px 1fr; 
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "art artist"
        "art title"
        "art album";
    gap: 0 8px;
    padding: 6px; 
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 8px; 
    margin-bottom: 8px; 
    position: relative;
}
.order-modal-track-info .art {
    grid-area: art;
    width: 36px; 
    height: 36px; 
    border-radius: 4px;
    object-fit: cover;
    align-self: center;
}
.order-modal-track-info .artist {
    grid-area: artist;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.9rem; 
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 40px; 
}
.order-modal-track-info .title {
    grid-area: title;
    font-size: 0.8rem; 
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.order-modal-track-info .album {
    grid-area: album;
    font-size: 0.75rem; 
    color: var(--muted);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-modal-track-info .time {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 2px;
}
.order-modal-track-info .time .material-icons-outlined {
    font-size: 14px;
}


/* "Cost" и "Form" (Компактные) */
#order-modal-body .order-cost {
    margin-top: 0;
    margin-bottom: 8px; 
    padding: 8px; 
    font-size: 0.9rem; 
    font-weight: 700;
    color: var(--text);
    text-align: center;
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 8px; 
}
#order-modal-body .order-cost .cost-value {
    color: var(--brand-primary-light);
}

#order-modal-body .order-cost .cost-value-old {
    color: var(--muted);
    opacity: 0.7;
    font-weight: 400;
    font-size: 0.85rem;
    text-decoration: line-through;
    margin-right: 6px;
}

#order-modal-body .form-group {
    gap: 5px; 
    margin-bottom: 4px; 
}
#order-modal-body .form-group:last-of-type {
    margin-bottom: 0;
}
#order-modal-body .form-group label {
    font-size: 0.8rem; 
}
#order-modal-body .form-group input[type="text"],
#order-modal-body .form-group textarea {
    padding: 8px 10px; 
    font-size: 0.85rem; 
    border-radius: 6px; 
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    color: var(--text);
    transition: all 0.2s ease;
    width: 100%;
}
#order-modal-body .form-group input[type="text"]:focus,
#order-modal-body .form-group textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab,var(--accent),transparent 80%);
}

#order-modal-body .form-group textarea {
    min-height: 50px; 
}
#order-modal-body .form-submit {
    margin-top: 8px; 
}
#order-modal-body .form-submit button {
    padding: 10px; 
    font-size: 0.9rem; 
    border-radius: 8px; 
}

/* --- 10. Адаптация для мобильных --- */
@media (max-width: 900px) {
    #order-card {
        width: min(900px, 94vw);
    }
    .order-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 8px; 
    }
    .order-grid .order-track-card:last-child:nth-child(odd) {
        grid-column: span 2;
    }
    
    .order-track-card .time {
        display: none; 
    }
    .order-track-card .artist {
        padding-right: 0; 
    }
}

@media (max-width: 768px) {
    .order-controls {
        grid-template-columns: 1fr;
        gap: 10px; 
    }
    .order-alphabet-filter {
        justify-content: center; 
    }
    .order-alphabet-filter button {
        min-width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
}

@media (max-width: 600px) {
    .order-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 6px; 
    }
    .order-grid .order-track-card:last-child:nth-child(odd) {
        grid-column: span 2;
    }
    .order-track-card {
        padding: 4px;
        gap: 0 8px;
    }
    
    .order-alphabet-filter button {
        min-width: 24px; 
        height: 24px; 
        font-size: 0.65rem; 
        border-radius: 5px;
    }
    .order-pagination {
        gap: 4px;
    }
    .order-pagination button {
        min-width: 30px; 
        height: 30px; 
        font-size: 0.75rem; 
        border-radius: 6px;
    }
}
/*
================================================================
================================================================
     ДОПОЛНЕНИЯ v15 (Выбор оплаты в модалке)
================================================================
================================================================
*/

/* --- 1. Стили для скрытия/показа формы --- */
#order-form {
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    transform-origin: top;
}
#order-form.is-hidden {
    opacity: 0;
    transform: scale(0.98);
    visibility: hidden;
    display: none !important;
}

/* --- 2. Контейнер для кнопок оплаты --- */
#order-payment-options {
    display: none; 
    flex-direction: column;
    gap: 10px;
    width: 100%;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#order-payment-options.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* --- 3. Контейнер для кнопки PayPal SDK --- */
#paypal-button-container {
    position: relative;
    min-height: 40px; 
    z-index: 1; 
}

/* --- 4. Стили для сообщений PayPal --- */
.payment-success,
.payment-error {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px;
    border-radius: 8px;
}
.payment-success {
    color: var(--brand-primary-light);
    background: color-mix(in oklab, var(--brand-primary), transparent 85%);
}
.payment-error {
    color: #f87171; /* red-400 */
    background: rgba(220, 38, 38, 0.15);
}


/* --- 5. Кнопка "Назад" (вторичный стиль) --- */
.payment-back-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: center; 
    transition: color 0.2s ease;
    z-index: 0; 
}
.payment-back-btn:hover {
    color: var(--text);
}
.payment-back-btn .material-icons-outlined {
    font-size: 16px;
}
/*
================================================================
================================================================
     (НОВЫЙ БЛОК) ФИКС ДВОЙНОГО СКРОЛЛБАРА В МОДАЛКАХ (v19)
================================================================
================================================================
*/

/*
 * ЧАСТЬ 1: СТИЛИЗУЕМ СКРОЛЛБАР ТОЛЬКО ДЛЯ МОДАЛКИ ЗАКАЗА
 * (Как мы и договаривались)
*/
.modal-overlay#order-modal .modal-content {
    /* --- Firefox --- */
    scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
}
.modal-overlay#order-modal .modal-content::-webkit-scrollbar {
    width: 10px;
}
.modal-overlay#order-modal .modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px; 
    margin: 4px; 
}
.modal-overlay#order-modal .modal-content::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px; 
    border: 2px solid transparent;
    background-clip: content-box;
}
.modal-overlay#order-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary-light);
}
@media (max-width: 600px) {
    .modal-overlay#order-modal .modal-content::-webkit-scrollbar {
        width: 8px;
    }
}

/* * ЧАСТЬ 2: УБИРАЕМ ВНЕШНИЙ СКРОЛЛБАР У ОСТАЛЬНЫХ МОДАЛОК
 * (Тех, у которых уже есть свой внутренний скролл, как "Privacy")
*/
.modal-overlay#rules-modal .modal-content,
.modal-overlay#privacy-modal .modal-content,
.modal-overlay#cookie-modal .modal-content,
.modal-overlay#listeners-modal .modal-content,
.modal-overlay#playlist-modal .modal-content {
    /* --- Firefox --- */
    scrollbar-width: none;
    /* --- Chrome, Safari --- */
}
.modal-overlay#rules-modal .modal-content::-webkit-scrollbar,
.modal-overlay#privacy-modal .modal-content::-webkit-scrollbar,
.modal-overlay#cookie-modal .modal-content::-webkit-scrollbar,
.modal-overlay#listeners-modal .modal-content::-webkit-scrollbar,
.modal-overlay#playlist-modal .modal-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
/*
================================================================
================================================================
     (ДОПОЛНЕНИЯ) СТИЛИ ДЛЯ ЧЕКБОКСА И ПРАВИЛ В МОДАЛКЕ
================================================================
================================================================
*/

/* Состояние :disabled для кнопки "Proceed to Payment" */
#order-modal-body .form-submit button:disabled {
    background: var(--brand-primary-darker);
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Контейнер для чекбокса (из вашего index.html) */
.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px; /* Отступ сверху */
    margin-bottom: 4px; /* Отступ до кнопки "Оплатить" */
}

.form-group-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary); /* Цвет галочки */
    cursor: pointer;
    flex-shrink: 0;
}

.form-group-checkbox label {
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
    line-height: 1.4;
}

/* Ссылка "Rules" внутри лейбла */
.form-group-checkbox label a {
    color: var(--brand-primary-light);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px dashed var(--brand-primary-light);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.form-group-checkbox label a:hover {
    color: var(--text);
    border-bottom-color: transparent;
}

/* Контейнер, который появляется при клике на "Rules" (из вашего index.html) */
.order-rules-content {
    /* Скрываем его по умолчанию */
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s;
    /* display: none; будет управляться JS */
}

.order-rules-content.is-visible {
    display: block !important; /* Убедимся, что display: block */
    opacity: 1;
    transform: scale(1);
}

/* Кнопка "Back" внутри блока правил */
.order-rules-content .payment-back-btn {
    align-self: flex-start; /* Кнопка "Назад" слева */
    margin-top: 0;
    margin-bottom: 10px;
}

/* Стили для самого текста правил (из вашего index.html) */
.rules-text-content {
    /* Копируем стили из #rules-modal-content */
    max-height: clamp(250px, 45vh, 400px); /* Чуть меньше, т.к. в модалке */
    overflow-y: auto;
    padding-right: 12px;
    overscroll-behavior: contain;
    touch-action: pan-y;
    text-align: left;
    font-size: 0.9rem; /* Чуть меньше */
    line-height: 1.5;
    color: var(--muted);
}

.rules-text-content p {
    margin: 0 0 1em;
}

.rules-text-content h3 {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(20px, 4vw, 24px);
    color: var(--brand-primary-light);
    margin: 16px 0 10px 0;
}
.rules-text-content h3:first-of-type {
    margin-top: 0;
}

/* Стилизация скроллбара для текста правил */
.rules-text-content::-webkit-scrollbar {
    width: 8px;
}
.rules-text-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 4px 0;
}
.rules-text-content::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}
@supports (scrollbar-color: auto) {
  .rules-text-content {
    scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
  }
}
.order-rules-content {
    opacity: 0;
    transform: scale(0.98);
    /* * УБИРАЕМ 'display' и 'visibility' из transition.
     * 'display' будет управляться через JS (block) и CSS (none).
    */
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: none; /* По умолчанию скрыт */
}

/* * .is-visible (Копия из v17)
 * (display: block; будет установлен через JS)
*/
.order-rules-content.is-visible {
    opacity: 1;
    transform: scale(1);
}
.order-rules-content {
    opacity: 0;
    /*
     * ИЗМЕНЕНИЕ:
     * Начальное состояние: сдвинут ВНИЗ и чуть уменьшен
    */
    transform: translateY(20px) scale(0.98);
    /*
     * ИЗМЕНЕНИЕ:
     * Анимация 0.2s (200ms), чтобы совпасть с JS-таймером
    */
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: none;
}

/* Существующий .order-rules-content.is-visible (из v17) */
.order-rules-content.is-visible {
    opacity: 1;
    /*
     * ИЗМЕНЕНИЕ:
     * Конечное состояние: на месте и полный размер
    */
    transform: translateY(0) scale(1);
}

/* --- 2. Анимация для Формы --- */

/* Существующий #order-form (из v15) */
#order-form {
    /*
     * ИЗМЕНЕНИЕ:
     * Конечное состояние: на месте и полный размер
    */
    transform: translateY(0) scale(1);
    opacity: 1;
    /*
     * ИЗМЕНЕНИЕ:
     * Анимация 0.2s
    */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    transform-origin: top;
}

/* Существующий #order-form.is-hidden (из v15) */
#order-form.is-hidden {
    /*
     * ИЗМЕНЕНИЕ:
     * Начальное состояние (скрыто): сдвинут ВВЕРХ и чуть уменьшен
    */
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
    visibility: hidden;
    display: none !important;
}
/*
================================================================
     (ДОПОЛНЕНИЕ V20) ФИКС БАГА СКРОЛЛА "НАЗАД" (ОПЛАТА)
================================================================
*/

/* Cуществующий #order-payment-options (из v15) */
#order-payment-options {
    display: none; /* Скрыт по умолчанию */
    flex-direction: column;
    gap: 10px;
    width: 100%;
    opacity: 0;
    /* * ИЗМЕНЕНИЕ: 
     * Состояние "до" анимации (сдвинут вниз)
    */
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Cуществующий #order-payment-options.is-visible (из v15) */
#order-payment-options.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/*
================================================================
================================================================
     (ОБНОВЛЕНИЕ V30) РЕДИЗАЙН СТРАНИЦЫ "TOP TRACKS"
================================================================
================================================================
*/

/* --- 1. Адаптация карточки --- */
#top-card {
    width: min(815px, 94vw); 
    padding: clamp(12px, 2vw, 16px);
}

/* --- 2. Стили табов --- */
.top-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}
.top-tab-btn {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 16px;
    border: 1px solid var(--glass-border);
    background: var(--glass-2);
    color: var(--muted);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.top-tab-btn:hover {
    background: var(--glass);
    color: var(--text);
}
.top-tab-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary-dark);
    color: var(--bg-1);
}

/* --- 3. Контейнер контента --- */
.top-content-wrapper {
    position: relative;
    max-height: calc(100vh - 282px); 
    min-height: 360px;
}

/* --- 4. Панель контента (ФИКС V30) --- */
.top-content-panel {
    width: 100%;
    height: 100%;
    /* Добавляем Flex, чтобы пагинация не выпадала */
    display: flex;
    flex-direction: column;
}

/* --- 5. Лоадер / Ошибка --- */
.top-loader,
.top-error {
    position: absolute;
    inset: 0;
    min-height: 280px; 
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 600;
    z-index: 5;
}
.top-error .material-icons-outlined {
    font-size: 44px;
    color: #ef4444; /* red-500 */
}

/* --- 6. Контейнер списка (ФИКС V30) --- */
.top-list-container {
    /* height: 100%; <-- УБРАНО */
    flex-grow: 1; /* <-- ДОБАВЛЕНО: Занимает все свободное место */
    min-height: 100px; /* <-- ДОБАВЛЕНО: Минимальная высота */
    
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-right: 8px; 
    
    /* Стилизация скроллбара */
    scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
}
.top-list-container::-webkit-scrollbar {
    width: 8px;
}
.top-list-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.top-list-container::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary);
    border-radius: 10px;
}


/* --- 7. ОБЩИЙ СТИЛЬ КОМПАКТНОГО ЭЛЕМЕНТА (V29) --- */
.top-list-item-compact {
    display: grid;
    grid-template-columns: 32px 1fr auto; 
    gap: 10px;
    padding: 6px; 
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    align-items: center;
    transition: all 0.2s ease;
}
.top-list-item-compact:hover {
    background: var(--glass);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.top-list-item-compact .art {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    background-color: var(--bg-1);
}
/* ФИКС ОДИНАКОВОЙ ВЫСОТЫ (V28) */
.top-list-item-compact .info {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрируем, если строк меньше 3 */
    min-width: 0; 
    min-height: 42px; /* Принудительная высота для 3 строк */
}
.top-list-item-compact .artist {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-list-item-compact .title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-list-item-compact .album {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Общий контейнер для правого элемента */
.top-list-item-compact .extra-wrapper {
    width: auto; 
    min-width: 40px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-right: 4px;
}
/* Круг для Ранга (Top Tracks) */
.top-list-item-compact .rank-circle {
    width: 32px;
    height: 32px;
    border: 2px solid var(--brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-list-item-compact .rank-circle span {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--brand-primary-light);
    line-height: 1;
}
/* Стиль для Лайков (Top Likes) */
.top-list-item-compact .likes {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #f87171; /* red-400 */
}
.top-list-item-compact .likes .material-icons-outlined {
    font-size: 16px;
    color: #ef4444; /* red-500 */
}
/* Стиль для Времени (History) */
.top-list-item-compact .time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.top-list-item-compact .time .material-icons-outlined {
    font-size: 14px;
}


/* --- 8. Стили для "Top Tracks" (2 колонки) --- */
#top-list-top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-width: 100%;
    margin: 0;
}

/* --- 9. Стили для "Top Likes" (3 колонки) --- */
#top-list-likes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
/* В "Top Likes" Artist/Title/Album (убираем центрирование) */
#top-list-likes .top-list-item-compact .info {
    gap: 1px;
    justify-content: flex-start;
}

/* --- 10. Стили для "History" (1 колонка, по центру) --- */
.top-history-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-shrink: 0; 
}
.top-history-controls .day-btn {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-2);
    color: var(--muted);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.top-history-controls .day-btn:hover {
    background: var(--glass);
    color: var(--text);
}
.top-history-controls .day-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary-dark);
    color: var(--bg-1);
}

#top-list-history {
    display: grid;
    grid-template-columns: 1fr; /* 1 колонка */
    gap: 8px;
    max-width: 500px; /* Узкий по центру */
    margin: 0 auto;
}

/* *** НОВЫЙ ФИКС ВЫСОТЫ V30 (ТОЛЬКО ДЛЯ ИСТОРИИ) *** */
#top-list-history .top-list-item-compact .info {
    min-height: auto; /* Убираем принудительную высоту 42px */
    gap: 1px; /* Делаем инфо-блок еще компактнее */
}

/* Пагинация для Истории */
.top-history-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px; 
    flex-wrap: wrap; 
    margin-top: 12px; 
    flex-shrink: 0; 
}
.top-history-pagination button {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.75rem; 
    border: 1px solid var(--glass-border);
    background: var(--glass-2);
    color: var(--muted);
    border-radius: 6px; 
    padding: 0;
    min-width: 30px; 
    height: 30px; 
    cursor: pointer;
    transition: all 0.2s ease;
}
.top-history-pagination button:hover:not(:disabled) {
    background: var(--glass);
    color: var(--text);
}
.top-history-pagination button.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary-dark);
    color: var(--bg-1);
    transform: scale(1.05);
}
.top-history-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* --- 11. Адаптация --- */
@media (max-width: 768px) {
    /* --- TOP LIKES (Настройки для планшетов и телефонов) --- */
    #top-list-likes {
       grid-template-columns: repeat(2, 1fr);
    }
    /* Скрываем альбом (экономия места) */
    #top-list-likes .top-list-item-compact .album {
        display: none;
    }
    /* Ограничиваем до 10 элементов (5 рядов по 2) */
    #top-list-likes .top-list-item-compact:nth-child(n+11) {
        display: none;
    }

    /* --- HISTORY (Настройки для планшетов и телефонов) --- */
    /* Делаем список еще уже (330px) */
    #top-list-history {
        max-width: 330px; 
        margin: 0 auto;
    }
    /* Делаем элементы компактнее по высоте */
    #top-list-history .top-list-item-compact {
        padding: 2px 4px; /* Меньше отступы */
        gap: 8px;
        min-height: 38px; /* Чуть ниже высота */
    }
    #top-list-history .top-list-item-compact .art {
        width: 28px;
        height: 28px;
    }
    /* Уменьшаем кнопки пагинации */
    .top-history-pagination {
        margin-top: 4px;
        gap: 3px;
    }
    .top-history-pagination button {
        min-width: 26px;
        height: 26px;
        font-size: 0.7rem;
        border-radius: 5px;
    }
}

@media (max-width: 600px) {
    .top-content-wrapper {
        min-height: 350px;
    }
    
    /* На мобильных 2 колонки для Top Tracks */
    #top-list-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* На мобильных 2 колонки для Top Likes */
    #top-list-likes {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
}
/* ================================================================
   FIX 3.0: SEPARATE PAYPAL CARD & BACK BUTTON
   Белая карточка для PayPal, кнопка "Назад" отдельно (Темная тема)
   ================================================================ */

/* 1. Общий контейнер (теперь прозрачный, просто держит элементы) */
#order-payment-options {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 10px !important;
}

/* 2. Белая "Карточка" ТОЛЬКО для PayPal (чтобы черный текст читался) */
.payment-white-box {
    background-color: #fefaf6 !important;
    border-radius: 12px !important;
    padding: 20px 15px !important;
    border: 2px solid #ffc439 !important; /* Золотая рамка PayPal */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    margin-bottom: 15px !important; /* Отступ до кнопки Назад */
}

/* 3. Кнопка "Назад" (теперь она вне белого блока, на темном фоне) */
.payment-back-btn {
    width: 100%;
    display: flex !important;
    justify-content: center; /* Центрируем текст */
    align-items: center;
    padding: 14px !important;
    border-radius: 12px !important;
    
    /* Темный стиль кнопки */
    background: #2a2e3a !important; 
    color: #ffffff !important; 
    
    font-weight: 700 !important;
    font-size: 1rem !important;
    border: 1px solid #3f4454 !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* Ховер эффект для кнопки Назад */
.payment-back-btn:hover {
    background: #3f4454 !important; /* Чуть светлее при наведении */
    color: var(--brand-primary) !important; /* Золотой текст при наведении */
    border-color: var(--brand-primary) !important;
    transform: translateY(-2px);
}

.payment-back-btn .material-icons-outlined {
    font-size: 18px !important;
    margin-right: 8px;
}
/*
================================================================
     (ОБНОВЛЕНИЕ V38) СТИЛИ "LAST ADDED" (С ПЕРЕНОСОМ ДАТЫ)
================================================================
*/

/* --- 1. Контейнер (Masonry) --- */
#top-list-added {
    column-count: 2; /* Две колонки везде */
    column-gap: 6px;
    padding-bottom: 20px; 
}

/* --- 2. Блок исполнителя --- */
.added-group-compact {
    break-inside: avoid; 
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    overflow: hidden;
}

/* --- 3. Заголовок исполнителя --- */
.added-artist-header {
    font-family: 'Metal Mania', system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.9rem; /* Компактный шрифт */
    color: var(--brand-primary-light);
    background: rgba(0, 0, 0, 0.3);
    margin: 0;
    padding: 3px 6px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 4. Строка альбома --- */
.added-row {
    display: flex;
    align-items: center; /* Выравнивание по центру */
    padding: 2px 4px;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.1s ease;
    min-height: 26px;
}

.added-row:last-child {
    border-bottom: none;
}

.added-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Картинка */
.added-art {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
}

.added-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    background-color: var(--bg-1);
}

/* --- 5. Контейнер контента (Название + Дата) --- */
.added-content-wrapper {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    
    /* ПО УМОЛЧАНИЮ: В одну строку, по краям */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.added-content-wrapper .album-name {
    font-size: 0.7rem;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    opacity: 0.9;
}

.added-content-wrapper .added-date {
    flex-shrink: 0;
    font-size: 0.6rem;
    color: var(--muted);
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    text-align: right;
}

/* --- АДАПТАЦИЯ (ПЕРЕНОС ДАТЫ) --- */
/* Если экран уже 380px (телефоны), переносим дату вниз */
@media (max-width: 380px) {
    .added-content-wrapper {
        flex-direction: column; /* Вертикально */
        align-items: flex-start; /* Прижать влево */
        justify-content: center;
        gap: 0; /* Без отступа между строками */
    }
    
    .added-content-wrapper .added-date {
        font-size: 0.55rem; /* Чуть меньше дата */
        margin-top: -1px;   /* Подтянуть ближе к названию */
        text-align: left;
        opacity: 0.4;
    }
}

/* --- НАСТРОЙКИ ДЛЯ ПК (Desktop > 1024px) --- */
/* Чуть увеличиваем для красоты на больших экранах */
@media (min-width: 1024px) {
    #top-list-added {
        column-gap: 12px;
    }
    .added-group-compact {
        margin-bottom: 10px;
        border-radius: 8px;
    }
    .added-artist-header {
        font-size: 1.1rem;
        padding: 5px 10px;
    }
    .added-row {
        padding: 4px 8px;
        gap: 10px;
        min-height: 32px;
    }
    .added-art {
        width: 32px;
        height: 32px;
    }
    .added-art img {
        border-radius: 4px;
    }
    .added-content-wrapper .album-name {
        font-size: 0.85rem;
    }
    .added-content-wrapper .added-date {
        font-size: 0.75rem;
        opacity: 0.6;
        letter-spacing: normal;
    }
}
/* === (НОВЫЙ БЛОК V39) APPLE MUSIC LINK STYLES === */

/* 1. Делаем родительские элементы кликабельными */
.top-list-item-compact, .added-row {
    position: relative;
    /* ✅ ДОБАВЛЕНО УКАЗАТЕЛЯ */
    cursor: pointer; 
    /* Добавляем transition для filter (для is-apple-loading) */
    transition: filter 0.3s ease, transform 0.2s ease, background 0.2s ease, border 0.2s ease;
}

/* 2. Оверлей с блюром (показывается при is-apple-linked) */
.apple-music-link-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Эффект "внутреннего блюра" */
    background: rgba(0, 0, 0, 0.2); /* Затемнение */
    backdrop-filter: blur(4px) brightness(0.8);
    -webkit-backdrop-filter: blur(4px) brightness(0.8);
    
    /* Копируем radius родителя (10px или 6px) */
    border-radius: inherit; 
    z-index: 10;
    
    /* Анимация появления */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 3. Ссылка (иконка Apple Music) */
.apple-music-link-overlay a {
    display: block;
    transform: scale(0); /* Начальное состояние для анимации */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s; /* Пружинистый эффект */
}

.apple-music-link-overlay a img {
    display: block;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

/* 4. Лоадер (спиннер) */
.apple-music-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11; /* Выше оверлея */
    
    /* Копируем стиль .btn-loader */
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--brand-primary); /* Акцентный цвет */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    
    /* Анимация появления лоадера */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 5. Активные состояния */

/* Состояние загрузки (is-apple-loading) */
.top-list-item-compact.is-apple-loading,
.added-row.is-apple-loading {
    filter: brightness(0.7); /* Приглушаем контент */
    cursor: wait;
}
.top-list-item-compact.is-apple-loading .apple-music-loader,
.added-row.is-apple-loading .apple-music-loader {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Состояние "Ссылка готова" (is-apple-linked) */
.top-list-item-compact.is-apple-linked .apple-music-link-overlay,
.added-row.is-apple-linked .apple-music-link-overlay {
    opacity: 1;
    transform: scale(1);
}

.top-list-item-compact.is-apple-linked .apple-music-link-overlay a,
.added-row.is-apple-linked .apple-music-link-overlay a {
    transform: scale(1); /* Иконка "выпрыгивает" */
}

/* Адаптация размера иконки/лоадера для .added-row (они меньше) */
.added-row .apple-music-loader {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
/* === КОНЕЦ БЛОКА V39 === */
/* ... (все ваши существующие стили) ... */

/*
================================================================
================================================================
     (ИЗМЕНЕНО) СТИЛИ ДЛЯ СЕКЦИИ НОВОСТЕЙ
================================================================
================================================================
*/

/* --- 1. Адаптация карточки --- */
#news-card {
    width: min(815px, 94vw); /* <-- УМЕНЬШЕНО (было 900px) */
    padding: clamp(12px, 2vw, 16px);
    
    /* === (ИЗМЕНЕНО) УБИРАЕМ СКРОЛЛ С КАРТОЧКИ === */
    max-height: none; 
    overflow: visible; /* (было auto) */
    position: relative; 
    /* scrollbar-width: none; (УБРАНО) */
}
/* #news-card::-webkit-scrollbar { display: none; } (УБРАНО) */


.news-container {
    position: relative;
    /* === (ИЗМЕНЕНО) ВОЗВРАЩАЕМ ВЫСОТУ И СКРОЛЛ СЮДА === */
    max-height: calc(100vh - 280px); /* (Высота экрана - 280px под шапку/отступы) */
    min-height: 390px; /* Как у Top Tracks */
    overflow-y: auto;
    padding: 4px; /* Небольшой отступ для скроллбара */
    
    /* === (ИЗМЕНЕНО) СКРЫВАЕМ СКРОЛЛБАР === */
    scrollbar-width: none; /* Firefox */
}
.news-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Лоадер/Ошибка (используем стили .top-loader / .top-error) */
.news-container .top-loader,
.news-container .top-error {
    position: absolute; /* <-- ИЗМЕНЕНО (было absolute) */
    inset: 0;
    min-height: 280px; 
    display: flex; 
    z-index: 5;
}

/* --- 2. Сетка новостей --- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* --- 3. Карточка новости (КОМПАКТНАЯ) --- */
.news-card {
    display: flex;
    flex-direction: column;
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.news-card:hover {
    transform: translateY(-4px);
    background: var(--glass);
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.news-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--glass-border);
}
.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.news-card:hover .news-card-image img {
    transform: scale(1.05);
}

.news-card-content {
    padding: 12px; /* <-- УМЕНЬШЕНО (было 16px) */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Растягивает контент, чтобы кнопка была внизу */
}

.news-card-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--text);
    line-height: 1.2;
    margin: 0 0 6px; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    min-height: 2.2em; 
}
.modal-overlay#news-modal h2#news-modal-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 5vw, 32px);
}

.news-card-mini-text {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 10px; /* <-- УМЕНЬШЕНО (было 12px) */
    /* flex-grow: 1; <-- УБРАНО */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* <-- УМЕНЬШЕНО (было 3) */
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.news-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    opacity: 0.8;
    margin-bottom: 12px; /* <-- УМЕНЬШЕНО (было 16px) */
    margin-top: auto; /* <-- ДОБАВЛЕНО (Прижимает к кнопке) */
}
.news-card-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.news-card-meta .meta-item .material-icons-outlined {
    font-size: 14px;
}

.news-card-read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px; /* <-- УМЕНЬШЕНО (было 10px 14px) */
    font-size: 0.85rem; /* <-- УМЕНЬШЕНО (было 0.9rem) */
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid color-mix(in oklab,var(--accent),#fff 40%);
    color: var(--text);
    background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
    transition: all 0.2s ease;
}
.news-card-read-more:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-1);
    transform: scale(1.03);
}
.news-card-read-more .material-icons-outlined {
    font-size: 16px; /* <-- УМЕНЬШЕНО (было 18px) */
}

/* --- 4. Модальное окно новостей --- */

.modal-overlay#news-modal .modal-content {
    display: flex; /* <-- ДОБАВЛЕНО */
    flex-direction: column; /* <-- ДОБАВЛЕНО */
    overflow-y: hidden; /* <-- ИЗМЕНЕНО (было 'auto' или не было) */
}

#news-modal-body {
    max-height: clamp(300px, 60vh, 500px);
    overflow-y: auto;
    padding-right: 12px;
    overscroll-behavior: contain;
    touch-action: pan-y;
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
    position: relative;
    min-height: 200px;
    flex-grow: 1; 
    min-height: 0; 
}
#news-modal-body::-webkit-scrollbar { width: 10px; }
#news-modal-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 10px; margin: 4px 0; }
#news-modal-body::-webkit-scrollbar-thumb { background-color: var(--brand-primary); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
@supports (scrollbar-color: auto) {
    #news-modal-body { scrollbar-color: var(--brand-primary) rgba(0, 0, 0, 0.2); scrollbar-width: thin; }
}

#news-modal .top-loader,
#news-modal .top-error {
    position: absolute;
    inset: 0;
    min-height: 200px; 
    display: flex; 
    z-index: 5;
    background: var(--bg-2); 
}

.news-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    padding: 0 4px 12px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 16px;
}
.news-modal-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.news-modal-meta .meta-item .material-icons-outlined {
    font-size: 18px;
    color: var(--brand-primary);
}

.news-modal-full-text {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--muted);
}
.news-modal-full-text p {
    margin: 0 0 1em;
}
.news-modal-full-text strong,
.news-modal-full-text b {
    color: var(--text);
    font-weight: 700;
}
.news-modal-full-text a {
    color: var(--brand-primary-light);
    text-decoration: none;
    border-bottom: 1px dashed var(--brand-primary-light);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.news-modal-full-text a:hover {
    color: var(--text);
    border-bottom-color: transparent;
}
.news-modal-full-text ul {
    list-style: none;
    padding-left: 20px;
    margin: 0 0 1em;
}
.news-modal-full-text li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}
.news-modal-full-text li::before {
    content: '🤘';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    color: var(--brand-primary);
}

.news-modal-vote {
    display: block; /* Больше не flex-контейнер */
    height: 0;
    padding-top: 0; /* Убираем старый отступ */
    margin-top: 24px; /* Оставляем отступ от текста */
    border-top: 1px solid var(--glass-border); /* Оставляем линию */
}

/* Новый контейнер для кнопок в мета-блоке (Линия #1) */
.news-modal-meta .meta-item-vote {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* Прижимает кнопки вправо */
}

/* Уменьшаем сами кнопки голосования, когда они в мета-блоке */
.news-modal-meta .player-btn-icon {
    padding: 2px;
    border-width: 1px;
    width: 28px;  /* Уменьшаем */
    height: 28px; /* Уменьшаем */
    background: transparent;
}

.news-modal-meta .player-btn-icon:hover {
    background: var(--glass-2);
    border-color: var(--accent);
    transform: none; /* Убираем hover-эффект увеличения */
    box-shadow: none; /* Убираем hover-эффект тени */
}

/* Уменьшаем иконки внутри кнопок */
.news-modal-meta .player-btn-icon .material-icons-outlined {
    font-size: 18px; /* Как у других иконок в мета */
}

/* Уменьшаем счетчик (badge) */
.news-modal-meta .player-vote-badge {
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    padding: 0 4px;
    border-width: 1px;
}

/* Фикс для активных кнопок в мета */
.news-modal-meta .player-btn-icon.is-active {
    box-shadow: none; /* Убираем тень */
}

/* --- 5. Адаптация --- */
@media (max-width: 900px) {
    #news-card {
        width: min(815px, 94vw); /* <-- ИЗМЕНЕНО */
    }
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .news-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 12px;
    }
    .news-card-title {
        font-size: 1.2rem;
    }
    .news-card-mini-text {
        font-size: 0.85rem;
    }
    #news-card { /* <-- ИЗМЕНЕНО */
        max-height: calc(100vh - 220px);
    }
    .news-modal-body {
        max-height: 65vh;
        padding-right: 8px;
    }
    #news-modal-body::-webkit-scrollbar {
        width: 8px;
    }
}
/* === (ИЗМЕНЕНИЕ) ПАГИНАЦИЯ НОВОСТЕЙ === */

/* 1. Стили для контейнера пагинации (копия .order-pagination) */
.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px; 
    flex-wrap: wrap; 
    margin-top: 16px; /* Отступ от контейнера новостей */
}
.news-pagination button {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.75rem; 
    border: 1px solid var(--glass-border);
    background: var(--glass-2);
    color: var(--muted);
    border-radius: 6px; 
    padding: 0;
    min-width: 30px; 
    height: 30px; 
    cursor: pointer;
    transition: all 0.2s ease;
}
.news-pagination button:hover:not(:disabled) {
    background: var(--glass);
    color: var(--text);
}
.news-pagination button.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary-dark);
    color: var(--bg-1);
    transform: scale(1.05);
}
.news-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 2. Адаптация сетки новостей (по запросу) */
@media (max-width: 600px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на телефоне */
        gap: 10px; /* Уменьшим отступ */
    }

    /* Адаптация карточки для 2 колонок на телефоне */
    .news-card-title {
        font-size: 1.1rem; /* Чуть меньше */
        -webkit-line-clamp: 2;
        min-height: 2.2em; /* 2 строки */
        line-height: 1.1;
    }
    html[data-script=cyrillic] .news-card-title {
         font-size: 1.0rem; /* Для кириллицы еще меньше */
    }
    .news-card-mini-text {
        font-size: 0.8rem; /* Меньше */
        line-height: 1.4;
        -webkit-line-clamp: 3; /* Можно 3 строки */
    }
    .news-card-meta {
        font-size: 0.75rem; /* Меньше */
        gap: 4px 8px;
        margin-bottom: 10px;
    }
    .news-card-read-more {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    .news-card-read-more .material-icons-outlined {
        font-size: 14px;
    }
    
    /* Адаптация пагинации для телефонов */
    .news-pagination {
        gap: 3px;
        margin-top: 12px;
    }
    .news-pagination button {
        min-width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* 3. Фикс отступа скроллбара (убираем padding у .news-container) */
.news-container {
    padding: 0; /* Убираем отступ, т.к. скроллбар скрыт */
}

/* === БЕГУЩАЯ СТРОКА (MARQUEE) ДЛЯ ПЛЕЕРА === */

.marquee-mask {
    width: 100%;
    overflow: hidden;
    /* Маска для плавного исчезновения по краям */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    display: block;
}

.marquee-inner {
    display: flex; /* Используем Flexbox для надежного отступа */
    width: max-content; /* Ширина по содержимому */
    gap: 50px; /* Явный отступ между оригиналом и копией */
}

/* Состояние анимации */
.marquee-inner.is-animating {
    animation: marquee-scroll linear infinite;
}

@keyframes marquee-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* Сдвигаем на -50% (половина длины), но с учетом gap это нужно корректировать в JS, 
           либо использовать translate -50% от ширины одного элемента + половина gap.
           Но проще сдвигать на -100% первого элемента.
           
           Упрощенный вариант для CSS-only с бесшовностью сложнее. 
           Поэтому используем transform относительно ширины контента. 
        */
        transform: translate3d(calc(-50% - 25px), 0, 0); /* -50% ширины всего блока inner минус половина gap */
    }
}

.marquee-content {
    white-space: nowrap;
    display: inline-block;
}

.player-info h2.has-marquee,
.player-info p.has-marquee {
    text-overflow: clip;
    overflow: visible;
    display: block; /* Важно для работы маски */
}
/* Glitch эффект для обложки */
.glitch-effect {
    position: relative;
    animation: glitch-anim 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.glitch-effect::before,
.glitch-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Наследуем картинку, если возможно, или используем фильтры */
    /* Для img тега background: inherit не сработает, поэтому используем фильтры */
}

/* Сама анимация помех */
@keyframes glitch-anim {
    0% { transform: translate(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-4px, 4px); filter: hue-rotate(90deg) contrast(1.5); clip-path: inset(10% 0 60% 0); }
    40% { transform: translate(4px, -4px); filter: hue-rotate(-90deg) contrast(2); clip-path: inset(40% 0 10% 0); }
    60% { transform: translate(-4px, 0); filter: invert(0.2); clip-path: inset(80% 0 5% 0); }
    80% { transform: translate(2px, 2px); filter: none; clip-path: inset(10% 0 80% 0); }
    100% { transform: translate(0); filter: none; clip-path: none; }
}

/* Применим glitch и к тексту названия для полного эффекта */
.title-glitch {
    animation: text-glitch 0.4s ease-in-out;
    color: var(--brand-primary-light);
    text-shadow: 2px 0 #ff0000, -2px 0 #0000ff;
}

@keyframes text-glitch {
    0% { text-shadow: 2px 0 #ff0000, -2px 0 #0000ff; transform: skew(0deg); }
    20% { text-shadow: -2px 0 #ff0000, 2px 0 #0000ff; transform: skew(-10deg); }
    40% { text-shadow: 2px 0 #ff0000, -2px 0 #0000ff; transform: skew(10deg); }
    100% { text-shadow: none; transform: skew(0deg); }
}

/* === AUDIO FX MODAL STYLES === */

.fx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.fx-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--brand-primary-light);
}

/* IOS Style Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: var(--brand-primary); }
input:checked + .slider:before { transform: translateX(20px); }

/* EQ Sliders Grid */
.eq-sliders {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px;
    height: 180px; /* Высота для вертикальных слайдеров */
    padding: 10px 0;
}

.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 10px;
}

.eq-freq {
    font-size: 0.7rem;
    color: var(--muted);
    font-family: 'Montserrat', sans-serif;
}

/* Вертикальные Range Sliders */
input[type=range].eq-range {
    -webkit-appearance: none; /* Сброс стилей Webkit */
    appearance: none;         /* Стандартный сброс стилей */
    
    /* === ИСПРАВЛЕНИЕ (STANDARD WAY) === */
    /* Заменяем slider-vertical на стандартные свойства */
    writing-mode: vertical-lr;
    direction: rtl; /* Важно: делает верх максимумом (+12), а низ минимумом (-12) */
    /* ================================= */

    width: 8px;
    height: 120px; 
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    outline: none;
    cursor: pointer;

    /* Сохраняем фикс от прокрутки страницы */
    touch-action: none; 
}
/* Стилизация бегунка */
input[type=range].eq-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-primary);
    border: 2px solid var(--bg-1);
    cursor: pointer;
    margin-left: -6px; /* Центровка */
}
/* Firefox specific rotation trick if needed, usually appearance slider-vertical handles it */
input[type=range].eq-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--brand-primary);
}

/* Компактность на мобильных */
@media (max-width: 480px) {
    .eq-sliders { gap: 4px; }
    .eq-freq { font-size: 0.6rem; }
}
/* --- LYRICS HELP ICON & POPOVER (FIXED) --- */

#player-lyrics-toggle {
    position: relative;
    overflow: visible;
    padding-right: 36px !important; /* Место под иконку */
}

/* Иконка вопроса */
.icon-help {
    position: absolute;
    right: 10px; /* Фиксируем справа */
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px !important;
    
    /* ИСПРАВЛЕНИЕ ЦВЕТА: Делаем белой (var(--text)), чтобы видно на зеленом */
    color: var(--text) !important; 
    opacity: 0.8; /* Слегка прозрачная */
    
    cursor: help;
    transition: all 0.2s ease;
    z-index: 5;
}

.icon-help:hover,
.icon-help.active {
    opacity: 1;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
    transform: translateY(-50%) scale(1.1); /* Увеличение при наведении */
}

/* Сам Popover */
.lyrics-popover {
    position: absolute;
    bottom: 120%;
    right: 0;
    width: 220px;
    
    background: rgba(15, 17, 35, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--brand-primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    
    border-radius: 12px;
    padding: 12px;
    
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.4;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    
    /* ИСПРАВЛЕНИЕ ТЕКСТА: Перенос слов */
    white-space: normal; 
    overflow-wrap: break-word;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
    
    /* Чтобы клики по нему не проходили сквозь */
    pointer-events: none; 
}

.lyrics-popover.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto; /* Включаем клики */
}

/* Стрелочка */
.lyrics-popover::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: inherit;
    border-bottom: 1px solid var(--brand-primary);
    border-right: 1px solid var(--brand-primary);
    transform: rotate(45deg);
}

/* --- АДАПТАЦИЯ ДЛЯ ТЕЛЕФОНОВ --- */
@media (max-width: 480px) {
    .lyrics-popover {
        width: 180px; /* Делаем уже */
        right: -10px; /* Немного сдвигаем вправо, чтобы влезло */
        font-size: 0.75rem; /* Чуть меньше шрифт */
    }
    .lyrics-popover::after {
        right: 24px; /* Корректируем стрелочку */
    }
}
/* === СТИЛИ ДЛЯ БЛОКА "НЕТ ОПЛАТЫ" (V-NO-PAYPAL) === */

/* Контейнер опций (как и раньше) */
#order-payment-options {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
    margin-top: 10px !important;
}

#order-payment-options.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Новый блок "Нет методов оплаты" */
.payment-unavailable-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--muted);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    color: var(--muted);
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.payment-unavailable-box .material-icons-outlined {
    font-size: 48px;
    color: var(--muted);
    opacity: 0.5;
    margin-bottom: 5px;
}

.payment-unavailable-box h3 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.payment-unavailable-box p {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.8;
}

/* Кнопка "Назад" (темная тема) */
.payment-back-btn {
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 14px !important;
    border-radius: 12px !important;
    background: #2a2e3a !important; 
    color: #ffffff !important; 
    font-weight: 700 !important;
    font-size: 1rem !important;
    border: 1px solid #3f4454 !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

.payment-back-btn:hover {
    background: #3f4454 !important;
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    transform: translateY(-2px);
}

.payment-back-btn .material-icons-outlined {
    font-size: 18px !important;
    margin-right: 8px;
}
/* === Кнопка "Открыть в новой вкладке" для модалок === */

.modal-external {
    /* Абсолютное позиционирование, как у кнопки закрытия */
    position: absolute;
    top: clamp(12px, 3vw, 20px);
    
    /* Сдвигаем влево от кнопки закрытия: 
       отступ справа (как у close) + ширина кнопки (36px) + зазор (10px) */
    right: calc(clamp(12px, 3vw, 20px) + 46px);
    
    width: 36px;
    height: 36px;
    
    /* Стили как у .modal-close */
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--text);
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    z-index: 20;
    
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.modal-external:hover {
    background: var(--glass);
    transform: scale(1.1);
    color: var(--brand-primary-light); /* Подсветка при наведении */
}

.modal-external .material-icons-outlined {
    font-size: 20px; /* Чуть меньше, чем крестик */
}

/* Адаптация для мобильных (если нужно подвинуть заголовок, чтобы не наезжал) */
@media (max-width: 480px) {
    /* Увеличиваем отступ заголовка справа, чтобы кнопки не перекрывали текст */
    .modal-content h2 {
        padding-right: 90px; 
    }
}
/* ================================================================
   SHOUTBOX STYLES (UPDATED V2 - HORIZONTAL NAME)
   ================================================================ */

/* --- 1. Кнопка вызова (Десктоп) --- */
.shoutbox-wrap-desktop {
    position: absolute;
    /* Выравнивание с кнопкой Support Us (+46px компенсирует логотип) */
    top: calc(clamp(16px, 3vw, 24px) + 46px) !important;
    right: clamp(16px, 3vw, 24px);
    z-index: 3;
    display: block;
    
    /* ВАЖНО: Скрываем изначально, чтобы GSAP анимировал появление */
    opacity: 0;
    visibility: hidden;
}

/* Стили кнопки */
.shoutbox-toggle {
    background: var(--brand-primary);
    border: 2px solid var(--brand-primary-dark);
    color: var(--bg-1); 
    box-shadow: 0 4px 20px color-mix(in oklab, var(--brand-primary), transparent 70%);
    
    padding: 8px 14px;
    font-size: 0.95rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    
    transition: transform .2s ease, background .25s ease, border .25s ease, box-shadow .25s ease, color .25s ease;
}

.shoutbox-toggle:hover {
    transform: translateY(-1px) scale(1.03);
    background: var(--brand-primary-light);
    border-color: var(--brand-primary);
    color: var(--bg-1);
    box-shadow: 0 6px 24px color-mix(in oklab, var(--brand-primary), transparent 60%);
}

.shoutbox-toggle .material-icons-outlined {
    font-size: 20px;
}

/* Кнопка для мобильных */
.shoutbox-toggle-mobile {
    display: none;
    position: absolute;
    top: calc(clamp(16px, 3vw, 24px) + 54px);
    right: clamp(16px, 3vw, 24px);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    
    /* === ИЗМЕНЕНО: Стили как у Support Us (Зеленая заливка) === */
    background: var(--brand-primary);
    border: 2px solid var(--brand-primary-dark);
    color: var(--bg-1); /* Темная иконка на зеленом фоне */
    box-shadow: 0 4px 20px color-mix(in oklab, var(--brand-primary), transparent 70%);
    /* ========================================================== */
    
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* ВАЖНО: Тоже скрываем для GSAP анимации */
    opacity: 0;
    visibility: hidden;
}

/* === ДОБАВЛЕНО: Hover эффект как у Support Us === */
.shoutbox-toggle-mobile:hover {
    transform: scale(1.1);
    background: var(--brand-primary-light);
    border-color: var(--brand-primary);
    color: var(--bg-1);
    box-shadow: 0 6px 24px color-mix(in oklab, var(--brand-primary), transparent 60%);
}

@media (max-width: 1200px) {
    .shoutbox-wrap-desktop { display: none; }
    .shoutbox-toggle-mobile { display: flex; }
}

/* --- 2. Окно (Портал) --- */
.shoutbox-portal {
    position: fixed;
    top: 0; left: 0;
    transform: translate(-9999px, -9999px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease; 
}

.shoutbox-portal.open {
    opacity: 1;
    visibility: visible;
}

/* Панель окна */
/* Панель окна */
.shoutbox-portal .panel {
    width: 600px; 
    
    /* === ИЗМЕНЕНИЕ: Уменьшили высоту === */
    height: 480px; /* Было 550px. Можно поставить 380px, если нужно еще компактнее */
    
    max-width: 90vw;
    max-height: 85vh;
    
    background: linear-gradient(180deg, rgba(20, 20, 35, 0.98), rgba(25, 25, 45, 0.98));
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
    
    display: flex;
    flex-direction: column;
    opacity: 0;
    
    overscroll-behavior: contain;
    touch-action: none;
}

@keyframes slideInRightShoutbox {
    0% { opacity: 0; transform: translateX(60px) scale(0.95); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

.shoutbox-portal.open .panel {
    animation: slideInRightShoutbox 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- 3. Внутренности (Header & Messages) --- */
.shoutbox-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(0,0,0,0.3);
    border-radius: 16px 16px 0 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    touch-action: none;
}
.shoutbox-header h4 { font-size: 1rem; margin: 0; color: var(--brand-primary-light); }
.shoutbox-header p { margin: 0; font-size: 0.75rem; opacity: 0.7; line-height: 1.3; display: block; }

.shoutbox-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0,0,0,0.15);
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.shoutbox-messages::-webkit-scrollbar { width: 6px; }
.shoutbox-messages::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
.shoutbox-messages::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 4px; }

.shout-bubble {
    background: var(--glass-2);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
}
.shout-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.75rem; color: var(--muted); }
.shout-name { font-weight: 700; color: var(--brand-primary-light); }
.shout-flag { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; }
.shout-time { margin-left: auto; opacity: 0.6; font-size: 0.7rem; }
.shout-text { word-wrap: break-word; line-height: 1.4; color: var(--text); }
.shout-empty { text-align: center; color: var(--muted); margin-top: 20px; font-style: italic; font-size: 0.85rem;}

/* --- 4. ФОРМА (Обновленная структура) --- */
.shoutbox-form {
    padding: 12px 16px;
    border-top: 1px solid var(--glass-border);
    background: rgba(0,0,0,0.35);
    border-radius: 0 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Увеличил отступ между строками */
    flex-shrink: 0;
    touch-action: none;
}

/* === СТРОКА ИМЕНИ (ГОРИЗОНТАЛЬНАЯ) === */
/* Выбираем строку, которая НЕ является строкой сообщения */
.shoutbox-form-row:not(.message-row) {
    display: flex;
    flex-direction: row; /* В одну линию */
    align-items: center;
    gap: 12px; /* Отступ между лейблом и полем */
    width: 100%;
}

.shoutbox-form-row:not(.message-row) label {
    margin: 0;
    white-space: nowrap; /* Текст не переносится */
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
    flex-shrink: 0; /* Лейбл не сжимается */
}

.shoutbox-form-row:not(.message-row) input {
    flex-grow: 1; /* Поле занимает всё место */
    width: auto;
}

/* === СТРОКА СООБЩЕНИЯ (ВЕРТИКАЛЬНАЯ) === */
.message-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    position: relative;
}

.message-row label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

/* === Стили полей ввода === */
.shoutbox-form input, 
.shoutbox-form textarea {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border 0.2s ease, background 0.2s ease;
}

.shoutbox-form input {
    padding: 8px 10px;
    height: 36px;
}

.shoutbox-form textarea {
    padding: 8px 36px 18px 10px; 
    resize: none;
    height: 60px;
    min-height: 60px;
    line-height: 1.4;
    width: 100%;
}

.shoutbox-form input:focus, 
.shoutbox-form textarea:focus {
    outline: none; 
    border-color: var(--brand-primary);
    background: rgba(0, 0, 0, 0.7);
}

/* Кнопка смайлов */
.emoji-btn {
    position: absolute;
    right: 6px;
    top: 30px; /* Сдвинул чуть ниже, т.к. появился лейбл над textarea (если он видим) */
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s, transform 0.2s;
    z-index: 2;
    line-height: 1;
}
/* Если лейбл "sr-only" (скрыт), поправляем позицию смайла */
.message-row label.sr-only ~ .emoji-btn {
    top: 6px;
}

.emoji-btn span { font-size: 20px; display: block; }
.emoji-btn:hover { color: var(--brand-primary); transform: scale(1.1); }

/* Пикер смайлов */
.emoji-picker {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 260px;
    background: #1a1c2e;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    margin-bottom: 5px;
    z-index: 100;
}
.emoji-picker.open { display: grid; }
.emoji-picker span { cursor: pointer; font-size: 1.2rem; text-align: center; padding: 4px; border-radius: 4px; }
.emoji-picker span:hover { background: rgba(255,255,255,0.1); }

/* Счетчик символов */
.char-counter {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 0.7rem;
    color: var(--muted);
    opacity: 0.6;
    pointer-events: none;
    font-weight: 600;
    z-index: 2;
}

/* --- 5. ФУТЕР (Капча + Кнопка) --- */
.shoutbox-footer-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

/* Капча */
.shoutbox-captcha {
    transform: scale(0.8); 
    transform-origin: left center; 
    height: 60px; 
    display: flex;
    align-items: center;
    overflow: visible;
    flex-shrink: 0;
}

/* Действия */
.shoutbox-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    flex: 1;
}

.shoutbox-status {
    font-size: 0.75rem;
    text-align: right;
    font-weight: 600;
    min-height: 1em;
}
.shoutbox-status.error { color: #f87171; }
.shoutbox-status.success { color: var(--brand-primary); }

/* Кнопка отправить */
.shoutbox-submit {
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary-dark);
    color: var(--bg-1); 
    box-shadow: 0 4px 12px color-mix(in oklab, var(--brand-primary), transparent 70%);
    
    padding: 0 20px;
    height: 40px;
    
    font-size: 0.95rem; 
    border-radius: 8px;
    font-weight: 700;
    
    cursor: pointer;
    transition: all 0.2s ease;
    
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.shoutbox-submit:hover:not(:disabled) {
    transform: translateY(-2px); 
    background: var(--brand-primary-light);
    box-shadow: 0 6px 16px color-mix(in oklab, var(--brand-primary), transparent 60%);
}

.shoutbox-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    background: var(--muted);
    border-color: transparent;
    box-shadow: none;
}

/* Mobile Tweaks */
@media (max-width: 600px) {
    /* Было 80vh, ставим 70vh или 60vh для компактности */
    .shoutbox-portal .panel { width: 94vw; height: 70vh; } 
    
    .shoutbox-footer-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .shoutbox-captcha { transform: scale(0.85); transform-origin: center; margin: 0 auto; width: auto; justify-content: center; }
    .shoutbox-actions { align-items: stretch; }
    .shoutbox-submit { width: 100%; }
    
    @media (max-width: 380px) {
        .shoutbox-form-row:not(.message-row) {
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
        }
    }
}

    /* Контейнер для летающих смайлов (весь экран, но прозрачный для кликов) */
    #flying-reactions-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80vh; /* Занимает 80% высоты снизу */
        pointer-events: none; /* Пропускает клики сквозь себя */
        z-index: 9999;
        overflow: hidden;
    }

    /* Сами летящие смайлы */
    .metal-emoji {
        position: absolute;
        bottom: -50px; /* Старт снизу */
        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        /* Анимация 2.5 сек */
        animation: flyAndFade 2.5s ease-out forwards;
        will-change: transform, opacity;
        /* Тень для видимости на любом фоне */
        text-shadow: 0 0 10px rgba(0,0,0,0.8);
        /* Чтобы не размывались */
        -webkit-font-smoothing: antialiased;
        z-index: 9999;
    }

    @keyframes flyAndFade {
        0% {
            opacity: 0;
            transform: translateY(20px) scale(0.5);
        }
        10% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        90% {
            opacity: 0.8;
        }
        100% {
            opacity: 0;
            /* Летим вверх на 60-80% экрана и сдвигаемся вбок (var задается в JS) */
            transform: translateY(-70vh) scale(1.2) translateX(var(--random-x));
        }
    }

    /* Панель кнопок реакций (внутри плеера) */
    .metal-reactions-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--glass-border);
        width: 100%;
    }

    .reaction-btn {
        background: rgba(255,255,255,0.05);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        width: 42px;
        height: 42px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.1s ease;
        user-select: none;
        /* Чтобы emoji выглядели нормально */
        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    .reaction-btn:hover {
        background: rgba(255,255,255,0.15);
        transform: scale(1.1);
    }

    .reaction-btn:active {
        transform: scale(0.95);
        background: var(--brand-primary); /* Подсветка при нажатии */
    }
    
    @media (max-width: 480px) {
        .reaction-btn {
            width: 36px;
            height: 36px;
            font-size: 18px;
            gap: 6px;
        }
    }

/* ================================================================
   ВИДЖЕТ РЕАКЦИЙ (ULTRA COMPACT + TOOLTIP FIX)
   ================================================================ */

.reactions-widget {
    position: fixed;
    z-index: 100 !important;
    
    /* --- ГЕОМЕТРИЯ --- */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;

   opacity: 0;
    visibility: hidden;
    
    /* Ультра-компактные отступы */
    padding: 5px; 
    gap: 4px; 
    
    /* Ширина: 44px (кнопка) + 10px (паддинг) + 2px (бордер) = 56px */
    width: 56px; 
    
    /* Высота в покое (под нижнюю кнопку) */
    max-height: 56px; 
    
    /* ВАЖНО: visible, чтобы тултип мог "торчать" влево за пределы круга */
    overflow: visible; 
    
    /* --- СТИЛЬ --- */
    background: rgba(30, 30, 45, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    /* --- ПОЗИЦИЯ (ПК) --- */
    bottom: 12px;
    right: 90px; 
    
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}

/* Кнопки */
.reactions-widget .reaction-btn {
    all: unset; 
    width: 44px; 
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    transition: transform 0.2s ease;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Обертка триггера (для позиционирования тултипа) */
.reactions-trigger-wrapper {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Внутренний список смайлов */
.reactions-list-inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px; /* Минимальный отступ между смайлами */
    width: 100%;
    align-items: center;
    
    /* Скрываем через opacity */
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none; /* Чтобы нельзя было нажать невидимое */
    
    transition: opacity 0.3s ease, transform 0.3s ease;
    padding-bottom: 2px;
}

/* === СТИЛИ ТУЛТИПА (Всплывашка) === */
.reaction-tooltip {
    position: absolute;
    /* Позиция: слева от кнопки */
    right: 55px; 
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    
    background: rgba(15, 17, 35, 0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 10001;
}

/* Стрелочка тултипа */
.reaction-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(15, 17, 35, 0.95);
}

/* Показываем тултип при наведении на нижнюю кнопку */
.reactions-trigger-wrapper:hover .reaction-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* ==============================================
   ЛОГИКА ДЛЯ ПК (> 1200px)
   ============================================== */
@media (min-width: 1201px) {
    .reactions-widget {
        /* Позиционирование */
        right: calc(clamp(8px, 2vw, 12px) + 62px + 20px);
        bottom: clamp(8px, 2vw, 12px);
    }

    /* Открытие при наведении */
    .reactions-widget:hover {
        max-height: 500px !important; /* Компактная высота */
        background: rgba(30, 30, 45, 0.95);
        border-color: var(--glass-border);
    }
    
    .reactions-widget:hover .reactions-list-inner {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    
    .reactions-widget .reaction-btn:hover {
        transform: scale(1.2);
    }
    
    /* Прячем тултип, если мы уже внутри виджета и открыли его (опционально) */
    /* Если хотите, чтобы он оставался, удалите этот блок */
    .reactions-widget:hover .reactions-trigger-wrapper:hover .reaction-tooltip {
        opacity: 1; /* Оставляем видимым при наведении на триггер */
    }
}

/* ==============================================
   ЛОГИКА ДЛЯ ТЕЛЕФОНОВ (<= 1200px)
   ============================================== */
@media (max-width: 1200px) {
    .reactions-widget {
        right: clamp(8px, 2vw, 12px);
        bottom: 20px;
        background: rgba(30, 30, 45, 0.7);
    }
    
    /* На телефонах тултип не нужен */
    .reaction-tooltip {
        display: none !important;
    }

    /* Открытие по клику */
    .reactions-widget.is-open {
        max-height: 500px !important; 
        background: rgba(30, 30, 45, 0.98);
        border-color: #10b981;
    }
    
    .reactions-widget.is-open .reactions-list-inner {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Узкие экраны */
@media (max-width: 600px) {
    .reactions-widget {
        //bottom: 90px; 
    }
}
/* ============================================================
   FIX: MOBILE LANDSCAPE (ГОРИЗОНТАЛЬНЫЙ РЕЖИМ)
   ============================================================ */

@media screen and (max-height: 500px) and (orientation: landscape) {

    /* 1. Разрешаем прокрутку страницы, так как контент не влезает по высоте */
    body, html, .page-container {
        height: auto !important;
        min-height: 100vh;
        overflow-y: auto !important; /* Включаем скролл */
        overflow-x: hidden;
    }

    .wrap {
        height: auto;
        min-height: 100%;
        padding-bottom: 60px; /* Место для футера, если он нужен */
    }

    /* 2. Меняем позиционирование секций, чтобы они шли друг за другом или скроллились */
    .page-section {
        position: relative !important; /* Отменяем absolute */
        height: auto !important;
        min-height: 100vh;
        padding-top: 80px !important; /* Отступ сверху для лого */
        padding-bottom: 40px !important;
        opacity: 1 !important; /* GSAP может скрывать, принудительно показываем */
        visibility: visible !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 3. Уменьшаем шрифты, так как vw (ширина) стала большой, а высоты мало */
    h1 {
        font-size: 24px !important; /* Фиксированный размер вместо clamp */
        margin-bottom: 8px !important;
    }

    p.subtitle {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    /* 4. Уменьшаем отступы и размеры карточки */
    .card {
        padding: 16px !important;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 80vw !important; /* Делаем уже */
    }

    /* 5. Адаптируем логотип, чтобы не занимал пол-экрана */
    .logo {
        top: 10px;
        left: 20px;
        flex-direction: row !important;
        align-items: center;
    }
    .logo a {
        font-size: 20px !important;
    }
    .logo a .badge {
        top: 2px !important;
        right: -40px !important;
    }
    .support-wrap {
        display: none !important; 
    }
    .player-album-art {
        width: 70px !important;
        height: 70px !important;
    }
    
    .player-info h2 {
        font-size: 1.1rem !important;
    }
    
    .player-controls {
        gap: 12px !important;
    }
    
    .player-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .player-btn .material-icons-outlined {
        font-size: 28px !important;
    }

    .footer {
        position: relative !important; /* Футер уходит в самый низ страницы, а не экрана */
        padding: 10px !important;
        background: rgba(0,0,0,0.8) !important;
    }
    .socials-fixed {
        display: none !important;
    }
    .modal-content {
        max-height: 90vh !important;
        padding: 16px !important;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    

    .mobile-menu-toggle {
        top: 10px !important;
        right: 10px !important;
    }
    
    .inline-nav {
        display: none !important;
    }
    
    .shoutbox-toggle-mobile, .listeners-trigger, .player-aside-buttons {
        top: 10px !important;
        right: 60px !important;
    }
}
.bot-visible-only {
    position: absolute;
    left: -99999px; 
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.reactions-widget.is-muted .reaction-btn.trigger {
    filter: grayscale(100%) !important; /* Принудительно серый */
    opacity: 0.5 !important;
    transform: scale(0.9);
}

.reactions-widget.is-muted .reaction-btn.trigger:hover {
    filter: grayscale(50%) !important;
    opacity: 0.8 !important;
}
/* Crypto Modal Styles */
.crypto-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crypto-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px;
    gap: 12px;
    transition: border-color 0.2s;
}

.crypto-item:hover {
    border-color: var(--brand-primary);
}

.crypto-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
}

.crypto-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-primary-light);
    margin-bottom: 4px;
}

.crypto-address {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--text);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.copy-btn:hover {
    background: var(--brand-primary);
    color: var(--bg-1);
    transform: scale(1.1);
}

.copy-btn.copied {
    background: var(--brand-primary);
    color: var(--bg-1);
}

/* Mobile tweak for long addresses */
@media (max-width: 480px) {
    .crypto-address {
        font-size: 0.75rem;
        max-width: 200px; /* Force ellipsis on small screens */
    }
}