@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#090d12;--panel:#111922;--line:#263442;--text:#eef4f7;--muted:#91a1ad;--cyan:#36d6c4;--gold:#d9b66d}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% -15%,#18303a 0,transparent 42%),var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}.top{height:76px;padding:0 max(6vw,22px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;position:sticky;top:0;background:#090d12eF;backdrop-filter:blur(16px);z-index:4}
.brand{font-weight:800;letter-spacing:.18em;font-size:19px}.brand span{color:var(--cyan)}nav{display:flex;gap:26px;color:var(--muted);font-size:13px}nav a:hover,.back:hover{color:var(--cyan)}
main{max-width:1120px;margin:auto;padding:0 26px 70px}.hero{padding:92px 0 72px}.hero.compact{padding:55px 0 30px}.eyebrow{font-size:10px;letter-spacing:.25em;color:var(--cyan);font-weight:800}
h1{font-size:clamp(42px,8vw,82px);line-height:1.04;letter-spacing:-.06em;margin:18px 0}h1 em{font-style:normal;color:var(--cyan)}h2{font-size:25px;letter-spacing:-.04em}.muted,small{color:var(--muted)}.muted{line-height:1.7}
.search{display:flex;max-width:540px;margin-top:30px;gap:8px}.search input{flex:1}.search input,input,textarea,select{background:#0b1219;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:13px;font:inherit;min-width:0}
button{border:0;border-radius:10px;padding:13px 18px;background:var(--cyan);color:#041110;font-weight:800;cursor:pointer;font:inherit}.search button{font-weight:800}
section{margin-bottom:55px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.album{background:var(--panel);border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:.2s}.album:hover,.track:hover{border-color:#4e36d677;transform:translateY(-2px)}.album img,.cover-placeholder{width:100%;aspect-ratio:1;object-fit:cover}.cover-placeholder{display:grid;place-items:center;background:linear-gradient(135deg,#17333a,#18202c);font-size:44px;color:var(--cyan);font-weight:800}.album div:last-child{padding:14px;display:flex;justify-content:space-between;gap:10px}.album small{font-size:11px}
.track-list{border-top:1px solid var(--line)}.track{display:flex;align-items:center;gap:16px;padding:17px 12px;border-bottom:1px solid var(--line);transition:.2s}.playdot{width:36px;height:36px;display:grid;place-items:center;border:1px solid #31505a;border-radius:50%;color:var(--cyan);font-size:12px}.track-info{display:grid;gap:5px;flex:1}.track-info small{font-size:11px}.arrow{color:var(--cyan)}
.back{display:inline-block;margin-top:30px;color:var(--muted)}.song-head{padding:50px 0 24px}.song-head h1{font-size:clamp(38px,7vw,68px)}.tags{color:var(--cyan);font-size:13px}
.player-card{background:linear-gradient(145deg,#121d27,#0d141c);border:1px solid var(--line);border-radius:20px;padding:22px}.tabs{display:flex;gap:8px;margin-bottom:18px}.tab,.outline{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px 14px}.tab.active{background:#163b3b;border-color:var(--cyan);color:var(--cyan)}audio{width:100%;margin:8px 0 14px}.karaoke-tools,.player-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.karaoke-tools button{background:#1b2934;color:var(--text);border:1px solid var(--line)}.karaoke{min-height:250px;border-radius:15px;background:radial-gradient(ellipse,#18343b,#0a1118);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:22px}.lyric-next{font-size:clamp(16px,2.5vw,22px);color:#71858f}.lyric-current{font-size:clamp(28px,4.5vw,44px);font-weight:800;line-height:1.35;color:var(--cyan);transition:.15s}.player-actions{margin-top:18px}.outline{display:inline-block;font-size:13px}.outline:hover{border-color:var(--cyan);color:var(--cyan)}.lyrics-plain{margin-top:24px;color:var(--muted)}pre{white-space:pre-wrap;font:inherit;line-height:1.8}
footer{border-top:1px solid #ffffff12;padding:25px 6vw;color:#667782;font-size:11px;letter-spacing:.12em}
.admin-wrap{max-width:950px;margin:55px auto}.admin-wrap h1{font-size:42px}.admin-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:18px}.admin-form{display:grid;gap:12px;background:var(--panel);border:1px solid var(--line);padding:20px;border-radius:15px;margin-bottom:20px}.admin-form h2{margin:0 0 5px}.admin-form label{display:grid;gap:7px;font-size:12px;color:var(--muted)}.admin-form textarea{resize:vertical}.admin-form button{margin-top:5px}.admin-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.admin-list small{display:block;margin-top:5px}.danger{background:#48252a;color:#ffdadd;padding:8px 12px;font-size:12px}.error{color:#ff8d96}
@media(max-width:700px){.top{height:64px}main{padding:0 18px 50px}.hero{padding:65px 0 50px}.admin-grid{grid-template-columns:1fr}.player-card{padding:14px}.karaoke{min-height:210px;padding:20px}nav{gap:14px;font-size:12px}}

/* ===== DEN NIGHT VINYL TURNTABLE ===== */

.hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 35px;
    min-height: 560px;
    padding: 75px 0 65px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.turntable-area {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    isolation: isolate;
}

.turntable {
    position: relative;
    width: min(390px, 75vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, #14232b 0%, #0b1219 68%, transparent 70%);
    filter: drop-shadow(0 0 25px #36d6c433);
}

.vinyl {
    position: relative;
    width: 88%;
    height: 88%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        repeating-radial-gradient(
            circle,
            #171b20 0px,
            #171b20 2px,
            #080b0f 3px,
            #20262c 4px,
            #080b0f 6px
        );
    border: 3px solid #26343d;
    box-shadow:
        0 0 0 3px #36d6c455,
        0 0 22px #36d6c455,
        inset 0 0 35px #000;
    animation: vinyl-spin 7s linear infinite;
}

.vinyl::before {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    border: 1px solid #ffffff20;
    background: repeating-radial-gradient(
        circle,
        transparent 0 5px,
        #ffffff0b 6px 7px
    );
}

.vinyl-label {
    position: relative;
    z-index: 2;
    width: 36%;
    height: 36%;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, #36d6c4, #102d32 75%);
    border: 5px solid #111820;
    box-shadow: 0 0 18px #36d6c455;
}

.vinyl-label img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.vinyl-label span {
    color: #eafffc;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.3;
}

@keyframes vinyl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



/* Эквалайзер */

.equalizer {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 90px;
    z-index: -1;
}

.equalizer i {
    display: block;
    width: 4px;
    border-radius: 5px;
    background: var(--cyan);
    box-shadow: 0 0 9px #36d6c4;
    animation: equalizer-wave 0.9s ease-in-out infinite alternate;
}

.equalizer i:nth-child(1) { height: 20%; animation-delay: .1s; }
.equalizer i:nth-child(2) { height: 45%; animation-delay: .3s; }
.equalizer i:nth-child(3) { height: 75%; animation-delay: .5s; }
.equalizer i:nth-child(4) { height: 100%; animation-delay: .2s; }
.equalizer i:nth-child(5) { height: 60%; animation-delay: .4s; }
.equalizer i:nth-child(6) { height: 35%; animation-delay: .6s; }
.equalizer i:nth-child(7) { height: 15%; animation-delay: .3s; }

@keyframes equalizer-wave {
    from { transform: scaleY(.35); opacity: .5; }
    to { transform: scaleY(1); opacity: 1; }
}

.equalizer-left {
    left: 0;
}

.equalizer-right {
    right: 0;
}

.turntable-caption {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

/* Адаптация для телефонов */

@media (max-width: 800px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 55px;
    }

    .turntable-area {
        min-height: 390px;
    }

    .turntable {
        width: min(320px, 75vw);
    }

    .equalizer-left {
        left: 5%;
    }

    .equalizer-right {
        right: 5%;
    }
}

@media (max-width: 450px) {
    .turntable-area {
        min-height: 330px;
    }

    .turntable-caption {
        width: 90%;
        font-size: 8px;
    }
}

/* Фотография на всей поверхности винила */

.vinyl {
    overflow: hidden;
}

.vinyl-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0.72;
    z-index: 0;
}

.vinyl::before {
    z-index: 1;
    pointer-events: none;
}

.vinyl-label {
    z-index: 2;
}

/* Убираем маленькую фотографию в центре пластинки */
.vinyl-label {
    display: none;
}

/* Исправление положения фотографии на виниле */
.vinyl {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    isolation: isolate;
}

.vinyl-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
    transform: none;
    z-index: 0;
}

/* Исправление композиции винилового проигрывателя */

.turntable {
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: center;
}

.vinyl,
.tonearm {
    grid-area: 1 / 1;
}

.vinyl {
    width: 88%;
    height: auto;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.vinyl-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    transform: none;
    z-index: 0;
}

.vinyl::before {
    z-index: 1;
    pointer-events: none;
}

.vinyl-label {
    display: none;
}

/* Винил на странице воспроизведения */

.song-vinyl-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 0 35px;
}

.song-vinyl {
    width: min(320px, 75vw);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 3px solid #36d6c4;
    box-shadow: 0 0 25px #36d6c455;
    animation: vinyl-spin 7s linear infinite;
    animation-play-state: paused;
}

.song-vinyl img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.song-vinyl.is-playing {
    animation-play-state: running;
}

.song-vinyl-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: #111922;
    color: #36d6c4;
    font-size: 55px;
    font-weight: 800;
}