/* Цвета — переменные. Тёмная тема включается сама, если она включена на устройстве. */
:root {
  color-scheme: light dark; /* поля ввода, списки и полосы прокрутки тоже следуют теме */
  --bg: #fafafa;
  --surface: #fff;
  --text: #222;
  --muted: #888;
  --border: #e5e5e5;
  --border-soft: #eee;
  --input-border: #ccc;
  --accent: #2563eb;
  --accent-text: #fff;
  --secondary: #eee;
  --danger: #dc2626;
  --ok: #16a34a;
  --pill-bg: #eef2ff;     --pill-text: #3730a3;
  --ok-bg: #dcfce7;       --ok-text: #166534;
  --warn-bg: #fef9c3;     --warn-text: #854d0e;
  --bad-bg: #fee2e2;      --bad-text: #991b1b;
  --msg-theirs: #f1f1f1;
  --overlay: rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417;
    --surface: #1c1f24;
    --text: #e6e6e6;
    --muted: #9aa0a6;
    --border: #2e333a;
    --border-soft: #2a2e35;
    --input-border: #3a4049;
    --accent: #3b82f6;
    --accent-text: #fff;
    --secondary: #2c3138;
    --danger: #ef4444;
    --ok: #22c55e;
    --pill-bg: #262c45;     --pill-text: #c7d2fe;
    --ok-bg: #12351f;       --ok-text: #86efac;
    --warn-bg: #3a3112;     --warn-text: #fde68a;
    --bad-bg: #3d1717;      --bad-text: #fca5a5;
    --msg-theirs: #2a2e35;
    --overlay: rgba(0, 0, 0, .65);
  }
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  background: var(--bg);
  color: var(--text);
  overflow-wrap: anywhere; /* длинные слова без пробелов не растягивают страницу вбок */
}
h1, h2 { line-height: 1.25; }
/* Ссылки — без подчёркивания, как элементы интерфейса, а не как текст в документе */
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .8; }
a > button { cursor: pointer; }
nav a { display:inline-block; padding:6px 12px; border-radius:999px; background:var(--secondary); color:var(--text); }
/* Плитки-переходы (страница события: мониторинг, результаты, карта, чаты) */
.link-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:0 0 16px; }
.link-tiles a { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:22px; }
.link-tiles a span { font-size:13px; font-weight:600; }
@media (max-width: 420px) { .link-tiles { grid-template-columns:repeat(2, 1fr); } }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
input, select, button, textarea {
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  margin: 4px 0;
  width: 100%;
}
input, select, textarea { background: var(--surface); color: var(--text); font-family: inherit; }
button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  cursor: pointer;
  font-weight: 600;
}
button.secondary {
  background: var(--secondary);
  color: var(--text);
}
button.danger {
  background: var(--danger);
  color: #fff;
}
label { font-weight: 600; font-size: 14px; display:block; margin-top: 10px; }
.error { color: var(--danger); margin: 8px 0; }
.muted { color: var(--muted); font-size: 14px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > input { min-width: 0; }                      /* поля сжимаются, а не кнопки */
.row > button { white-space: nowrap; flex-shrink: 0; width: auto; }
.row > select { flex: 1; min-width: 0; }
.tag-card { display:flex; gap:12px; align-items:center; border:1px solid var(--border-soft); border-radius:8px; padding:10px; margin:8px 0; }
/* QR-код всегда на белом фоне — иначе в тёмной теме его хуже читает камера */
.tag-card img { width: 90px; height: 90px; background:#fff; padding:4px; border-radius:6px; }
/* На телефоне карточка метки — в столбик: QR, текст, кнопки — не сжимаются в узкую колонку */
@media (max-width: 520px) {
  .tag-card { flex-wrap: wrap; }
  .tag-card > div { flex: 1 1 100% !important; } /* перебивает style="flex:1" в разметке */
}
.pill { display:inline-block; background:var(--pill-bg); color:var(--pill-text); padding:2px 8px; border-radius:999px; font-size:12px; }
.pill.ok { background:var(--ok-bg); color:var(--ok-text); }
.pill.warn { background:var(--warn-bg); color:var(--warn-text); }
.pill.bad { background:var(--bad-bg); color:var(--bad-text); }
nav { margin-bottom: 24px; }
.tabs { display:flex; gap:8px; margin-bottom:8px; }
.tabs a { flex:1; text-align:center; padding:10px; border-radius:8px; background:var(--secondary); color:var(--text); text-decoration:none; font-weight:600; font-size:15px; }
.tabs a.active { background:var(--accent); color:var(--accent-text); }
/* Встроенный видеоплеер в заданиях и подсказках (16:9) */
.video { position:relative; width:100%; aspect-ratio:16/9; margin:8px 0; border-radius:10px; overflow:hidden; background:#000; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Выбор города в углу шапки: «📍 Москва ▾» и выпадающий список под ним */
.city-chip { width:auto; display:inline-flex; align-items:center; gap:4px; padding:6px 10px; margin:0; border-radius:8px;
  background:transparent; color:var(--text); font-weight:600; font-size:15px; border:1px solid var(--border); }
.city-chip:hover { background:var(--secondary); }
.city-dropdown { position:absolute; z-index:1000; width:280px; max-height:60vh; overflow:auto; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:6px; }
.city-dropdown .city-search { margin:0 0 6px; }
.city-dropdown a { display:flex; justify-content:space-between; padding:8px 12px; border-radius:6px; color:var(--text); }
.city-dropdown a:hover { background:var(--secondary); opacity:1; }
.city-dropdown a.current { color:var(--accent); font-weight:700; }
.link-btn { display:inline-block; padding:8px 14px; border-radius:8px; background:var(--secondary); color:var(--text); font-weight:600; }
.copy-btn { width:auto; padding:6px 10px; font-size:14px; }
.stages { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.stage { padding:4px 10px; border-radius:999px; background:var(--secondary); color:var(--muted); font-size:13px; font-weight:600; }
.stage.done { background:var(--ok-bg); color:var(--ok-text); }
.stage.current { background:var(--accent); color:var(--accent-text); }
nav a { margin-right: 16px; font-size: 14px; }

.chat-wrap { display:flex; gap:16px; }
.chat-sidebar { width:160px; flex-shrink:0; }
.chat-sidebar button { display:block; width:100%; text-align:left; background:var(--surface); color:var(--text); border:1px solid var(--border); margin-bottom:6px; font-weight:500; }
.chat-sidebar button.active { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.chat-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.chat-messages { flex:1; overflow-y:auto; max-height:55vh; padding:8px; background:var(--surface); border:1px solid var(--border-soft); border-radius:10px; margin-bottom:8px; }
.msg { max-width:75%; margin:6px 0; padding:8px 12px; border-radius:12px; font-size:14px; word-wrap:break-word; }
.msg .who { font-size:11px; opacity:.7; margin-bottom:2px; }
.msg.mine { background:var(--accent); color:var(--accent-text); margin-left:auto; border-bottom-right-radius:2px; }
.msg.theirs { background:var(--msg-theirs); color:var(--text); margin-right:auto; border-bottom-left-radius:2px; }
.chat-input-row { display:flex; gap:8px; }
.chat-input-row input { flex:1; margin:0; }
.chat-input-row button { width:auto; }
.chat-tabs { display:flex; gap:8px; margin-bottom:12px; }
.chat-tabs button { width:auto; background:var(--secondary); color:var(--text); }
.chat-tabs button.active { background:var(--accent); color:var(--accent-text); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-left:6px; }