:root { color-scheme: light dark; --bg: var(--tg-theme-bg-color, #fff); --fg: var(--tg-theme-text-color, #111); --hint: var(--tg-theme-hint-color, #777); --accent: var(--tg-theme-button-color, #2481cc); --accent-fg: var(--tg-theme-button-text-color, #fff); --card: var(--tg-theme-secondary-bg-color, #f2f2f5); --danger: #d93a3a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.4 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }
main { max-width: 480px; margin: 0 auto; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 16px; }
header { text-align: center; }
h1 { margin: 0; font-size: 22px; }
.langs { margin: 4px 0 0; color: var(--hint); }
#call { width: 168px; height: 168px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-fg); font-size: 18px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.18); transition: transform .15s, background .2s; margin: 16px 0 8px; }
#call:active:not(:disabled) { transform: scale(.96); }
#call:disabled { opacity: .5; }
#call.live { background: var(--danger); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px rgba(217,58,58,.14); } }
#status { margin: 0; text-align: center; color: var(--hint); min-height: 1.4em; }
#timer { margin: 0; font-variant-numeric: tabular-nums; color: var(--hint); }
#log { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.line { background: var(--card); border-radius: 12px; padding: 8px 12px; }
.line small { display: block; color: var(--hint); font-size: 12px; }
.line.interpreter { border-left: 3px solid var(--accent); }
@media (prefers-reduced-motion: reduce) { #call.live { animation: none; } }