.lead { color: #b8bfcc; margin-bottom: 14px; }
.hint { color: #8a93a3; font-size: 0.9rem; margin-top: 8px; }
.mic { margin-bottom: 20px; }
.meter { height: 8px; background: #2a3240; border-radius: 4px; overflow: hidden; margin-top: 12px; }
#meter-bar { height: 100%; width: 0; background: #3fbf7f; transition: width 0.08s linear; }
button.ghost { background: transparent; border: 1px solid #3a4456; color: #c9d0dc; }
button.ghost:disabled { color: #59606d; }
.row { display: flex; gap: 10px; margin-block: 12px; }
.row button { flex: 1; }
.section { color: #8a93a3; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.follow { background: #232b37; border-left: 3px solid #e0a43a; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.who-label { color: #e0a43a; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.follow p { margin-top: 4px; font-size: 1.05rem; line-height: 1.5; }
.rec { display: flex; align-items: center; gap: 8px; color: #ff8080; font-variant-numeric: tabular-nums; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #e05252; }
@media (prefers-reduced-motion: no-preference) { .dot { animation: pulse 1s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: 0.3; } }
#code { width: 100%; min-height: 260px; resize: vertical; background: #11131a; color: #e6e6e9; border: 1px solid #2a3240;
  border-radius: 8px; padding: 12px; font: 0.92rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 4; user-select: text; }
#output { background: #11131a; border-radius: 8px; padding: 12px; white-space: pre-wrap; max-height: 240px; overflow: auto;
  font: 0.88rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: text; }
#screen-q .card { margin-top: 64px; }
#qtext { white-space: pre-wrap; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #7a3038; color: #fff;
  padding: 10px 16px; border-radius: 8px; z-index: 60; max-width: calc(100% - 32px); }
.res { border-top: 1px solid #2a3240; padding-block: 12px; display: grid; gap: 4px; }
.res .top { display: flex; justify-content: space-between; gap: 10px; }
.res .sc { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res .note { color: #b8bfcc; font-size: 0.92rem; }
.field { display: grid; gap: 6px; margin-top: 8px; color: #c9d0dc; }
.field input { background: #11131a; color: #e6e6e9; border: 1px solid #3a4456; border-radius: 8px; padding: 12px; font: inherit; }
.field input:focus { outline: 2px solid #3fbf7f; outline-offset: 1px; }
.err { color: #ff8080; margin-top: 10px; }
#join button { margin-top: 16px; width: 100%; }