body { font-family: system-ui, sans-serif; background: #f6f7fb; color: #172033; margin: 0; }
main { max-width: 680px; margin: 2rem auto; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 18px #17203318; }
section { border-top: 1px solid #d9deea; margin-top: 1.5rem; padding-top: 1rem; }
.controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
button, .file-label { padding: .6rem .85rem; font: inherit; cursor: pointer; }
.file-label input { display: block; margin-top: .3rem; }
.hint { color: #4d5b72; } #error { color: #a4161a; } audio { display: block; margin: .75rem 0; width: 100%; }
.streaming-status { display: grid; grid-template-columns: minmax(12rem, 1fr) 1fr; gap: .65rem 1rem; }
.streaming-status dt { color: #4d5b72; }
.streaming-status dd { margin: 0; }
.state { display: inline-block; border-radius: 999px; padding: .2rem .65rem; background: #e7ebf3; }
.state-listening { background: #d9f6e4; color: #126036; }
.state-thinking, .state-connecting { background: #fff0c2; color: #684d00; }
.state-speaking { background: #dcecff; color: #174b83; }
.state-interrupted { background: #f2e1ff; color: #6a2788; }
.state-error { background: #ffe0e0; color: #8a1515; }
@media (max-width: 560px) { .streaming-status { grid-template-columns: 1fr; } }