/* EAI City — «Prisma Music» (owner: prisma agent): the city label, the dark panel, the mini-player dock and the line on the
   «Музыкальный клуб» screen. Classes: pm-. The panel is styled like the service (black, a prism splitting white light into a
   rainbow); type, radii, motion and focus come from css/eai.css. Brand colours are scoped to .pm / .pm-dock / .pm-chip.
   v8.7: the island (.pm-isl — the pill at the top that morphs into the mini-player, desktop and tablets), the panel's app
   view (.pm-app: the embed's slot; the iframe itself lives in .pm-host, laid over the slot by js/ui/prisma.js), the
   «Сейчас играет» row (.pm-now). The island's glow comes from the cover: --g / --gl (r, g, b; the violet accent by default). */
.pm, .pm-dock, .pm-chip, .pm-isl {
  --pm-bg: #050508; --pm-bg2: #0c0c13; --pm-ink: #f6f4ff; --pm-ink2: rgba(246, 244, 255, 0.7); --pm-ink3: rgba(246, 244, 255, 0.5);
  --pm-line: rgba(255, 255, 255, 0.1); --pm-line2: rgba(255, 255, 255, 0.18);
  --pm-a: #7c5cff; --pm-b: #4d7dff; --pm-c: #22c3ee;
  --pm-rain: linear-gradient(90deg, #ff4d6d, #ff9a3d 17%, #ffd84d 33%, #4dffa0 50%, #3de2ff 67%, #4d7dff 83%, #a86bff);
  --pm-cta: linear-gradient(105deg, var(--pm-a) 0%, var(--pm-b) 55%, var(--pm-c) 100%);
}

/* ---------------------------------------------------------------- the city label: a dark pill with a rainbow note */
.ecity .ecity-label[data-id="prisma"] .ecity-label__pill {
  background: rgba(8, 8, 13, 0.9); color: #fff; border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 2px rgba(10, 8, 30, 0.3), 0 6px 18px rgba(40, 20, 90, 0.35), 0 0 0 1px rgba(124, 92, 255, 0.25);
}
.ecity .ecity-label[data-id="prisma"].is-hover .ecity-label__pill,
.ecity .ecity-label[data-id="prisma"]:focus-visible .ecity-label__pill {
  background: rgba(8, 8, 13, 0.97);
  box-shadow: 0 1px 2px rgba(10, 8, 30, 0.3), 0 10px 26px rgba(60, 30, 140, 0.5), 0 0 0 1.5px rgba(150, 120, 255, 0.7), 0 0 22px rgba(124, 92, 255, 0.45);
}
.ecity .ecity-label[data-id="prisma"] .ecity-label__dot {
  width: 16px; height: 16px; border-radius: 0; box-shadow: none;
  background: linear-gradient(135deg, #ff4d6d, #ffd84d 30%, #4dffa0 50%, #3de2ff 70%, #a86bff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* young residents / ads off: the club is just a building (no label) */
html.pm-off .ecity-label[data-id="prisma"] { display: none !important; }

/* ---------------------------------------------------------------- the panel (EAI.ui.modal, cls pm-modal) */
.modal.pm-modal {
  width: min(600px, 100%); padding: 0; background: var(--pm-bg, #050508); color: #f6f4ff;
  border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 92, 255, 0.12);
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.modal.pm-modal .modal__close { background: rgba(255, 255, 255, 0.1); color: #fff; }
.modal.pm-modal .modal__close:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.modal.pm-modal :focus-visible { outline-color: #b9a6ff; }
.pm { display: flex; flex-direction: column; color: var(--pm-ink); }
.pm-hero { position: relative; height: 236px; overflow: hidden; background: #000; isolation: isolate; }
.pm-hero__art { position: absolute; top: 0; right: -4%; width: 82%; height: 100%; z-index: -1; }
.pm-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #000 18%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0) 70%), linear-gradient(0deg, rgba(5, 5, 8, 0.95) 0%, rgba(5, 5, 8, 0) 46%); }
.pm-ray { animation: pmRay 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * -0.45s); }
@keyframes pmRay { 50% { opacity: 0.55; } }
.pm-hero__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 28px 22px; display: flex; flex-direction: column; gap: 10px; }
.pm-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pm-ink3); }
.pm-kicker__mark { width: 22px; height: 22px; display: grid; }
.pm-kicker__mark svg, .pm-chip__mark svg, .pm-dock__mark svg, .pm-fb__mark svg { width: 100%; height: 100%; display: block; }
.pm-title { margin: 0; font: 800 2.35rem/1.05 var(--font); letter-spacing: -0.015em; color: #fff; max-width: 22ch; }
.pm-title__sub { display: block; margin-top: 8px; font: 600 1.06rem/1.35 var(--font); letter-spacing: 0; color: var(--pm-ink2); }

.pm-perks { list-style: none; margin: 0; padding: 20px 24px 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pm-perk { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-l); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--pm-line); }
.pm-perk__i { --c: #ffb86b; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pm-perk:nth-child(2) .pm-perk__i { --c: #6ee7b7; }
.pm-perk:nth-child(3) .pm-perk__i { --c: #7dd3fc; }
.pm-perk__i .ico { width: 20px; height: 20px; }
.pm-perk__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-perk__t b { font-weight: 800; font-size: 1rem; color: #fff; }
.pm-perk__t span { font-size: 0.88rem; line-height: 1.35; color: var(--pm-ink2); }

.pm-acts { display: flex; gap: 12px; padding: 18px 24px 4px; }
.pm-listen {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 22px;
  border: 0; border-radius: var(--r-xl); background: var(--pm-cta, linear-gradient(105deg, #7c5cff, #4d7dff 55%, #22c3ee)); color: #fff !important;
  font: 800 1.14rem/1 var(--font); letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 12px 32px rgba(92, 80, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pm-listen:hover { filter: brightness(1.08) saturate(1.05); box-shadow: 0 16px 40px rgba(92, 80, 255, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.pm-listen:active { transform: translateY(1px); }
.pm-listen__i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #5b3fe0; flex: none; }
.pm-listen__i .ico { width: 15px; height: 15px; }
.pm-tab { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 0 18px; border-radius: var(--r-xl);
  border: 1px solid var(--pm-line2); color: #fff !important; text-decoration: none; font-weight: 700; font-size: 0.98rem; transition: background-color 0.15s ease, border-color 0.15s ease; }
.pm-tab:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
.pm-tab .ico { width: 18px; height: 18px; color: #b9a6ff; }
.pm-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 24px 0; color: var(--pm-ink2); font-size: 0.92rem; line-height: 1.45; }
.pm-note .ico { width: 18px; height: 18px; margin-top: 2px; color: #b9a6ff; }
.pm-where { display: flex; align-items: center; gap: 14px; margin: 16px 24px 0; padding: 8px 14px 8px 8px; border-radius: var(--r-m); border: 1px solid var(--pm-line); background: rgba(255, 255, 255, 0.03);
  color: #fff; font-weight: 600; font-size: 0.95rem; text-align: left; transition: background-color 0.15s ease; }
.pm-where:hover { background: rgba(255, 255, 255, 0.07); }
.pm-where__img { flex: none; width: 104px; height: 52px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: #101018; color: #7dd3fc; }
.pm-where__img img { width: 100%; height: 100%; object-fit: cover; display: block; animation: fadeIn 0.3s ease; }
.pm-where__img .ico { width: 18px; height: 18px; }
.pm-where__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pm-where__t b { font-weight: 800; color: #fff; }
.pm-where__t span { font-size: 0.88rem; font-weight: 600; color: var(--pm-ink2); }
.pm-where__go { width: 18px; height: 18px; color: #b9a6ff; flex: none; }
.pm-foot { display: flex; align-items: center; gap: 10px; padding: 18px 24px 22px; color: var(--pm-ink3); font-size: 0.84rem; }
.pm-ad { flex: none; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--pm-line2); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pm-ink2); }

@media (max-width: 600px) {
  .scrim.as-sheet .modal.pm-modal { padding: 0 0 env(safe-area-inset-bottom, 0px); }
  .scrim.as-sheet .modal.pm-modal::before { z-index: 5; background: rgba(255, 255, 255, 0.3); }
  .pm-hero { height: 200px; }
  .pm-hero__art { width: 100%; right: -18%; opacity: 0.9; }
  .pm-hero__txt { padding: 0 18px 16px; }
  .pm-title { font-size: 1.95rem; }
  .pm-title__sub { font-size: 1rem; }
  .pm-perks { grid-template-columns: 1fr; padding: 16px 18px 2px; gap: 8px; }
  .pm-perk { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
  .pm-acts { flex-direction: column; padding: 16px 18px 2px; gap: 10px; }
  .pm-tab { min-height: 52px; }
  .pm-note { padding: 12px 18px 0; font-size: 0.9rem; }
  .pm-where { margin: 14px 18px 0; }
  .pm-foot { padding: 16px 18px 18px; }
}
@media (max-width: 380px), (max-height: 680px) and (max-width: 600px) {
  .pm-hero { height: 170px; }
  .pm-title { font-size: 1.7rem; }
  .pm-perk__t span { display: none; }
  .pm-perk__i { width: 32px; height: 32px; border-radius: 10px; }
  .pm-listen { min-height: 54px; }
}

/* ---------------------------------------------------------------- the mini-player dock */
.pm-dock {
  position: fixed; z-index: 44; right: 24px; bottom: 24px; width: 360px; display: flex; flex-direction: column; overflow: hidden;
  background: rgba(9, 9, 14, 0.95); color: var(--pm-ink); font-family: var(--font);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translateY(12px); transition: opacity 0.22s ease, transform 0.3s var(--ease), border-radius 0.2s ease;
  --pm-h: 380px;
}
.pm-dock.in { opacity: 1; transform: none; }
.pm-dock[hidden] { display: none; }
.pm-dock::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--pm-rain); opacity: 0.9; }
.pm-dock__bar { position: relative; display: flex; align-items: center; gap: 2px; min-height: 62px; padding: 8px 8px 8px 8px; }
.pm-dock__title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 4px 6px 4px 4px; border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; cursor: default; }
.pm-dock.is-min .pm-dock__title { cursor: pointer; }
.pm-dock.is-min .pm-dock__title:hover { background: rgba(255, 255, 255, 0.06); }
.pm-dock__mark { position: relative; flex: none; width: 42px; height: 42px; padding: 6px; border-radius: 12px; background: #000; border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; }
.pm-dock__mark svg { transition: opacity 0.2s ease; }
.pm-dock__tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-dock__tt b { font-weight: 800; font-size: 1rem; line-height: 1.2; color: #fff; white-space: nowrap; }
.pm-dock__s { font-size: 0.84rem; line-height: 1.25; color: var(--pm-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-dock__btn { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: rgba(255, 255, 255, 0.86) !important; display: grid; place-items: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; }
.pm-dock__btn:hover { background: rgba(255, 255, 255, 0.09); color: #fff !important; }
.pm-dock__btn .ico { width: 20px; height: 20px; }
.pm-dock :focus-visible { outline: 2px solid #b9a6ff; outline-offset: 2px; }
/* v8.1: never a big black box — the player sits on a violet brand ground, the iframe stays invisible until it has loaded */
.pm-dock__body { position: relative; height: var(--pm-h); max-height: 380px; margin: 0 8px 8px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 20%, #2a1662 0%, #120a2c 55%, #0b0818 100%); }
.pm-dock__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; }
.pm-dock__frame.is-ready { opacity: 1; visibility: visible; }
.pm-dock__veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--pm-ink2); font-weight: 600; font-size: 0.95rem; background: transparent; transition: opacity 0.25s ease; }
.pm-dock__veil.is-out { opacity: 0; }
.pm-dock__vmark { width: 54px; height: 54px; padding: 8px; border-radius: 16px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 30px rgba(124, 92, 255, 0.35); }
.pm-dock__vmark svg { width: 100%; height: 100%; display: block; }
.pm-spin { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.12); border-top-color: #a86bff; border-right-color: #3de2ff; animation: spin 0.8s linear infinite; }
.pm-dock.is-fb .pm-dock__body { height: auto; }
.pm-fb { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px 22px; text-align: center; color: var(--pm-ink2); font-size: 0.94rem; line-height: 1.45; }
.pm-fb b { color: #fff; font-size: 1.08rem; font-weight: 800; }
.pm-fb__mark { width: 58px; height: 58px; padding: 9px; margin-bottom: 4px; border-radius: 16px; background: #000; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 30px rgba(124, 92, 255, 0.25); }
.pm-fb__go { flex: none; width: 100%; margin-top: 10px; min-height: 54px; }
/* playing: four little bars over the mark */
.pm-eq { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 13px; display: none; gap: 3px; align-items: flex-end; }
.pm-eq i { flex: 1; height: 35%; border-radius: 1.5px; background: linear-gradient(0deg, #a86bff, #3de2ff); animation: pmEq 0.9s ease-in-out infinite alternate; }
.pm-eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; background: linear-gradient(0deg, #ff4d6d, #ffd84d); }
.pm-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.6s; background: linear-gradient(0deg, #4dffa0, #3de2ff); }
.pm-eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.15s; }
@keyframes pmEq { 0% { height: 20%; } 100% { height: 100%; } }
.pm-dock.is-live .pm-eq { display: flex; }
.pm-dock.is-live .pm-dock__mark svg { opacity: 0.28; }
/* minimised: a small pill (the iframe stays alive, out of sight) */
.pm-dock.is-min { border-radius: 999px; border: 1.5px solid transparent;
  background: linear-gradient(rgba(9, 9, 14, 0.96), rgba(9, 9, 14, 0.96)) padding-box, var(--pm-rain) border-box; }
.pm-dock.is-min::before { display: none; }
.pm-dock.is-min .pm-dock__bar { min-height: 0; padding: 5px 5px 5px 5px; }
.pm-dock.is-min .pm-dock__mark { width: 42px; height: 42px; border-radius: 50%; padding: 7px; }
.pm-dock.is-min .pm-dock__ext, .pm-dock.is-min .pm-dock__minb { display: none; } /* (the whole pill opens the player) */
.pm-dock.is-min .pm-dock__btn { width: 44px; height: 44px; border-radius: 50%; }
.pm-dock.is-min .pm-dock__body { position: absolute; left: 0; top: 0; width: 2px; height: 2px; margin: 0; opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  .pm-dock { border-radius: 16px; }
  .pm-dock__body { max-height: 320px; }
  .pm-dock__bar { min-height: 58px; padding: 6px; }
}

/* ---------------------------------------------------------------- the line on the «Музыкальный клуб» screen */
.pm-chip {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 14px; padding: 9px 14px 9px 9px;
  border: 1px solid transparent; border-radius: var(--r-l); cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(#0a0a10, #0a0a10) padding-box, var(--pm-rain) border-box;
  box-shadow: var(--sh-1); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pm-chip:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.pm-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pm-chip__mark { flex: none; width: 38px; height: 38px; padding: 6px; border-radius: 11px; background: #000; border: 1px solid rgba(255, 255, 255, 0.12); }
.pm-chip__t { flex: 1 1 auto; min-width: 0; font-size: 0.96rem; line-height: 1.3; color: var(--pm-ink2); }
.pm-chip__t b { color: #fff; font-weight: 800; }
.pm-chip__go { width: 18px; height: 18px; color: #b9a6ff; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .pm-ray, .pm-eq i { animation: none; }
  .pm-dock { transition: none; }
}

/* over the phone building sheet: the minimised player is only its round mark (a tap opens it) */
.pm-dock.is-min.is-mini { width: 54px !important; }
.pm-dock.is-mini .pm-dock__bar { padding: 4px; }
.pm-dock.is-mini .pm-dock__title { padding: 0; }
.pm-dock.is-mini .pm-dock__tt, .pm-dock.is-mini .pm-dock__btn { display: none; }

/* ---------------------------------------------------------------- v8.7 the island: a pill that morphs into the mini-player */
/* (js/ui/prisma.js sets left / top / width / height; the morph is their transition on a spring curve) */
.pm-isl {
  --g: 124, 92, 255; --gl: 172, 156, 255; --spr: cubic-bezier(0.3, 1.18, 0.45, 1); --dur: 0.52s;
  position: fixed; z-index: 44; left: 50%; top: 20px; width: 260px; height: 44px; box-sizing: border-box;
  border-radius: 24px; overflow: hidden; color: #fff; font-family: var(--font); -webkit-tap-highlight-color: transparent;
  background: radial-gradient(150% 130% at 0% 0%, rgba(var(--g), 0.2), rgba(var(--g), 0) 50%), #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px -10px rgba(var(--g), 0.8), 0 0 26px -6px rgba(var(--g), 0.55), 0 6px 18px rgba(8, 8, 16, 0.24);
  opacity: 0; transform: translateY(-14px) scale(0.7); transform-origin: 50% 0;
  transition: left var(--dur) var(--spr), top var(--dur) var(--spr), width var(--dur) var(--spr), height var(--dur) var(--spr),
    border-radius var(--dur) var(--spr), box-shadow 0.45s ease, opacity 0.28s ease, transform 0.55s var(--spr);
}
.pm-isl.in { opacity: 1; transform: none; }
.pm-isl[hidden] { display: none; }
.pm-isl.is-free { margin-top: env(safe-area-inset-top, 0px); }
@media (hover: hover) { .pm-isl.in:not(.is-open):hover { transform: scale(1.035); } }
.pm-isl.is-open { border-radius: 30px; cursor: default;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--g), 0.3), rgba(var(--g), 0) 58%), radial-gradient(90% 70% at 100% 100%, rgba(var(--g), 0.12), rgba(var(--g), 0) 60%), #040406;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 60px -22px rgba(var(--g), 0.7), 0 0 46px -10px rgba(var(--g), 0.5), 0 22px 50px rgba(6, 6, 12, 0.36); }
.pm-isl.is-closing { --spr: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.36s; }
.pm-isl :focus-visible { outline: 2px solid #c9bbff; outline-offset: 2px; }
.pm-isl button { -webkit-tap-highlight-color: transparent; font-family: var(--font); }
/* the cover: a round picture over the prism mark (the mark shows when there is no picture) */
.pm-isl__cv, .pm-isl__xcv, .pm-now__cv { position: relative; flex: none; overflow: hidden; background: #17131f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pm-isl__cv svg, .pm-isl__xcv svg, .pm-now__cv svg, .pm-isl__cm svg, .pm-app__mark svg { width: 100%; height: 100%; display: block; }
.pm-isl__cv img, .pm-isl__xcv img, .pm-now__cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-isl__cv.no-img img, .pm-isl__xcv.no-img img, .pm-now__cv.no-img img { display: none; }
.pm-isl__cv { width: 30px; height: 30px; padding: 6px; border-radius: 50%; }

/* compact: cover · title · (Демо) · bars */
.pm-isl__c { position: absolute; left: 0; top: 0; height: 44px; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 15px 0 7px;
  border: 0; border-radius: inherit; background: none; color: inherit; text-align: left; cursor: pointer;
  transition: opacity 0.22s ease 0.14s, filter 0.22s ease 0.14s; }
.pm-isl.is-open .pm-isl__c { opacity: 0; filter: blur(5px); pointer-events: none; transition: opacity 0.12s ease, filter 0.12s ease; }
.pm-isl__t { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 0.93rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-isl__demo { display: none; flex: none; padding: 2px 6px; border-radius: 6px; font-size: 0.66rem; font-weight: 800; line-height: 1.3; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgb(var(--gl)); background: rgba(var(--g), 0.22); }
.pm-isl.is-demo .pm-isl__demo, .pm-now .pm-isl__demo:not([hidden]) { display: inline-block; }
/* a round cover only (a narrow city strip beside a tablet's building screen) */
.pm-isl.is-orb .pm-isl__c { padding: 0 7px; gap: 0; }
.pm-isl.is-orb .pm-isl__t, .pm-isl.is-orb .pm-isl__c .pm-bars, .pm-isl.is-orb .pm-isl__c .pm-isl__demo { display: none; }
.pm-isl.is-orb.is-playing .pm-isl__cv { animation: pmOrb 2.4s ease-in-out infinite; }
@keyframes pmOrb { 50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 3px rgba(var(--g), 0.55); } }

/* equalizer bars: still (a low skyline) on pause, dancing while the track plays */
.pm-bars { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.pm-bars i { width: 3px; height: 100%; border-radius: 2px; background: rgb(var(--gl, 172, 156, 255)); transform: scaleY(var(--s, 0.4)); opacity: 0.6; transition: opacity 0.2s ease; }
.pm-bars i:nth-child(1) { --s: 0.42; } .pm-bars i:nth-child(2) { --s: 0.72; } .pm-bars i:nth-child(3) { --s: 0.55; } .pm-bars i:nth-child(4) { --s: 0.32; }
.is-playing .pm-bars i { opacity: 1; animation: pmBar 0.9s ease-in-out infinite alternate; }
.is-playing .pm-bars i:nth-child(2) { animation-duration: 0.66s; animation-delay: -0.3s; }
.is-playing .pm-bars i:nth-child(3) { animation-duration: 1.05s; animation-delay: -0.55s; }
.is-playing .pm-bars i:nth-child(4) { animation-duration: 0.78s; animation-delay: -0.12s; }
@keyframes pmBar { 0% { transform: scaleY(0.22); } 100% { transform: scaleY(1); } }

/* expanded: the mini-player */
.pm-isl__x { position: absolute; left: 0; top: 0; width: 380px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 10px;
  opacity: 0; visibility: hidden; transform: scale(0.94); transform-origin: 50% 0; filter: blur(6px);
  transition: opacity 0.14s ease, transform 0.3s ease, filter 0.14s ease, visibility 0s linear 0.16s; }
.pm-isl.is-open .pm-isl__x { opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity 0.26s ease 0.14s, transform 0.55s var(--spr) 0.06s, filter 0.26s ease 0.14s, visibility 0s; }
.pm-isl__top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pm-isl__xcv { width: 64px; height: 64px; padding: 13px; border-radius: 15px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 22px -8px rgba(var(--g), 0.9); }
.pm-isl__xtt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-isl__xt { font-weight: 800; font-size: 1.08rem; line-height: 1.25; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-isl__xs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pm-isl__xa { min-width: 0; font-size: 0.93rem; line-height: 1.3; color: rgba(255, 255, 255, 0.64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-isl__top > .pm-bars { align-self: flex-start; height: 20px; gap: 3px; margin: 10px 4px 0 0; }
.pm-isl__top > .pm-bars i { width: 3.5px; }
.pm-isl__prog { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.pm-isl__time { min-width: 36px; font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.56); font-variant-numeric: tabular-nums; }
.pm-isl__time.is-end { text-align: right; }
.pm-range { --p: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 26px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.pm-range:focus { outline: none; }
.pm-range:focus-visible { outline: 2px solid #c9bbff; outline-offset: 2px; border-radius: 4px; }
.pm-range::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, #fff var(--p), rgba(255, 255, 255, 0.2) var(--p)); }
.pm-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -4px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45); transition: transform 0.15s ease; }
.pm-range:hover::-webkit-slider-thumb, .pm-range:active::-webkit-slider-thumb { transform: scale(1.25); }
.pm-range::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); }
.pm-range::-moz-range-progress { height: 5px; border-radius: 3px; background: #fff; }
.pm-range::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45); }
/* touch screens: a taller seek bar with a bigger knob */
@media (pointer: coarse) {
  .pm-range { height: 36px; }
  .pm-range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6.5px; }
  .pm-range::-moz-range-thumb { width: 18px; height: 18px; }
}
.pm-isl__ctl { display: flex; align-items: center; justify-content: center; gap: 26px; }
.pm-isl__b, .pm-now__b { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: #fff; cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease; }
.pm-isl__b:hover, .pm-now__b:hover { background: rgba(255, 255, 255, 0.1); }
.pm-isl__b:active, .pm-now__b:active { transform: scale(0.9); }
.pm-isl__b:disabled, .pm-now__b:disabled { opacity: 0.28; cursor: default; background: none; transform: none; }
.pm-g { width: 26px; height: 26px; display: block; }
.pm-isl__b.is-play { width: 58px; height: 58px; background: #fff; color: #050507; box-shadow: 0 10px 24px -8px rgba(var(--g), 0.95); }
.pm-isl__b.is-play:hover { background: #efeaff; }
.pm-isl__b.is-play .pm-g { width: 28px; height: 28px; }
.pm-isl__foot { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pm-isl__sp { flex: 1 1 auto; }
.pm-isl__club { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.09); color: #fff;
  font-weight: 700; font-size: 0.93rem; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease; }
.pm-isl__club:hover { background: rgba(255, 255, 255, 0.15); }
.pm-isl__cm { flex: none; width: 22px; height: 22px; }
.pm-isl__b.is-fold { width: 44px; height: 44px; margin-left: 2px; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.07); }
.pm-isl__b.is-fold:hover { background: rgba(255, 255, 255, 0.14); }
.pm-isl__b.is-fold .pm-g { width: 22px; height: 22px; }
.pm-isl__off { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px 0 10px; border: 0; border-radius: 14px; background: transparent; color: rgba(255, 255, 255, 0.7);
  font-weight: 600; font-size: 0.92rem; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.pm-isl__off:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.pm-isl__off .pm-g { width: 18px; height: 18px; }
/* toasts step under the island */
html.pm-isl-on .toasts { top: max(calc(80px + env(safe-area-inset-top, 0px)), var(--pm-isl-b, 80px)); transition: top 0.3s ease; }

/* ---------------------------------------------------------------- v8.7 the panel: «Сейчас играет» and the app view */
.pm-hero.is-low { height: 172px; }
.pm-now { --g: 124, 92, 255; --gl: 172, 156, 255;
  display: flex; align-items: center; gap: 12px; margin: 18px 24px 0; padding: 10px 8px 10px 10px; border-radius: var(--r-l); border: 1px solid var(--pm-line);
  background: radial-gradient(120% 160% at 0% 0%, rgba(var(--g), 0.26), rgba(var(--g), 0) 62%), rgba(255, 255, 255, 0.035); }
.pm-now__cv { width: 54px; height: 54px; padding: 11px; border-radius: 13px; }
.pm-now__tt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pm-now__k { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: rgb(var(--gl)); }
.pm-now__k .pm-bars { height: 11px; }
.pm-now__k .pm-bars i { width: 2.5px; }
.pm-now__t { font-weight: 800; font-size: 1.02rem; line-height: 1.25; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-now__a { font-size: 0.88rem; color: var(--pm-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-now__ctl { flex: none; display: flex; align-items: center; gap: 2px; }
.pm-now__b { width: 44px; height: 44px; }
.pm-now__b .pm-g { width: 22px; height: 22px; }
.pm-now__b.is-play { background: #fff; color: #050507; }
.pm-now__b.is-play:hover { background: #efeaff; }

/* the app view: the embed (360 × 540 on a computer) — the iframe lives in .pm-host and is laid over the slot */
.modal.pm-modal.pm-modal--app { width: min(386px, 100%); overflow: hidden; } /* (v8.8.2) 12 + 360 + 12 + the 1 px border on each side: the player exactly 360 wide */
.modal.pm-modal--app .modal__close { top: 12px; right: 12px; }
.pm-app { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px; }
.pm-app__bar { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 52px; }
.pm-app__back { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; transition: background-color 0.15s ease; }
.pm-app__back:hover { background: rgba(255, 255, 255, 0.15); }
.pm-app__back .ico { width: 20px; height: 20px; }
.pm-app__mark { flex: none; width: 26px; height: 26px; }
.pm-app__t { font-weight: 800; font-size: 1.06rem; color: #fff; white-space: nowrap; }
.pm-app .pm-ad { margin-left: 2px; }
.pm-app__slot { position: relative; height: min(540px, calc(88vh - 150px)); min-height: 300px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 20%, #2a1662 0%, #120a2c 55%, #0b0818 100%); }
.pm-app__veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--pm-ink2); font-weight: 600; font-size: 0.95rem; }
.pm-app__note { margin: 0; padding: 0 4px; color: var(--pm-ink3); font-size: 0.86rem; line-height: 1.4; }
/* the embed's own frame: never moved in the DOM (that would reload it) — away off-screen with its size kept */
.pm-host { position: fixed; z-index: 82; left: 0; top: 0; width: 360px; height: 540px; border-radius: 14px; overflow: hidden; background: #0e0b1a; }
.pm-host { transition: opacity 0.25s ease; }
.pm-host.is-veiled { opacity: 0; pointer-events: none; } /* (loading: on the slot, transparent over the veil) */
.pm-host.is-away { left: -10000px !important; opacity: 0; pointer-events: none; transition: none; }
.pm-host__frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
@media (max-width: 600px) {
  .pm-hero.is-low { height: 150px; }
  .pm-now { margin: 14px 18px 0; gap: 10px; }
  .pm-now__cv { width: 48px; height: 48px; padding: 10px; border-radius: 12px; }
  .pm-now__k { letter-spacing: 0.05em; gap: 6px; }
  .scrim.as-sheet .modal.pm-modal.pm-modal--app { padding-top: 12px; }
  .pm-app { padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* (v8.8.2) Prisma's brief for phones: a bottom sheet 360–430 wide, the player 560–700 tall */
  .scrim.as-sheet .modal.pm-modal.pm-modal--app { max-width: 430px; margin-left: auto; margin-right: auto; }
  .pm-app__slot { height: clamp(560px, calc(100vh - 150px), 700px); height: clamp(560px, calc(100dvh - 150px), 700px); }
}
@media (prefers-reduced-motion: reduce) {
  .pm-isl { transform: none; transition: opacity 0.15s ease; }
  .pm-isl.in:not(.is-open):hover { transform: none; }
  .pm-isl__x, .pm-isl.is-open .pm-isl__x, .pm-isl__c, .pm-isl.is-open .pm-isl__c { transform: none; filter: none; transition: opacity 0.12s ease, visibility 0s; }
  .pm-bars i, .is-playing .pm-bars i, .pm-isl.is-orb.is-playing .pm-isl__cv { animation: none; }
  html.pm-isl-on .toasts { transition: none; }
}