:root {
  --bg: #f6f4ef;
  --fg: #1d2420;
  --muted: #5d6762;
  --accent: #1f6f5c;
  --accent-fg: #ffffff;
  --stop: #a8442f;
  --card: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141a17; --fg: #eef2ef; --muted: #a3ada8; --accent: #3fae8e; --accent-fg: #0d1512; --stop: #e07a62; --card: #1e2622; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 18px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.envbar { background: #6b3fa0; color: #fff; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .08em; padding: 4px; }
.screen {
  min-height: calc(100vh - 28px); max-width: 480px; margin: 0 auto; padding: 24px 16px 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
}
.lang { align-self: flex-end; display: flex; gap: 10px; }
.lang a { color: var(--muted); text-decoration: none; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.lang a[aria-current] { color: var(--accent); background: var(--card); }
.logo { width: 96px; height: 96px; }
h1 { margin: 0; font-size: 40px; }
.sub { margin: 0; color: var(--muted); }
.freedom { margin: 4px 0 18px; font-size: 22px; font-weight: 600; color: var(--accent); }
.topic { display: flex; flex-direction: column; gap: 6px; width: 100%; color: var(--muted); }
.topic select { font-size: 20px; padding: 14px; border-radius: 14px; border: 1px solid #c9cfcb; background: var(--card); color: var(--fg); }
.big {
  width: 100%; min-height: 96px; border: 0; border-radius: 24px; cursor: pointer;
  background: var(--accent); color: var(--accent-fg); font-size: 28px; font-weight: 700;
}
.big:disabled { opacity: .4; cursor: default; }
.big.stop { background: var(--stop); min-height: 80px; font-size: 24px; margin-top: auto; }
.note { color: var(--muted); font-size: 14px; }
.warn { color: var(--stop); font-weight: 600; }
.orb { width: 180px; height: 180px; border-radius: 50%; background: var(--accent); opacity: .35; margin-top: 40px; transition: transform .3s, opacity .3s; }
.orb.speaking { opacity: .9; animation: pulse 1.2s ease-in-out infinite; }
.orb.listening { opacity: .9; background: #d99a2b; animation: pulse 2s ease-in-out infinite; }
.orb.thinking { opacity: .5; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.screen.top { justify-content: flex-start; text-align: left; align-items: stretch; }
.h2 { font-size: 28px; }
.back { color: var(--accent); text-decoration: none; font-weight: 600; }
.form { display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: left; }
.form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.form input, .form select { font-size: 18px; padding: 12px; border-radius: 12px; border: 1px solid #c9cfcb; background: var(--card); color: var(--fg); }
.form label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--fg); }
.form label.check input { width: 22px; height: 22px; }
.card { background: var(--card); border-radius: 18px; padding: 16px; }
.card h2 { margin: 0 0 4px; font-size: 20px; }
.money { font-size: 32px; font-weight: 700; margin: 4px 0; }
.money span { font-size: 18px; color: var(--muted); font-weight: 400; }
.big.small { min-height: 60px; font-size: 22px; }
.ok { color: var(--accent); font-weight: 600; }
.foot { display: flex; gap: 24px; justify-content: center; margin-top: 12px; }
.foot a, .link { color: var(--muted); background: none; border: 0; font: inherit; font-size: 16px; cursor: pointer; text-decoration: underline; padding: 8px; }
.foot form { margin: 0; }
.state { font-size: 24px; font-weight: 600; margin: 8px 0 0; }
.caption { color: var(--muted); font-size: 16px; min-height: 3em; }