/*
=====================================================
ОСНОВНОЙ ПЛЕЕР
=====================================================
*/

.music-player {

    width: 100%;

    max-width: 1200px;

    margin: 30px auto;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #222;

}


.music-player *,
.music-player *::before,
.music-player *::after {

    box-sizing: border-box;

}



/*
=====================================================
STICKY ОБЛАСТЬ
=====================================================
*/

.mp-player-sticky {

    position: sticky;

    top: 0;

    z-index: 100;

    background: #ffffdf;

    border-bottom:
        1px solid #aaa;

}



/*
=====================================================
ФИЛЬТРЫ
=====================================================
*/

.mp-filters {

    display: flex;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 7px;

    padding:
        8px 10px;

    background: #dedeaa;

}


.mp-filter {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.mp-filter label {

    font-size: 11px;

    font-weight: bold;

    color: #663366;

}


.mp-filter select {

    height: 31px;

    min-width: 145px;

    padding:
        4px 24px 4px 8px;

    border:
        1px solid #999;

    border-radius: 4px;

    background: #ffffff;

    color: #222;

    font-size: 12px;

    cursor: pointer;

}



/*
=====================================================
ПАНЕЛЬ УПРАВЛЕНИЯ
=====================================================
*/

.mp-controls {

    display: flex;

    align-items: center;

    gap: 4px;

    padding:
        7px 10px;

    background: #ffffdf;

}



/*
=====================================================
КНОПКИ УПРАВЛЕНИЯ
=====================================================
*/

.mp-control-button,
.mp-speed-button {

    height: 30px;

    min-width: 32px;

    padding:
        3px 6px;

    border:
        1px solid #999;

    border-radius: 4px;

    background: #f4f4f4;

    color: #222;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

}


.mp-control-button:hover,
.mp-speed-button:hover {

    background: #e4e4e4;

}


.mp-control-button svg {

    width: 15px;

    height: 15px;

    display: block;

    fill: #222;

    stroke: #222;

    stroke-width: 1.5;

}



/*
=====================================================
СКОРОСТЬ
=====================================================
*/

.mp-speed-button {

    font-size: 11px;

}


.mp-speed-active {

    background: #b8b8d8;

}



/*
=====================================================
ГРОМКОСТЬ
=====================================================
*/

.mp-volume-slider {

    flex:
        0 0 50px;

    width: 50px;

    min-width: 50px;

    max-width: 50px;

    height: 4px;

    margin-left: 4px;

    accent-color: #4B0082;

    cursor: pointer;

}



/*
=====================================================
ЗАГОЛОВОК ТАБЛИЦЫ

7 столбцов:

1. Play
2. Номер
3. Длительность
4. Waveform
5. Примечание
6. Темп
7. Действия
=====================================================
*/

.mp-table-header {

    display: grid;

    grid-template-columns:
        42px
        80px
        80px
        minmax(180px, 1fr)
        130px
        55px
        210px;

    align-items: center;

    padding:
        7px 10px;

    background: #dedeaa;

    border-top:
        1px solid #aaa;

    font-size: 11px;

    font-weight: bold;

    color: #333;

}



/*
=====================================================
СТРОКИ
=====================================================
*/

.mp-track {

    display: grid;

    grid-template-columns:
        42px
        80px
        80px
        minmax(180px, 1fr)
        130px
        55px
        210px;

    align-items: center;

    min-height: 50px;

    border-bottom:
        1px solid #ccc;

    background: #ffffdf;

}


.mp-track:hover {

    background: #eeeeee;

}


.mp-track-active {

    background: #e4d600 !important;

}


.mp-track-played {

    background: #d0d0d0 !important;

}



/*
=====================================================
PLAY В СТРОКЕ
=====================================================
*/

.mp-track-play {

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        5px;

}


.mp-row-play {

    width: 30px;

    height: 30px;

    padding: 0;

    border:
        1px solid #999;

    border-radius: 50%;

    background: #f4f4f4;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

}


.mp-row-play:hover {

    background: #e4e4e4;

}


.mp-row-play svg {

    width: 14px;

    height: 14px;

    display: block;

    fill: #222;

    stroke: none;

}



/*
=====================================================
НОМЕР / ДЛИТЕЛЬНОСТЬ
=====================================================
*/

.mp-track-id,
.mp-track-duration {

    padding:
        6px 8px;

}


.mp-track-id {

    font-size: 13px;

    font-weight: bold;

    color: #663366;

}


.mp-track-duration {

    font-size: 12px;

}



/*
=====================================================
WAVEFORM
=====================================================
*/

.mp-waveform {

    position: relative;

    min-width: 0;

    height: 42px;

    padding:
        3px 0;

    display: flex;

    align-items: center;

    cursor: pointer;

    overflow: hidden;

}


.mp-waveform canvas {

    position: absolute;

    left: 0;

    top: 3px;

    display: block;

    width: 100%;

    height: 34px;

}


.mp-waveform-empty {

    width: 100%;

    height: 2px;

    background: #c5c5b8;

}


.mp-waveform-time {

    position: absolute;

    left: 4px;

    bottom: 0;

    font-size: 8px;

    line-height: 9px;

    color: #555;

    pointer-events: none;

}



/*
=====================================================
ПРИМЕЧАНИЕ
=====================================================
*/

.mp-track-note {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px;

    padding:
        6px 8px;

    font-size: 11px;

}


.mp-note-tag,
.mp-tempo-tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 20px;

    padding:
        2px 6px;

    border-radius: 4px;

    background: #dedebd;

    color: #333;

    font-size: 10px;

}


.mp-note-tag {

    font-weight: bold;

}


.mp-tempo-tag {

    width: 24px;

    min-width: 24px;

    font-weight: bold;

    color: #663366;

}


.mp-empty-note {

    color: #999;

}



/*
=====================================================
ДЕЙСТВИЯ
=====================================================
*/

.mp-track-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    padding:
        6px 8px;

}



/*
=====================================================
СКАЧИВАНИЕ
=====================================================
*/

.mp-download-button {

    width: 32px;

    height: 30px;

    flex:
        0 0 32px;

    border:
        1px solid #999;

    border-radius: 4px;

    background: #f4f4f4;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

}


.mp-download-button:hover {

    background: #e4e4e4;

}


.mp-download-button svg {

    width: 16px;

    height: 16px;

    display: block;

    fill: none;

    stroke: #222;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}



/*
=====================================================
ЗАКАЗ
=====================================================
*/

.mp-order-button {

    min-height: 30px;

    padding:
        4px 7px;

    border:
        1px solid #999;

    border-radius: 4px;

    background: #f4f4f4;

    color: #222;

    font-size: 10px;

    text-decoration: none;

    white-space: nowrap;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}


.mp-order-button:hover {

    background: #e4e4e4;

}



/*
=====================================================
ПОКАЗАТЬ ЕЩЁ
=====================================================
*/

.mp-show-more {

    display: block;

    margin:
        12px auto;

    padding:
        7px 18px;

    border:
        1px solid #999;

    border-radius: 4px;

    background: #f4f4f4;

    color: #222;

    cursor: pointer;

    font-size: 12px;

}


.mp-show-more:hover {

    background: #e4e4e4;

}



/*
=====================================================
ДО 950 PX
=====================================================
*/

@media (
    max-width: 950px
) {


    .mp-filter select {

        min-width: 115px;

    }


    .mp-table-header,
    .mp-track {

        grid-template-columns:
            38px
            60px
            65px
            minmax(130px, 1fr)
            100px
            45px
            180px;

    }


    .mp-order-button {

        font-size: 9px;

        padding:
            4px 5px;

    }

}



/*
=====================================================
ДО 700 PX
=====================================================
*/

@media (
    max-width: 700px
) {


    .mp-filters {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;

    }


    .mp-filter select {

        width: 100%;

        min-width: 0;

    }


    .mp-table-header,
    .mp-track {

        grid-template-columns:
            34px
            48px
            55px
            minmax(90px, 1fr)
            70px
            42px
            110px;

    }


    .mp-table-header {

        padding:
            6px 4px;

        font-size: 8px;

    }


    .mp-track {

        min-height: 46px;

    }


    .mp-track-id,
    .mp-track-duration {

        padding:
            5px 4px;

    }


    .mp-track-id,
    .mp-track-duration {

        font-size: 10px;

    }


    .mp-track-note,
    .mp-track-actions {

        padding:
            5px 4px;

    }


    .mp-waveform {

        height: 38px;

    }


    .mp-waveform canvas {

        height: 30px;

    }


    .mp-row-play {

        width: 27px;

        height: 27px;

    }


    .mp-row-play svg {

        width: 12px;

        height: 12px;

    }


    .mp-order-button {

        font-size: 8px;

        white-space: normal;

        line-height: 1.1;

        text-align: center;

    }

}



/*
=====================================================
ДО 520 PX
=====================================================
*/

@media (
    max-width: 520px
) {


    .mp-filters {

        padding:
            6px;

    }


    .mp-filter label {

        font-size: 9px;

    }


    .mp-filter select {

        height: 28px;

        font-size: 9px;

        padding:
            3px 16px 3px 5px;

    }


    .mp-controls {

        padding:
            6px;

    }


    .mp-control-button,
    .mp-speed-button {

        min-width: 28px;

        height: 27px;

        padding:
            2px 4px;

    }


    .mp-control-button svg {

        width: 13px;

        height: 13px;

    }


    .mp-speed-button {

        font-size: 9px;

    }


    .mp-volume-slider {

        flex:
            0 0 50px;

        width: 50px;

        min-width: 50px;

        max-width: 50px;

    }


    .mp-table-header,
    .mp-track {

        grid-template-columns:
            30px
            40px
            45px
            minmax(55px, 1fr)
            48px
            34px
            80px;

    }


    .mp-table-header {

        font-size: 7px;

    }


    .mp-track-id,
    .mp-track-duration {

        font-size: 9px;

    }


    .mp-track-note {

        font-size: 8px;

    }


    .mp-tempo-tag {

        width: 20px;

        min-width: 20px;

    }


    .mp-order-button {

        font-size: 7px;

        padding:
            3px 2px;

    }


    .mp-download-button {

        width: 26px;

        height: 26px;

        flex-basis: 26px;

    }


    .mp-download-button svg {

        width: 12px;

        height: 12px;

    }

}

/*
=====================================================
КАТЕГОРИИ ПОД ДЛИТЕЛЬНОСТЬЮ
=====================================================
*/

.mp-track-duration {
    position: relative;
}

.mp-duration-main {
    display: block;
    line-height: 16px;
}

.mp-track-category-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-height: 13px;
    margin-top: 1px;
}

.mp-category-short {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 13px;
    min-width: 16px;
    padding: 0 3px;
    border: 1px solid #aaa;
    border-radius: 3px;
    background: #eeeecc;
    color: #663366;
    font-size: 8px;
    line-height: 11px;
    cursor: help;
}

.mp-category-short:hover::after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 500;
    min-width: 120px;
    max-width: 220px;
    padding: 5px 7px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #ffffff;
    color: #222;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
    font-size: 10px;
    font-weight: normal;
    line-height: 1.25;
    white-space: normal;
    pointer-events: none;
}

.mp-category-short:hover {
    z-index: 501;
}

/* =====================================================
   LAVVOLNA V3 — ДИЗАЙН ПО ЭСКИЗУ
   Функциональная логика player.js не меняется здесь.
   ===================================================== */

.music-player {
    max-width: 1200px;
    margin: 28px auto;
    color: #403624;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #d6c3d7;
    border-radius: 12px;
    background: #fffceb;
    box-shadow: 0 2px 8px rgba(75, 35, 75, .08);
}

.mp-player-sticky {
    top: 0;
    background: #fffceb;
    border: 0;
    border-bottom: 1px solid #d8c6d8;
    border-radius: 11px 11px 0 0;
}

.mp-filters {
    gap: 9px;
    padding: 10px 12px 9px;
    background: #f4edcf;
    border-bottom: 1px solid #ded2c2;
}

.mp-filter {
    position: relative;
    gap: 4px;
}

.mp-filter label {
    padding-left: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1px;
    color: #663366;
}

/* маленькие пиктограммы слева от названий селекторов */
.mp-filter label::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 4px;
    vertical-align: -3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.mp-filter:nth-child(1) label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23663366' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M7 9h10M7 13h6M7 17h4'/%3E%3C/svg%3E");
}
.mp-filter:nth-child(2) label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23663366' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.mp-filter:nth-child(3) label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23663366' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M5 12h14M5 17h14'/%3E%3Ccircle cx='9' cy='7' r='1.5' fill='%23663366' stroke='none'/%3E%3Ccircle cx='15' cy='12' r='1.5' fill='%23663366' stroke='none'/%3E%3Ccircle cx='11' cy='17' r='1.5' fill='%23663366' stroke='none'/%3E%3C/svg%3E");
}
.mp-filter:nth-child(4) label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23663366' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14c2-8 4 8 6 0s4 8 6 0 3 4 4-1'/%3E%3C/svg%3E");
}
.mp-filter:nth-child(5) label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23663366' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l-3 3 3 3M5 8h9a5 5 0 0 1 5 5v1'/%3E%3Cpath d='M16 19l3-3-3-3M19 16h-9a5 5 0 0 1-5-5V9'/%3E%3C/svg%3E");
}

.mp-filter select {
    height: 34px;
    min-width: 145px;
    padding: 5px 31px 5px 11px;
    border: 1px solid #bfaec0;
    border-radius: 6px;
    background: #fffceb;
    color: #4b4028;
    font-size: 12px;
    outline: none;
    box-shadow: inset 0 1px 1px rgba(102,51,102,.04);
    appearance: auto;
}

.mp-filter select:hover,
.mp-filter select:focus {
    border-color: #663366;
    box-shadow: 0 0 0 2px rgba(102,51,102,.08);
}

.mp-controls {
    min-height: 48px;
    gap: 6px;
    padding: 7px 12px;
    background: #fffceb;
    border-bottom: 1px solid #e1d6c8;
}

.mp-control-button,
.mp-speed-button {
    height: 32px;
    min-width: 34px;
    padding: 3px 8px;
    border: 1px solid #b894b9;
    border-radius: 6px;
    background: #fffceb;
    color: #663366;
    font-size: 12px;
    font-weight: 600;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.mp-control-button:hover,
.mp-speed-button:hover {
    background: #f4e9b8;
    border-color: #663366;
}

.mp-control-button:active,
.mp-speed-button:active {
    transform: translateY(1px);
}

.mp-control-button svg,
.mp-volume-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: #663366;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mp-stop svg { width: 14px; height: 14px; }
.mp-loop svg { width: 17px; height: 17px; }

.mp-seek-back,
.mp-seek-forward {
    min-width: 42px;
    font-size: 11px;
}

.mp-loop-active {
    background: #f2df8e !important;
    border-color: #9c7b17 !important;
    color: #663366 !important;
}

.mp-loop-active svg { stroke: #663366; }

.mp-divider-seek {
    margin-left: 3px;
    margin-right: 1px;
}

.mp-control-divider {
    width: 1px;
    height: 23px;
    margin: 0 3px;
    background: #d8c98f;
}

.mp-speed-button {
    min-width: 39px;
    font-size: 11px;
}

.mp-speed-active {
    background: #f2df8e !important;
    border-color: #b69a35 !important;
    color: #663366;
}

.mp-volume-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.mp-volume-slider {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    height: 5px;
    margin-left: 1px;
    accent-color: #663366;
    cursor: pointer;
}

.mp-table-header {
    grid-template-columns: 42px 60px 78px minmax(220px, 1fr) 105px 58px 170px;
    padding: 8px 10px;
    background: #f3e9bc;
    border-top: 0;
    color: #663366;
    font-size: 10px;
    letter-spacing: .1px;
}

.mp-track {
    grid-template-columns: 42px 60px 78px minmax(220px, 1fr) 105px 58px 170px;
    min-height: 58px;
    border-bottom: 1px solid #e5dacb;
}

.mp-track:nth-child(odd) { background: #fffceb; }
.mp-track:nth-child(even) { background: #f8f0c9; }
.mp-track:hover { background: #f3e6ad; }
.mp-track-active { background: #f2df8e !important; }
.mp-track-played { background: #e8e4d0 !important; }

.mp-track-play { padding: 6px; }

.mp-row-play {
    width: 29px;
    height: 29px;
    border: 1px solid #9d7ca0;
    background: #fffceb;
    color: #663366;
    box-shadow: 0 1px 2px rgba(75,35,75,.08);
}

.mp-row-play:hover { background: #f4e9b8; border-color: #663366; }
.mp-row-play svg { width: 13px; height: 13px; fill: #663366; }

.mp-track-id {
    font-size: 12px;
    color: #663366;
}

.mp-track-duration {
    font-size: 12px;
    color: #463b25;
}

.mp-waveform {
    height: 54px;
    padding: 0;
    align-items: flex-start;
    overflow: visible;
}

.mp-waveform canvas {
    top: 2px;
    height: 35px;
    image-rendering: auto;
}

.mp-waveform-empty {
    margin-top: 18px;
    height: 2px;
    background: #d2c9a9;
}

/* Таймер теперь визуально отделён от самой волны и опущен вниз. */
.mp-waveform-time {
    left: 2px;
    bottom: 0;
    font-size: 9px;
    line-height: 11px;
    color: #655a3b;
    background: transparent;
}

.mp-track-note { padding: 6px 8px; }

.mp-note-tag,
.mp-tempo-tag {
    min-height: 20px;
    border: 1px solid #d4c5a9;
    background: #efe6c9;
    color: #5a425d;
}

.mp-tempo-tag { color: #663366; }

.mp-track-actions {
    gap: 6px;
    padding: 6px 8px;
}

.mp-download-button {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border: 1px solid #9d7ca0;
    border-radius: 6px;
    background: #fffceb;
    box-shadow: 0 1px 2px rgba(75,35,75,.06);
}

.mp-download-button:hover {
    background: #f4e9b8;
    border-color: #663366;
}

.mp-download-button svg {
    width: 16px;
    height: 16px;
    stroke: #663366;
}

.mp-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 5px 9px;
    border: 1px solid #663366;
    border-radius: 6px;
    background: #663366;
    color: #fffdf8;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}

.mp-order-button:hover {
    background: #f2df8e;
    color: #663366;
    text-decoration: none;
}

.mp-show-more {
    display: none;
    width: calc(100% - 20px);
    margin: 10px;
    padding: 9px 12px;
    border: 1px solid #9d7ca0;
    border-radius: 6px;
    background: #fffceb;
    color: #663366;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.mp-show-more:hover { background: #f4e9b8; }

.mp-track-category-labels { margin-top: 2px; }
.mp-category-short {
    height: 13px;
    min-width: 16px;
    border: 1px solid #c8b0c9;
    border-radius: 3px;
    background: #f4e9b8;
    color: #663366;
}

@media (max-width: 900px) {
    .mp-table-header,
    .mp-track {
        grid-template-columns: 38px 54px 70px minmax(160px,1fr) 80px 48px 145px;
    }
    .mp-order-button { font-size: 9px; padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 700px) {
    .music-player { margin: 15px 0; border-radius: 9px; }
    .mp-filters { gap: 6px; }
    .mp-filter select { min-width: 135px; }
    .mp-controls { flex-wrap: wrap; }
    .mp-volume-slider { flex-basis: 100px; width: 100px; }
    .mp-table-header { display: none; }
    .mp-track {
        grid-template-columns: 36px 48px 65px minmax(120px,1fr) 45px 35px 76px;
        min-height: 56px;
    }
    .mp-track-note { padding-left: 4px; padding-right: 4px; }
    .mp-order-button { font-size: 8px; min-height: 28px; padding: 3px 4px; }
    .mp-download-button { width: 28px; height: 28px; flex-basis: 28px; }
    .mp-track-actions { gap: 3px; padding-left: 3px; padding-right: 3px; }
}