:root{
  --bg: #0f1218;
  --fg: rgba(255,255,255,0.88);
  --glass: rgba(18,18,24,0.24);
  --border: rgba(255,255,255,0.16);
  --primary: #42A5F5;
  --success: #4CAF50;
  --danger: #EF5350;
  --bg-gradient: linear-gradient(180deg,#0F1218,#161A22);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg-gradient); color: var(--fg)}
.theme-light{
  --bg: #F6F8FB;
  --fg: rgba(0,0,0,0.82);
  --glass: rgba(255,255,255,0.14);
  --border: rgba(0,0,0,0.12);
  --bg-gradient: linear-gradient(180deg,#F7F9FC,#EDEFF5);
}
.app{min-height:100dvh; display:flex; flex-direction:column; gap:16px; padding:16px}
.glass{backdrop-filter: blur(24px) saturate(115%); background: var(--glass); border:1px solid var(--border); border-radius:16px}
.topbar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:8px 12px}
.user-switch{display:flex; gap:8px}
.chip{background:transparent; color:var(--fg); border:1px solid var(--border); border-radius:999px; padding:8px 12px; cursor:pointer}
.chip select{background:transparent; color:inherit; border:none}
.chip.active{outline:2px solid var(--primary)}
.status{text-align:center; opacity:.9}
.actions{display:flex; justify-content:flex-end}
.theme-toggle{display:inline-flex; align-items:center; gap:6px}
.main{display:flex; flex-direction:column; align-items:center; gap:16px; flex:1; justify-content:center}
.mic{width:104px; height:104px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.12)}
.mic .mic-icon{font-size:42px; line-height:1; display:inline-block}
.mic.ready{outline:4px solid color-mix(in srgb, var(--success) 32%, transparent)}
.mic.record{outline:4px solid color-mix(in srgb, var(--danger) 32%, transparent)}
.mic.busy{outline:4px solid color-mix(in srgb, var(--primary) 32%, transparent)}
.mic:active{transform:scale(.96)}
.mic-wrap{position:relative; display:grid; place-items:center}
.wave{position:absolute; top:-70px; width:320px; height:48px; border-radius:12px; background: rgba(66,165,245,.06); border:1px dashed var(--border)}
.spinner{width:28px; height:28px; border:3px solid rgba(255,255,255,.2); border-top-color: var(--primary); border-radius:50%; animation:spin 1s linear infinite}
.hidden{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.footer{display:flex; gap:12px; flex-direction:column}
.progress{height:8px; overflow:hidden}
.bar{height:100%; background: linear-gradient(90deg, #42A5F5, #4CAF50)}
.shortcuts{display:flex; justify-content:space-between}
.ghost{background:transparent; border:1px solid var(--border); color:var(--fg); padding:8px 12px; border-radius:12px}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); padding:10px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--border)}
.modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.25)}
.modal.hidden{display:none}
.modal-content{width:min(92vw,560px); padding:16px; border-radius:16px}
.modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.modal-body{padding:8px 0}
.modal-footer{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.card{padding:12px; border-radius:16px}
.card-title{opacity:.8; font-size:14px; margin-bottom:6px}
.card-value{font-size:20px}
.history-item{padding:10px 0; border-bottom:1px dashed var(--border)}
.history-q{opacity:.85; margin-bottom:4px}
.history-a{opacity:.95}