/* =========================================================
   Онбординг и каталог залогиненного пользователя.
   Подключается вместе со styles.css: токены, шапка, кнопки
   и карточки постеров берутся оттуда.
   ========================================================= */

/* ---------- общее ---------- */
.page{ min-height:100vh; padding-top:var(--header-h); background:var(--bg); }
.page__glow{
  position:fixed; left:50%; top:-28rem; z-index:0; pointer-events:none;
  width:110rem; height:60rem; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(217,0,42,.13) 0%, rgba(217,0,42,.06) 45%, transparent 78%);
}
.h-page{ font-family:var(--font-display); font-weight:500; letter-spacing:-.014em; line-height:1.14; }

/* аватар вместо иконки — состояние «вошёл» */
.userbtn--avatar{
  background:var(--brand); color:#fff;
  font-size:1rem; font-weight:800; letter-spacing:0;
}
.usermenu:hover .userbtn--avatar, .userbtn--avatar:focus-visible{ background:var(--brand-hover); }

/* =========================================================
   ОНБОРДИНГ
   ========================================================= */
.ob{
  position:relative; z-index:1; min-height:100svh;
  display:grid; place-items:center;
  padding:calc(var(--header-h) + 2rem) var(--gutter) 4rem;
}
.ob__card{
  width:100%; max-width:56rem; padding:clamp(1.5rem,3vw,3rem);
  border-radius:var(--r-xl); background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 2.5rem 6rem -2rem rgba(0,0,0,.9);
}
.ob__bar{ height:0.375rem; border-radius:var(--r-pill); background:rgba(255,255,255,.08); overflow:hidden; }
.ob__bar i{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--brand),#FF5C7A);
  transition:width .4s var(--e-out);
}
.ob__count{ margin-top:0.75rem; font-size:0.8125rem; font-weight:700; color:var(--text-3); }

.ob__step{ display:none; }
.ob__step.is-active{ display:block; animation:obIn .32s var(--e-out); }
@keyframes obIn{ from{ opacity:0; transform:translateY(0.5rem); } to{ opacity:1; transform:none; } }

.ob__title{ margin-top:1.75rem; font-size:clamp(1.5rem,2.6vw,2.25rem); text-align:center; }
.ob__sub{ margin:0.625rem 0 0; text-align:center; color:var(--text-2); font-size:1rem; }

.ob__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:0.75rem; margin-top:2rem; }
.ob__grid--lang{ grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr)); }
.ob__grid--goal{ grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); }

.tile{
  display:flex; align-items:center; gap:0.75rem; text-align:left;
  padding:1rem 1.125rem; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:1.0625rem; font-weight:700; color:#fff;
  transition:border-color .18s var(--e-out), background .18s var(--e-out);
}
.tile:hover{ border-color:var(--line-strong); background:var(--surface-3); }
.tile.is-picked{ border-color:var(--brand); background:var(--brand-soft); }
.tile .flag{ width:1.75rem; height:1.3125rem; }
.tile__globe{ width:1.75rem; height:1.75rem; opacity:.7; }

/* крупные плитки для выбора изучаемого языка */
.tile--lang{ flex-direction:column; align-items:flex-start; gap:0.375rem; padding:1.5rem; }
.tile--lang .tile__row{ display:flex; align-items:center; gap:0.75rem; }
.tile--lang .tile__native{
  font-size:2rem; font-weight:500; line-height:1.1;
  font-family:'Noto Sans Hebrew','Noto Sans SC',var(--font-display),sans-serif;
}
.tile--lang .tile__note{ font-size:0.875rem; font-weight:600; color:var(--text-3); }

/* цель по минутам */
.tile--goal{ flex-direction:column; align-items:center; gap:0.125rem; padding:1.25rem 1rem; }
.tile--goal b{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.tile--goal span{ font-size:0.8125rem; font-weight:600; color:var(--text-3); }

.ob__payoff{
  margin-top:1.5rem; padding:1.125rem 1.25rem; border-radius:var(--r-md);
  background:var(--brand-soft); border:1px solid rgba(217,0,42,.28);
  font-size:1.0625rem; font-weight:700; text-align:center; line-height:1.45;
  min-height:3.75rem; display:flex; align-items:center; justify-content:center;
}
.ob__payoff p{ margin:0; }
.ob__payoff span{ color:var(--brand-hover); }

.ob__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; }
.ob__back{ font-size:0.9375rem; font-weight:700; color:var(--text-3); transition:color .16s; }
.ob__back:hover{ color:#fff; }
.ob__back[hidden]{ display:none; }
.ob__next:disabled{ opacity:.4; pointer-events:none; }

/* =========================================================
   КАТАЛОГ
   ========================================================= */
.app{
  /* только вертикальные отступы: shorthand padding обнулил бы гаттер .container */
  position:relative; z-index:1; padding-top:2.5rem; padding-bottom:5rem;
}
.app__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.app__hi{ font-size:clamp(1.5rem,2.4vw,2.25rem); }
.app__hi span{ color:var(--brand); }
.app__sub{ margin:0.5rem 0 0; color:var(--text-2); font-size:1rem; }

/* полоса статистики */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:0.75rem; margin-top:1.75rem; }
.stat{
  padding:1.125rem 1.25rem; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
}
.stat b{ display:block; font-size:1.75rem; font-weight:800; letter-spacing:-.02em; }
.stat span{ font-size:0.875rem; font-weight:600; color:var(--text-3); }
.stat--accent{ background:var(--brand-soft); border-color:rgba(217,0,42,.28); }
/* огонёк серии: появляется от двух дней подряд, место под него
   резервируем только тогда же — иначе карточка пустует справа */
.stat{ position:relative; }
.stat--streak{ padding-right:4.25rem; }
.stat__fire{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  width:2.5rem; height:2.5rem; pointer-events:none;
  filter:drop-shadow(0 0.25rem 0.875rem rgba(217,0,42,.5));
}

/* продолжить смотреть */
.resume{
  display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); gap:1.5rem;
  margin-top:1.75rem; padding:1.25rem; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
}
.resume__art{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-sm); overflow:hidden;
  background:linear-gradient(150deg,#3a1220,#7a1230);
}
.resume__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.resume__art::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75)); }
.resume__body{ display:flex; flex-direction:column; justify-content:center; gap:0.625rem; }
.resume__eyebrow{ font-size:0.8125rem; font-weight:700; color:var(--text-3); }
.resume__title{ font-size:clamp(1.25rem,1.8vw,1.75rem); font-weight:800; letter-spacing:-.02em; }
.resume__line{ display:flex; align-items:center; gap:0.75rem; font-size:0.875rem; color:var(--text-2); font-weight:600; }
.resume__track{ position:relative; z-index:2; height:0.25rem; border-radius:var(--r-pill); background:rgba(255,255,255,.16); }
.resume__track i{ display:block; height:100%; border-radius:inherit; background:var(--brand); }
.resume__actions{ display:flex; gap:0.625rem; margin-top:0.375rem; flex-wrap:wrap; }

/* фильтры и сетка */
.filters__sep{ width:1px; height:1.25rem; background:var(--line-strong); margin:0 0.375rem; }
.cat__more{ margin-top:1.75rem; }

.filters{ display:flex; align-items:center; gap:0.75rem; margin:2.5rem 0 1.25rem; flex-wrap:wrap; }
/* без подписи под заголовком верхний отступ фильтров вдвое больше нужного:
   он был рассчитан на строку текста между ними */
.app__head:not(:has(.app__sub)) + .cat .filters,
.app__sectionhead:not(:has(.app__sub)) + .filters{ margin-top:1.5rem; }
.filters__label{ font-size:0.8125rem; font-weight:700; color:var(--text-3); }
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(11.25rem,1fr)); gap:1.25rem 1.125rem; }
.cards-grid .card{ scroll-snap-align:none; }
.empty{ padding:3rem 0; text-align:center; color:var(--text-3); font-weight:600; }

/* заголовок секции внутри профиля */
.app__sectionhead{ margin:3.5rem 0 1.25rem; }
.app__sectionhead .app__sub{ max-width:44rem; }

/* словарь */
.vocabbox{ margin-top:3rem; padding:1.5rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.vocabbox__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.vocabbox__title{ font-size:1.5rem; }
.vocabbox__aside{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.vocabbox__count{ font-size:0.8125rem; font-weight:700; color:var(--text-3); white-space:nowrap; }
/* auto-fill, а не auto-fit: при auto-fit пустые колонки схлопываются
   и одна найденная карточка растягивается на всю строку */
.vocabbox__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:0.625rem; margin-top:1.25rem; }

.vword{
  display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem;
  padding:0.875rem 1rem; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
  transition:border-color .16s var(--e-out);
}
.vword:hover{ border-color:var(--line-strong); }
.vword__body{ min-width:0; }
.vword__orig{
  font-size:1.125rem; font-weight:700; line-height:1.3;
  font-family:'Noto Sans Hebrew','Noto Sans SC',sans-serif;
}
.vword__tr{ font-size:0.8125rem; font-weight:600; color:var(--violet); font-family:'Manrope',sans-serif; }
.vword__ru{ font-size:0.875rem; color:var(--text-2); font-weight:600; margin-top:0.125rem; }
.vword__from{ font-size:0.75rem; color:var(--text-3); font-weight:600; margin-top:0.375rem; }

.vword__del{
  flex:none; width:1.75rem; height:1.75rem; display:grid; place-items:center;
  border-radius:var(--r-xs); color:var(--text-3);
  transition:background .16s var(--e-out), color .16s var(--e-out);
}
.vword__del svg{ width:1rem; height:1rem; }
.vword__del:hover{ background:rgba(217,0,42,.16); color:var(--brand-hover); }

/* подтверждение удаления прямо в строке */
.vword--confirm{ border-color:rgba(217,0,42,.42); background:var(--brand-soft); align-items:center; }
.vword__ask{ font-size:0.9375rem; font-weight:700; }
.vword__confirm{ display:flex; gap:0.375rem; flex:none; }
.vword__yes, .vword__no{
  padding:0.375rem 0.75rem; border-radius:var(--r-xs);
  font-size:0.8125rem; font-weight:700; white-space:nowrap;
  transition:background .16s var(--e-out), color .16s var(--e-out);
}
.vword__yes{ background:var(--brand); color:#fff; }
.vword__yes:hover{ background:var(--brand-hover); }
.vword__no{ background:rgba(255,255,255,.08); color:var(--text-2); }
.vword__no:hover{ background:rgba(255,255,255,.16); color:#fff; }

@media (max-width:860px){
  .resume{ grid-template-columns:1fr; }
  .ob__foot{ flex-direction:row; }
}

/* =========================================================
   ВХОД И РЕГИСТРАЦИЯ
   ========================================================= */
.auth{
  position:relative; z-index:1; min-height:100svh;
  display:grid; place-items:center;
  padding:calc(var(--header-h) + 2rem) var(--gutter) 4rem;
}
.auth__card{
  width:100%; max-width:27.5rem;
  padding:clamp(2.25rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem);
  border-radius:var(--r-xl); background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 2.5rem 6rem -2rem rgba(0,0,0,.9);
}
.auth__title{ font-size:clamp(1.5rem,2.2vw,1.875rem); text-align:center; }
.auth__sub{ margin:0.5rem 0 0; color:var(--text-2); font-size:0.9375rem; text-align:center; }
.auth__form{ margin-top:1.75rem; display:grid; gap:1.125rem; }
.auth__foot{ margin-top:1.5rem; text-align:center; font-size:0.9375rem; color:var(--text-2); }
.auth__foot a{
  margin-left:0.5rem;                      /* воздух между вопросом и ссылкой */
  color:#fff; font-weight:700;
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:0.35em; text-decoration-color:var(--line-strong);
  transition:text-decoration-color .16s var(--e-out);
}
.auth__foot a:hover{ text-decoration-color:#fff; }
.auth__legal{ margin-top:1.25rem; font-size:0.8125rem; line-height:1.45; color:var(--text-3); text-align:center; }
.auth__legal a{ color:var(--text-2); text-decoration:underline; }
.auth__legal a:hover{ color:#fff; }

/* вход через сервисы */
.auth__oauth{ display:grid; gap:0.625rem; margin-top:1.5rem; }
.oauthbtn{
  display:flex; align-items:center; justify-content:center; gap:0.625rem;
  height:3rem; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:0.9375rem; font-weight:700; color:#fff;
  transition:background .16s var(--e-out), border-color .16s var(--e-out);
}
.oauthbtn:hover{ background:var(--surface-3); border-color:var(--line-strong); }
.oauthbtn svg{ width:1.125rem; height:1.125rem; flex:none; }
.auth__or{
  display:flex; align-items:center; gap:0.875rem; margin:1.5rem 0 0;
  font-size:0.75rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em;
}
.auth__or::before, .auth__or::after{ content:''; flex:1; height:1px; background:var(--line); }

/* ---------- поля ---------- */
.field{ display:grid; gap:0.375rem; scroll-margin-top:calc(var(--header-h) + 1rem); }
.field__top{ display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; }
.field__label{ font-size:0.875rem; font-weight:700; color:var(--text-2); }
.field__aside{ font-size:0.8125rem; font-weight:700; color:var(--text-3); }
.field__aside:hover{ color:#fff; }
.field__wrap{ position:relative; display:flex; }
.field__input{
  width:100%; height:3rem; padding:0 1rem;
  border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--line); color:#fff;
  font:inherit; font-size:1rem;            /* не меньше 16px — иначе iOS зумит при фокусе */
  transition:border-color .16s var(--e-out), background .16s var(--e-out);
}
.field__input::placeholder{ color:var(--text-3); }
.field__input:hover{ border-color:var(--line-strong); }
.field__input:focus{ outline:none; border-color:var(--brand); background:var(--surface-3); }
.field__input:focus-visible{ box-shadow:0 0 0 3px rgba(217,0,42,.25); }
.field__wrap .field__input{ padding-right:3.25rem; }

.field__reveal{
  position:absolute; right:0.375rem; top:50%; transform:translateY(-50%);
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border-radius:var(--r-xs); color:var(--text-3);
  transition:background .16s var(--e-out), color .16s var(--e-out);
}
.field__reveal:hover{ background:rgba(255,255,255,.08); color:#fff; }
.field__reveal svg{ width:1.125rem; height:1.125rem; }

.field__hint{ margin:0; font-size:0.8125rem; color:var(--text-3); }
.field__err{ margin:0; font-size:0.8125rem; font-weight:600; color:#FF6B85; }
.field__err[hidden]{ display:none; }
.field.is-invalid .field__input{ border-color:#FF6B85; }
.field.is-invalid .field__input:focus-visible{ box-shadow:0 0 0 3px rgba(255,107,133,.25); }

/* чекбокс «запомнить» */
.check{ display:flex; align-items:center; gap:0.625rem; cursor:pointer; }
.check input{
  width:1.125rem; height:1.125rem; flex:none; cursor:pointer;
  accent-color:var(--brand);
}
.check span{ font-size:0.875rem; color:var(--text-2); font-weight:600; }

/* ---------- сводка ошибок ---------- */
.errbox{
  padding:0.875rem 1rem; border-radius:var(--r-sm);
  background:rgba(255,107,133,.1); border:1px solid rgba(255,107,133,.4);
}
.errbox[hidden]{ display:none; }
.errbox__title{ margin:0 0 0.375rem; font-size:0.875rem; font-weight:800; color:#FF6B85; }
.errbox ul{ margin:0; padding-left:1.125rem; display:grid; gap:0.1875rem; }
.errbox a{ font-size:0.8125rem; font-weight:600; color:#FF6B85; text-decoration:underline; }

/* ---------- надёжность пароля ---------- */
.pwmeter{ display:grid; gap:0.375rem; }
.pwmeter[hidden]{ display:none; }
.pwmeter__bars{ display:grid; grid-template-columns:repeat(4,1fr); gap:0.25rem; }
.pwmeter__bars i{ height:0.25rem; border-radius:var(--r-pill); background:rgba(255,255,255,.1); }
.pwmeter__bars i.on-1{ background:#FF6B85; }
.pwmeter__bars i.on-2{ background:#F5B32B; }
.pwmeter__bars i.on-3{ background:#7FD48C; }
.pwmeter__bars i.on-4{ background:var(--green); }
.pwmeter__label{ margin:0; font-size:0.8125rem; font-weight:700; color:var(--text-3); }
.pwmeter__label.lvl-1{ color:#FF6B85; }
.pwmeter__label.lvl-2{ color:#F5B32B; }
.pwmeter__label.lvl-3{ color:#7FD48C; }
.pwmeter__label.lvl-4{ color:var(--green); }

/* кнопка отправки */
.auth__submit{ width:100%; height:3.25rem; font-size:1rem; }
.auth__submit[aria-busy="true"]{ opacity:.75; pointer-events:none; }

/* =========================================================
   ГОЛОСОВАНИЕ ЗА КОНТЕНТ
   ========================================================= */
.votehead{
  padding:clamp(2rem,4vw,3.5rem); border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--line);
}
.votehead__title{ font-size:clamp(1.75rem,4vw,3.25rem); }
.votehead__sub{ margin:0.75rem 0 0; color:var(--text-2); font-size:1.0625rem; }
.votehead__tools{ display:flex; gap:0.75rem; margin-top:1.75rem; flex-wrap:wrap; }
/* поиск остался в строке один — без ограничения он растягивался на всю ширину */
.votesearch{ position:relative; flex:1 1 20rem; max-width:28rem; display:flex; }
.votesearch svg{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:1.125rem; height:1.125rem; color:var(--text-3); pointer-events:none;
}
.votesearch input{
  width:100%; height:3.25rem; padding:0 1rem 0 2.875rem;
  border-radius:var(--r-pill); background:var(--surface-2);
  border:1px solid var(--line); color:#fff; font:inherit; font-size:1rem;
  transition:border-color .16s var(--e-out);
}
.votesearch input::placeholder{ color:var(--text-3); }
.votesearch input:focus{ outline:none; border-color:var(--brand); }

.votetabs{ display:flex; gap:0.5rem; margin:2rem 0 1.25rem; flex-wrap:wrap; }
.votegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1.25rem; }

.votecard{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line);
  transition:border-color .18s var(--e-out);
}
.votecard:hover{ border-color:var(--line-strong); }
.votecard--top{ border-color:rgba(245,179,43,.5); }
.votecard__art{
  position:relative; aspect-ratio:2/3;
  background:linear-gradient(165deg,var(--c1),var(--c2));
}
.votecard__glyph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:5rem; font-weight:800; color:rgba(255,255,255,.16); line-height:1;
}
.votecard__art::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 35%); }
.votecard__kind, .votecard__rank{
  position:absolute; z-index:2; top:0.625rem;
  padding:0.25rem 0.5rem; border-radius:0.375rem;
  font-size:0.6875rem; font-weight:800; letter-spacing:.04em;
  background:rgba(0,0,0,.66); backdrop-filter:blur(0.375rem);
}
.votecard__kind{ left:0.625rem; text-transform:uppercase; }
.votecard__rank{ right:0.625rem; }
.votecard--top .votecard__rank{ background:var(--gold); color:#251a02; }

.votecard__body{ padding:0.875rem 1rem 0; flex:1; }
.votecard__name{ font-size:0.9375rem; font-weight:800; letter-spacing:-.015em; }
.votecard__meta{ margin:0.25rem 0 0; font-size:0.75rem; font-weight:600; color:var(--text-3); line-height:1.4; }
.votecard__meta b{ color:var(--text-2); }
.votecard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:0.625rem;
  padding:0.875rem 1rem 1rem;
}
.votecard__count{ display:flex; align-items:center; gap:0.375rem; font-size:0.8125rem; font-weight:700; color:var(--text-2); white-space:nowrap; }
.votecard__count svg{ width:1rem; height:1rem; }
.votebtn{
  display:inline-flex; align-items:center; gap:0.375rem;
  height:2.25rem; padding:0 0.875rem; border-radius:var(--r-xs);
  background:rgba(255,255,255,.08); font-size:0.8125rem; font-weight:700; white-space:nowrap;
  transition:background .16s var(--e-out), color .16s var(--e-out);
}
.votebtn:hover{ background:rgba(255,255,255,.16); }
.votebtn.is-voted{ background:var(--brand); color:#fff; }

/* компактный блок голосования в профиле */
.votemini{ margin-top:3rem; padding:1.5rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.votemini__list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:0.625rem; margin-top:1.25rem; }
.votemini__row{
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  padding:0.875rem 1rem; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
}
.votemini__name{ font-size:0.9375rem; font-weight:700; }
.votemini__meta{ font-size:0.75rem; color:var(--text-3); font-weight:600; margin-top:0.125rem; }

/* ---------- экраны подтверждения почты ---------- */
.authicon{
  width:3.5rem; height:3.5rem; margin:0 auto 1.25rem; display:grid; place-items:center;
  border-radius:50%; background:var(--brand-soft); color:var(--brand-hover);
}
.authicon svg{ width:1.75rem; height:1.75rem; }
.authicon--ok{ background:rgba(35,196,109,.16); color:var(--green); }
.authicon--warn{ background:rgba(245,179,43,.16); color:var(--gold); }

.authnote{
  margin-top:1.25rem; padding:0.875rem 1rem; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:0.875rem; line-height:1.5; color:var(--text-3); text-align:center;
}
.authmail{ font-weight:800; color:#fff; word-break:break-all; }
.authstatus{ margin-top:1rem; font-size:0.875rem; font-weight:600; text-align:center; min-height:1.25rem; }
.authstatus--ok{ color:var(--green); }
.authstatus--err{ color:#FF6B85; }

.authactions{ display:grid; gap:0.75rem; margin-top:1.5rem; }

/* крутилка ожидания */
.spinner{
  width:2rem; height:2rem; margin:0 auto; border-radius:50%;
  border:2px solid rgba(255,255,255,.15); border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spinner{ animation-duration:2s; } }
.vstate[hidden]{ display:none; }

/* ---------- проверка сессии ----------
   Пока /v1/me не ответил, страницу не показываем: иначе на долю
   секунды видно содержимое, на которое может не быть прав. */
html.is-checking-auth body{ visibility:hidden; }
html.is-auth-offline body::before{
  content:'Сервис временно недоступен. Обновите страницу через минуту.';
  position:fixed; inset:auto 0 0 0; z-index:200;
  padding:0.875rem 1.25rem; text-align:center;
  background:#5a1622; color:#fff; font-size:0.875rem; font-weight:700;
}

/* =========================================================
   НАСТРОЙКИ
   ========================================================= */
.app--narrow{ max-width:52rem; }

.setbox{
  margin-top:1.25rem; padding:1.5rem;
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
}
.setbox:first-of-type{ margin-top:2rem; }
.setbox__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.setbox__title{ font-size:1.25rem; font-weight:800; letter-spacing:-.01em; }
.setbox__actions{ display:flex; align-items:center; gap:0.75rem; margin-top:1.25rem; flex-wrap:wrap; }

.setbadge{
  padding:0.25rem 0.625rem; border-radius:var(--r-pill);
  background:rgba(62,196,97,.16); border:1px solid rgba(62,196,97,.34);
  font-size:0.75rem; font-weight:700; color:#5FD97F; white-space:nowrap;
}

.setform__status{ margin:0.5rem 0 0; font-size:0.8125rem; font-weight:600; color:var(--text-3); }
.setform__status:empty{ display:none; }
.setform__status--ok{ color:#5FD97F; }
.setform__status--err{ color:#FF6B85; }

/* строка «подпись — значение»: у почты и карты менять нечего,
   поэтому это текст, а не выключённое поле ввода */
.setrow{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem 2rem;
  margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.setbox__head + .setrow, .setbox__title + .setrow{ border-top:0; padding-top:0; }
.setrow--split{ gap:1rem 3rem; }
.setrow__body{ min-width:0; }
.setrow__label{ font-size:0.8125rem; font-weight:600; color:var(--text-3); }
.setrow__value{ font-size:1rem; font-weight:700; word-break:break-word; }
.setrow__value--lg{ font-size:1.25rem; letter-spacing:-.01em; }
.setrow__note{ max-width:22rem; font-size:0.8125rem; color:var(--text-3); font-weight:600; }

/* правка имени: карандаш рядом со значением, поле — только на время правки */
.iconedit{
  flex:none; width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border-radius:var(--r-xs); color:var(--text-3);
  transition:background .16s var(--e-out), color .16s var(--e-out);
}
.iconedit svg{ width:1.125rem; height:1.125rem; }
.iconedit:hover{ background:var(--surface-3); color:#fff; }
.iconedit[hidden]{ display:none; }

.nameedit{ margin-top:0.5rem; max-width:22rem; }
.nameedit[hidden]{ display:none; }
.nameedit__foot{ display:flex; align-items:center; gap:0.625rem; margin-top:0.75rem; flex-wrap:wrap; }
.nameedit .field__err{ margin-top:0.5rem; }
.nameedit .field__input.is-invalid{ border-color:#FF6B85; }
/* в режиме правки строка занимает всю ширину: поле шире значения */
.setrow.is-editing{ display:block; }

.paycard{ display:flex; align-items:center; gap:0.875rem; }
.paycard__brand{
  flex:none; display:grid; place-items:center; width:3rem; height:2rem;
  border-radius:var(--r-xs); background:var(--surface-3); border:1px solid var(--line-strong);
  font-size:0.6875rem; font-weight:800; letter-spacing:.04em; color:var(--text-2);
}

@media (max-width:560px){
  .setbox{ padding:1.25rem; }
  .setrow{ flex-direction:column; }
  /* карандаш остаётся справа от имени, а не уезжает под него */
  .setrow--edit{ flex-direction:row; align-items:flex-start; }
  .setrow__note{ max-width:none; }
}

/* ---------- панель каталога: тип слева, поиск и выборы справа ---------- */
.cattools{
  display:flex; align-items:center; justify-content:space-between;
  gap:0.75rem 1.5rem; margin:1.5rem 0 1.25rem; flex-wrap:wrap;
}
.cattools .filters{ margin:0; }
.cattools__aside{ display:flex; align-items:center; gap:0.5rem; flex:1 1 22rem; justify-content:flex-end; min-width:0; flex-wrap:wrap; }

.catsearch{ flex:1 1 12rem; max-width:20rem; }
.catsearch input{ height:2.75rem; font-size:0.9375rem; padding-left:2.625rem; }
.catsearch svg{ left:0.875rem; width:1rem; height:1rem; }

.picker{ position:relative; flex:none; }
.picker__btn{
  display:flex; align-items:center; gap:0.5rem; height:2.75rem; padding:0 0.875rem;
  border-radius:var(--r-pill); background:rgba(255,255,255,.06); color:var(--text-2);
  font-size:0.875rem; font-weight:700; white-space:nowrap;
  transition:background .18s var(--e-out), color .18s var(--e-out);
}
.picker__btn:hover{ background:rgba(255,255,255,.12); color:#fff; }
.picker.is-on .picker__btn{ background:var(--violet); color:#fff; }
.picker__btn .icon{ width:1.125rem; height:1.125rem; }
.picker__chev{ width:0.875rem; height:0.875rem; transition:transform .24s var(--e-out); }
.picker.is-open .picker__chev{ transform:rotate(180deg); }

.picker__list{
  position:absolute; top:calc(100% + 0.5rem); right:0; z-index:60;
  width:max-content; min-width:11rem;
  display:grid; gap:0.125rem; padding:0.5rem;
  border-radius:1rem; background:#fff;
  box-shadow:0 1.75rem 4rem -1rem rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-0.5rem);
  transition:opacity .2s var(--e-out), transform .2s var(--e-out), visibility .2s;
}
.picker.is-open .picker__list{ opacity:1; visibility:visible; transform:none; z-index:70; }
.picker__item{
  display:block; width:100%; text-align:left; white-space:nowrap;
  padding:0.5rem 0.75rem; border-radius:0.625rem;
  font-size:1rem; font-weight:600; color:var(--ink);
  transition:background .16s var(--e-out);
}
.picker__item:first-letter{ text-transform:uppercase; }
.picker__item:hover{ background:var(--light); }
.picker__item.is-current{ background:var(--light); }

/* ---------- страница словаря ---------- */
.vocabtools{ display:flex; align-items:center; gap:0.75rem 1.5rem; margin:1.5rem 0 1.25rem; flex-wrap:wrap; }
.vocabsort{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
/* на всю ширину список читается как таблица — держим колонки узкими */
.app > .vocabbox__list{ margin-top:0; }

/* ---------- телефон ---------- */
@media (max-width:560px){
  /* 20px по краям на 375px съедали заметную часть строки */
  .page .container{ padding-inline:1rem; }

  /* 40px между описанием и фильтрами на узком экране читаются как разрыв */
  .filters,
  .app__head:not(:has(.app__sub)) + .cat .filters,
  .app__sectionhead:not(:has(.app__sub)) + .filters{ margin-top:1.25rem; }

  /* от жанра на телефоне остаётся одна иконка: подпись съедала строку */
  .cattools{ gap:0.75rem 0.75rem; }
  .cattools__aside{ flex:1 1 100%; justify-content:flex-start; }
  .picker--genre .picker__label, .picker--genre .picker__chev{ display:none; }
  .picker--genre .picker__btn{ width:2.5rem; padding:0; justify-content:center; }
  .picker__btn{ height:2.5rem; font-size:0.8125rem; }
  /* поиску отдаём всю строку: в одной с кнопками от него оставалось
     полтора сантиметра и плейсхолдер обрезался на первом слове */
  .catsearch{ flex:1 1 100%; max-width:none; }
  .catsearch input{ height:2.5rem; }

  /* просветы между пилюлями; сам размер кнопки — в styles.css,
     он общий с лендингом */
  .filters, .vocabtools, .vocabsort, .votetabs{ gap:0.375rem 0.5rem; }
  .filters{ margin-bottom:1rem; }
  .votetabs{ margin:1.25rem 0 1rem; }

  /* обложки — плиткой по две: одна колонка растягивает постер
     на весь экран и в строку помещается только полтора фильма */
  .cards-grid{ grid-template-columns:repeat(2,1fr); }

  /* каталог в профиле — лента в одну строку: сетка на телефоне
     давала две узкие колонки и длинную простыню вниз */
  .cards-grid--rail{
    grid-auto-flow:column; grid-template-columns:none;
    grid-auto-columns:9.5rem;
    gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:0.5rem; scrollbar-width:none;
    /* лента доезжает до края экрана, а не обрывается на отступе;
       scroll-padding — чтобы прилипание не съедало левый отступ */
    margin-inline:-1rem; padding-inline:1rem; scroll-padding-inline:1rem;
  }
  .cards-grid--rail::-webkit-scrollbar{ display:none; }
  .cards-grid--rail .card{ scroll-snap-align:start; }
}

/* =========================================================
   АДМИНКА
   ========================================================= */
.app__head-tools{ display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.picker--period .picker__list{ max-height:22rem; overflow-y:auto; }

.mockbadge{
  align-self:center; padding:0.4375rem 0.75rem; border-radius:var(--r-pill);
  background:rgba(245,179,43,.14); border:1px solid rgba(245,179,43,.34);
  font-size:0.75rem; font-weight:700; color:var(--gold);
}

.stat__note{ display:block; margin-top:0.5rem; font-size:0.75rem; font-style:normal; color:var(--text-3); font-weight:600; }

.admingrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:1.25rem; margin-top:1.25rem; }
.admingrid .setbox{ margin-top:0; }
.setbox--wide{ margin-top:1.25rem; }
.setbox__count{ font-size:0.875rem; font-weight:700; color:var(--text-3); }

/* ---------- языки ---------- */
.langbars{ display:grid; gap:1rem; margin-top:1.25rem; }
.langbar__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.5rem; }
.langbar__name{ display:flex; align-items:center; gap:0.625rem; font-weight:700; }
.langbar__name .flag{ width:1.5rem; height:1.125rem; }
.langbar__num{ font-size:0.875rem; font-weight:700; color:var(--text-3); white-space:nowrap; }
.langbar__track{ height:0.5rem; border-radius:var(--r-pill); background:rgba(255,255,255,.08); overflow:hidden; }
.langbar__track i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),#FF5C7A); }

/* ---------- топ каталога ---------- */
.toplist{ counter-reset:top; list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:0.5rem; }
.topitem{
  counter-increment:top;
  display:flex; align-items:center; gap:0.875rem;
  padding:0.75rem 0.875rem; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
}
.topitem::before{
  content:counter(top); flex:none;
  width:1.5rem; height:1.5rem; display:grid; place-items:center; border-radius:var(--r-xs);
  background:rgba(255,255,255,.08); font-size:0.75rem; font-weight:800; color:var(--text-2);
}
.topitem:first-child::before{ background:var(--brand); color:#fff; }
.topitem__body{ flex:1; min-width:0; }
.topitem__name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topitem__meta{ font-size:0.75rem; font-weight:600; color:var(--text-3); }
.topitem__num{ text-align:right; flex:none; }
.topitem__num b{ display:block; font-size:1rem; font-weight:800; }
.topitem__num span{ font-size:0.6875rem; font-weight:600; color:var(--text-3); }

/* ---------- таблица людей ---------- */
/* таблица шире экрана уезжает внутри своей рамки, а не тянет страницу */
.tablewrap{ margin-top:1.25rem; overflow-x:auto; }
.utable{ width:100%; min-width:44rem; border-collapse:collapse; }
.utable th, .utable td{ padding:0.75rem 0.875rem; text-align:left; }
.utable th{
  font-size:0.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); border-bottom:1px solid var(--line); white-space:nowrap;
}
.utable td{ font-size:0.875rem; font-weight:600; color:var(--text-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.utable tbody tr:hover td{ background:var(--surface-2); }

.ucell{ display:flex; align-items:center; gap:0.625rem; }
.uavatar{
  flex:none; width:2rem; height:2rem; display:grid; place-items:center;
  border-radius:0.5rem; background:var(--brand); color:#fff; font-size:0.8125rem; font-weight:800;
}
.ucell__body{ display:grid; min-width:0; }
.ucell__name{ font-weight:700; color:#fff; }
.ucell__mail{ font-size:0.75rem; color:var(--text-3); }

.plantag{ display:inline-block; padding:0.1875rem 0.5rem; border-radius:var(--r-pill); font-size:0.75rem; font-weight:800; }
.plantag--trial{ background:var(--violet-soft); color:#a493ff; }
.plantag--month, .plantag--year{ background:rgba(62,196,97,.16); color:#68e08b; }
.plantag--cancelled{ background:rgba(255,255,255,.08); color:var(--text-3); }
.plantag--free{ background:var(--brand-soft); color:#ff819a; }

@media (max-width:560px){
  .mockbadge{ align-self:flex-start; }
  .utable th, .utable td{ padding:0.625rem 0.75rem; }
}