/* ===============================
   1. DESIGN SYSTEM & VARIABLES
================================ */
:root {
    --bg-color: #f4f4f5;
    --bg-elevated: #ffffff;

    --text-main: #111111;
    --text-muted: #666666;

    --accent: #FF9900;

    --border-soft: rgba(0,0,0,0.05);

    --shadow-soft: 0 4px 20px rgba(0,0,0,0.03);
    --shadow-medium: 0 10px 40px rgba(0,0,0,0.06);
    --shadow-strong: 0 25px 60px rgba(0,0,0,0.1);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
textarea,
select,
.route-trigger,
.route-option,
.btn-play-route,
.toggle-btn,
.gp-play-btn,
.gp-license-btn,
.yt-close,
.btn,
.btn-danger,
.btn-outline,
.btn-atlas,
.btn-restart-journey,
.map-node {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
.route-trigger:focus,
.route-option:focus,
.btn-play-route:focus,
.toggle-btn:focus,
.gp-play-btn:focus,
.gp-license-btn:focus,
.yt-close:focus,
.btn:focus,
.btn-danger:focus,
.btn-outline:focus,
.btn-atlas:focus,
.btn-restart-journey:focus {
    outline: none;
    box-shadow: none;
}

/* ===============================
   2. BASE & TYPOGRAPHY
================================ */
body {
    margin: 0;
    background: var(--bg-color);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: 90px;
}

h1, h2, h3 {
    margin: 0 0 20px 0;
    font-weight: 600;
    text-wrap: balance;
}

p {
    color: var(--text-muted);
    line-height: 1.7;
    letter-spacing: -0.01em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
}

/* ===============================
   2.1 MONO UI FONT SYSTEM
================================ */
.hero-meta,
.logo span,
.toggle-btn,
.nav-link,
.release-type,
.track-id,
.tag,
.track-time,
.site-footer,
.gp-artist-row,
.gp-time-display,
.gp-hint,
.gp-price-tag,
.input-group label,
.footer-link,
.map-instruction,
.cover-placeholder {
    font-family: 'Space Mono', monospace;
}

/* ===============================
   2.2 UI UPPERCASE SYSTEM
================================ */
.btn,
.dashboard,
.hero-meta,
.logo,
.nav-link,
.nav-pill,
.release-type,
.tag,
.tracks-table,
.site-footer,
.premium-btn,
.gp-title,
.gp-artist-row,
.map-instruction,
.input-group label {
    text-transform: uppercase;
}

/* ===============================
   3. HERO SECTION (Обновленный)
================================ */
.hero { padding: 60px 0 40px; }
.hero-meta {
    font-size: 12px;
    color: var(--accent);
    margin-bottom: 20px;
    letter-spacing: 2px;
}

/* Наш новый журнальный блок */
.hero-content {
    display: flex;
    align-items: center; /* Выравниваем по центру по высоте */
    gap: 40px; /* Расстояние между заголовком и текстом */
}

.hero h1 { 
    font-size: 56px; 
    letter-spacing: -2px; 
    margin: 0; /* Убрали нижний отступ, так как теперь они в линию */
    flex-shrink: 0; /* Запрещаем заголовку сжиматься */
}

.hero p { 
    font-size: 16px;
    margin: 0;
    padding-left: 40px; /* Внутренний отступ от разделителя */
    border-left: 1px solid var(--border-soft);
    max-width: 450px; 
    line-height: 1.6;
}

/* ===============================
   X. TOP NAVIGATION & TOGGLE
================================ */
.top-nav {
    display: flex;
    flex-direction: column; 
    gap: 12px;
    padding: 10px 15px;
    text-align: center;
    background: #fdfdfd;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    height: auto; 
    box-sizing: border-box;
    position: relative;
    z-index: 9999; 
}

.logo {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4px;
    margin: 0 auto;
    color: #111;
    white-space: nowrap;
}

.logo span {
    display: inline-block;
    font-size: 8px;
    margin-top: 0;
    margin-left: 10px;
    letter-spacing: 2px;
    opacity: 0.5;
    vertical-align: middle;
}

.mode-toggle {
    width: 100%;
    max-width: 280px; 
    margin: 0 auto;
    display: flex;
    background: #f0f0f2;
    padding: 3px;
    border-radius: 50px;
    position: relative;
}

.toggle-btn {
    flex: 1;
    padding: 10px 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 40px;
    border: none !important;
    background: transparent;
    color: #888;
    cursor: pointer;
    transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
}

.toggle-btn:hover { color: var(--text-main); }

.toggle-btn.active {
    background: #000 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-link {
    font-size: 9px;
    letter-spacing: 1px;
    color: #111;
    opacity: 0.5;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: 0.2s var(--ease-premium);
}

.nav-link:hover { opacity: 1; color: var(--accent); border-bottom-color: var(--accent); }

/* ===============================
   4. NAVIGATION DOTS (CAROUSEL PAGINATION)
================================ */
.album-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    width: 100%;
}

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border: none;
    padding: 0;
}

.nav-dot:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.2);
}

.nav-dot.active {
    width: 32px; /* Вытягивается в стильную пилюлю */
    background: var(--text-main); 
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}

/* ===============================
   5. CATALOG CONTAINER & RELEASE CARD (CAROUSEL)
================================ */
/* Главный контейнер (Окно просмотра карусели) */
#catalog-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding-bottom: 40px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: height 0.5s var(--ease-premium);
    align-items: flex-start;

    /* CSS vars для масок онбординга */
    --catalog-peek-shift: -6%;
    --catalog-mask-right: linear-gradient(to right, black 90%, transparent 100%);
    --catalog-mask-both: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    --catalog-mask-left: linear-gradient(to right, transparent 0%, black 10%, black 100%);

    /* Маска по умолчанию: нет */
    -webkit-mask-image: none;
    mask-image: none;
}

#catalog-container::-webkit-scrollbar {
    display: none;
}

/* Сама карточка альбома */
.release-card {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 60px;
    margin-bottom: 0;

    flex: 0 0 100%;
    box-sizing: border-box;
    scroll-snap-align: center;
    scroll-snap-stop: always;

    background: var(--bg-elevated);
    padding: 60px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);

    transform: scale(0.985);
    transition:
        transform 0.42s var(--ease-premium),
        box-shadow 0.32s var(--ease-premium);
}

/* Центральный (активный) альбом */
.release-card.active {
    transform: scale(1);
    box-shadow: var(--shadow-medium);
}

.release-visual { display: flex; flex-direction: column; gap: 30px; }

.cover-img { 
    width: 100%; aspect-ratio: 1/1; object-fit: cover; 
    border-radius: var(--radius-md); box-shadow: var(--shadow-medium); 
    transition: transform 0.6s var(--ease-premium), box-shadow 0.6s var(--ease-premium); 
}
.release-card.active:hover .cover-img { transform: scale(1.03); box-shadow: var(--shadow-strong); }

.cover-placeholder { 
    width: 100%; aspect-ratio: 1/1; background: var(--bg-color); 
    border-radius: var(--radius-md); display: flex; align-items: center; 
    justify-content: center; color: var(--text-muted); 
}

.release-type {
    font-size: 10px;
    color: var(--accent);
    margin-bottom: 8px;
    letter-spacing: 2px;
    font-weight: 700;
}
.release-title { 
    font-size: 28px;
    letter-spacing: -0.5px; 
    margin-bottom: 16px; 
    line-height: 1.2; 
    text-wrap: balance; 
    font-weight: 700;
}
.release-desc { 
    font-size: 13px; 
    line-height: 1.6;
    color: var(--text-muted); 
    opacity: 0.95;
    text-align: left;
    letter-spacing: 0;
    max-width: 100%; 
}

/* Мобильная адаптация сетки карточки */
@media (max-width: 900px) {
    .release-card {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px;
    }
    #catalog-container {
        gap: 10px; /* Меньше зазор на мобилке */
    }
}

/* ===============================
   PREMIUM ONBOARDING & DISSOLVE MASKS
================================ */

/* --- Волна для точек навигации --- */
@keyframes dotWave {
    0%, 100% {
        background: rgba(0, 0, 0, 0.15);
        transform: scale(1);
    }
    50% {
        background: var(--accent);
        transform: scale(1.22);
        box-shadow: 0 0 10px rgba(255,153,0,0.35);
    }
}

.nav-dot.wave-anim {
    animation: dotWave 0.52s ease-in-out;
}

/* Движение онбординга */
#catalog-container.is-onboarding {
    transition:
        height 0.5s var(--ease-premium),
        transform 0.82s cubic-bezier(0.25, 1, 0.25, 1),
        -webkit-mask-image 0.24s ease,
        mask-image 0.24s ease;
}

#catalog-container.is-peeking {
    transform: translateX(var(--catalog-peek-shift));
}

#catalog-container.mask-right-flow {
    -webkit-mask-image: linear-gradient(to right, black 84%, transparent 100%);
    mask-image: linear-gradient(to right, black 84%, transparent 100%);
}

#catalog-container.mask-left-flow {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16%);
    mask-image: linear-gradient(to right, transparent 0%, black 16%);
}

/* --- Подсказка: светлое матовое стекло --- */
.frosted-hint-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 16px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.7s var(--ease-premium),
        transform 0.7s var(--ease-premium);
}

.frosted-hint-overlay.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


@keyframes catalogBounceStart {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(12px); }
    55% { transform: translateX(-5px); }
    75% { transform: translateX(2px); }
}

@keyframes catalogBounceEnd {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-12px); }
    55% { transform: translateX(5px); }
    75% { transform: translateX(-2px); }
}

#catalog-container.bounce-start {
    animation: catalogBounceStart 0.42s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#catalog-container.bounce-end {
    animation: catalogBounceEnd 0.42s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (max-width: 900px) {
    .frosted-hint-overlay {
        display: none !important;
    }

    #catalog-container {
        --catalog-peek-shift: -6%;
        --catalog-mask-right: linear-gradient(to right, black 90%, transparent 100%);
        --catalog-mask-both: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
        --catalog-mask-left: linear-gradient(to right, transparent 0%, black 10%, black 100%);
    }
        #catalog-container.mask-right-flow {
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
    }

    #catalog-container.mask-left-flow {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%);
        mask-image: linear-gradient(to right, transparent 0%, black 10%);
    }
}

.frosted-key {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: var(--text-main);
}

.frosted-key svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 4px;
}

.frosted-key::after {
    content: '';
    width: 20px;
    height: 2px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

/* ===============================
   6. TRACK LIST (PREMIUM REDESIGN)
================================ */
.track-row {
    display: grid;
    grid-template-columns: 40px 50px minmax(0, 1fr) auto 50px;
    grid-template-areas:
        "play id title tags time"
        "play id desc  desc time";
    align-items: center;
    column-gap: 0;
    row-gap: 0;
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: var(--radius-md);
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition:
        background 0.3s var(--ease-premium),
        box-shadow 0.3s var(--ease-premium);
    cursor: pointer;
}

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

.track-row:hover {
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border-color: transparent;
}

.track-row.playing {
    background: rgba(255,153,0,0.04);
    box-shadow: inset 3px 0 0 var(--accent);
    border-color: transparent;
}

.track-play {
    grid-area: play;
    display: flex;
    justify-content: flex-start;
}

.track-play svg {
    width: 12px;
    height: 12px;
    fill: #aaa;
    transition: 0.3s;
}

.track-row:hover .track-play svg {
    fill: var(--text-main);
    opacity: 1;
}

.track-row.playing .track-play svg {
    fill: var(--accent);
    opacity: 1;
}

.track-id {
    grid-area: id;
    font-size: 11px;
    color: #bbb;
    letter-spacing: 1px;
}

.track-title {
    grid-area: title;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
    transition: color 0.3s;
}

.track-row.playing .track-title {
    color: var(--accent);
    font-weight: 600;
}

.track-description {
    grid-area: desc;
    min-width: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #888;
    margin-top: 0;
    padding-right: 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    white-space: normal;
    transition:
        max-height 0.35s var(--ease-premium),
        opacity 0.25s ease,
        transform 0.25s ease,
        margin-top 0.35s var(--ease-premium);
}

.track-row.expanded .track-description {
    max-height: 48px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 6px;
}

.track-row.playing .track-description {
    color: #666;
}

.track-tags {
    grid-area: tags;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.track-row:hover .track-tags {
    opacity: 1;
}

.tag {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.12);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 9px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.track-time {
    grid-area: time;
    font-size: 12px;
    text-align: right;
    color: #aaa;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
    align-self: center;
}

.track-row:hover .track-time,
.track-row.playing .track-time {
    color: var(--text-main);
}

/* ===============================
   7. STUDIO & INFO GRID
================================ */
.studio-section {
    padding: 60px 0;
    border-top: 1px solid var(--border-soft);
    margin-top: 20px;
}

.about-block {
    max-width: 800px;
    margin-bottom: 50px;
}

.about-title {
    font-size: 32px;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.about-text {
    font-size: 16px;
    line-height: 1.6;
    max-width: 700px;
}

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

.info-card {
    padding: 30px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);
}

.info-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}


/* ===============================
   8. BUTTONS
================================ */
.premium-btn {
    background: var(--accent); color: #000; font-size: 12px; letter-spacing: 1.5px;
    font-weight: 800; padding: 18px 36px; border-radius: 50px;
    border: none; cursor: pointer; transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-top: 20px;
}
.premium-btn:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(255,153,0,0.35); }
.premium-btn svg { width: 18px; height: 18px; }

/* =========================================
   9. GLOBAL PLAYER (COMPACT DOCK)
========================================= */
.global-player {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9000;
    
    /* 1. УБИРАЕМ фон и блюр из самого плеера — он теперь прозрачный контейнер */
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
    
    transform: translateY(100%); 
    transition: transform 0.5s var(--ease-premium);
    
    /* Изолируем контент плеера от страницы */
    isolation: isolate; 
}

/* 2. СОЗДАЕМ статический фоновый слой со стеклом */
.global-player::before {
    content: '';
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    
    /* Фиксируем этот слой для видеокарты, чтобы он не перерисовывался */
    transform: translateZ(0); 
}

.global-player.active { 
    transform: translateY(0); 
}

.gp-hint {
    position: absolute; top: -45px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px);
    color: #fff; font-size: 10px;
    padding: 8px 16px; border-radius: 20px; opacity: 0; visibility: hidden; 
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    pointer-events: none; white-space: nowrap; letter-spacing: 1px; z-index: 100;
}
.gp-hint.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-10px); }

.gp-progress-bg { position: absolute; top: -10px; left: 0; width: 100%; height: 20px; cursor: pointer; z-index: 10; background: transparent; -webkit-tap-highlight-color: transparent; }
.gp-progress-bg::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; height: 3px; background: rgba(0, 0, 0, 0.08); transition: height 0.3s var(--ease-premium); }

/* 3. Очищаем прогресс-бар */
.gp-progress-fill { 
    position: absolute; top: 50%; left: 0; height: 3px; 
    background: var(--accent); pointer-events: none; 
    
    /* Убрал will-change, так как он иногда создает больше проблем, чем пользы при изменении width */
    transition: width 0.1s linear, height 0.3s var(--ease-premium); 
    transform: translateY(-50%);
}

.gp-progress-bg.expanded::before, .gp-progress-bg.expanded .gp-progress-fill { height: 5px !important; }

.gp-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    height: 75px;
    padding: 0 20px;
}
.gp-left,
.gp-right {
    display: flex;
    align-items: center;
}
.gp-left {
    gap: 15px;
}

.gp-right {
    gap: 25px;
}

.gp-play-btn { 
    width: 40px; 
    height: 40px; 
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
    border-radius: 50%; 
    background: #111; 
    color: #fff; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; 
}

.gp-play-btn.is-playing { background: var(--accent) !important; transform: scale(1.05); }
.gp-play-btn svg { width: 16px; height: 16px; fill: currentColor; }

.gp-track-info { display: flex; flex-direction: column; justify-content: center; }
.gp-title { font-size: 14px; font-weight: 800; color: #111; letter-spacing: -0.5px; margin-bottom: 2px; }
.gp-artist-row { font-size: 10px; color: #888; letter-spacing: 1px; }
.gp-separator { margin: 0 4px; opacity: 0.5; }
.gp-artist { color: #444; font-weight: 700; }

.gp-time-display { 
    font-size: 11px; 
    color: #666; 
    letter-spacing: 1px; 
    
    /* 1. Делаем все цифры строго одинаковой ширины, чтобы блок не дергался */
    font-variant-numeric: tabular-nums; 
    
    /* 2. Изолируем таймер в отдельный слой, чтобы его обновления не трогали страницу */
    transform: translateZ(0);
    backface-visibility: hidden;
}
.gp-time-divider { opacity: 0.4; margin: 0 4px; }

.gp-license-btn { display: flex; align-items: center; gap: 8px; background: transparent; border: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
.gp-license-btn:hover { background: rgba(255, 153, 0, 0.1); }
.cart-icon { width: 20px; height: 20px; stroke: var(--accent); }
.gp-price-tag { font-size: 14px; font-weight: 700; color: #111; }


/* ===============================
   10. MODAL
================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10005;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s var(--ease-premium);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background: var(--bg-elevated); width: 100%; max-width: 450px; padding: 50px; border-radius: var(--radius-lg);
    position: relative; transform: translateY(40px) scale(0.95); transition: 0.5s var(--ease-premium); box-shadow: var(--shadow-strong);
}
.modal-overlay.active .modal-content { transform: translateY(0) scale(1); }
.close-modal { position: absolute; top: 20px; right: 25px; background: none; border: none; font-size: 28px; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.close-modal:hover { color: var(--text-main); }

.modal-header { margin-bottom: 30px; }
.modal-header h2 { margin: 5px 0 0 0; }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; font-size: 11px; font-weight: 800; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 1px; }
.input-group input,
.input-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: var(--bg-color);
    box-sizing: border-box;
    transition: border 0.3s;
}
.input-group input:focus, .input-group textarea:focus { border-color: var(--accent); outline: none; background: var(--bg-elevated); }
.modal-note { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 20px; }

/* ===============================
   12. FOOTER
================================ */
.site-footer {
    margin-top: 60px;
    padding: 30px 0 100px 0;
    border-top: 1px solid var(--border-soft);
    font-size: 11px; 
    color: var(--text-muted);
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    letter-spacing: 0.05em;
    flex-wrap: wrap; 
    gap: 20px;
}
a.footer-link { 
    color: var(--text-main) !important; 
    text-decoration: none; 
    border-bottom: 1px solid var(--border-soft); 
    padding-bottom: 2px; 
    transition: 0.2s var(--ease-premium); 
}
a.footer-link:hover { 
    color: var(--accent) !important; 
    border-color: var(--accent); 
}


/* ===============================
   11. ADMIN HUB & ATLAS EDITOR
================================ */
.dashboard { max-width: 1000px; margin: 0 auto; padding: 40px; background: var(--bg-color); min-height: 100vh; }
.header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }

.btn { background: #111; color: #fff; padding: 8px 16px; border: none; cursor: pointer; font-size: 11px; border-radius: 4px; font-weight: 700; transition: 0.2s; }
.btn:hover { background: var(--accent); color: #000; }
.btn-danger { background: #ff4444; color: #fff; padding: 6px 10px; border: none; border-radius: 4px; font-size: 10px; cursor: pointer; }
.btn-outline { background: transparent; border: 1px solid #ddd; color: #666; padding: 6px 10px; border-radius: 4px; font-size: 10px; cursor: pointer; }
.btn-atlas { background: rgba(255, 153, 0, 0.1); border: 1px solid var(--accent); color: var(--accent); padding: 8px 16px; border-radius: 4px; font-size: 11px; font-weight: 800; cursor: pointer; transition: 0.2s; letter-spacing: 1px; }
.btn-atlas:hover { background: var(--accent); color: #fff; }

.dashboard details { background: var(--bg-elevated); border-radius: var(--radius-md); margin-bottom: 20px; box-shadow: var(--shadow-soft); border: 1px solid var(--border-soft); overflow: hidden; }
.dashboard summary { padding: 20px 30px; font-weight: 800; cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; transition: background 0.2s; }
.dashboard summary:hover { background: rgba(0,0,0,0.02); }
.album-body { padding: 30px; border-top: 1px solid var(--border-soft); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.dashboard label, .atlas-modal label { display: block; font-size: 10px; font-weight: 800; color: #999; margin-bottom: 5px; }

.dashboard input,
.dashboard select,
.dashboard textarea,
.atlas-modal input,
.atlas-modal select,
.atlas-modal textarea { 
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    background: var(--bg-elevated);
    transition: border 0.3s;
}
.dashboard input:focus, .dashboard select:focus, .dashboard textarea:focus,
.atlas-modal input:focus, .atlas-modal select:focus, .atlas-modal textarea:focus { border-color: var(--accent); outline: none; }

.tracks-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.tracks-table th { text-align: left; font-size: 9px; color: #bbb; padding: 10px; border-bottom: 2px solid var(--bg-color); letter-spacing: 1px; }
.tracks-table td { padding: 12px 10px; border-bottom: 1px solid var(--bg-color); font-size: 13px; }
.track-edit-grid { display: grid; grid-template-columns: 80px 1.5fr 1.5fr 80px; gap: 15px; margin-bottom: 15px; align-items: start; }

.tag-badge { background: var(--bg-color); padding: 3px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.add-track-box { background: #fafafa; padding: 25px; border: 2px dashed #eee; border-radius: var(--radius-md); margin-top: 30px; }

/* === ATLAS MODAL EDITOR === */
.atlas-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10005; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.atlas-modal { background: #fff; width: 900px; max-width: 95%; border-radius: var(--radius-md); display: flex; overflow: hidden; box-shadow: var(--shadow-strong); }
.atlas-sidebar { width: 350px; background: #fafafa; padding: 30px; border-right: 1px solid #eee; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; max-height: 80vh; }
.atlas-map-area { flex: 1; padding: 30px; display: flex; flex-direction: column; background: #fff; }

.map-canvas-wrapper { flex: 1; background: var(--bg-color); border: 2px dashed #ddd; border-radius: var(--radius-sm); position: relative; cursor: crosshair; min-height: 400px; margin-bottom: 15px; overflow: hidden; }
.map-marker { position: absolute; width: 16px; height: 16px; background: var(--accent); border: 3px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 15px rgba(255,153,0,0.5); pointer-events: none; display: none; }

.map-instruction { text-align: center; font-size: 11px; color: #999; margin-bottom: 15px; }

.login-box { max-width: 350px; margin: 100px auto; background: var(--bg-elevated); padding: 40px; border-radius: var(--radius-md); box-shadow: var(--shadow-medium); text-align: center; }
.divider { text-align: center; margin: 15px 0; font-size: 10px; color: #ccc; font-weight: 800; }
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 10006; }
.toast { background: #111; color: var(--accent); padding: 12px 20px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; margin-top: 10px; box-shadow: var(--shadow-soft); }

/* ===============================
   12. ADAPTATION & MEDIA QUERIES
================================ */

/* Код 1 и 2: Правила для управления мышью (оставляем как есть) */
@media (pointer: fine) {
    .gp-progress-bg:hover::before, .gp-progress-bg:hover .gp-progress-fill { height: 5px; }
}

@media (hover: hover) { 
    .gp-play-btn:hover { transform: scale(1.05); } 
}

/* Код 4: Планшеты (до 1024px) - должен идти ДО мобильных */
@media (max-width: 1024px) {
    .release-card { grid-template-columns: 1fr; gap: 40px; }
    .gp-container { gap: 20px; padding: 20px 5%; height: auto; }
    .info-grid { grid-template-columns: 1fr; }
}

/* ===============================
   МОБИЛЬНАЯ АДАПТАЦИЯ (до 768px)
================================ */
@media (max-width: 768px) {
    /* Базовые блоки и карточки */
    .hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .hero h1 { font-size: 36px; }
    
    .hero p { 
        padding-left: 0;
        border-left: none;
        max-width: 100%; 
    }
    
    .release-card { 
        padding: 20px 15px; 
        gap: 25px; 
    }
    
    .studio-section { 
        padding: 40px 0; 
        margin-top: 10px; 
    }
    .about-block { margin-bottom: 30px; }
    .about-title { font-size: 26px; }
    .info-grid { gap: 15px; } 
    .info-card { padding: 25px 20px; }

    /* Треклист (обновленная сетка) */
     .track-row {
        grid-template-columns: 36px 1fr auto;
        grid-template-areas:
            "play title time"
            "play desc  desc"
            "play tags  tags";
        
        padding: 14px 12px;
        row-gap: 6px;
    }

    /* Убираем ID — он только шумит на мобиле */
    .track-id {
        display: none;
    }

    /* Название */
    .track-title {
        grid-area: title;
        font-size: 15px;
        white-space: normal;
        padding-right: 10px;
    }

    /* Время */
    .track-time {
        grid-area: time;
        font-size: 11px;
    }

    /* Описание */
    .track-description {
        grid-area: desc;
        font-size: 12px;
        line-height: 1.4;
        opacity: 0.7;
    }

    /* Теги */
    .track-tags {
        grid-area: tags;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        opacity: 0.6;
    }

    .tag {
        font-size: 8px;
        padding: 2px 6px;
    }

    /* Play */
    .track-play {
        grid-area: play;
        align-items: flex-start;
        padding-top: 4px;
    }

    /* Активный трек */
    .track-row.playing {
        background: rgba(255,153,0,0.05);
    }

    /* Модальное окно (обновленный скролл) */
    .modal-content { 
        margin: 20px; 
        padding: 30px 20px; 
        width: calc(100% - 40px);
        max-height: calc(100vh - 40px); 
        overflow-y: auto; 
    }

    /* Глобальный плеер */
    .gp-container { 
        height: 65px; 
        padding: 0 15px; 
        display: flex; 
    }
    .gp-title { font-size: 12px; }
    .gp-artist-row { font-size: 9px; }
    .gp-play-btn { 
        width: 36px; height: 36px; 
        min-width: 36px; min-height: 36px; 
    }
    .gp-play-btn svg { width: 14px; height: 14px; }
    .gp-time-display { display: none; }
    .gp-right { gap: 10px; }
    .cart-icon { width: 18px; height: 18px; }
    .gp-price-tag { font-size: 12px; }

    /* Футер */
    .site-footer { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        gap: 15px; 
        padding: 40px 0 140px 0; 
    }
    .footer-right { flex-direction: column; gap: 8px; }
    .footer-status { display: none; }
}

/* =========================================
   UX BOUNDARY BOUNCE (Физический отклик плеера)
========================================= */
@keyframes bounceLeft {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-15px); }
    50% { transform: translateX(8px); }
    75% { transform: translateX(-4px); }
}
@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(15px); }
    50% { transform: translateX(-8px); }
    75% { transform: translateX(4px); }
}
.global-player.bounce-left { animation: bounceLeft 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
.global-player.bounce-right { animation: bounceRight 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }