* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: #0e1116; color: #f2f4f8; -webkit-text-size-adjust: 100%; }
a { color: #8ab4ff; }
.landing { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; line-height: 1.5; }
.landing h1 { font-size: 2rem; margin: 0 0 12px; }
.landing .lang { float: right; }
.landing .lang button { background: none; border: 1px solid #3a4150; color: inherit; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.landing .lang button[aria-pressed='true'] { background: #2a3140; }
.btn { display: inline-block; background: #3b82f6; color: #fff; border: 0; border-radius: 10px; padding: 14px 26px; font-size: 1.1rem; cursor: pointer; text-decoration: none; }
.btn.alt { background: #394150; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.app { display: flex; flex-direction: column; height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.half { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 10px 14px; gap: 8px; background: #151a22; }
#top { transform: rotate(180deg); background: #1a2030; }
.bar { display: flex; gap: 10px; align-items: center; }
.bar select { flex: 1; font-size: 1rem; padding: 10px; border-radius: 8px; background: #0e1116; color: inherit; border: 1px solid #3a4150; min-width: 0; }
.mic { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #4a5568; background: #0e1116; color: inherit; font-size: 1.4rem; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.mic.active { background: #dc2626; border-color: #fca5a5; }
.mic[hidden], .bar select[hidden] { display: none; }
.tr { flex: 1; overflow-y: auto; font-size: clamp(1.4rem, 5vw, 2.2rem); line-height: 1.3; }
.tr .turn { margin: 0 0 .6em; }
.tr .spec { opacity: .6; }
.own { font-size: .85rem; color: #8b93a3; min-height: 1.2em; }
.unrec { font-size: .9rem; color: #fbbf24; min-height: 1.2em; }
.mid { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px; background: #0e1116; flex: 0 0 auto; }
.mid .state { font-size: .85rem; color: #8b93a3; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #4a5568; }
.dot.live { background: #22c55e; }
.dot.reconnecting, .dot.connecting { background: #f59e0b; }
.dot.error { background: #ef4444; }
@media (max-height: 520px) and (orientation: landscape) { .half { padding: 6px 10px; } .mic { width: 40px; height: 40px; } .tr { font-size: 1.2rem; } }