@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root { --ink:#edf2fa; --muted:#8f9bb2; --paper:#101827; --panel:#182234; --line:#2a3851; --cyan:#72f0d1; --blue:#7e9aff; --danger:#ff8495; font-family:"Noto Sans SC", system-ui, sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { min-height:100vh; margin:0; background:radial-gradient(circle at 50% -20%,#253b64 0,transparent 45%),var(--paper); } button,input,select { font:inherit; } button { cursor:pointer; border:0; } button:disabled { cursor:not-allowed; opacity:.48; }.shell { width:min(100% - 36px,980px); margin:auto; }.brand { color:var(--ink); text-decoration:none; font-family:"DM Mono",monospace; font-size:1rem; letter-spacing:.11em; }.brand span { color:var(--muted); font-size:.68rem; letter-spacing:0; margin-left:.25rem; }.hidden { display:none!important; }.eyebrow { color:var(--cyan); font:500 .71rem/1 "DM Mono",monospace; letter-spacing:.14em; margin:0 0 .8rem; }.primary,.secondary,.danger,.quiet { padding:.86rem 1.3rem; border-radius:999px; font-weight:700; transition:transform .2s,background .2s; }.primary:hover,.secondary:hover,.danger:hover { transform:translateY(-1px); }.primary { color:#0d1924; background:var(--cyan); min-width:200px; }.secondary { color:var(--ink); background:#273753; }.danger { color:#fff; background:#8e3445; }.quiet { background:transparent; color:var(--muted); text-decoration:underline; }.visitor-shell { display:grid; place-content:center; min-height:100vh; text-align:center; }.visitor-shell .brand { position:absolute; top:32px; left:50%; transform:translateX(-50%); }.hero-card { padding:40px 20px 31px; }.hero-card h1 { font-size:clamp(2.35rem,7vw,4.5rem); letter-spacing:-.06em; margin:0; }.status { min-height:3em; color:var(--muted); font-size:1.04rem; max-width:380px; margin:1.3rem auto; }.orb-wrap { width:186px; height:186px; display:grid; place-items:center; margin:0 auto 30px; position:relative; }.orb { width:116px; height:116px; border-radius:50%; background:radial-gradient(circle at 35% 27%,#d7fff5,#65ddca 35%,#495ee1 76%); box-shadow:0 0 80px #70eac777; animation:breathe 3s ease-in-out infinite; }.orb-wrap i { position:absolute; inset:0; border:1px solid #88d7dc4d; border-radius:48% 52% 45% 55%; animation:spin 11s linear infinite; }.orb-wrap i+ i { inset:13px; animation-direction:reverse; animation-duration:7s; }.operator-shell { padding:30px 0 80px; }.console-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:35px; }.connection-dot { color:var(--muted); font-size:.78rem; }.connection-dot::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--cyan); margin-right:6px; }.panel { background:linear-gradient(135deg,#1b273b,#151e2e); border:1px solid var(--line); border-radius:18px; padding:24px; }.login-panel { width:min(100%,450px); margin:10vh auto; }.login-panel h1 { margin:0 0 24px; }.login-panel label,.effect-panel label { display:grid; gap:8px; font-weight:600; font-size:.88rem; }.login-panel input,.effect-panel select { width:100%; color:var(--ink); background:#0f1725; border:1px solid #334561; border-radius:9px; padding:12px; margin-bottom:18px; }.error { color:var(--danger); font-size:.85rem; }.console { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.mic-panel { display:flex; justify-content:space-between; align-items:center; }.panel h2 { margin:0; font-size:1.15rem; }.effect-panel p { font-size:.76rem; color:var(--muted); line-height:1.6; margin:0; }.active-panel { grid-column:1 / -1; display:flex; align-items:center; gap:20px; }.active-panel .eyebrow { margin:0 0 .4rem; }.active-panel .danger { margin-left:auto; }.queue-heading { display:flex; justify-content:space-between; align-items:end; margin:24px 0 10px; }.queue-heading h2 { margin:0; }.count { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:var(--cyan); background:#26484b; font-weight:700; }.queue { display:grid; gap:9px; }.visitor-row { display:flex; justify-content:space-between; align-items:center; background:#172236; border:1px solid var(--line); border-radius:12px; padding:13px 14px; }.visitor-row strong,.visitor-row span { display:block; }.visitor-row span,.empty { color:var(--muted); font-size:.77rem; margin:.2rem 0 0; }.empty { padding:20px 0; text-align:center; }@keyframes breathe { 50% { transform:scale(1.1); box-shadow:0 0 105px #70eac799; } } @keyframes spin { to { transform:rotate(360deg); } } @media(max-width:620px) { .console { grid-template-columns:1fr; }.active-panel { grid-column:auto; align-items:flex-start; flex-direction:column; }.active-panel .danger { margin-left:0; }.mic-panel { align-items:flex-start; gap:15px; flex-direction:column; }.operator-shell { padding-top:20px; } }
/* Visitor experience */
.visitor-page { overflow-x:hidden; background:radial-gradient(circle at 50% 42%,#263c6944 0,transparent 29%),radial-gradient(circle at 50% -20%,#243e68 0,transparent 49%),#0d1421; }
.visitor-page::before { content:""; pointer-events:none; position:fixed; inset:0; opacity:.26; background-image:linear-gradient(#7995bb12 1px,transparent 1px),linear-gradient(90deg,#7995bb12 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(circle at center,#000 5%,transparent 72%); }
.visitor-header { position:fixed; z-index:2; top:27px; left:50%; display:flex; align-items:center; justify-content:space-between; width:min(100% - 48px,1020px); transform:translateX(-50%); }
.visitor-shell .brand { position:static; transform:none; }
.network-state { display:flex; align-items:center; gap:7px; color:#b4c6d7; font:500 .68rem/1 "DM Mono",monospace; letter-spacing:.04em; }
.network-state i { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.network-state.is-offline i { background:#f6b864; box-shadow:0 0 10px #f6b864; }
.visitor-shell { min-height:100svh; }
.visitor-shell .hero-card { position:relative; z-index:1; width:min(100%,620px); padding:58px 20px 28px; }
.visitor-shell .hero-card h1 { font-size:clamp(2.7rem,8vw,5.4rem); line-height:1.03; background:linear-gradient(100deg,#fff,#b8d7ff 60%,#9affea); background-clip:text; -webkit-background-clip:text; color:transparent; }
.visitor-shell .eyebrow { margin-top:6px; color:#8ec7ff; font-size:.66rem; }
.orb-wrap { width:204px; height:204px; margin-bottom:17px; }
.orb { position:relative; z-index:1; display:grid; place-items:center; width:125px; height:125px; background:radial-gradient(circle at 35% 27%,#e9fffa,#72e8d2 28%,#5468ec 67%,#273282); box-shadow:0 0 25px #84ebea,0 0 105px #647df099; }
.orb span { color:#0d2467cc; font:600 2.6rem/1 "DM Mono",monospace; transform:translateY(-1px); }
.orb-wrap b { position:absolute; z-index:0; width:158px; height:158px; border-radius:50%; border:1px solid #a0d9e53a; box-shadow:inset 0 0 35px #73e6df16; animation:scanner 3.6s ease-in-out infinite; }
.voice-bars { height:28px; display:flex; align-items:center; justify-content:center; gap:4px; opacity:.3; transition:opacity .35s; }
.voice-bars span { width:3px; height:7px; border-radius:999px; background:linear-gradient(var(--cyan),#6284ff); transform-origin:center; }
body[data-phase="connecting"] .voice-bars,body[data-phase="searching"] .voice-bars,body[data-phase="listening"] .voice-bars,body[data-phase="speaking"] .voice-bars { opacity:1; }
body[data-phase="connecting"] .voice-bars span,body[data-phase="searching"] .voice-bars span,body[data-phase="listening"] .voice-bars span,body[data-phase="speaking"] .voice-bars span { animation:equalize 1s ease-in-out infinite; }
.voice-bars span:nth-child(2),.voice-bars span:nth-child(8) { animation-delay:-.2s!important; }.voice-bars span:nth-child(3),.voice-bars span:nth-child(7) { animation-delay:-.45s!important; }.voice-bars span:nth-child(4),.voice-bars span:nth-child(6) { animation-delay:-.7s!important; }.voice-bars span:nth-child(5) { animation-delay:-.9s!important; }
body[data-phase="speaking"] .voice-bars span { animation-duration:.5s; background:linear-gradient(#dcfff6,#7c8dff); }
body[data-phase="speaking"] .orb { animation-duration:1.5s; }
body[data-phase="searching"] .orb-wrap i,body[data-phase="connecting"] .orb-wrap i { border-color:#9cf4e599; animation-duration:3.5s; }
.status { margin:.8rem auto .28rem; min-height:auto; color:#e3edfb; font-size:1.06rem; font-weight:600; letter-spacing:-.015em; }
.status-detail { min-height:1.4em; margin:0 auto 1.35rem; color:#8fa6c0; font-size:.77rem; }
.primary { position:relative; min-width:218px; background:linear-gradient(110deg,#80f3d8,#8eb1ff); box-shadow:0 9px 30px #70e8d238; }
.primary:hover { box-shadow:0 11px 38px #70e8d255; }
.button-dot { display:inline-block; width:7px; height:7px; margin:0 8px 1px 0; border-radius:50%; background:#102638; box-shadow:0 0 0 3px #ffffff4d; vertical-align:middle; }
.connection-flow { width:min(100%,390px); margin:0 auto 22px; padding:14px 15px 13px; border:1px solid #94c8da2e; border-radius:14px; background:#101a2b9e; box-shadow:0 14px 36px #06101d38; text-align:left; backdrop-filter:blur(12px); }
.flow-head { display:flex; justify-content:space-between; color:#b9d2e7; font:.68rem/1 "DM Mono",monospace; }.flow-head span+span { color:var(--cyan); }
.progress { height:3px; overflow:hidden; margin:11px 0 12px; border-radius:99px; background:#31425a; }.progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),#91a4ff); box-shadow:0 0 12px var(--cyan); transition:width .32s ease; }
.flow-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; color:#5d718b; font-size:.62rem; }.flow-steps span::before { content:"○"; margin-right:4px; }.flow-steps .is-active { color:#cae3f3; }.flow-steps .is-active::before { content:"◉"; color:var(--cyan); }.flow-steps .is-done { color:#84d9ca; }.flow-steps .is-done::before { content:"✓"; }
.visitor-footer { position:fixed; z-index:1; bottom:18px; left:50%; transform:translateX(-50%); color:#7e93ab; font:500 .68rem/1 "DM Mono",monospace; letter-spacing:.08em; white-space:nowrap; }
.visitor-footer span { color:#c5d6e8; }
body[data-phase="error"] .orb { filter:hue-rotate(110deg) saturate(.5); } body[data-phase="reconnecting"] .orb-wrap { opacity:.75; }
@keyframes equalize { 0%,100% { height:5px; } 50% { height:27px; } } @keyframes scanner { 50% { transform:scale(1.22); opacity:.15; } }
@media(max-width:620px) { .visitor-header { top:20px; width:calc(100% - 32px); }.network-state { font-size:.59rem; }.visitor-shell .hero-card { padding-top:45px; }.orb-wrap { transform:scale(.88); margin-bottom:2px; }.visitor-shell { display:flex; min-height:100svh; flex-direction:column; justify-content:center; }.voice-bars { margin-top:-5px; }.flow-steps { font-size:.56rem; }.visitor-footer { bottom:14px; font-size:.58rem; } }