:root { font-family: system-ui, sans-serif; color-scheme: light dark; }
body { margin: 0; background: #111b21; color: #e9edef; }
main { max-width: 620px; margin: 2rem auto; padding: 0 1rem; }
h1 { color: #25d366; }
.warning { color: #f0c674; }
.card { background: #202c33; padding: 1rem; margin: 1rem 0; border-radius: 10px; }
.status-row { display: flex; justify-content: space-between; gap: 1rem; margin: .4rem 0; }
#message { color: #aebac1; }
#error { color: #ff8a80; white-space: pre-wrap; }
#qr { display: block; width: 320px; max-width: 100%; margin: 1rem auto; background: white; }
label { display: block; margin-bottom: .5rem; }
.controls { display: flex; gap: .6rem; margin: .6rem 0; }
input, select { flex: 1; min-width: 0; padding: .75rem; font-size: 1rem; }
#mic-level { color: #aebac1; }
button { border: 0; border-radius: 6px; padding: .75rem 1rem; cursor: pointer; background: #00a884; color: white; font-weight: 700; }
button:disabled { opacity: .45; cursor: not-allowed; }
.danger { background: #d32f2f; }
.accept { background: #2e7d32; }
.incoming { margin: 1rem 0; padding: 1rem; border: 1px solid #25d366; border-radius: 8px; }
.hidden { display: none; }