@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(fonts/nunito-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(fonts/nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #fff1e3;
  --bg2: #efe6ff;
  --card: #ffffff;
  --text: #3a2a3f;
  --muted: #86708f;
  --accent: #ff7a59;
  --accent-dark: #e45a3a;
  --accent-text: #ffffff;
  --danger: #d6336c;
  --tutor: #ffe3d6;
  --user: #dcfce7;
  --border: #f0d9ca;
  --font: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2a1d3a;
    --bg2: #171a3a;
    --card: #3a2a4f;
    --text: #fff0e6;
    --muted: #c4a9d0;
    --accent: #ff8b6b;
    --accent-dark: #d9633f;
    --accent-text: #2b1424;
    --danger: #ff7aa8;
    --tutor: #4a3562;
    --user: #1c4a35;
    --border: #5a4375;
  }
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font: 500 17px/1.45 var(--font);
  background:
    radial-gradient(900px 520px at 12% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(800px 600px at 105% 105%, color-mix(in srgb, #8b7bff 26%, transparent), transparent 70%),
    linear-gradient(170deg, var(--bg), var(--bg2));
  background-attachment: fixed;
}

.app {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.top h1 { margin: 0; font-size: 1.6rem; font-weight: 900; letter-spacing: -0.01em; }

.status { margin-top: 4px; color: var(--muted); font-size: 1rem; font-weight: 700; }
.status.live { color: var(--accent); font-weight: 600; }
.status.error { color: var(--danger); font-weight: 600; }

.task {
  background: var(--card);
  border: 3px solid var(--accent);
  border-radius: 22px;
  padding: 12px 18px;
  box-shadow: 0 6px 0 var(--border);
}
.task-meta { color: var(--muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.task-text { margin-top: 4px; font-size: 1.15rem; white-space: pre-wrap; }

.stage { flex: 1; display: grid; place-items: center; min-height: 200px; }
.orb {
  --level: 0;
  width: min(60vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--user), var(--accent));
  opacity: 0.35;
  transform: scale(calc(0.85 + var(--level) * 0.3));
  transition: transform 0.08s linear, opacity 0.3s, filter 0.3s;
  filter: grayscale(1);
}
.orb.listening { opacity: 0.9; filter: none; }
.orb.thinking { opacity: 0.9; filter: none; animation: breathe 1.2s ease-in-out infinite; }
.orb.speaking { opacity: 1; filter: hue-rotate(120deg) saturate(1.3); }
.orb.muted { opacity: 0.25; }
.orb.idle { animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .orb { transition: none; animation: none !important; } }

.controls { display: flex; flex-wrap: wrap; gap: 8px; }
.hint { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; }

.btn {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: 800 1rem var(--font);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--border), 0 8px 18px -8px rgb(60 30 60 / 0.35);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border), 0 3px 8px -6px rgb(60 30 60 / 0.35); }
.btn.primary { flex: 1; background: var(--accent); color: var(--accent-text); font-size: 1.2rem; box-shadow: 0 5px 0 var(--accent-dark), 0 12px 22px -10px var(--accent); }
.btn.primary:active { box-shadow: 0 2px 0 var(--accent-dark), 0 5px 12px -8px var(--accent); }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.voice { color: var(--muted); font-size: 0.95rem; }
.voice select { margin-left: 6px; min-height: 42px; padding: 0 12px; border: 3px solid var(--border); border-radius: 999px; font-weight: 700; background: var(--card); color: var(--text); font: inherit; }

.who { margin-top: 2px; color: var(--muted); font-size: 0.9rem; }
.link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.login { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--card); border: 3px solid var(--accent); border-radius: 22px; }
.login input { min-height: 60px; padding: 0 14px; border: 3px solid var(--border); border-radius: 18px; background: var(--bg); color: var(--text); font: inherit; font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; }

.check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.95rem; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }