/* Profile music: the strip on a profile card and the picker in the profile editor */
.pm-strip{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:6px 10px;margin:12px 0 4px;padding:9px 10px;border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc-accent,#60a5fa) 22%,#101012),#101012);border:1px solid color-mix(in srgb,var(--pc-accent,#60a5fa) 40%,transparent)}
.pm-art{position:relative;width:44px;height:44px;border-radius:9px;background:#27272a center/cover no-repeat;display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.pm-art .material-icons-round{font-size:20px;color:#71717a}
.pm-art[style] .material-icons-round{display:none}
.pm-meta{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pm-meta b{font-size:13px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-meta span{font-size:12px;color:#a1a1aa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-eq{display:flex;align-items:flex-end;gap:2px;height:16px}
.pm-eq i{width:3px;height:4px;border-radius:2px;background:var(--pc-accent,#60a5fa);opacity:.45}
.pm-strip[data-state="playing"] .pm-eq i{opacity:1;animation:pm-bar .9s ease-in-out infinite alternate}
.pm-strip[data-state="playing"] .pm-eq i:nth-child(2){animation-delay:-.3s;animation-duration:.7s}
.pm-strip[data-state="playing"] .pm-eq i:nth-child(3){animation-delay:-.55s;animation-duration:1.1s}
.pm-strip[data-state="playing"] .pm-eq i:nth-child(4){animation-delay:-.15s;animation-duration:.8s}
@keyframes pm-bar{from{height:3px}to{height:16px}}
.pm-btn{width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--pc-accent,#60a5fa);color:#0b0b0d;transition:transform .12s}
.pm-btn:hover{transform:scale(1.06)}
.pm-btn .material-icons-round{font-size:22px}
.pm-vol{grid-column:2 / 4;width:100%;accent-color:var(--pc-accent,#60a5fa);height:14px}
.pm-auto{grid-column:4;display:flex;align-items:center;gap:5px;font-size:11px;color:#a1a1aa;cursor:pointer;white-space:nowrap}
.pm-auto input{accent-color:var(--pc-accent,#60a5fa);margin:0}
.pm-strip[data-state="error"] .pm-meta span{color:#fca5a5}
@media (prefers-reduced-motion:reduce){.pm-strip[data-state="playing"] .pm-eq i{animation:none;height:10px}}

/* Editor */
.pm-current{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pm-current .pm-meta{flex:1}
.pm-small{padding:6px 10px!important;font-size:12px!important;display:inline-flex;align-items:center;gap:4px}
.pm-small .material-icons-round{font-size:16px}
.pm-startrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:12px;color:#a1a1aa}
.pm-startrow label{display:flex;align-items:center;gap:6px}
.pm-start{width:76px!important;text-align:center}
.pm-results{display:flex;flex-direction:column;gap:4px;margin:8px 0 6px;max-height:262px;overflow:auto}
.pm-result{display:flex;align-items:center;gap:10px;padding:6px 8px;border:0;border-radius:10px;background:rgba(255,255,255,.04);color:inherit;text-align:left;cursor:pointer;font:inherit}
.pm-result:hover,.pm-result:focus-visible{background:rgba(255,255,255,.09)}
.pm-result .pm-art{width:38px;height:38px}
.pm-result .pm-meta{flex:1}
.pm-use{font-size:12px;font-weight:700;color:#93c5fd}
.pm-empty{padding:12px;font-size:12px;color:#71717a;text-align:center}