/* Token warna dan HUD JARVIS: dipakai halaman login dan halaman asisten. */
:root{--bg:#0a0a0b;--panel:rgba(21,22,24,.82);--line:#26282c;--tx:#f5f5f5;--mut:#8a8f98;--ac:#22d3ee;--am:#f59e0b;--rd:#ef4444;--r:16px;--spd:1}
.hud{position:relative;width:min(420px,78vw);aspect-ratio:1;container-type:inline-size}
.hud::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.17),transparent 66%);animation:halo 3.5s ease-in-out infinite;pointer-events:none}
.hud svg.r{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:filter .4s}
.spin{transform-box:fill-box;transform-origin:center;animation:spin calc(60s / var(--spd)) linear infinite}
.spin.rev{animation-direction:reverse;animation-duration:calc(38s / var(--spd))}
.spin.fast{animation-duration:calc(22s / var(--spd))}
.spin.orbit{animation-duration:calc(24s / var(--spd))}
.hud.thinking{--spd:5}
.hud.speaking{--spd:2.5}
.hud.listening,.hud.focus{--spd:2}
.hudtext{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1.6cqw;text-align:center;pointer-events:none;font-family:Orbitron,system-ui,sans-serif}
.hudtext b{font-size:5.4cqw;letter-spacing:.12em;font-weight:800;color:#fff;text-shadow:0 0 12px rgba(34,211,238,.9),0 0 2px #fff;padding-left:.12em;white-space:nowrap}
.hudtext small{font-size:2.2cqw;letter-spacing:.28em;color:var(--ac);opacity:.6;font-weight:600;white-space:nowrap}
.hudtext em{font-style:normal;font-size:2.5cqw;letter-spacing:.2em;color:var(--ac);font-weight:600;white-space:nowrap}
.ripple{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;border-radius:50%;border:2px solid var(--ac);opacity:0;pointer-events:none}
.hud.speaking .hudtext b{animation:beat .9s ease-in-out infinite}
.hud.speaking .ripple,.hud.ok .ripple{animation:ripple 1.5s ease-out infinite}
.hud.speaking .ripple.b,.hud.ok .ripple.b{animation-delay:.75s}
.hud.speaking::before{animation-duration:1.2s}
.hud.listening .hudtext b{text-shadow:0 0 22px rgba(245,158,11,.9),0 0 2px #fff}
.hud.focus .hudtext b{text-shadow:0 0 26px #22d3ee,0 0 8px #22d3ee,0 0 2px #fff}
.hud.focus svg.r,.hud.ok svg.r{filter:drop-shadow(0 0 16px rgba(34,211,238,.55))}
.hud.err{animation:shake .45s}
.hud.err .hudtext b{color:#fecaca;text-shadow:0 0 22px rgba(239,68,68,.9),0 0 2px #fff}
.hud.err .hudtext em{color:var(--rd)}
.hud.err svg.r{filter:drop-shadow(0 0 14px rgba(239,68,68,.5))}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes halo{0%,100%{opacity:.4;transform:scale(.98)}50%{opacity:.9;transform:scale(1.03)}}
@keyframes beat{0%,100%{transform:scale(1);text-shadow:0 0 10px rgba(34,211,238,.8),0 0 2px #fff}50%{transform:scale(1.07);text-shadow:0 0 38px #22d3ee,0 0 12px #22d3ee,0 0 2px #fff}}
@keyframes ripple{0%{transform:scale(.8);opacity:.7}100%{transform:scale(2.1);opacity:0}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
/* Pengguna dengan "kurangi gerakan" di OS: HUD tetap hidup (itu inti produk), tetapi tanpa getar, riak, dan efek membesar. */
@keyframes beatSoft{0%,100%{text-shadow:0 0 10px rgba(34,211,238,.8),0 0 2px #fff}50%{text-shadow:0 0 38px #22d3ee,0 0 12px #22d3ee,0 0 2px #fff}}
@media(prefers-reduced-motion:reduce){.hud.err{animation:none}.hud.speaking .ripple,.hud.ok .ripple{animation:none}.hud.speaking .hudtext b{animation-name:beatSoft}}