:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #030810;
  color: #e9f5ff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 10%, #102d4a 0, #07111f 36%, #030810 72%); }
main { width: min(760px, 100%); margin: 0 auto; min-height: 100vh; padding: max(22px, env(safe-area-inset-top)) 20px max(30px, env(safe-area-inset-bottom)); }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
h1 { margin: 0; font-size: clamp(2rem, 8vw, 4rem); letter-spacing: .02em; }
.eyebrow, .label { color: #61d8ff; letter-spacing: .18em; font-size: .72rem; font-weight: 800; }
.badge { padding: 8px 12px; border: 1px solid currentColor; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.badge.online { color: #52ffba; }.badge.offline { color: #ff607f; }
.orb-panel { margin: 34px 0 22px; padding: 30px 18px; text-align: center; border: 1px solid #183f5c; border-radius: 24px; background: rgba(5, 17, 29, .72); box-shadow: inset 0 0 50px rgba(67, 193, 255, .05); transition: .25s ease; }
.orb { width: 150px; height: 150px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #3dd5ff; box-shadow: 0 0 28px rgba(61, 213, 255, .42), inset 0 0 32px rgba(61, 213, 255, .2); }
.orb span { width: 62%; height: 62%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d7f7ff, #31c9ff 28%, #075783 74%); animation: breathe 2.1s ease-in-out infinite; }
.orb-panel.listening .orb { border-color: #51ffbd; box-shadow: 0 0 42px rgba(81,255,189,.6); }
.orb-panel.listening .orb span { background: radial-gradient(circle at 35% 30%, #e7fff7, #51ffbd 30%, #08724e 76%); animation-duration: .8s; }
.orb-panel.processing .orb { border-color: #f7c84b; box-shadow: 0 0 42px rgba(247,200,75,.55); }
.orb-panel.processing .orb span { background: radial-gradient(circle at 35% 30%, #fff9df, #f7c84b 30%, #876706 76%); animation-duration: .55s; }
.orb-panel.speaking .orb { border-color: #ad8aff; box-shadow: 0 0 44px rgba(173,138,255,.58); }
.orb-panel.speaking .orb span { background: radial-gradient(circle at 35% 30%, #f4eeff, #ad8aff 30%, #54328f 76%); animation-duration: .45s; }
.orb-panel.locked { border-color: #8e2438; background: rgba(45, 5, 15, .78); }
.orb-panel.locked .orb { border-color: #ff365e; box-shadow: 0 0 46px rgba(255,54,94,.65); }
.orb-panel.locked .orb span { background: radial-gradient(circle at 35% 30%, #ffe2e8, #ff365e 30%, #7a0920 76%); animation: none; }
.orb-panel.error { border-color: #ff365e; }
.orb-panel h2 { margin: 0; font-size: 1.45rem; }.orb-panel p { margin: 8px 0 0; color: #a8c1d5; }.owner { color: #ff8ba2 !important; font-weight: 800; }
.transcript-panel { min-height: 170px; padding: 18px 20px; border: 1px solid #183f5c; border-radius: 18px; background: rgba(5, 17, 29, .78); }
.transcript-panel p { margin: 5px 0 16px; line-height: 1.45; }.transcript-panel .label { margin-bottom: 4px; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
button { min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1px solid transparent; font: inherit; font-weight: 800; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }.primary { background: #20bff3; color: #03111a; }.secondary { background: #122d42; color: #e9f5ff; border-color: #2d6e97; }.quiet { background: transparent; color: #a8c1d5; border-color: #29455a; }
.devices { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; color: #7895aa; font-size: .82rem; }
dialog { width: min(480px, calc(100% - 28px)); color: inherit; background: #081522; border: 1px solid #2d6e97; border-radius: 18px; padding: 22px; }dialog::backdrop { background: rgba(0,0,0,.74); }
form { display: grid; gap: 16px; }label { display: grid; gap: 7px; font-weight: 700; }input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #2d536c; border-radius: 10px; background: #03101a; color: #fff; font: inherit; }.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@keyframes breathe { 50% { transform: scale(.84); filter: brightness(1.35); } }
@media (max-width: 480px) { .orb { width: 126px; height: 126px; }.orb-panel { margin-top: 24px; padding: 22px 14px; } }