/* Mixtura: restrained violet light, satin surfaces and a request-driven signal. */
.signal-stage { position:relative; isolation:isolate; display:flex; align-items:center; min-height:172px; padding:28px 34px; margin:0 0 24px; overflow:hidden; border:1px solid #443253; border-radius:16px; background:#120d1d; box-shadow:inset 0 1px 0 #ffffff0a,0 16px 60px #0003; }
.signal-stage::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#120d1df5 0%,#120d1da0 48%,#120d1d10 100%); }
.signal-aurora { position:absolute; inset:-55% -15%; z-index:-1; background:radial-gradient(ellipse at 68% 60%,#b97bff85 0%,#7e3bdc45 20%,transparent 47%),conic-gradient(from 160deg at 70% 50%,transparent 15%,#6f37c759 35%,#d2a8fb55 43%,transparent 54%); filter:blur(22px); transform:rotate(-12deg); animation:mixtura-aurora 20s ease-in-out infinite alternate; }
#mixtura-shader { position:absolute; inset:0; opacity:0; z-index:0; pointer-events:none; transition:opacity 1.1s ease; }
.signal-stage[data-shader="ready"] #mixtura-shader { opacity:0.8; }
.signal-stage[data-shader="ready"] .signal-aurora, .signal-stage[data-visible="false"] .signal-aurora, .signal-stage[data-visible="false"] .signal-emblem { animation-play-state:paused; }
.signal-grid { position:absolute; inset:0; z-index:1; pointer-events:none; background-image:linear-gradient(#e3caff08 1px,transparent 1px),linear-gradient(90deg,#e3caff08 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(90deg,transparent 40%,#000); }
.signal-copy { position:relative; z-index:2; max-width:75%; }
.signal-eyebrow { display:flex; align-items:center; gap:9px; font:9px/1.5 var(--mono); letter-spacing:2.4px; color:#bc94e3; }
.signal-dot { display:inline-block; flex:none; width:5px; height:5px; border-radius:50%; background:#bf86f6; box-shadow:0 0 12px #af60ffab; }
.signal-copy h2 { margin:12px 0 7px; font:500 clamp(20px,2.2vw,29px)/1.25 var(--font,sans-serif); letter-spacing:-0.8px; color:#f0e6fc; }
.signal-copy p { margin:0; font-size:12px; color:#b9a9c8; }
.signal-emblem { position:absolute; z-index:2; right:8%; top:50%; transform:translateY(-50%) rotate(-14deg); width:118px; height:118px; }
.signal-disc { display:grid; place-items:center; width:100%; height:100%; border:1px solid #e6c3ff48; border-radius:50%; background:repeating-radial-gradient(ellipse at center,#d9b3ff05 0 2px,#0e07190d 2px 5px),radial-gradient(circle at 28% 18%,#f0d0ff52,transparent 60%),linear-gradient(135deg,#55287f80,#140c2bd9); box-shadow:inset 2px 2px 20px #dec5ff17,0 0 45px #9551ef36; }
.signal-disc span { display:grid; place-items:center; width:42px; height:42px; border:1px solid #d5a8f36b; border-radius:50%; font:600 26px/1 sans-serif; color:#e5c4ff; background:#1a102c; }
.signal-orbit { position:absolute; inset:-13px; border:1px solid #d0a4ff21; border-radius:50%; transform:scaleY(0.7) rotate(35deg); }
.panel,.song-card,.library-empty { box-shadow:inset 0 1px 0 #ffffff06,0 14px 42px #0002; transition:border-color 200ms ease,box-shadow 200ms ease; }
.song-card:hover { border-color:#795292; box-shadow:inset 0 1px 0 #e5caff16,0 12px 35px #0005; }
.btn { transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.btn--primary:not(:disabled):hover { box-shadow:0 0 25px #ad63ef30; transform:translateY(-1px); }
.generation-dock { position:fixed; z-index:100; right:26px; bottom:24px; width:min(390px,calc(100vw - 32px)); padding:20px 22px 16px; border:1px solid #9463b1; border-radius:15px; background:linear-gradient(135deg,#271636f5,#120e1bf5); backdrop-filter:blur(18px); box-shadow:0 18px 65px #0009,0 0 45px #9440e52b,inset 0 1px 0 #eacbff22; animation:mixtura-dock-in 250ms ease-out; }
.generation-heading { display:flex; align-items:center; gap:9px; }
.generation-heading strong { color:#f2e7fc; font-size:13px; font-weight:500; }
.generation-heading time { margin-left:auto; font:11px var(--mono); color:#c49ce3; }
.generation-dock p { margin:13px 0 0; font-size:11px; line-height:1.65; color:#bba9c9; }
.generation-visualizer { display:flex; justify-content:center; align-items:center; gap:3px; height:58px; margin-top:12px; color:#cc99fa; }
.generation-visualizer > span { flex:1; min-width:0; max-width:5px; height:calc(var(--bar-level)*100%); border-radius:999px; background:linear-gradient(#e7c9ff,#a259dd); box-shadow:0 0 9px #b567ef44; }
.is-generating .signal-stage { border-color:#795090; }
.is-generating .signal-emblem { animation:mixtura-disc 14s linear infinite; }
.is-generating .signal-aurora { animation-duration:6s; }
.result-arrived .out-block { animation:mixtura-result 850ms ease-out; }
@keyframes mixtura-aurora { to { transform:translate(-4%,5%) rotate(7deg) scale(1.13); } }
@keyframes mixtura-disc { to { transform:translateY(-50%) rotate(346deg); } }
@keyframes mixtura-dock-in { from { opacity:0; transform:translateY(12px); } }
@keyframes mixtura-result { from { border-color:#b576e8; box-shadow:0 0 28px #a253e127; } }
@media(max-width:700px) {
 .signal-stage { min-height:154px; padding:23px 20px; margin-bottom:18px; border-radius:12px; }
 .signal-copy { max-width:85%; }
 .signal-copy h2 { max-width:230px; font-size:23px; }
 .signal-copy p { max-width:210px; font-size:11px; line-height:1.6; }
 .signal-eyebrow { font-size:8px; letter-spacing:1.7px; }
 .signal-emblem { width:90px; height:90px; right:-28px; opacity:0.5; z-index:1; }
 .generation-dock { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); padding:16px 18px; }
 .generation-visualizer { gap:2px; }
}
@media(prefers-reduced-motion:reduce) {
 .signal-aurora,.is-generating .signal-emblem,.generation-dock,.result-arrived .out-block { animation:none !important; }
 #mixtura-shader { display:none; }
 .btn:hover { transform:none !important; }
}

.signal-disc .signal-brand-icon { width:80%; height:80%; object-fit:contain; border-radius:24%; }