.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;
}
.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;
}
.mp-table-header {
display: grid;
grid-template-columns:
42px
60px
78px
minmax(180px, 1fr)
105px
55px
55px
170px;
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
60px
78px
minmax(180px, 1fr)
105px
55px
55px
170px;
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;
}
.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;
}
.mp-waveform {
position: relative;
min-width: 0;
height: 54px;
padding:
0;
display: flex;
align-items: center;
cursor: pointer;
overflow: hidden;
}
.mp-waveform canvas {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 54px;
}
.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;
}
@media (
max-width: 950px
) {
.mp-filter select {
min-width: 115px;
}
.mp-table-header,
.mp-track {
grid-template-columns:
38px
54px
70px
minmax(130px, 1fr)
80px
45px
45px
145px;
}
.mp-order-button {
font-size: 9px;
padding:
4px 5px;
}
}
@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
38px
38px
90px;
}
.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: 50px;
}
.mp-waveform canvas {
height: 50px;
}
.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;
}
}
@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
32px
32px
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;
}
.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-top: 1px solid #d6c3d7;
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(190px, 1fr) 105px 55px 55px 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(190px, 1fr) 105px 55px 55px 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-vocal {
padding: 6px 8px;
text-align: center;
}
.mp-vocal-tag {
min-height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 7px;
border: 1px solid #d4c5a9;
border-radius: 3px;
background: #efe6c9;
color: #663366;
font-size: 11px;
line-height: 1.1;
}
.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: 11px;
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-catalog-end-cta {
display: block;
margin: 14px 10px 8px;
padding: 14px 16px;
border: 1px solid #9d7ca0;
border-radius: 8px;
background: #fffceb;
text-align: center;
}
.mp-catalog-end-cta[hidden] { display: none !important; }
.mp-catalog-end-title {
color: #663366;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 5px;
}
.mp-catalog-end-text {
color: #444;
font-size: 12px;
line-height: 1.4;
margin: 0 auto 10px;
max-width: 720px;
}
.mp-catalog-end-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 6px 16px;
border: 1px solid #663366;
border-radius: 6px;
background: #663366;
color: #fffdf8;
font-size: 12px;
font-weight: 600;
line-height: 1.15;
text-decoration: none;
}
.mp-catalog-end-button:hover {
background: #f2df8e;
color: #663366;
text-decoration: none;
}
.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 45px 45px 145px;
}
.mp-order-button { font-size: 10px; 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 35px 76px;
min-height: 56px;
}
.mp-track-note { padding-left: 4px; padding-right: 4px; }
.mp-order-button { font-size: 9px; 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; }
}
@media (max-width: 700px) {
.mp-track-play {
padding-left: 4px;
padding-right: 4px;
}
.mp-track-id,
.mp-track-duration {
padding-left: 2px;
padding-right: 2px;
}
.mp-track-note {
padding-left: 2px;
padding-right: 2px;
}
.mp-track-actions {
padding-left: 2px;
padding-right: 2px;
}
.mp-order-button {
padding-left: 2px;
padding-right: 2px;
}
}
@media (max-width: 700px) {
.music-player {
width: calc(100% + 24px);
max-width: none;
margin-left: -12px;
margin-right: -12px;
}
.mp-track {
grid-template-columns: 34px 42px 50px minmax(90px, 1fr) 45px 32px 32px 76px;
}
.mp-table-header,
.mp-track {
padding-left: 2px;
padding-right: 2px;
}
}
.mp-table-header,
.mp-track {
grid-template-columns:
42px
54px
58px
minmax(180px, 1fr)
90px
44px
44px
165px;
}
.mp-table-header > div:nth-child(6),
.mp-table-header > div:nth-child(7),
.mp-track-tempo,
.mp-track-vocal {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.mp-track-tempo,
.mp-track-vocal {
padding: 6px 2px;
}
@media (max-width: 900px) {
.mp-table-header,
.mp-track {
grid-template-columns:
38px
50px
54px
minmax(140px, 1fr)
78px
40px
40px
140px;
}
.mp-track-tempo,
.mp-track-vocal {
padding-left: 1px;
padding-right: 1px;
}
}
@media (max-width: 700px) {
.music-player {
width: 100%;
max-width: 100%;
margin: 15px 0;
}
.mp-table-header,
.mp-track {
grid-template-columns:
34px
40px
44px
minmax(100px, 1fr)
40px
30px
30px
76px;
padding-left: 2px;
padding-right: 2px;
}
.mp-track-duration {
padding-left: 1px;
padding-right: 1px;
}
.mp-track-tempo,
.mp-track-vocal {
padding-left: 0;
padding-right: 0;
}
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag {
max-width: 100%;
}
.mp-vocal-tag {
padding-left: 3px;
padding-right: 3px;
font-size: 9px;
}
}
@media (max-width: 520px) {
.mp-table-header,
.mp-track {
grid-template-columns:
30px
38px
42px
minmax(80px, 1fr)
38px
29px
29px
74px;
}
}
.mp-table-header,
.mp-track {
grid-template-columns:
40px
54px
55px
minmax(160px, 1fr)
68px
40px
40px
190px;
}
.mp-track-note,
.mp-track-tempo,
.mp-track-vocal {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 5px 1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 1.1;
color: #663366;
}
.mp-track-note > *,
.mp-track-tempo > *,
.mp-track-vocal > *,
.mp-empty-note,
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 1.1;
}
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag {
min-width: 22px;
min-height: 20px;
padding: 2px 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: nowrap;
}
.mp-tempo-tag,
.mp-vocal-tag {
width: 24px;
min-width: 24px;
}
.mp-empty-note {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 10px;
margin: 0;
color: #999;
text-align: center;
}
.mp-download-button {
width: 28px;
height: 30px;
flex: 0 0 28px;
}
.mp-download-button svg {
width: 15px;
height: 15px;
}
.mp-track-actions {
min-width: 0;
gap: 5px;
padding: 5px 6px;
overflow: visible;
}
.mp-order-button {
min-width: 0;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
}
@media (max-width: 900px) {
.mp-table-header,
.mp-track {
grid-template-columns:
38px
50px
48px
minmax(135px, 1fr)
62px
36px
36px
155px;
}
.mp-track-note,
.mp-track-tempo,
.mp-track-vocal {
font-size: 10px;
padding-left: 0;
padding-right: 0;
}
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag,
.mp-empty-note {
font-size: 10px;
}
.mp-download-button {
width: 27px;
flex-basis: 27px;
}
}
@media (max-width: 700px) {
.music-player {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.mp-track {
grid-template-columns:
34px
40px
36px
minmax(80px, 1fr)
36px
28px
28px
88px;
padding-left: 1px;
padding-right: 1px;
}
.mp-track-note,
.mp-track-tempo,
.mp-track-vocal {
padding-left: 0;
padding-right: 0;
}
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag,
.mp-empty-note {
font-size: 9px;
font-weight: 700;
}
.mp-note-tag {
min-width: 22px;
padding-left: 3px;
padding-right: 3px;
}
.mp-tempo-tag,
.mp-vocal-tag {
width: 22px;
min-width: 22px;
padding-left: 2px;
padding-right: 2px;
}
.mp-track-actions {
gap: 3px;
padding-left: 2px;
padding-right: 2px;
}
.mp-download-button {
width: 25px;
height: 28px;
flex-basis: 25px;
}
.mp-download-button svg {
width: 13px;
height: 13px;
}
.mp-order-button {
font-size: 8px;
line-height: 1.05;
padding-left: 2px;
padding-right: 2px;
}
}
@media (max-width: 520px) {
.mp-track {
grid-template-columns:
32px
38px
34px
minmax(72px, 1fr)
34px
27px
27px
84px;
}
.mp-track-id,
.mp-track-duration {
padding-left: 1px;
padding-right: 1px;
}
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag,
.mp-empty-note {
font-size: 9px;
}
.mp-tempo-tag,
.mp-vocal-tag {
width: 21px;
min-width: 21px;
}
.mp-download-button {
width: 24px;
height: 27px;
flex-basis: 24px;
}
}
.mp-table-header,
.mp-track {
grid-template-columns:
40px
54px
55px
minmax(160px, 1fr)
52px
40px
40px
206px;
}
.mp-track-note,
.mp-track-tempo,
.mp-track-vocal,
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag,
.mp-empty-note {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 1.1;
text-align: center;
}
.mp-track-note,
.mp-track-tempo,
.mp-track-vocal {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding-left: 0;
padding-right: 0;
}
.mp-empty-note {
min-width: 0;
margin: 0;
color: #999;
}
.mp-track-actions {
min-width: 0;
gap: 5px;
padding-left: 6px;
padding-right: 6px;
}
.mp-order-button {
min-width: 0;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
@media (max-width: 900px) {
.mp-table-header,
.mp-track {
grid-template-columns:
38px
50px
48px
minmax(135px, 1fr)
48px
36px
36px
169px;
}
}
@media (max-width: 700px) {
.mp-track {
grid-template-columns:
36px
34px
36px
minmax(80px, 1fr)
36px
28px
28px
92px;
}
.mp-row-play {
width: 29px;
height: 29px;
}
.mp-order-button {
min-width: 0;
width: 100%;
font-size: 8px;
line-height: 1.05;
padding-left: 2px;
padding-right: 2px;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.mp-track-actions {
gap: 3px;
padding-left: 2px;
padding-right: 2px;
}
}
@media (max-width: 520px) {
.mp-track {
grid-template-columns:
34px
32px
34px
minmax(72px, 1fr)
34px
27px
27px
88px;
}
.mp-row-play {
width: 29px;
height: 29px;
}
.mp-order-button {
font-size: 9px;
white-space: normal;
}
}
@media (min-width: 701px) {
.mp-table-header > div:nth-child(6),
.mp-table-header > div:nth-child(7),
.mp-table-header > div:nth-child(8) {
text-align: center;
padding-left: 0;
padding-right: 0;
}
.mp-table-header > div:nth-child(6) {
transform: translateX(11px);
}
.mp-table-header > div:nth-child(7) {
transform: translateX(10px);
}
}
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag {
font-weight: 400;
}
@media (max-width: 700px) {
.music-player {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
.mp-track {
grid-template-columns: 34px 38px 34px minmax(72px, 1fr) 34px 32px 40px 84px;
}
.mp-row-play {
width: 34px;
height: 34px;
min-width: 34px;
min-height: 34px;
flex: 0 0 34px;
border-radius: 50%;
}
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag {
box-sizing: border-box;
max-width: 100%;
min-width: 0;
padding-left: 2px;
padding-right: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
font-weight: 400 !important;
}
.mp-tempo-tag { width: auto; min-width: 0; }
.mp-vocal-tag { width: auto; min-width: 0; }
}
@media (max-width: 520px) {
.mp-track {
grid-template-columns: 34px 36px 32px minmax(60px, 1fr) 34px 32px 40px 76px;
}
}
@media (max-width: 700px) {
.mp-track {
grid-template-columns: 38px 34px 34px minmax(72px, 1fr) 34px 32px 40px 84px;
}
}
@media (max-width: 520px) {
.mp-track {
grid-template-columns: 38px 32px 32px minmax(60px, 1fr) 34px 32px 40px 76px;
}
}
.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%3Crect x='8' y='3' width='8' height='12' rx='4'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8'/%3E%3C/svg%3E");
}
.mp-filter:nth-child(6) 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 5v14M8 5l-3 3M8 5l3 3M16 19V5M16 19l-3-3M16 19l3-3'/%3E%3C/svg%3E");
}
@media (max-width: 700px) {
.mp-track {
grid-template-columns: 38px 34px 34px minmax(80px, 1fr) 32px 30px 38px 76px;
}
}
@media (max-width: 520px) {
.mp-track {
grid-template-columns: 38px 32px 32px minmax(68px, 1fr) 32px 30px 38px 80px;
}
}
@media (max-width: 520px) {
.mp-track {
grid-template-columns:
38px
28px
27px
minmax(68px, 1fr)
36px
30px
38px
90px;
}
.mp-track-id,
.mp-track-duration {
padding-left: 0;
padding-right: 0;
}
.mp-track-actions {
gap: 3px;
padding-left: 2px;
padding-right: 2px;
}
.mp-download-button {
width: 30px;
height: 30px;
flex-basis: 30px;
min-width: 30px;
}
.mp-download-button svg {
width: 15px;
height: 15px;
}
}
@media (max-width: 380px) {
.mp-track {
grid-template-columns:
38px
26px
26px
minmax(68px, 1fr)
36px
30px
38px
90px;
}
}

/* Узкие мобильные: освобождаем место для волны без уменьшения её отображения */
@media (max-width: 520px) {
.mp-track {
grid-template-columns:
34px
26px
25px
minmax(75px, 1fr)
34px
28px
35px
76px;
}
.mp-track-play {
padding-left: 0;
padding-right: 1px;
}
.mp-row-play {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
flex-basis: 32px;
}
.mp-note-tag,
.mp-tempo-tag,
.mp-vocal-tag {
padding-left: 1px;
padding-right: 1px;
}
.mp-track-actions {
gap: 1px;
padding-left: 0;
padding-right: 0;
}
}

@media (max-width: 380px) {
.mp-track {
grid-template-columns:
34px
24px
24px
minmax(75px, 1fr)
33px
28px
35px
76px;
}
}

.mp-five-track-cta{position:relative;margin:0 auto;padding:16px 18px;border:1px solid rgba(102,51,102,.20);border-radius:14px;background:rgba(252,245,192,.45);text-align:center;max-width:620px}
.mp-five-track-close{position:absolute;right:7px;top:5px;width:26px;height:26px;padding:0;border:0;background:transparent;color:#663366;font-size:22px;line-height:26px;cursor:pointer}
.mp-five-track-cta[hidden]{display:none!important}
.mp-five-track-title{color:#663366;font-size:18px;font-weight:700;line-height:1.25}
.mp-five-track-text{margin-top:5px;font-size:14px;line-height:1.4}
.mp-five-track-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.mp-five-track-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border:1px solid #663366;border-radius:8px;color:#663366;background:#fff;text-decoration:none;font-size:14px;font-weight:600}
.mp-five-track-button:hover{color:#fff;background:#663366}
@media(max-width:520px){.mp-five-track-cta{margin-top:0;padding:13px 12px}.mp-five-track-title{font-size:16px}.mp-five-track-text{font-size:13px}.mp-five-track-actions{gap:6px}.mp-five-track-button{width:100%;font-size:13px}}

/* Маркер новинки каталога под длительностью трека */
.mp-new-track-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;min-width:24px;min-height:20px;margin-top:3px;padding:2px 3px;border-radius:4px;background:#c62828;color:#fcf5c0;font-size:10px;font-weight:700;line-height:1;cursor:help;}
.mp-track-duration{display:flex;flex-direction:column;align-items:flex-start;}


/* Диалог заказа из строки плеера: адаптивный, непрозрачный, поверх страницы */
html.mp-order-modal-open { overflow:hidden; }
.mp-order-modal-overlay{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(34,20,34,.48);box-sizing:border-box;}
.mp-order-modal,.mp-order-modal *{box-sizing:border-box;}
.mp-order-modal{position:relative;width:min(100%,540px);max-height:calc(100dvh - 36px);overflow:auto;padding:24px;border:1px solid rgba(102,51,102,.16);border-radius:28px;background:#fff;box-shadow:0 18px 70px rgba(30,10,30,.28);color:#663366;font-family:inherit;text-align:center;overscroll-behavior:contain;}
.mp-order-modal-close{position:absolute;top:10px;right:13px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;background:#f7f1f7;color:#775779;font-size:27px;line-height:1;cursor:pointer;}
.mp-order-modal-track{display:flex;align-items:center;gap:12px;padding:12px;margin:14px 0 22px;border-radius:18px;background:#faf5fa;text-align:left;}
.mp-order-modal-play{display:flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;border:1.5px solid #b991bd;border-radius:50%;color:#663366;}
.mp-order-modal-play svg{width:20px;height:20px;fill:currentColor;}
.mp-order-modal-wave{flex:0 0 72px;height:36px;background:repeating-linear-gradient(90deg,#754078 0 2px,transparent 2px 4px);mask-image:linear-gradient(to top,transparent 0,#000 28%,#000 100%);border-radius:4px;}
.mp-order-modal-track-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;font-size:14px;}
.mp-order-modal-track-info strong{font-size:15px;line-height:1.3;}
.mp-order-modal-track-info span{color:#663366;}
.mp-order-modal-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.mp-order-modal-tags span{padding:4px 6px;border:1px solid #e0d0ad;border-radius:6px;background:#f7efcf;color:#663366;font-size:11px;white-space:nowrap;}
.mp-order-modal h2{margin:0 24px 10px;color:#663366;font-size:clamp(23px,4vw,30px);line-height:1.15;font-weight:800;}
.mp-order-modal-description{margin:0 auto 22px;max-width:450px;color:#663366;font-size:16px;line-height:1.5;}
.mp-order-modal-request{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;width:100%;min-height:78px;padding:16px 48px 16px 20px;border:0;border-radius:17px;background:linear-gradient(110deg,#663366,#79377b);color:#fff!important;text-decoration:none!important;text-align:left;box-shadow:0 7px 18px rgba(102,51,102,.18);}
.mp-order-modal-request::before{content:"";position:absolute;inset:-20% auto -20% -45%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:mp-order-modal-shine 3.2s ease-in-out infinite;pointer-events:none;z-index:0}
.mp-order-modal-request>*{position:relative;z-index:1}
.mp-order-modal-request:hover,.mp-order-modal-request:focus-visible{background:linear-gradient(110deg,#4f2452,#632c66);filter:none;color:#fff!important}
.mp-order-modal-request:hover::before{animation-duration:1.4s}
@keyframes mp-order-modal-shine{0%,45%{left:-45%}75%,100%{left:125%}}
.mp-order-modal-request-title{font-size:19px;line-height:1.25;font-weight:750;}
.mp-order-modal-request-subtitle{font-size:14px;line-height:1.3;font-weight:400;opacity:.96;color:#fff!important;}
.mp-order-modal-chevron{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:32px;font-weight:300;}
.mp-order-modal-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:#745d76;font-size:13px;font-weight:700;text-transform:uppercase;}
.mp-order-modal-or span{height:1px;flex:1;background:#e6dce7;}
.mp-order-modal-messenger-heading{font-size:18px;line-height:1.3;font-weight:800;color:#663366;}
.mp-order-modal-messenger-subtitle{margin:4px 0 16px;color:#663366;font-size:14px;line-height:1.4;}
.mp-order-modal-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.mp-order-modal-contact{display:flex;align-items:center;gap:9px;min-width:0;min-height:58px;padding:10px 12px;border:1px solid transparent;border-radius:13px;text-decoration:none!important;font-size:15px;font-weight:700;}
.mp-order-modal-contact img{display:block;width:28px;height:28px;object-fit:contain;flex:0 0 28px;opacity:1;filter:none}
/* Светлые монохромные значки перекрашиваются в фирменные цвета контактов */
.mp-order-modal-max img{filter:brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(5188%) hue-rotate(243deg) brightness(98%) contrast(105%)}
.mp-order-modal-telegram img{filter:brightness(0) saturate(100%) invert(49%) sepia(93%) saturate(1678%) hue-rotate(160deg) brightness(96%) contrast(101%)}
.mp-order-modal-whatsapp img{filter:brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(433%) hue-rotate(91deg) brightness(93%) contrast(93%)}
.mp-order-modal-phone img{filter:brightness(0) saturate(100%) invert(29%) sepia(22%) saturate(1094%) hue-rotate(248deg) brightness(91%) contrast(91%)}
.mp-order-modal-contact span{flex:1;min-width:0;text-align:left;}
.mp-order-modal-contact b{font-size:25px;font-weight:400;line-height:1;}
.mp-order-modal-max{background:#f1efff;color:#164a9a!important;border-color:#e2ddff;}
.mp-order-modal-telegram{background:#edf8fd;color:#07598c!important;border-color:#d9f0fa;}
.mp-order-modal-whatsapp{background:#eefaf3;color:#096a50!important;border-color:#dcf4e6;}
.mp-order-modal-phone{background:#faf0fb;color:#663366!important;border-color:#f0e0f3;}
@media(max-width:600px){.mp-order-modal-overlay{align-items:center;justify-content:center;padding:10px;background:rgba(34,20,34,.56);}.mp-order-modal{width:100%;max-width:480px;max-height:calc(100dvh - 20px);padding:18px 14px max(14px,env(safe-area-inset-bottom));border-radius:22px;border-bottom:1px solid rgba(102,51,102,.16);}.mp-order-modal-track{gap:7px;padding:8px;margin:7px 0 12px;}.mp-order-modal-play{flex-basis:34px;width:34px;height:34px;}.mp-order-modal-wave{flex-basis:42px;height:30px;}.mp-order-modal-track-info{font-size:12px;}.mp-order-modal-track-info strong{font-size:13px;}.mp-order-modal-tags{max-width:88px;}.mp-order-modal-tags span{font-size:9px;padding:3px 4px;}.mp-order-modal h2{font-size:25px;margin:0 12px 8px;}.mp-order-modal-description{font-size:14px;line-height:1.4;margin-bottom:12px;}.mp-order-modal-request{min-height:68px;padding:13px 40px 13px 15px;border-radius:14px;}.mp-order-modal-request-title{font-size:17px;}.mp-order-modal-request-subtitle{font-size:12px;}.mp-order-modal-chevron{right:13px;font-size:27px;}.mp-order-modal-or{margin:10px 0;}.mp-order-modal-messenger-heading{font-size:16px;}.mp-order-modal-messenger-subtitle{font-size:12px;margin:3px 0 8px;}.mp-order-modal-contacts{gap:7px;}.mp-order-modal-contact{min-height:48px;padding:7px;gap:6px;font-size:13px;border-radius:12px;}.mp-order-modal-contact img{width:24px;height:24px;flex-basis:24px;}.mp-order-modal-contact b{font-size:21px;}}
@media(max-width:360px){.mp-order-modal{padding:14px 10px max(12px,env(safe-area-inset-bottom));}.mp-order-modal-track{gap:6px;}.mp-order-modal-wave{display:none;}.mp-order-modal-tags{max-width:72px;}.mp-order-modal h2{font-size:22px;}.mp-order-modal-description{font-size:13px;line-height:1.35;margin-bottom:10px;}.mp-order-modal-contact{font-size:12px;padding:7px 6px;gap:5px;}.mp-order-modal-contact img{width:21px;height:21px;flex-basis:21px;}}