/* Портал челленджей. Мобильный экран — основной, десктоп получает то же в центре. */
: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}
.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}