/* Портал челленджей. Мобильный экран — основной, десктоп получает то же в центре. */
:root{
  --bg:#0f1115; --panel:#171a21; --panel-2:#1e222b; --line:#2a2f3a;
  --text:#e8eaf0; --muted:#9aa3b2; --accent:#4c8dff; --accent-hover:#3b7bec;
  --danger:#e5484d; --ok:#30a46c; --warn:#f5a524; --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-text-size-adjust:100%;
}

header.top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
header.top .brand{font-weight:650; font-size:16px; letter-spacing:.2px; text-decoration:none; color:var(--text)}
header.top .spacer{flex:1}
header.top .who{color:var(--muted); font-size:13px}

main{max-width:720px; margin:0 auto; padding:18px 16px 64px}

h1{font-size:22px; margin:4px 0 16px}
h2{font-size:17px; margin:24px 0 10px}
p.hint{color:var(--muted); font-size:13.5px; margin:6px 0}

.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; margin-bottom:14px;
}

label{display:block; margin:14px 0 6px; font-size:13.5px; color:var(--muted)}
input,select,textarea{
  width:100%; padding:12px 13px; font:inherit; color:var(--text);
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  /* 16px не даёт iOS зумить страницу при фокусе на поле */
  font-size:16px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent)}
textarea{min-height:90px; resize:vertical}

button{
  width:100%; margin-top:18px; padding:13px 16px; font:inherit; font-weight:600; font-size:15px;
  color:#fff; background:var(--accent); border:0; border-radius:10px; cursor:pointer;
}
button:hover{background:var(--accent-hover)}
button:disabled{opacity:.55; cursor:default}
button.ghost{background:transparent; border:1px solid var(--line); color:var(--text); margin-top:10px}
button.ghost:hover{background:var(--panel-2)}
button.link{background:none; border:0; color:var(--accent); width:auto; padding:0; margin:0; font-weight:500}

.captcha{display:flex; align-items:center; gap:12px; margin-top:6px}
.captcha .img{background:#f4f6fb; border-radius:8px; line-height:0; overflow:hidden}
.captcha svg{display:block}

.msg{margin-top:14px; padding:11px 13px; border-radius:10px; font-size:14px}
.msg.error{background:rgba(229,72,77,.12); border:1px solid rgba(229,72,77,.4); color:#ffb4b6}
.msg.ok{background:rgba(48,163,108,.12); border:1px solid rgba(48,163,108,.4); color:#8fe3bb}

a{color:var(--accent)}
.center{text-align:center; margin-top:14px; font-size:14px; color:var(--muted)}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------- список и карточки */

.head-row{display:flex; align-items:center; gap:12px}
.head-row h1{flex:1; margin:4px 0 16px}

.btn-small{
  display:inline-block; padding:9px 14px; border-radius:9px; font-size:14px; font-weight:600;
  background:var(--accent); color:#fff; text-decoration:none; white-space:nowrap;
}
.btn-small:hover{background:var(--accent-hover)}
button.narrow{width:auto; margin:0; padding:10px 12px}

a.link-card{display:block; color:inherit; text-decoration:none; transition:border-color .15s}
a.link-card:hover{border-color:var(--accent)}
.card-title{font-size:17px; font-weight:650; margin-bottom:8px}
.meta{color:var(--muted); font-size:13.5px; margin:4px 0}
.descr{white-space:pre-wrap; margin:12px 0; color:#cfd4de}
.back{margin:0 0 6px; font-size:14px}

.badges{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px}
.badge{
  display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--muted);
}
.badge.phase-active{background:rgba(48,163,108,.15); border-color:rgba(48,163,108,.45); color:#8fe3bb}
.badge.phase-upcoming{background:rgba(245,165,36,.13); border-color:rgba(245,165,36,.4); color:#f7c96b}
.badge.phase-finished{opacity:.75}
.badge.join{background:rgba(76,141,255,.15); border-color:rgba(76,141,255,.45); color:#a8c6ff}

/* ----------------------------------------------------------- формы и списки */

.row{display:flex; gap:12px}
.row > div{flex:1; min-width:0}

label.check{
  display:flex; align-items:flex-start; gap:10px; margin:12px 0 0;
  color:var(--text); font-size:14.5px; cursor:pointer;
}
label.check input{width:auto; flex:0 0 auto; margin-top:2px; transform:scale(1.25); accent-color:var(--accent)}

.exercise-row{display:flex; gap:8px; margin-top:10px}
.exercise-row .ex-name{flex:1 1 auto; min-width:0}
.exercise-row .ex-target{flex:0 0 88px}
.exercise-row .ex-unit{flex:0 0 88px}

ul.exercises,ul.participants{list-style:none; padding:0; margin:10px 0 0}
ul.exercises li{padding:9px 0; border-bottom:1px solid var(--line)}
ul.exercises li:last-child{border-bottom:0}
li.participant{display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line)}
li.participant:last-child{border-bottom:0}
li.participant .name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

@media (max-width:420px){
  .exercise-row{flex-wrap:wrap}
  .exercise-row .ex-name{flex:1 1 100%}
}

/* --------------------------------------------------------------- прогресс */

.progress{margin:6px 0 18px}
.progress-row{margin-bottom:14px}
.progress-head{display:flex; gap:10px; align-items:baseline; font-size:14.5px}
.progress-head .ex-title{flex:1; font-weight:600}
.progress-head .ex-nums{color:var(--muted); font-size:13px; white-space:nowrap}
.bar{
  display:flex; height:9px; margin:6px 0 4px; border-radius:999px;
  background:var(--panel-2); overflow:hidden;
}
.bar .fill{background:var(--ok); transition:width .3s}
.bar .fill.pending{background:var(--warn); opacity:.7}
.progress-foot{font-size:13px; color:var(--muted)}
.progress-foot .done{color:#8fe3bb}

/* ------------------------------------------------------- подходы за сегодня */

ul.events{list-style:none; padding:0; margin:10px 0 0}
li.event{padding:12px 0; border-bottom:1px solid var(--line)}
li.event:last-child{border-bottom:0}
.event-main{display:flex; gap:10px; align-items:baseline}
.event-time{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}
.event-count{flex:1}
.event-count s{color:var(--muted); font-weight:400}
.event-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; align-items:center}
.event-comment{
  margin-top:8px; padding:8px 10px; font-size:13.5px; color:#cfd4de;
  background:var(--panel-2); border-left:2px solid var(--accent); border-radius:0 8px 8px 0;
}
.event-actions{display:flex; gap:14px; margin-top:8px; font-size:13.5px}
button.link.danger{color:var(--danger)}
.badge.ok{background:rgba(48,163,108,.15); border-color:rgba(48,163,108,.45); color:#8fe3bb}
.badge.bad{background:rgba(229,72,77,.13); border-color:rgba(229,72,77,.4); color:#ffb4b6}

/* ----------------------------------------------------------- форма подхода */

.add-event{margin-top:8px; padding-top:6px; border-top:1px solid var(--line)}
.video-pick{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.video-pick button{width:auto; margin:0}
.video-name{color:var(--muted); font-size:13px; word-break:break-all}
.video-name:not(:empty){margin-top:8px}
.upload-bar{height:6px; margin-top:14px; border-radius:999px; background:var(--panel-2); overflow:hidden}
.upload-fill{display:block; height:100%; width:0; background:var(--accent); transition:width .2s}

/* -------------------------------------------------------------- участники */

.participant-main{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.participant-left{margin-top:5px; font-size:13.5px; color:var(--muted)}
li.participant{display:block}

/* ------------------------------------------------------------ проигрыватель */

.player{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.82); padding:18px;
}
.player-inner{width:100%; max-width:560px}
.player video{width:100%; max-height:72vh; border-radius:10px; background:#000; display:block}
.player button{margin-top:12px}

/* ------------------------------------------------------------- статистика */

.table-scroll{overflow-x:auto; margin-top:10px; -webkit-overflow-scrolling:touch}
table.stats{border-collapse:collapse; font-size:13px; white-space:nowrap}
table.stats th,table.stats td{
  padding:7px 9px; border-bottom:1px solid var(--line); text-align:center;
  font-variant-numeric:tabular-nums; font-weight:400;
}
table.stats thead th{color:var(--muted); font-size:12px; border-bottom:1px solid var(--line)}
table.stats th.sticky-col{
  position:sticky; left:0; z-index:1; text-align:left; font-weight:600;
  background:var(--panel); max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
td.cell-done{color:#8fe3bb}
td.cell-miss{color:#ffb4b6}
td.cell-idle{color:#4b5261}
.miss{color:#ffb4b6}

/* --------------------------------------------------------------- модерация */

.btn-wide{
  display:block; width:100%; margin-top:18px; padding:13px 16px; text-align:center;
  font-weight:600; font-size:15px; color:#fff; background:var(--accent);
  border-radius:10px; text-decoration:none;
}
.btn-wide:hover{background:var(--accent-hover)}
.btn-wide .count{
  display:inline-block; min-width:22px; margin-left:6px; padding:1px 7px;
  background:rgba(255,255,255,.22); border-radius:999px; font-size:13px;
}

.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 16px}
.tabs .tab{
  width:auto; margin:0; padding:8px 13px; font-size:13.5px; font-weight:500;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); border-radius:999px;
}
.tabs .tab.active{background:var(--accent); border-color:var(--accent); color:#fff}

.mod-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.mod-head .name{font-weight:650; font-size:16px}
.mod-claim{margin:10px 0 8px; font-size:15px}
.mod-video{width:100%; max-height:60vh; border-radius:10px; background:#000; display:block; margin-top:6px}
.mod-form{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.mod-buttons{display:flex; gap:10px; margin-top:16px}
.mod-buttons button{margin:0}
.mod-buttons .reject{flex:0 0 40%}

/* ------------------------------------------------------ аватарки и обложки */

.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; border-radius:50%; object-fit:cover; overflow:hidden;
  color:#fff; font-weight:600; letter-spacing:.3px; line-height:1; user-select:none;
}
.avatar.sm{width:26px; height:26px; font-size:11px}
.avatar.md{width:38px; height:38px; font-size:14px}
.avatar.lg{width:96px; height:96px; font-size:32px}

.cover{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; border-radius:12px; object-fit:cover; overflow:hidden;
  color:#fff; font-weight:700; line-height:1; user-select:none;
}
.cover.md{width:58px; height:58px; font-size:24px}
.cover.lg{width:72px; height:72px; font-size:30px}

header.top .me{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--text); text-decoration:none; vertical-align:middle;
}
header.top .me:hover{color:var(--accent)}

.card.with-cover{display:flex; gap:14px; align-items:flex-start}
.with-cover .cover-text{flex:1; min-width:0}

.challenge-head{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.challenge-head h1{margin:0; flex:1; min-width:0}

.avatar-block{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.avatar-actions{flex:1; min-width:180px}
.avatar-actions .hint{margin-top:8px}

li.participant .participant-main{gap:10px}
li.rank-row{display:flex; align-items:flex-start; gap:12px}
.rank-body{flex:1; min-width:0}
.rank{
  flex:0 0 auto; width:24px; padding-top:9px; text-align:center;
  color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums;
}
.rank.top{color:var(--warn); font-weight:700}

/* ---------------------------------------- стартовая страница: фото девушек */

/* Заголовок списка: на узком экране по бокам от текста — две маленькие фигуры */
.list-head{display:flex; align-items:flex-end; gap:10px; margin:4px 0 18px}
.list-head-text{flex:1; min-width:0; text-align:center; padding-bottom:4px}
.list-head-text h1{margin:0 0 6px; font-size:24px}
.list-head-text p{margin:0 0 12px; color:var(--muted); font-size:13.5px; line-height:1.4}
.head-figure{flex:none; height:130px; width:auto; user-select:none; pointer-events:none}

/* Фото в полях слева и справа от списка. Скрыты, пока полей нет */
.side-figures{display:none}
.side-figure{display:block; width:100%; height:auto; user-select:none; pointer-events:none}

/*
 * Список шириной 720px, по бокам нужно по 190px под фото —
 * значит, поля появляются от 1100px. Фото закреплены и не уезжают при прокрутке.
 */
@media (min-width:1100px){
  .head-figure{display:none}
  .list-head{justify-content:flex-start}
  .list-head-text{text-align:left}

  .side-figures{
    display:flex; flex-direction:column; align-items:center; gap:18px;
    position:fixed; top:84px; width:170px;
  }
  .side-left{left:calc(50% - 360px - 190px)}
  .side-right{right:calc(50% - 360px - 190px)}
  /* На невысоком экране фигура не должна вылезать за низ окна */
  .side-figure{max-height:calc(100vh - 110px); width:auto; max-width:100%}
}

/* ------------------------------------------------ страница участника */

/* Строка участника ведёт на его подходы */
.participant-link{display:block; color:inherit; text-decoration:none}
.participant-link:hover .name{color:var(--accent)}
.participant-link.rank-row{display:flex; align-items:flex-start; gap:12px}
.chevron{margin-left:auto; color:var(--muted); font-size:18px; line-height:1}

.person-head{display:flex; align-items:center; gap:14px; margin:6px 0 16px}
.person-head h1{margin:0 0 2px; font-size:22px}
.person-head .meta{margin:0}

/* ------------------------------------------------- вкладки страницы челленджа */

.tabs-nav{
  display:flex; gap:6px; margin:14px 0 16px; padding:5px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
}
.tab-link{
  flex:1; padding:10px 6px; border-radius:9px; text-align:center; white-space:nowrap;
  font-size:14px; font-weight:600; color:var(--muted); text-decoration:none;
}
.tab-link.active{background:var(--accent); color:#fff}
.tab-link:hover:not(.active){background:var(--panel-2); color:var(--text)}

/* Кнопка (i): описание челленджа прячется за ней */
.info-btn{
  flex:none; width:34px; height:34px; margin:0; padding:0; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--line);
  color:var(--muted); font:italic 700 16px/1 Georgia,serif; cursor:pointer;
}
.info-btn:hover,.info-btn.open{background:var(--accent); border-color:var(--accent); color:#fff}
.about{margin-top:12px}
.head-actions{margin-bottom:14px}

/* Цифры выполнения в списках участников */
.nums{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:13.5px; color:var(--muted)}
.num b{color:var(--text)}
.num-done,.num-done b{color:#8fe3bb}
.num-miss{color:#ffb4b6}
.medal{font-size:16px; line-height:1}
li.participant.all-done .name{color:#8fe3bb}

/* Строка пропущенного дня — кнопка, но выглядит как обычная строка списка */
button.day-row{
  width:100%; margin:0; padding:0; background:none; border:0;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
}
button.with-icon{display:inline-flex; align-items:center; gap:8px}

/* ------------------------------------------------------- режимы челленджа */

/* Значок нагрузки — картинка с прозрачным фоном: гиря, гантель, пиво, пиво 0.0 */
.mode-icon{display:inline-block; flex:none; object-fit:contain; vertical-align:middle}
.mode-icon.sm{width:22px; height:22px}
.mode-icon.md{width:28px; height:28px}
.mode-icon.lg{width:36px; height:36px}

/* Золото, серебро и бронза вместо номера места */
.rank-medal{font-size:19px; line-height:1}

.mode-line{display:flex; align-items:center; gap:8px; margin:4px 0 12px; font-size:14px; color:var(--muted)}
.mode-line b{color:var(--text)}
li.mode-line{padding:10px 0 2px; border-bottom:0}
li.mode-exercise{padding-left:16px}

/* Блок режима в форме создания челленджа */
.mode-block{
  margin-top:12px; padding:12px 14px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
}
.mode-block .check{margin:0; align-items:center}
.mode-body{margin-top:4px}

/* Выбор своего режима: плитки, текущая подсвечена */
/* Плитки не растягиваются на всю ширину: на большом экране столбец шире 280px
   не нужен — читать норму удобнее в узкой колонке, значок стоит слева. */
.mode-picker{display:grid; grid-template-columns:repeat(auto-fill, minmax(145px, 1fr)); gap:8px; margin:0 0 8px}
.mode-chip{
  display:flex; flex-direction:row; align-items:center; gap:8px;
  width:auto; margin:0; padding:9px 10px; text-align:left;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  color:var(--text); font-weight:500; font-size:13px;
}
.mode-chip:hover:not(.active):not(:disabled){border-color:var(--accent); background:var(--panel-2)}
.mode-chip.active{border-color:var(--accent); background:rgba(76,141,255,.14)}
.mode-chip .chip-text{display:flex; flex-direction:column; gap:1px; min-width:0}
.mode-chip .chip-title{font-weight:650}
.mode-chip .chip-norms{color:var(--muted); font-size:11.5px; line-height:1.3}
.mode-chip .mode-icon{flex:none}

/* ------------------------------------------------- говорящая голова в углу */

.talker{
  position:fixed; right:12px; bottom:12px; z-index:40;
  display:flex; align-items:flex-end; gap:8px;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.talker.on{opacity:1; transform:none}

.talker-bubble{
  max-width:min(62vw, 280px); padding:10px 13px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px 14px 4px 14px;
  font-size:13.5px; line-height:1.35; color:var(--text);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  pointer-events:auto; cursor:pointer;
}
.talker-head{
  width:86px; height:86px; object-fit:contain; flex:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  pointer-events:auto; cursor:pointer; user-select:none;
}
/* Фигуры в полный рост: тянемся по высоте, ширину берём по картинке */
.talker-head.tall{width:auto; height:118px; max-width:160px}

@media (min-width:768px){
  .talker{right:18px; bottom:18px}
  .talker-bubble{max-width:320px; font-size:14px}
  .talker-head{width:110px; height:110px}
  .talker-head.tall{width:auto; height:150px; max-width:200px}
}

/* ------------------------------------------- сводка в Telegram (настройки) */

.tg-buttons{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0}
.tg-buttons button{margin:0; width:auto; font-size:13px; padding:7px 12px}
.tg-groups{display:flex; flex-direction:column; gap:6px; margin:6px 0}
.tg-groups button{margin:0; width:100%; text-align:left; font-size:13px; padding:8px 12px}

/* ------------------------------------------------- штраф за пропуск и QR */

.qr-box{
  display:flex; justify-content:center; margin:12px 0;
  padding:10px; background:#fff; border-radius:12px;
}
.qr-box img{display:block; max-width:260px; width:100%; height:auto; border-radius:6px}
.pay-sum{margin:10px 0 4px; font-size:16px}
.pay-sum.pay-clean{color:#8fe3bb}
/* Исключённый участник: остаётся в списках, но приглушён */
li.participant.is-excluded{opacity:.55}
li.participant.is-excluded .name{text-decoration:line-through; text-decoration-thickness:1px}
.travel-hint{border-color:var(--warn); background:rgba(245,165,36,.07)}
.travel-hint .tg-buttons{align-items:center}
.travel-hint .btn-small{padding:7px 12px; font-size:13px}

/* --------------------------------------------------- касса челленджа */

.bank-total{
  width:100%; margin:12px 0 0; padding:12px 14px;
  font-size:16px; font-weight:800; letter-spacing:.3px;
  color:#8fe3bb; background:rgba(48,163,108,.12);
  border:1px solid rgba(48,163,108,.45); border-radius:10px; cursor:pointer;
}
.bank-total:hover{background:rgba(48,163,108,.2)}
.bank-total::after{content:' ▾'; opacity:.7}
.bank-total.open::after{content:' ▴'}
.bank-list{margin-top:10px}
ul.bank{list-style:none; padding:0; margin:0}
li.bank-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
li.bank-row:last-child{border-bottom:0}
li.bank-row .name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bank-add{display:flex; gap:8px; margin-top:10px}
.bank-add select{flex:1; min-width:0}
.bank-add input{flex:0 0 110px}
.bank-add button{width:auto; margin:0; white-space:nowrap}