/* Светлая фирменная тема (как форма розыгрыша MAX): акцент #3390ec, белые карточки. */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0; background: #f4f4f5; color: #1a1a1a;
  min-height: 100vh; display: flex; flex-direction: column;
}
/* min-width: 0 обязателен: .wrap — флекс-элемент body, а флекс-элемент по
   умолчанию не сжимается меньше своего содержимого. Один длинный пункт в
   списке каналов раздвигал всю страницу, и текст «уплывал» за экран. */
.wrap { width: 100%; max-width: 420px; margin: 40px auto; padding: 0 16px; min-width: 0; }
.wrap.wide { max-width: 720px; }
.card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  padding: 24px; box-shadow: 0 6px 20px rgba(16,24,40,.06);
}
h1 { font-size: 22px; margin: 0 0 4px; color: #111; }
h2 { font-size: 17px; margin: 0; color: #111; }
.muted { color: #6b7280; font-size: 14px; margin: 0 0 18px; }
label { display: block; font-size: 13px; color: #374151; margin: 12px 0 6px; }
input, textarea, select {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #d1d5db;
  background: #fff; color: #111; font-size: 15px;
  font-family: inherit; box-sizing: border-box;
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #3390ec; box-shadow: 0 0 0 3px rgba(51,144,236,.15); }
button {
  width: 100%; margin-top: 18px; padding: 13px; border: 0; border-radius: 10px;
  background: #3390ec; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
button:hover { background: #2b7fd6; }
button.secondary { background: #f4f4f5; color: #374151; border: 1px solid #e5e7eb; }
button.secondary:hover { background: #e9eaed; }
.error { color: #c0392b; font-size: 14px; margin-top: 12px; min-height: 18px; }
.link { text-align: center; margin-top: 16px; font-size: 14px; }
a { color: #3390ec; text-decoration: none; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.topbar button { width: auto; margin: 0; padding: 8px 14px; font-size: 14px; }
.row-between { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 12px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 8px; text-align: center; }
.stat-num { font-size: 22px; font-weight: 700; color: #111; }
.stat-cap { font-size: 12px; color: #6b7280; margin-top: 2px; }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.set { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.set-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.set-meta { color: #4b5563; font-size: 14px; margin-top: 8px; }
.badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.badge-draft { background: #eef0f3; color: #6b7280; }
.badge-collecting { background: #e6f7ed; color: #1a7f4b; }
.badge-awaiting_draw { background: #fff9e6; color: #8a6d1a; }
.badge-done { background: #e8f2fd; color: #2b7fd6; }

/* Карточка-ссылка (наборы кликабельны) */
.set-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
.set-link:hover { border-color: #3390ec; }

/* Форма добавления участника */
.addform { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.addform input { flex: 1; min-width: 120px; }

/* Таблица заявок */
.tbl { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.trow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #eef0f3; }
.trow:first-child { border-top: 0; }
.tcell { flex: 1; min-width: 0; }
.tcell.right { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sub { font-size: 13px; color: #6b7280; margin-top: 2px; word-break: break-word; }
.sub.rej { color: #c0392b; }
.mini { width: auto; margin: 0; padding: 7px 11px; font-size: 13px; font-weight: 600; }
.mini.ok { background: #16a34a; } .mini.ok:hover { background: #12833d; }
.mini.no { background: #f4f4f5; color: #c0392b; border: 1px solid #e5e7eb; } .mini.no:hover { background: #fdeaea; }
/* Длинные названия каналов в списке обрезаем многоточием, а не растягиваем
   ими страницу. */
select { padding: 8px 10px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; color: #111; font-size: 13px; max-width: 100%; text-overflow: ellipsis; }

/* Ссылка-приглашение */
.linkbox { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
.linkrow { display: flex; gap: 8px; }
.linkrow input { flex: 1; min-width: 0; font-size: 13px; }
.linkrow .mini { flex: 0 0 auto; }

/* Селект роли внутри строки заявки не должен растягиваться на всю ширину */
.trow select { width: auto; padding: 7px 10px; font-size: 13px; }

/* Название канала в заявке — главное, что ищет организатор глазами. */
.chname { display: block; word-break: break-word; overflow-wrap: anywhere; }

/* [round5 2026-08-07] Канал и имя в заявке — ссылки. Без подчёркивания синий
   текст в плотной строке читается как обычный, и по нему не пробуют нажать. */
.trow a { text-decoration: underline; }

/* Публикация набора в канал */
.pubbox { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; margin-top: 12px; }
.pubrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pubrow select { flex: 1; min-width: 180px; width: auto; }
.pubrow .mini { flex: 0 0 auto; }
.pubdone { color: #15803d; font-size: 14px; }

/* ─── Телефон ──────────────────────────────────────────────────────────────
   Строка заявки перестаёт быть таблицей из трёх колонок и становится
   карточкой сверху вниз: на узком экране колонки сжимались, и текст
   «уплывал». Контрольная ширина — 360px (базовые айфоны). */
@media (max-width: 640px) {
  .wrap, .wrap.wide { margin: 12px auto; padding: 0 10px; }
  .card { padding: 14px; border-radius: 12px; }
  h1 { font-size: 19px; }
  .topbar { gap: 8px; }

  .trow { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
  .tcell, .tcell.right { flex: 1 1 auto; width: 100%; min-width: 0; }
  .tcell.right { justify-content: flex-start; }
  .tcell.status { order: -1; }
  .trow select { width: 100%; }
  .mini { flex: 1 1 auto; }

  .linkrow, .pubrow, .addform { flex-direction: column; align-items: stretch; }
  .linkrow input, .pubrow select, .addform input { width: 100%; min-width: 0; }
  .linkrow .mini, .pubrow .mini { width: 100%; }

  .set-meta, .sub { word-break: break-word; overflow-wrap: anywhere; }
  #actions button { width: 100%; margin: 8px 0 0; }
}