.dz-radio, .dz-radio * { box-sizing: border-box; }
.dz-radio {
  --dz-purple: #9966cc; --dz-deep: #4e2e70; --dz-ink: #302442; --dz-muted: #6c5a7f;
  --dz-soft: #faf7fd; --dz-line: #e7ddef;
  width: 100%; max-width: 860px; margin: 24px auto; padding: 28px;
  background: #fff; color: var(--dz-ink); border: 1px solid var(--dz-line); border-radius: 26px;
  font: 16px/1.55 Arial, Helvetica, sans-serif; box-shadow: 0 14px 40px rgba(78,46,112,.07);
}
.dz-radio button, .dz-radio input { font: inherit; }
.dz-radio button { cursor: pointer; appearance: none; box-shadow: none; text-transform: none; letter-spacing: normal; line-height: 1.3; }
.dz-radio [hidden] { display: none !important; }
.dz-radio button:focus-visible, .dz-radio a:focus-visible, .dz-radio input:focus-visible, .dz-radio summary:focus-visible { outline: 3px solid #b19ad4; outline-offset: 4px; }
.dz-radio a { color: var(--dz-deep); }
.dz-radio-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:26px; }
.dz-radio-brand { font-size:12px; font-weight:700; letter-spacing:2px; color:var(--dz-deep); }
.dz-radio-badge { padding:5px 10px; background:#f2ebfa; color:var(--dz-deep); border-radius:30px; font-size:11px; }
.dz-radio-main { display:grid; grid-template-columns: 230px minmax(0,1fr); gap:32px; align-items:center; }
.dz-radio-art { position:relative; min-height:248px; overflow:hidden; border-radius:22px; background:linear-gradient(145deg,#f4ebfd,#e4dbf6 65%,#ddd5ec); display:grid; place-items:center; }
.dz-radio-art::before { content:''; position:absolute; width:205px; height:205px; border-radius:50%; border:1px solid rgba(153,102,204,.2); transform:translate(38px,-64px); }
.dz-radio-record { width:160px; height:160px; display:grid; place-items:center; border-radius:50%; background:repeating-radial-gradient(circle at center,#302442 0 3px,#41324f 4px 5px,#302442 6px 8px); box-shadow:0 16px 22px rgba(48,36,66,.2); animation:dz-radio-spin 16s linear infinite; animation-play-state:paused; }
.dz-radio-record span { display:grid; place-items:center; width:66px; height:66px; background:#d4b76f; color:#302442; border-radius:50%; font-size:37px; border:8px solid #bda25e; }
.dz-radio-bars { position:absolute; display:flex; align-items:center; gap:4px; height:28px; bottom:15px; }
.dz-radio-bars i { display:block; width:4px; height:7px; border-radius:4px; background:var(--dz-deep); animation:dz-radio-level .9s ease-in-out infinite alternate; animation-play-state:paused; }
.dz-radio-bars i:nth-child(2) { animation-delay:-.2s; }.dz-radio-bars i:nth-child(3) { animation-delay:-.6s; }.dz-radio-bars i:nth-child(4) { animation-delay:-.4s; }.dz-radio-bars i:nth-child(5) { animation-delay:-.7s; }
.dz-radio[data-playing="true"] .dz-radio-record, .dz-radio[data-playing="true"] .dz-radio-bars i { animation-play-state:running; }
.dz-radio .dz-radio-kicker { margin:0 0 4px; color:var(--dz-muted); font-size:12px; }
.dz-radio .dz-radio-title { font-size:30px; line-height:1.2; font-weight:700; color:var(--dz-deep); margin:0 0 8px; padding:0; border:0; }
.dz-radio .dz-radio-intro { margin:0 0 22px; color:var(--dz-muted); font-size:14px; }
.dz-radio-now { min-height:85px; }
.dz-radio .dz-radio-label { color:var(--dz-muted); text-transform:uppercase; letter-spacing:1.1px; font-size:10px; margin:0 0 4px; }
.dz-radio .dz-radio-song { font-size:19px; line-height:1.3; font-weight:700; margin:0 0 5px; padding:0; color:var(--dz-ink); border:0; overflow-wrap:anywhere; }
.dz-radio .dz-radio-artist { font-size:12px; color:var(--dz-muted); margin:0; }
.dz-radio-controls { display:flex; align-items:center; gap:10px; margin-top:16px; }
.dz-radio .dz-radio-play { min-height:48px; min-width:164px; display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--dz-deep); color:white; border:0; border-radius:14px; padding:12px 20px; font-size:15px; font-weight:700; }
.dz-radio .dz-radio-play:hover { background:#65408c; }
.dz-radio-play-icon { font-size:13px; }
.dz-radio .dz-radio-skip { width:42px; height:42px; border:1px solid var(--dz-line); border-radius:50%; background:#fff; color:var(--dz-deep); font-size:30px; padding:0; }
.dz-radio .dz-radio-skip:hover { background:var(--dz-soft); }
.dz-radio-progress { display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; gap:10px; margin-top:22px; color:var(--dz-muted); font-size:11px; font-variant-numeric:tabular-nums; }
.dz-radio-duration { text-align:right; }
.dz-radio input[type="range"] { display:block; height:22px; padding:0; margin:0; width:100%; accent-color:var(--dz-purple); cursor:pointer; border:0; box-shadow:none; background:transparent; }
.dz-radio-options { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:15px; }
.dz-radio-volume-label { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--dz-muted); }
.dz-radio-volume-label input { max-width:85px; }
.dz-radio .dz-radio-shuffle { border:1px solid var(--dz-line); background:#fff; color:var(--dz-muted); padding:7px 10px; border-radius:10px; font-size:11px; }
.dz-radio .dz-radio-shuffle[aria-pressed="true"] { color:var(--dz-deep); background:#f2ebfa; border-color:#d7c2ed; }
.dz-radio-page { font-size:11px; text-decoration:underline; margin-left:auto; }
.dz-radio .dz-radio-status { margin:14px 0; color:var(--dz-muted); font-size:12px; min-height:19px; }
.dz-radio-playlist { border-top:1px solid var(--dz-line); padding-top:15px; }
.dz-radio-playlist summary { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; font-size:13px; font-weight:700; list-style:none; }
.dz-radio-playlist summary::after { content:'⌄'; font-size:18px; font-weight:400; }
.dz-radio-playlist:not([open]) summary::after { content:'›'; }
.dz-radio-playlist summary::-webkit-details-marker { display:none; }
.dz-radio-count { margin-left:auto; background:#f2ebfa; color:var(--dz-deep); border-radius:10px; padding:1px 7px; font-size:10px; }
.dz-radio .dz-radio-list { margin:12px 0 0; padding:0; list-style:none; max-height:240px; overflow:auto; }
.dz-radio-list li { margin:0; padding:0; border:0; }
.dz-radio-list button { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:8px; align-items:center; width:100%; background:white; color:var(--dz-ink); border:0; border-radius:11px; padding:11px 10px; text-align:left; font-size:13px; }
.dz-radio-list button:hover { background:var(--dz-soft); }
.dz-radio-list button.is-current { background:#f2ebfa; color:var(--dz-deep); }
.dz-radio-number { font-size:10px; color:var(--dz-muted); font-variant-numeric:tabular-nums; }
.dz-radio-list-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-radio-list-artist { color:var(--dz-muted); font-size:10px; }
.dz-radio .dz-radio-footnote { margin:16px 0 0; color:var(--dz-muted); font-size:10px; }
.dz-radio-audio { display:none; }
@keyframes dz-radio-spin { to { transform:rotate(360deg); } }
@keyframes dz-radio-level { to { height:23px; } }
@media(max-width:580px) {
  .dz-radio { padding:20px; border-radius:20px; margin:16px auto; }
  .dz-radio-heading { margin-bottom:20px; flex-wrap:wrap; }
  .dz-radio-main { grid-template-columns:104px minmax(0,1fr); gap:18px; align-items:start; }
  .dz-radio-art { min-height:124px; border-radius:15px; }
  .dz-radio-record { width:82px; height:82px; }.dz-radio-record span { width:38px; height:38px; border-width:4px; font-size:23px; }
  .dz-radio-bars { display:none; }
  .dz-radio .dz-radio-title { font-size:23px; }.dz-radio .dz-radio-intro { font-size:12px; margin-bottom:18px; }
  .dz-radio .dz-radio-song { font-size:16px; }.dz-radio .dz-radio-kicker { font-size:10px; }
  .dz-radio-controls { margin-left:-122px; margin-top:24px; justify-content:center; }
  .dz-radio .dz-radio-play { min-width:156px; }.dz-radio-now { min-height:72px; }
  .dz-radio-list button { grid-template-columns:23px minmax(0,1fr); }.dz-radio-list-artist { display:none; }
  .dz-radio-page { margin-left:0; }.dz-radio-progress { margin-top:18px; }
}
@media(max-width:350px) {
  .dz-radio-main { grid-template-columns:1fr; }.dz-radio-art { display:none; }.dz-radio-controls { margin-left:0; }
  .dz-radio .dz-radio-title { font-size:25px; }
}
@media(prefers-reduced-motion:reduce) { .dz-radio-record, .dz-radio-bars i { animation:none; } }

/* Отдельный локальный редактор плейлиста. */
.dz-editor .dz-editor-title { font-size:28px; color:var(--dz-deep); line-height:1.2; margin:0 0 12px; }
.dz-editor .dz-editor-note { padding:12px 16px; border-radius:12px; background:var(--dz-soft); color:var(--dz-muted); font-size:13px; }
.dz-editor .dz-editor-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0; }
.dz-editor label { font-size:12px; font-weight:700; color:var(--dz-deep); }
.dz-editor label.wide { grid-column:1/-1; }
.dz-editor input[type="text"] { display:block; width:100%; margin-top:6px; border:1px solid var(--dz-line); padding:11px 12px; border-radius:10px; background:white; color:var(--dz-ink); font-size:14px; }
.dz-editor .dz-editor-actions { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.dz-editor .dz-editor-button { border:1px solid var(--dz-line); border-radius:11px; padding:10px 14px; background:#fff; color:var(--dz-deep); font-size:13px; }
.dz-editor .dz-editor-button.primary { background:var(--dz-deep); color:white; border-color:var(--dz-deep); }
.dz-editor .dz-editor-status { font-size:13px; color:var(--dz-deep); min-height:22px; }
.dz-editor .dz-editor-list { list-style:none; padding:0; margin:18px 0; }
.dz-editor .dz-editor-row { padding:14px 0; border-top:1px solid var(--dz-line); }
.dz-editor .dz-editor-row strong { font-size:14px; overflow-wrap:anywhere; }
.dz-editor .dz-editor-url { font-size:11px; color:var(--dz-muted); overflow-wrap:anywhere; margin:4px 0 8px; }
.dz-editor .dz-editor-row .dz-editor-button { font-size:11px; padding:7px 9px; }
.dz-editor audio { display:block; width:100%; margin:14px 0; }
@media(max-width:580px) { .dz-editor .dz-editor-form { grid-template-columns:1fr; } }