/* Record spin + Tune In halo. Latest canon (Sep 6, later ruling): heritage-orange for actions,
   green reserved for server-authoritative live state. Beta blue #33d6ff is superseded. */
:root { --action-glow: #ff6a2b; --live-glow: #2ecc71; }
[data-live-record] { transform-origin: 50% 50%; }
[data-live-record].is-spinning:not(.motion-paused) { animation: platter 1.8s linear infinite; }
@keyframes platter { to { transform: rotate(360deg); } }
[data-tune-in].is-live { box-shadow: 0 0 0 2px var(--action-glow), 0 0 24px 4px color-mix(in srgb, var(--action-glow) 55%, transparent); }
/* only the daemon-published MUSIC state earns green */
html[data-live-state="MUSIC"] [data-live-record] { filter: drop-shadow(0 0 14px var(--live-glow)); }
[data-yt-host] { aspect-ratio: 16/9; width: min(100%, 720px); min-height: 200px; }  /* stays visible: YouTube API terms */
[data-yt-host][hidden] { display: none; }
.ms-now-playing-card{position:relative;z-index:8;box-sizing:border-box;width:100%;padding:14px clamp(14px,3vw,34px) 6px;color:#f3f4f7;background:#07090d}
.ms-now-card-inner{display:grid;grid-template-columns:minmax(180px,250px) minmax(240px,1fr) auto;grid-template-areas:"head head head" "art copy actions" "note note note";gap:12px 22px;align-items:center;width:min(1180px,100%);margin:0 auto;padding:16px;border:1px solid rgba(255,255,255,.14);border-top:2px solid var(--action-glow);border-radius:2px;background:radial-gradient(circle at 16% 52%,rgba(95,22,125,.28),transparent 34%),linear-gradient(120deg,#0c1016,#12161a 55%,#0a0d11);box-shadow:0 18px 45px rgba(0,0,0,.28)}
.ms-now-card-head{grid-area:head;display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);color:var(--action-glow);font:800 .74rem/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.13em;text-transform:uppercase}
.ms-now-card-head span:last-child{color:#8d9aac;font-size:.64rem}
.ms-now-card-art{grid-area:art;position:relative;display:grid;place-items:center;min-height:134px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:radial-gradient(circle,rgba(141,36,190,.28),rgba(5,7,11,.82) 64%)}
.ms-now-card-disc{position:relative;width:104px;height:104px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 5px,rgba(255,255,255,.07) 6px 7px),#090a0d;box-shadow:0 0 0 2px #292d34,0 0 26px rgba(255,106,43,.35);animation:ms-now-spin 8s linear infinite}
.ms-now-card-disc::after{content:"";position:absolute;inset:42%;border-radius:50%;background:var(--action-glow);box-shadow:0 0 0 11px #4f0e70}
.ms-now-card-disc [data-live-artwork]{position:absolute;inset:31%;z-index:1;width:38%;height:38%;border-radius:50%;object-fit:cover;background:#4f0e70}
.ms-now-card-label{position:absolute;inset:50% auto auto 50%;z-index:2;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);background:#090a0d}
.ms-now-card-arm{position:absolute;top:24px;right:calc(50% - 65px);z-index:3;width:11px;height:76px;border-radius:8px;transform:rotate(23deg);transform-origin:top center;background:linear-gradient(90deg,#e8e9e9,#6f7780);box-shadow:0 0 0 2px #161a20}
.ms-now-card-arm i{position:absolute;right:-4px;bottom:-9px;width:19px;height:25px;border-radius:3px;background:var(--action-glow)}
.ms-now-card-copy{grid-area:copy;min-width:0}
.ms-now-card-state{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--live-glow);font:800 .68rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.ms-now-card-state i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 11px currentColor}
.ms-now-card-title{margin:0;overflow-wrap:anywhere;color:#fff;font:800 clamp(1.25rem,2vw,1.85rem)/1.08 system-ui,sans-serif}
.ms-now-card-artist{margin:5px 0 12px;color:#aeb7c5;font:500 .9rem/1.35 system-ui,sans-serif}
.ms-now-card-provider,.ms-now-card-status{color:#7f8b9c;font:700 .62rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.ms-now-card-actions{grid-area:actions;display:grid;min-width:190px;gap:8px}
.ms-now-card-button,.ms-now-card-signin{display:inline-flex;justify-content:center;align-items:center;min-height:39px;padding:0 15px;border:1px solid var(--action-glow);border-radius:4px;color:#050608;background:var(--action-glow);font:900 .68rem/1 system-ui,sans-serif;letter-spacing:.09em;text-align:center;text-decoration:none;text-transform:uppercase;box-shadow:0 0 20px rgba(255,106,43,.28)}
.ms-now-card-button:hover,.ms-now-card-button:focus-visible,.ms-now-card-signin:hover,.ms-now-card-signin:focus-visible{filter:brightness(1.14);box-shadow:0 0 28px rgba(255,106,43,.48)}
.ms-now-card-signin{color:#f3f4f7;border-color:rgba(255,255,255,.2);background:transparent;box-shadow:none}
.ms-now-card-note{grid-area:note;margin:0;color:#6f7a89;font:500 .64rem/1.4 system-ui,sans-serif;text-align:center}
html[data-live-state="MUSIC"] .ms-now-card-inner{border-top-color:var(--live-glow)}
html[data-live-state="MUSIC"] .ms-now-card-disc{box-shadow:0 0 0 2px #292d34,0 0 30px rgba(46,204,113,.38)}
html[data-live-state="STALE"] .ms-now-card-state{color:#ff535f}
@keyframes ms-now-spin{to{transform:rotate(360deg)}}
@media(max-width:780px){.ms-now-card-inner{grid-template-columns:150px minmax(0,1fr);grid-template-areas:"head head" "art copy" "actions actions" "note note"}.ms-now-card-actions{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}}
@media(max-width:520px){.ms-now-playing-card{padding-inline:9px}.ms-now-card-inner{grid-template-columns:1fr;grid-template-areas:"head" "art" "copy" "actions" "note"}.ms-now-card-art{min-height:126px}.ms-now-card-actions{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce) { [data-live-record],.ms-now-card-disc { animation: none !important; } }