/* Общее для всех страниц: цвета, кнопки, вход по паролю/PIN */
:root {
  --bg: #0b0d10;
  --panel: #151920;
  --panel-2: #1d232c;
  --line: #2a313c;
  --text: #e8ecf1;
  --muted: #8a94a3;
  --live: #ef4444;
  --ok: #22c55e;
  --accent: #3b82f6;
  --radius: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.bar h1 { font-size: 18px; margin: 0; font-weight: 600; }
.summary { color: var(--muted); font-size: 14px; }
.spacer { flex: 1; }

.btn {
  font: inherit; color: var(--text); background: var(--panel-2); text-decoration: none;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer;
}
.btn:hover { background: #262d38; }
.btn.ghost { background: transparent; }
.btn.primary { background: var(--accent); border-color: var(--accent); padding: 12px; font-size: 16px; }
.btn.primary:disabled { opacity: .6; }
.btn.danger { background: var(--live); border-color: var(--live); }

.badge {
  font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: #262d38; color: var(--muted);
}
.badge.live { background: var(--live); color: #fff; }
.badge.live::before { content: "● "; }
.badge.ok { background: #14532d; color: #bbf7d0; }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: min(360px, 100%); display: grid; gap: 14px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 22px;
}
.login-card h1 { margin: 0; font-size: 22px; }
.login-card input {
  font: inherit; font-size: 16px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; width: 100%;
}
.login-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.error { color: #fca5a5; min-height: 1.4em; margin: 0; font-size: 14px; }

.tap-audio {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: inherit; font-size: 17px; color: #fff;
  background: rgba(59, 130, 246, .92); border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer;
}