/* Городские подворотни — стили v1 */
:root{
  /* Светлее графит: тёплый тёмный фон, но уже не «чёрная дыра»;
     панели и фон разделены более мягким контрастом. */
  --bg:#201d1b;
  --bg-2:#292523;
  --bg-3:#342e2a;
  --line:#4b423b;
  --text:#f7f2eb;
  --muted:#c5bbb0;
  --accent:#f66409;
  --accent-2:#ff9257;
  --blue:#1f5bff;
  --radius:16px;
  --container:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Tilda Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section--tight{padding:40px 0}

/* ---- Типографика ---- */
.h1{font-size:clamp(32px,5vw,56px);line-height:1.1;margin:0 0 20px;font-weight:800;letter-spacing:-.02em}
.h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15;margin:0 0 16px;font-weight:800;letter-spacing:-.01em}
.h3{font-size:20px;margin:0 0 8px;font-weight:700}
.lead{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:720px;margin:0 0 24px}
.muted{color:var(--muted)}
.eyebrow{display:inline-block;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}

/* ---- Кнопки ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:30px;
  background:var(--accent);color:#fff;font-weight:700;font-size:16px;border:0;cursor:pointer;
  transition:.2s;text-decoration:none}
.btn:hover{background:#fff;color:var(--accent-2);text-decoration:none}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-2);background:transparent}
.btn--blue{background:var(--blue)}
.btn--sm{padding:9px 18px;font-size:14px}
.btn.is-next{box-shadow:0 0 0 4px rgba(246,100,9,.20)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn-row--tight{gap:8px;margin-top:0}
/* В одном блоке кнопки выглядят одинаково: главная — не одна, а весь ряд. */
.btn-row .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-row .btn:hover{background:#fff;color:var(--accent-2)}

/* ---- Шапка ---- */
.header{position:sticky;top:0;z-index:50;background:rgba(32,29,27,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;gap:24px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:19px;letter-spacing:-.01em}
.logo:hover{text-decoration:none;color:var(--accent-2)}
.logo__mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;font-size:15px}
.nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.nav__link{color:#fff;font-weight:600;font-size:15px;opacity:.85}
.nav__link:hover{color:var(--accent-2);text-decoration:none;opacity:1}
.nav__link.is-active{color:var(--accent-2);opacity:1}
.header__social{display:flex;gap:12px}
.header__social a{color:var(--muted);font-size:13px;font-weight:700}
.header__social a:hover{color:var(--accent-2);text-decoration:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{width:24px;height:2px;background:#fff;display:block;transition:.2s}

/* ---- Герой ---- */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(32,29,27,.82),rgba(32,29,27,.94)),var(--bg-2);
  border-bottom:1px solid var(--line);background-size:cover;background-position:center}
.hero--photo{background-image:linear-gradient(90deg,rgba(32,29,27,.96) 0%,rgba(32,29,27,.84) 46%,rgba(32,29,27,.55) 100%),var(--hero-image)}
.hero__inner{padding:80px 0}
.hero__actions{gap:18px;margin-top:28px}
.hero__claim{font-size:14px;color:var(--accent-2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.hero__title{font-size:clamp(38px,7.5vw,88px);line-height:1;margin:0 0 18px;font-weight:900;letter-spacing:-.03em;text-transform:uppercase}
.hero__sub{font-size:clamp(18px,2.4vw,26px);color:#dcdcdc;max-width:660px;margin:0 0 14px}
.hero__text{font-size:16px;color:var(--muted);max-width:640px;margin:0}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

/* ---- Сетки ---- */
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.2s;display:flex;flex-direction:column}
.card:hover{border-color:var(--accent);transform:translateY(-3px)}
.card__img{aspect-ratio:4/3;background:var(--bg-3);position:relative;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.8);color:var(--accent-2);
  font-size:12px;font-weight:700;padding:5px 10px;border-radius:20px}
.card__placeholder{display:grid;place-items:center;height:100%;color:#3a3a3a;font-size:40px;
  background:repeating-linear-gradient(45deg,#141414,#141414 14px,#171717 14px,#171717 28px)}
.card__body{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column}
.card__meta{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;gap:10px;flex-wrap:wrap}
.card__title{font-size:19px;font-weight:800;margin:0 0 8px;line-height:1.25}
.card__title a{color:var(--text)}
.card__title a:hover{color:var(--accent-2);text-decoration:none}
.card__text{font-size:15px;color:var(--muted);margin:0 0 12px;flex:1}
.card__tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:12px;background:var(--bg-3);border:1px solid var(--line);color:var(--muted);
  padding:3px 9px;border-radius:20px}
.empty-note{background:var(--bg-2);border:1px dashed var(--line);border-radius:var(--radius);
  padding:32px;color:var(--muted);text-align:center}

/* ---- Расписание ---- */
.schedule{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.schedule__item{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:18px 20px}
.schedule__day{font-size:13px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.schedule__title{font-size:18px;font-weight:800;margin:6px 0 4px}
.schedule__desc{font-size:14px;color:var(--muted);margin:0}
.announce{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;padding:14px 18px;background:var(--bg-2);border:1px dashed var(--line);border-radius:var(--radius)}
.announce__text{font-size:15px;color:var(--muted);line-height:1.5}

/* ---- Блоки ---- */
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
/* Акцентная панель. Раньше здесь стояло border-color:var(--accent) — тонкая оранжевая
   рамка со всех четырёх сторон, и такие панели выбивались из общего оформления:
   по всему сайту акцент — это полоса 3px слева (расписание, факт, цитата, рецепт,
   «Кто ты», блок установки). Теперь полоса общая, а рамка остаётся спокойная. */
.panel--accent{border-color:var(--line);border-left:3px solid var(--accent)}
.feature{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.feature__icon{font-size:28px;margin-bottom:10px}
.feature h3{margin:0 0 8px;font-size:19px}
.feature p{margin:0;color:var(--muted);font-size:15px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split__img{border-radius:var(--radius);overflow:hidden;background:var(--bg-3);aspect-ratio:4/3}
.split__img img{width:100%;height:100%;object-fit:cover}
.split__placeholder{display:grid;place-items:center;height:100%;color:#3a3a3a;font-size:56px;
  background:repeating-linear-gradient(45deg,#141414,#141414 14px,#171717 14px,#171717 28px)}

/* ---- Фильтры ---- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;align-items:center}
.filter{background:var(--bg-2);border:1px solid var(--line);color:var(--text);
  padding:9px 18px;border-radius:30px;cursor:pointer;font-size:14px;font-weight:600;transition:.15s;font-family:inherit}
.filter:hover{border-color:var(--accent)}
.filter.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.filters__count{color:var(--muted);font-size:14px;margin-left:auto}

/* ---- Серия ---- */
.read-progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:99}
.series{max-width:820px;margin:0 auto}
.series__meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-bottom:24px}
.series__panel{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.series__panel img{border-radius:12px;width:100%}
.fact{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:20px 22px;margin-top:28px}
.fact__label{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.fact p{margin:0 0 8px}
.fact__source{font-size:14px;color:var(--muted)}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:36px;border-top:1px solid var(--line);padding-top:24px}
.pager a{color:var(--text);font-weight:700}
.pager a:hover{color:var(--accent-2);text-decoration:none}
.pager__label{display:block;font-size:13px;color:var(--muted);font-weight:400}
.pager__spacer{width:40%}
.locked{background:var(--bg-3);border:1px dashed var(--line);border-radius:12px;padding:22px;text-align:center;color:var(--muted);margin-bottom:24px}
.map-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 24px;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;background:var(--bg-2)}
.map-cta .eyebrow{margin-bottom:4px}
.map-cta__text{font-weight:700}
/* Глаз у поля с паролем. Класс ставит скрипт в assets/js/main.js, он же
   оборачивает поле. Стили добавлены сюда, а не в отдельный файл админки:
   страницы панели подключают общий style.css, значит глаз работает везде,
   где есть поле с паролем, без правок в каждом файле. */
.pw{position:relative;display:block;width:100%}
.pw>input[type="password"],.pw>input[type="text"]{width:100%;padding-right:46px}
.pw__eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);
  cursor:pointer;transition:color .15s,background .15s}
.pw__eye:hover{color:var(--text);background:rgba(255,255,255,.06)}
.pw__eye.is-on{color:var(--text)}
.pw__eye:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.pw__eye-ico{display:flex;line-height:0}
.pw__eye-ico svg{display:block;pointer-events:none}
/* Поле-строка в панели: глаз не должен ломать сетку. */
.form .pw,.row .pw{display:block;width:100%}
.share{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
/* Ряд под последним кадром: лапка слева, «К комиксам» справа, для симметрии.
   До этого обе кнопки стояли в подвале вместе с кнопками «поделиться», откуда
   до лапки было два экрана. Решение владельца 27.09.2026 (задача 36) и
   28.09.2026: лапка — сразу под историей, кнопка возврата — на другом краю. */
.series__end{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:26px 0 8px;padding:14px 16px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.series__end .like{font-size:15px;padding:10px 18px}
.series__end-back{white-space:nowrap}
.series__end-map{border-style:dashed}
/* Порядок в ряду: возврат слева, кнопка карты по центру, лапка справа.
   Слева возврат, потому что он отвечает на вопрос «куда дальше читать», а
   лапка справа — потому что дочитавший смотрит вправо, на отклик. */
@media (max-width:420px){
  .series__end{flex-direction:column;align-items:stretch;gap:10px}
  .series__end .like,.series__end-back{justify-content:center}
}

/* Режим «только чтение»: оставляем кадры и короткую панель выхода. */
.reader-toggle{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 26px}
.reader-toggle .hint{max-width:46ch;line-height:1.45}
.reader-bar{position:sticky;top:0;z-index:40;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:14px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(32,29,27,.95);backdrop-filter:blur(8px);color:var(--muted);font-size:14px}
.reader-bar[hidden]{display:none}
.reader-bar__exit{border:0;background:transparent;color:var(--accent-2);font:inherit;font-weight:700;cursor:pointer;padding:6px 0}
.reader-bar__exit:hover{text-decoration:underline}
body.reading-mode{background:var(--bg)}
body.reading-mode.has-player{padding-bottom:0}
body.reading-mode .header,
body.reading-mode .pdvbar,
body.reading-mode .footer,
body.reading-mode .cta,
body.reading-mode .read-progress{display:none!important}
body.reading-mode main.section{padding:0}
body.reading-mode .series{max-width:1100px}
body.reading-mode .series > *{display:none}
body.reading-mode .series > .reader-bar{display:flex}
body.reading-mode .series > .series__panel{display:flex}
body.reading-mode .series__panel{gap:0;margin:0}
body.reading-mode .series__panel img{border-radius:0}

/* ---- Персонажи ---- */
.character{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.character__img{aspect-ratio:1/1;background:var(--bg-3)}
.character__img img{width:100%;height:100%;object-fit:cover}
.character__body{padding:24px}
.quotes{list-style:none;padding:0;margin:16px 0 0}
.quotes li{background:var(--bg-3);border-left:3px solid var(--accent);border-radius:8px;
  padding:12px 16px;margin-bottom:10px;font-style:italic;color:#e0e0e0}

/* ---- CTA ---- */
.cta{background:var(--bg-2);border-top:1px solid var(--line);text-align:center;padding:72px 0}
.cta__title{font-size:clamp(26px,4vw,40px);font-weight:800;margin:0 0 12px}
.cta__text{color:var(--muted);max-width:560px;margin:0 auto 26px}

/* ---- Плеер / музыка ---- */
.player{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.player audio{width:100%;margin-top:16px}
.tracklist{list-style:none;padding:0;margin:20px 0 0}
.tracklist li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.tracklist li:last-child{border-bottom:0}
.track__num{color:var(--muted);width:32px;flex:none}
.track__name{flex:1}
.track__time{color:var(--muted);font-size:14px}
.soon{display:inline-block;background:rgba(246,100,9,.14);border:1px solid var(--accent);
  color:var(--accent-2);font-size:13px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:16px}

/* ---- Формы ---- */
.form{display:grid;gap:14px;max-width:620px}
.form label{display:grid;gap:6px;align-items:start;align-content:start;font-size:14px;font-weight:600;color:var(--muted)}
.form input,.form textarea,.form select{
  background:var(--bg-3);border:1px solid var(--line);color:var(--text);
  padding:12px 14px;border-radius:10px;font:inherit;font-size:15px;
  min-width:0;max-width:100%;width:100%}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent)}
.form textarea{min-height:110px;resize:vertical}
.form .row{display:flex;gap:10px;align-items:center}

/* Выпадающие списки: свой вид вместо системного, чтобы «Время» и «Рубрика»
   выглядели так же, как остальные поля. */
.form select,.admin select,.filter select{
  -webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
.form select:hover,.admin select:hover{border-color:#3a3a3a}
.form select option,.admin select option{background:#1a1a1a;color:#f2f2f2}

/* Поля не должны растягиваться по высоте соседей и вылезать за колонку. */
.admin-grid,.admin-grid--2,.admin-grid--3,.admin-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.admin-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.admin-grid>*{min-width:0}
.form input[type=file]{
  padding:10px 12px;line-height:1.4;font-size:14px;color:var(--muted);cursor:pointer}
.form input[type=file]::file-selector-button{
  margin-right:10px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg-2);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.form input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent-2)}
.form input[type=number]{-moz-appearance:textfield}
.form input[type=number]::-webkit-outer-spin-button,
.form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hint{font-size:13px;color:var(--muted)}
.checkline{display:flex;gap:10px;align-items:flex-start}
.checkline input{width:18px;height:18px;margin-top:3px;flex:none}
.checkline span{line-height:1.5}

/* Переключатель «Платный выпуск» — первым делом в редакторе,
   чтобы форма сразу собиралась под нужный формат. */
.admin-paid-switch{margin:0 0 16px}
.admin-paid-switch .checkline{gap:12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg-2);cursor:pointer}
.admin-paid-switch .checkline:hover{border-color:#3a3a3a}
.admin-paid-switch .checkline span{font-size:14px;font-weight:600;color:var(--text)}

/* ---- Футер ----
   Четыре равные колонки: бренд, «Бусельдорфф», «Сайт», «Клубы и расписание».
   Подменю больше не разворачивается простынёй внутри «Разделов» — у него своя колонка. */
.footer{border-top:1px solid var(--line);background:var(--bg-2);padding:56px 0 24px;margin-top:64px}
.footer__grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.15fr;gap:28px 32px;align-items:start}
.footer__col{min-width:0}
.footer__col--brand{padding-right:12px}
.footer__brand{font-size:20px;font-weight:800;margin-bottom:8px}
.footer__tag{color:var(--muted);font-size:15px;margin:0 0 14px;line-height:1.55}
.footer__title{font-weight:700;margin:0 0 14px;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text);padding-bottom:10px;border-bottom:1px solid var(--line)}
.footer__title--minor{margin-top:22px}
.footer__list{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px;color:var(--muted)}
.footer__list a{color:var(--muted);text-decoration:none;display:inline-block}
.footer__list a:hover{color:var(--accent-2);text-decoration:underline}
.footer__list .footer__lead{color:var(--text);font-weight:700}
.footer__list .footer__lead:hover{color:var(--accent-2)}
.footer__row{color:var(--muted);font-size:14px;line-height:1.5}
.footer__row span{color:var(--text);font-weight:600}
.footer__muted{color:var(--muted);font-size:15px;margin:0}
.footer__note{margin:20px 0 0;color:var(--muted);font-size:13px;line-height:1.5;opacity:.9;max-width:44ch}
.footer__social{display:flex;gap:14px;font-size:15px;flex-wrap:wrap}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
@media (max-width:1080px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer__grid{grid-template-columns:1fr;gap:26px} .footer{padding:40px 0 20px} }

/* ---- Админка ---- */
.adminbar{background:#1f1c1a;border-bottom:1px solid var(--line);padding:10px 0;font-size:14px}
.adminbar .container{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.adminbar a{color:var(--muted)}
.adminbar a:hover{color:var(--accent-2)}
.adminbar strong{color:var(--accent-2)}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.thumb{width:64px;height:48px;object-fit:cover;border-radius:6px;background:var(--bg-3)}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.pill--on{background:rgba(46,204,113,.15);color:#2ecc71}
.pill--off{background:rgba(241,196,15,.15);color:#f1c40f}
.pill--wait{background:rgba(160,170,190,.15);color:#aab4c8}
.notice{background:rgba(46,204,113,.1);border:1px solid #2ecc71;color:#8fe9b8;padding:12px 16px;border-radius:10px;margin-bottom:20px}
.access-code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:26px;letter-spacing:4px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:10px;padding:12px 18px;margin-top:6px;color:var(--accent);font-weight:700}
/* Хлебные крошки */
.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--text);text-decoration:underline}
.breadcrumbs__sep{opacity:.5}
/* Карта тайн */
.map{height:460px;border:1px solid var(--line);border-radius:var(--radius);margin-top:24px;
  background:var(--bg-3);z-index:0}
.place-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.place{display:flex;gap:16px;align-items:center;justify-content:space-between;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px}
.place__title{font-weight:700;color:var(--text);text-decoration:none}
.place__title:hover{color:var(--accent)}
.place .muted{margin-top:4px;font-size:14px}
/* Строка места — как строка трека: название, потом мелкая ссылка с номером. */
.place__meta{margin-top:4px;font-size:13px;color:var(--muted)}
.place__meta a{color:var(--accent);text-decoration:none}
.place__meta a:hover{text-decoration:underline}
/* Отключённое поле (например, рубрика у платного выпуска) — видно, что оно неактивно. */
.form input:disabled,.form select:disabled,.form textarea:disabled{opacity:.45;cursor:not-allowed}
/* Тест «Кто ты в Подворотнях» — вопросы раскрываются по одному,
   чтобы на телефоне не тянуть длинную «портянку» ради одного ответа. */
.quiz-q{border:1px solid var(--line);background:var(--bg-2);border-radius:var(--radius);
  padding:0 20px;margin-top:12px}
.quiz-q__title{font-weight:700;font-size:17px;display:flex;gap:10px;align-items:center;
  padding:18px 30px 18px 0;position:relative;cursor:pointer;list-style:none;line-height:1.35}
.quiz-q__title::-webkit-details-marker{display:none}
.quiz-q__title::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:22px;color:var(--accent);transition:transform .2s}
.quiz-q[open] .quiz-q__title::after{content:'–'}
.quiz-q__body{padding:0 0 18px}
.quiz-q__num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--accent);color:#171310;font-size:14px;font-weight:800;flex:none}
.quiz-opt{display:flex;gap:12px;align-items:flex-start;background:var(--bg-3);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:10px;cursor:pointer;
  line-height:1.5}
.quiz-opt:hover{border-color:var(--accent)}
.quiz-opt input{margin-top:3px;accent-color:var(--accent);flex:none}
.quiz-result{text-align:center}
.quiz-result__emoji{font-size:56px;line-height:1}
.quiz-result__img{width:160px;height:160px;margin:0 auto}
.quiz-result__img img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.14)}

/* FAQ — раскрывающиеся вопросы */
.faq{display:grid;gap:12px}
.faq-item{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:0 20px}
.faq-item__q{cursor:pointer;font-weight:700;padding:18px 26px 18px 0;position:relative;list-style:none}
.faq-item__q::-webkit-details-marker{display:none}
.faq-item__q::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:22px;color:var(--accent);transition:transform .2s}
.faq-item[open] .faq-item__q::after{content:'–'}
.faq-item__a{padding:0 0 18px;color:var(--muted);line-height:1.7}

/* Расширенные настройки — вкладки */
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.admin-tab{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
.admin-tab:hover{border-color:var(--accent);color:var(--accent-2)}
.admin-tab.is-active{background:var(--accent);border-color:var(--accent);color:#171310}

/* Плейлист: трек с кнопкой пуска */
.track{flex-wrap:wrap}
.track audio{width:100%;height:34px;margin-top:8px}
.track__play{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--bg-3);color:var(--text);font-size:13px;cursor:pointer;transition:.15s;padding:0}
.track__play:hover{border-color:var(--accent);color:var(--accent-2)}
/* Кнопка ▶ у играющей песни. 30.09.2026, жалоба владельца с телефона:
   «кнопка плей — весь оранжевый при включении». Было background:var(--accent),
   то есть круг заливался оранжевым целиком: на широком экране кнопка мелкая и
   это не бросается в глаза, на телефоне — бросается сразу, и таких кнопок в
   выпуске может быть много подряд.
   Оранжевый у нас означает главное действие (об этом прямо сказано рядом, у
   .pdvbar__clear), а играющая песня главным действием не является.
   Теперь как у .pdvbar__btn.is-on и .mday__btn.is-on: оранжевые рамка и глиф,
   лёгкая подложка вместо сплошной заливки. Класс .is-active ставит player.js
   (строка 152) любой кнопке [data-track] — это .track__play в выпусках и клубе
   и .mday__play в окне витрины. */
.track__play.is-active{border-color:var(--accent);color:var(--accent);background:rgba(246,100,9,.12)}
.track.is-playing .track__name{color:var(--accent-2)}
.track.is-playing{box-shadow:inset 3px 0 0 var(--accent)}

/* ---- Нижний плеер (живёт на всех страницах, музыка не прерывается) ---- */
.pdvbar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:rgba(32,29,27,.96);
  border-top:1px solid var(--line);backdrop-filter:blur(8px);padding:8px 0}
.pdvbar__inner{max-width:var(--container);margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:8px}
.pdvbar__btn{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:var(--bg-3);color:var(--text);font-size:14px;cursor:pointer;transition:.15s;padding:0;
  position:relative;font-family:"Segoe UI Symbol","Segoe UI",system-ui,sans-serif}
.pdvbar__btn:hover{border-color:var(--accent);color:var(--accent-2)}
.pdvbar__btn--main{background:var(--accent);border-color:var(--accent);color:#171310;width:42px;height:42px;font-size:15px}
/* 30.09.2026. Ровно та же поломка, что и у кнопки в окне витрины, и по той же
   причине — залипшее наведение на телефоне. Строка выше отдаёт кнопке
   color:var(--accent-2) при наведении, а фон главной кнопки оранжевый, и
   светло-оранжевый значок на нём пропадает. Нажали «плей» на андройде — значок
   стал светлым и таким остался. Владелец показал это скриншотом с телефона.
   Значок закреплён чёрным во всех состояниях, фон не тронут. */
.pdvbar__btn--main,
.pdvbar__btn--main:hover,
.pdvbar__btn--main:active,
.pdvbar__btn--main:focus-visible { color: #171310; }
/* Активный режим — только цвет глифа и рамка, без заливки (как у ⏭) */
.pdvbar__btn.is-on{border-color:var(--accent);color:var(--accent);background:var(--bg-3)}
.pdvbar__btn.is-one::after{content:'1';position:absolute;top:-4px;right:-4px;width:15px;height:15px;
  border-radius:50%;background:var(--bg-3);border:1px solid var(--accent);color:var(--accent);
  font-size:9px;line-height:13px;font-weight:700;text-align:center}
.pdvbar__meta{display:flex;flex-direction:column;min-width:0;flex:1;margin-left:4px}
.pdvbar__title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Понятно, что именно играет: аккорд перед названием, только пока звук идёт */
.pdvbar.is-playing .pdvbar__title::before{content:'♪ ';color:var(--accent)}
.pdvbar__time{font-size:12px;color:var(--muted)}
.pdvbar__seek{-webkit-appearance:none;appearance:none;width:180px;flex:none;height:4px;border-radius:4px;
  background:var(--line);cursor:pointer;accent-color:var(--accent)}
.pdvbar__seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.pdvbar__seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--accent)}
.pdvbar__link{font-size:13px;color:var(--muted);flex:none;text-decoration:none}
.pdvbar__link:hover{color:var(--accent-2);text-decoration:none}
.pdvbar__close{margin-left:6px}
/* Плеер скрыт — остаётся кружок-нота, чтобы его вернуть.
   30.09.2026. ДОБАВЛЕНО pointer-events:auto. Правило .pdvbar.is-hidden ниже
   снимает кликабельность со ВСЕЙ полосы, и кнопка-нота без этого оставалась
   мёртвой: родитель отдавал pointer-events:none, а дочерний элемент его не
   переопределял, и нажатие уходило на то, что под кнопкой.
   Проверено в браузере: elementFromPoint в центре кнопки возвращал H3.card__title
   вместо самой кнопки. Плеер было невозможно вернуть — ровно жалоба владельца
   «нижний плеер не работает, просто свернут». Хуже того, player.js запоминает
   свёрнутое состояние в localStorage (CLOSED_KEY), и после одной промахнувшейся
   кнопки «×» полоса не возвращалась уже ни при какой перезагрузке. Звук при этом
   продолжал играть: сам <audio> лежит вне скрываемой .pdvbar__inner. */
.pdvbar__open{display:none;pointer-events:auto;position:fixed;right:16px;bottom:16px;z-index:121;width:48px;height:48px;
  border-radius:50%;border:1px solid var(--line);background:rgba(32,29,27,.96);color:var(--accent);
  font-size:20px;line-height:1;cursor:pointer;transition:.15s}
.pdvbar__open:hover{border-color:var(--accent);color:var(--accent-2)}
.pdvbar.is-hidden{background:none;border-top:0;backdrop-filter:none;pointer-events:none;padding:0}
.pdvbar.is-hidden .pdvbar__inner{display:none}
.pdvbar.is-hidden .pdvbar__open{display:block}
body.has-player{padding-bottom:74px}
body.has-player.player-off{padding-bottom:0}

/* Подвкладки страниц в «Текстах сайта» */
.admin-tabs--sub{margin:14px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.admin-tabs--sub .admin-tab{font-size:13px;padding:7px 14px}
.admin-tabs--sub .admin-tab.is-active{color:#171310}

/* Пагинация каталога */
.pager--list{margin-top:28px;justify-content:center}
.error{background:rgba(231,76,60,.1);border:1px solid #e74c3c;color:#f5b7b1;padding:12px 16px;border-radius:10px;margin-bottom:20px}


.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.admin-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---- Адаптив ---- */
@media (max-width:1040px){
  /* на планшетах и узких десктопах прячем соцсети в шапке, чтобы меню не переносилось */
  .header__social{display:none}
}
@media (max-width:980px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .admin-grid,.admin-grid--3,.admin-grid--4{grid-template-columns:1fr}
  /* на тач-устройствах инпуты меньше 16px вызывают автозум iOS при фокусе */
  .form input,.form textarea,.form select{font-size:16px}
}
@media (max-width:820px){
  /* Меню на телефоне: начинается ровно под шапкой (а не по фиксированным 64px —
     на айфоне высота шапки «плавает» из-за адресной строки) и не уезжает
     за нижний край, а прокручивается внутри себя. */
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;gap:0;
    padding:12px 20px 20px;border-bottom:1px solid var(--line);display:none;margin-left:0;
    max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px))}
  .nav.is-open{display:flex}
  /* Плеер внизу не должен перекрывать последний пункт меню. */
  body.has-player .nav{max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);
    padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px))}
  .nav__link{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  .burger{display:flex;margin-left:auto}
  .header__social{display:none}
  .grid--3,.grid--2,.schedule{grid-template-columns:1fr}
  .hero{min-height:72vh}
  .hero--photo{background-image:linear-gradient(180deg,rgba(32,29,27,.92) 0%,rgba(32,29,27,.78) 52%,rgba(32,29,27,.95) 100%),var(--hero-image);background-position:64% center}
  .hero__inner{padding:64px 28px}
  .hero__actions{flex-direction:column;align-items:stretch;gap:9px}
  .hero__actions .btn{width:100%;justify-content:center;padding:11px 20px;font-size:15px}
  .map{height:360px}
  .footer__grid{grid-template-columns:1fr}
  .section{padding:44px 0}
  body.has-player{padding-bottom:86px}
  .pdvbar__seek,.pdvbar__link{display:none}
  .pdvbar__inner{gap:6px}
  .pdvbar__btn{width:36px;height:36px}
  /* 30.09.2026. iPhone: полоса плеера — единственное место, где не был учтён
     вырез. Меню и подвал получили env(safe-area-inset-bottom) раньше (строки 506
     и 510), а сама полосаposition:fixed;bottom:0 стояла с голым padding:8px 0, и
     на айфоне с домашней полоской (~34px) кнопки прижимались к самому краю и
     частично уходили под неё. Нажатие в нижний ряд кнопок работало, но целиться
     приходилось в полоску, которая визуально не принадлежит экрану.
     На Android и старых айфонах env() даёт 0 — вид не меняется. */
  .pdvbar{padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}
  body.has-player{padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px))}
}
/* Панель плеера на узком экране: строка не переносится, и всё в ней, кроме
   названия трека, имеет твёрдую ширину. «Очистить» на телефоне ужимается, но
   не прячется: без него нельзя вернуть плеер в пустое состояние, и это
@media (max-width:520px){
  .grid--4{grid-template-columns:1fr}
  .pager{flex-direction:column}
  .table{font-size:14px}
  .filters__count{display:none}
  /* на самых узких экранах прячем лишнее, чтобы остались пуск и переключение */
  .pdvbar__time{display:none}
  /* Панель плеера на узком экране: строка не переносится, и всё в ней, кроме
     названия трека, имеет твёрдую ширину. «Очистить» на телефоне ужимается,
     но не прячется: без него нельзя вернуть плеер в пустое состояние, и это
     единственная ссылка панели, которую узкие стили не убирают. */
  .pdvbar__clear{padding:8px 12px;font-size:12px}
}
@media (max-width:400px){
  .pdvbar__clear{padding:7px 10px;font-size:12px}
}

/* ---------- Каталог: навигация для нового читателя ---------- */
.catnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 6px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel,rgba(255,255,255,.04))}
.catnav__link{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--text);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.catnav__link:hover{background:var(--accent);color:#171310}
.catnav__count{margin-left:auto;padding-right:6px;color:var(--muted);font-size:13px}
.catblock{margin:34px 0 10px;scroll-margin-top:80px}
.catblock:first-of-type{margin-top:24px}
.cat-month{display:flex;align-items:baseline;gap:10px;margin:34px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:22px;scroll-margin-top:80px}
.cat-month .muted{font-size:14px;font-weight:400}
.monthnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.monthnav__item{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none}
.monthnav__item:hover{border-color:var(--accent);color:var(--accent)}
.monthnav__item span{min-width:22px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted);font-size:12px;font-weight:700;text-align:center}
.card--mini .card__title{font-size:17px;line-height:1.3}
.card--mini .card__body{padding:12px 14px 14px}
@media (max-width:640px){
  .catnav{gap:6px;padding:8px}
  .catnav__link{padding:7px 11px;font-size:13px}
  .catnav__count{width:100%;margin-left:0;padding:2px 4px 0}
  .cat-month{font-size:19px}
}

/* ---------- Переход между выпусками сразу после комикса ---------- */
.pager--after{margin:26px 0 8px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}

/* Каталог: карточки ниже, описание в две строки — старые выпуски не уходят за экран. */
#all-issues .card__img{aspect-ratio:3/2}
#all-issues .card__body{padding:14px 14px 16px}
#all-issues .card__title{font-size:17px;margin:0 0 6px}
#all-issues .card__text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;margin:0 0 8px}
#all-issues .card--mini .card__img{aspect-ratio:3/2}
.catblock .card--mini .card__img{aspect-ratio:3/2}
.catblock .card--mini .card__title{font-size:16px}
.startlist{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.startlist__item{display:flex;align-items:baseline;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none;font-weight:700;font-size:15px}
.startlist__item:hover{border-color:var(--accent);color:var(--accent-2)}
.startlist__num{flex:none;font-size:12px;font-weight:600;color:var(--muted)}
/* Блок «Отдельные истории»: заливка прежняя, текст и кнопка в строку. */
.notice--row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:0}
.notice--row .notice__text{flex:1 1 320px;line-height:1.5}
.notice--row .btn{flex:none}
@media (max-width:900px){ .startlist{grid-template-columns:1fr} }
.cat-month-block{scroll-margin-top:80px}
.cat-month-block .cat-month:first-child{margin-top:0}

/* ---------- Отклик: лапа на выпусках, яйцо → яичница на рецептах ---------- */
.like{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line);
  border-radius:30px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.like:hover:not(:disabled){border-color:var(--accent);color:var(--accent-2)}
.like__ico{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;color:var(--accent)}
.like__ico .ico{width:18px;height:18px}
.like__num{font-variant-numeric:tabular-nums}
.like__label{font-weight:600}
.like.is-liked{border-color:var(--accent);background:rgba(246,100,9,.12);color:var(--text)}
.like:disabled{cursor:default}
.like.is-busy{opacity:.6}
/* В «Еде» оставили только огонь (решение владельца): кошка с сердечками убрана,
   анимация вспышки тоже. Значок статичный, счётчик копится как раньше. */
.like__ico--fire{color:#ff7a18}
.like--recipe .like__ico{width:30px;height:30px}
.like--recipe .like__ico .ico{width:30px;height:30px}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.card__foot--end{justify-content:flex-end;margin-top:12px}
/* Пометка «прочитано». Форма владельца 26.09.2026 и уточнение того же дня:
   слева — зелёная галочка и слово «прочитано», справа — лапка со счётчиком.
   Карточку НЕ приглушаем: владелец прямо сказал, что матовость мешает,
   поскольку прочитанное захочется перечитать. Приглушение оставлено только
   у самой плашки-подсказки на странице выпуска. */
.read-mark{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  margin-right:auto;border:1px solid var(--line);border-radius:30px;background:transparent;
  color:#4caf7d;font-size:14px;font-weight:600;line-height:1;white-space:nowrap}
.read-mark[hidden]{display:none}
.read-mark .ico{width:24px;height:24px;flex:none}
.read-mark__ico{display:flex;flex:none}
.read-mark__label{color:#4caf7d}
/* На странице выпуска метка стоит не в подвале карточки, а под названием —
   чтобы читатель увидел её прежде, чем начал читать. */
.read-mark--inline{margin-right:0;background:rgba(76,175,125,.12);border-color:rgba(76,175,125,.45)}
.series__readmark{margin:-8px 0 18px}
.series__readmark .read-mark[hidden]{display:none}
.card .like{padding:6px 12px;font-size:13px}
/* Отклик внутри строки карточки (метки категории) — совсем компактный. */
.card__meta .like{padding:3px 9px;font-size:12px;gap:5px;border-radius:20px}
.card__meta .like .ico{width:14px;height:14px}
.card__meta .like .like__ico{width:14px;height:14px}
/* В подвале карточки отклик заметнее: значок нужно видно без подсказок. */
.card__foot .like{padding:7px 14px}
.card__foot .like .ico,.card__foot .like .like__ico{width:24px;height:24px}
.card__foot .like--recipe{padding:8px 16px}
.card__foot .like--recipe .like__ico{width:30px;height:30px}
.card__foot .like--recipe .ico{width:30px;height:30px}
@keyframes like-pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .like.is-liked .like__ico{animation:none}
  .like__ico--fire{animation:none}
}

/* ---------- Меню с подменю («Бусельдорфф») ---------- */
.nav__item{position:relative;display:flex;align-items:center;gap:4px}
.nav__caret{display:none;background:none;border:0;color:var(--muted);font-size:13px;line-height:1;
  padding:10px 6px;cursor:pointer;transform:rotate(-90deg);transition:transform .15s}
.nav__item.is-open .nav__caret{transform:rotate(0)}
.nav__sub{position:absolute;top:100%;left:0;min-width:240px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:14px;padding:8px;display:none;box-shadow:0 20px 44px rgba(0,0,0,.55);z-index:60}
.nav__item.is-open .nav__sub{display:block}
@media (hover:hover) and (pointer:fine){
  .nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{display:block}
}
.nav__sublink{display:block;padding:9px 12px;border-radius:10px;color:#fff;font-size:14px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.nav__sublink:hover{background:rgba(255,255,255,.08);color:var(--accent-2);text-decoration:none}
.nav__sublink.is-active{color:var(--accent-2)}
.nav__more-toggle{border:0;background:none;cursor:pointer;text-align:left;font-family:inherit}
/* Подменю «Ещё» — один пункт «Разделы», но оставляем ему ту же сетку и правый край,
   чтобы не прыгало при появлении. */
.nav__sub--cards{display:none;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px;
  right:0;left:auto;width:min(320px,calc(100vw - 32px))}
@media (max-width:900px){ .nav__sub--cards{left:0;right:auto;width:auto} }
.nav__item--more.is-open .nav__sub--cards{display:grid}
@media (hover:hover) and (pointer:fine){
  .nav__item--more:hover .nav__sub--cards,.nav__item--more:focus-within .nav__sub--cards{display:grid}
}
.nav__card{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border-radius:11px;
  color:var(--text);text-decoration:none;white-space:normal;overflow:hidden}
.nav__card:hover{background:var(--bg-3);text-decoration:none}
.nav__card__icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;
  background:var(--bg-3);font-size:18px;line-height:1}
.nav__card__text{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.nav__card__text strong{font-size:14px;line-height:1.2}
.nav__card__text small{color:var(--muted);font-size:12px;line-height:1.3}
.nav__card.is-active{background:rgba(246,100,9,.12)}
.nav__item.is-active > .nav__link{color:var(--accent-2);opacity:1}
.footer__sub{font-size:13px;opacity:.8}
.footer__sub a{color:var(--muted)}

/* ---------- «Все разделы»: страница, куда ведёт «Ещё» ----------
   Все блоки одинаковые, без выделения: читатель сам выбирает, куда идти. */

/* ---------- «Бусельдорфф» ---------- */
.h1-sub{color:var(--accent-2)}
.busel-quote{position:relative;background:linear-gradient(180deg,rgba(246,100,9,.12),rgba(255,255,255,.03));
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:26px 28px;margin-top:22px}
.busel-quote--joke{border-left-color:#7c5cff;background:linear-gradient(180deg,rgba(124,92,255,.12),rgba(255,255,255,.03))}
.busel-quote--big{padding:34px 34px 30px}
.busel-quote__label{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.busel-quote__text{font-size:clamp(19px,2.6vw,26px);line-height:1.45;margin:12px 0 10px;font-weight:600}
.busel-quote--big .busel-quote__text{font-size:clamp(22px,3.2vw,32px)}
.busel-quote__by{color:var(--muted);font-size:14px}
.busel-card{display:flex;flex-direction:column;gap:8px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 22px;color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s}
.busel-card:hover{border-color:var(--accent);transform:translateY(-3px);text-decoration:none}
.busel-card__emoji{font-size:30px;line-height:1}
.busel-card__title{font-size:20px;font-weight:800}
.busel-card__text{color:var(--muted);font-size:15px;line-height:1.55;flex:1}
.busel-card__meta{font-size:13px;color:var(--accent-2);font-weight:600}
.busel-vip-nudge{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:34px;padding:22px 24px;border:1px dashed #5b4bd6;border-radius:var(--radius);background:rgba(124,92,255,.08)}
.busel-vip-nudge .btn{flex:none}
.busel-archive{display:grid;gap:12px;margin-top:16px}
.busel-archive__item{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.busel-archive__item p{margin:6px 0 0;line-height:1.6}
.busel-archive__item.is-today{border-color:var(--accent);background:rgba(246,100,9,.08)}
.busel-jokes{display:grid;gap:12px;margin-top:16px}
.busel-joke{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;line-height:1.65}
.busel-joke p{margin:0;white-space:pre-line}
.busel-joke--locked{border-style:dashed;border-color:#5b4bd6;background:rgba(124,92,255,.06)}
.busel-joke__teaser{color:var(--muted)}

/* ---------- Рецепты ---------- */
.recipe__title{font-size:24px;margin:6px 0 14px}
.recipe__img{width:100%;border-radius:14px;margin-bottom:16px;border:1px solid var(--line)}
.recipe__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px}
.recipe__label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);margin-bottom:8px}
.recipe__list{margin:0;padding-left:20px;color:var(--muted);line-height:1.6}
.recipe__list li{margin-bottom:4px}
.recipe__comment{margin:18px 0 4px;padding:14px 16px;border-left:3px solid var(--accent);background:rgba(246,100,9,.08);
  border-radius:0 12px 12px 0;font-size:16px;line-height:1.55}
.recipe__by{color:var(--muted);font-size:13px;margin-bottom:4px}
@media (max-width:820px){ .recipe__cols{grid-template-columns:1fr} }

/* ---------- Админка «Бусельдорфф» ---------- */
.busel-admin-list{display:grid;gap:10px;margin-top:12px;max-height:720px;overflow:auto}
.busel-admin-item{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.busel-admin-item.is-off{opacity:.6}
.busel-admin-item__text{font-size:15px;line-height:1.5;white-space:pre-line}
.busel-admin-item__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted)}
.busel-admin-item__meta code{font-size:12px;color:var(--muted)}
.hint.is-warn{color:#f5b7b1;background:rgba(231,76,60,.12);border:1px solid rgba(231,76,60,.5);padding:8px 10px;border-radius:8px;display:block}
.catnav__link.is-active{background:var(--accent);color:#171310}
.catnav__link .muted{color:inherit;opacity:.7;font-size:12px}

/* ---------- Мобильное подменю ---------- */
@media (max-width:820px){
  .nav__item{flex-direction:column;align-items:stretch}
  .nav__item > .nav__link{padding:12px 36px 12px 0;border-bottom:1px solid var(--line);font-size:17px;display:inline-block}
  .nav__caret{display:block;position:absolute;right:0;top:8px}
  .nav__sub{position:static;display:none;box-shadow:none;background:transparent;border:0;padding:2px 0 8px 14px;min-width:0}
  .nav__item.is-open .nav__sub{display:block}
  .nav__item--more.is-open .nav__sub--cards{display:grid;grid-template-columns:1fr;gap:2px}
  .nav__sublink{padding:8px 0;font-size:15px;font-weight:500;white-space:normal;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav__card{padding:9px 0;border-radius:0}
  .nav__card__icon{width:30px;height:30px}
  .nav__card__text small{font-size:13px}
}

/* ---------- VIP: другая вселенная ---------- */
.header--vip{background:linear-gradient(90deg,#0b0a14,#120f22 55%,#0b0a14);border-bottom-color:#3b2f7a}
.header--vip .logo__mark--vip{background:linear-gradient(135deg,#7c5cff,#f66409);color:#0a0a0a;font-weight:900}
.header--vip .nav__link.is-active{color:#c9b8ff}
.header--vip .nav__link--back{color:#bdb9d6}
.header--vip .nav__link--back:hover{color:#fff}
.logo__vip{color:#c9b8ff;font-weight:800;letter-spacing:.08em;margin-left:4px}
.vip-hero{position:relative;overflow:hidden;border-bottom:1px solid #2a2150;
  background:radial-gradient(1100px 420px at 15% -10%,rgba(124,92,255,.28),transparent 60%),
             radial-gradient(900px 380px at 95% 0%,rgba(246,100,9,.16),transparent 60%),#0a0912}
/* Боковые поля 20px — обязательны, и раньше их тут не было. Сокращённая запись
   padding:76px 0 64px обнуляла бока, и правило .container{padding:0 20px}
   (style.css 27) не помогало: специфичность одинаковая, а это правило ниже.
   Шапка стояла вплотную к левому краю, а все остальные блоки были отодвинуты на
   20px. Владелец заметил на телефоне: «шапка сильно прилипла к левому краю, при
   том остальные блоки отцентрованы». На широком экране разница в 20px не видна,
   на телефоне бросается сразу. */
.vip-hero__inner{padding:76px 20px 64px}
.vip-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  border:1px solid #4b3ba8;background:rgba(124,92,255,.12);color:#c9b8ff;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.vip-hero h1{font-size:clamp(34px,6vw,60px);line-height:1.05;margin:0 0 18px;font-weight:900;letter-spacing:-.02em}
.vip-hero__lead{font-size:clamp(17px,2.2vw,22px);color:#bdb9d6;max-width:680px;margin:0 0 26px}
.vip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
/* Четыре карточки «Что внутри» — строго в ряд, без одинокой пятой на новой строке. */
.vip-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.vip-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){ .vip-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Три карточки в ряд остаются читаемыми только до ~900px: дальше — две в ряд,
   потом одна. Иначе на планшете текст в карточке ломается на слова. */
@media (max-width:900px){ .vip-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .vip-grid--three{grid-template-columns:1fr} }

/* Состояние участника: герой без цены, вместо неё — пропуск с кодом. */
.vip-hero--member{background:radial-gradient(1100px 420px at 15% -10%,rgba(124,92,255,.34),transparent 60%),
  radial-gradient(900px 380px at 95% 0%,rgba(246,100,9,.2),transparent 60%),#0a0912}
.vip-badge--open{background:rgba(46,204,113,.14);border-color:#2ecc71;color:#8fe9b8}

/* Ранг участника. «Корона» — его ранг по центру блока, над лестницей, и десять
   делений под ней: пройденные ранги закрыты, текущий набирается месяцами.
   Лестница из десяти колонок ниже; колонки нажимаются, подробности открываются
   полосой под лестницей, поэтому текст не вылезает из узкой колонки.

   30.09.2026. Разделительной полосы у блока больше нет: решение владельца
   «корона над рангами — по центру, разделительную полосу убираем». До этого
   здесь стояло border-top:1px solid rgba(124,92,255,.28) и такой же border-bottom
   — тонкие линии, которые шли через всю ширину и резали блок надвое. */
.vip-rank{margin:34px auto 0;padding:26px 20px 22px;max-width:var(--container);text-align:center}
.vip-rank__hello{margin:0;font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#a9a5c2}
.vip-rank__crest{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.vip-rank__emoji{font-size:40px;line-height:1}
.vip-rank__name{margin:0;font-size:clamp(26px,3.4vw,38px);font-weight:900;line-height:1.1;letter-spacing:-.02em;color:#fff}
.vip-rank__name--sm{font-size:clamp(19px,2.4vw,26px)}
.vip-rank__stat{display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:center;margin:14px 0 0;
  font-size:15px;color:#bdb9d6}
.vip-rank__next{color:#c9b8ff}
/* Полоса пути: десять делений, по делению на ранг. Одна полоса на всю дорогу
   (28 месяцев) после первого платежа почти пуста и говорит «ты ничего не
   сделал», поэтому делений десять и видно, где ты в дороге.
   Ширина — вся строка блока, а не 420px: решение владельца 30.09.2026 «полосу
   прогресса можно растянуть по ширине верхнего текста, так прогресс будет
   смотреться значимее — это для компьютера». Десять делений по 110px читаются как
   полоса, а 420px — как штрих. На телефоне блок уже всего 335px, там полоса и так
   во всю ширину и ничего не меняется. */
.vip-rank__seg{margin:18px auto 0;display:flex;gap:4px;justify-content:center}
.vip-rank__cell{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.vip-rank__cell i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#7c5cff,#f0a35e)}
.vip-rank__seg-ends{display:flex;justify-content:space-between;gap:12px;
  margin:7px auto 0;font-size:11px;color:#8a86a8}
.vip-rank__seg-ends span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Лестница из десяти колонок: на большом экране помещается вся сразу,
   на телефоне листается в сторону. */
.vip-rank__ladder{list-style:none;display:flex;gap:6px;margin:24px 0 0;padding:0 0 8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
.vip-step{flex:0 0 auto;padding:0;margin:0}
.vip-step__btn{display:block;width:106px;padding:10px 6px 11px;border:1px solid var(--line);
  border-radius:14px;background:rgba(255,255,255,.03);color:inherit;text-align:center;cursor:pointer;
  font:inherit;opacity:.5;transition:opacity .2s,border-color .2s,background .2s}
.vip-step__btn:hover{opacity:.9;border-color:#4b3ba8}
.vip-step__btn:focus-visible{outline:2px solid #7c5cff;outline-offset:2px;opacity:1}
.vip-step__num{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:#8a86a8}
.vip-step__emoji{display:block;margin-top:2px;font-size:20px;line-height:1.2}
/* min-height:30px — две строки по 15px (12px шрифт, line-height 1.25). Без него
   ступени разной высоты: «Заблудший» в одну строку даёт кнопку 108px, а все
   остальные в две — 123px, и низ лестницы идёт волной. Заметнее всего у того,
   у кого раг с коротким названием, — то есть подсвеченная ступень выглядит
   короче соседних. */
.vip-step__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:30px;margin-top:6px;font-size:12px;font-weight:700;line-height:1.25;color:#fff}
.vip-step__range{display:block;margin-top:4px;font-size:11px;color:#a9a5c2}
.vip-step.is-passed .vip-step__btn{opacity:.92;border-color:#332a6b;background:rgba(124,92,255,.08)}
.vip-step.is-current .vip-step__btn{opacity:1;border-color:#f0a35e;background:rgba(240,163,94,.12);
  box-shadow:0 10px 30px rgba(240,163,94,.16)}
.vip-step.is-current .vip-step__num{color:#f0a35e}
.vip-step.is-current .vip-step__title{color:#ffd9b3}
/* Полоса-подробность: то, что открывается по нажатию на колонку. */
.vip-rank__detail{display:flex;align-items:center;gap:14px;margin:16px auto 0;max-width:720px;
  padding:14px 18px;border:1px solid #332a6b;border-radius:var(--radius);background:rgba(124,92,255,.08);
  text-align:left}
.vip-rank__detail-emoji{font-size:26px;line-height:1;flex:none}
.vip-rank__detail-text{display:block;min-width:0}
.vip-rank__detail-text strong{display:block;font-size:16px;color:#fff}
.vip-rank__detail-text span{display:block;margin-top:3px;font-size:14px;color:#c9c4e0;font-style:italic}
.vip-rank__detail-text span::before{content:'«'}
.vip-rank__detail-text span::after{content:'»'}
.vip-rank__detail-range{margin-left:auto;flex:none;font-size:12px;color:#a9a5c2;white-space:nowrap}
.vip-rank__note{margin:12px auto 0;max-width:var(--container);padding:0 20px;font-size:13px;color:#a9a5c2}
.vip-rank__hint{display:none;margin:10px 0 0;font-size:12px;color:#8a86a8}
@media (max-width:820px){
  .vip-rank{margin-top:26px;padding:22px 12px 18px}
  .vip-rank__stat{font-size:14px}
  .vip-step__btn{width:104px}
  .vip-rank__hint{display:block}
  .vip-rank__detail{flex-wrap:wrap;gap:10px}
  .vip-rank__detail-range{margin-left:0;width:100%}
}
/* Плашка ранга в шапке клуба: едет по всем страницам VIP вместе с меню.
   Это не кнопка и не ссылка, а значок с обводкой — так решил владелец
   30.09.2026. Поэтому здесь нет ни курсора-руки, ни hover-подсветки: раньше это
   был <a>, и он вёл к лестнице рангов. */
.vip-rank-pill{display:inline-flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;padding:6px 12px;
  border:1px solid #4b3ba8;border-radius:999px;background:rgba(124,92,255,.14);color:#c9b8ff;
  font-size:13px;font-weight:700;white-space:nowrap}
.vip-rank-pill__emoji{font-size:15px;line-height:1;flex:none}
.vip-rank-pill__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){
  .header--vip .header__inner{gap:12px}
  .vip-rank-pill{padding:5px 9px;font-size:12px}
  .vip-rank-pill__name{max-width:96px}
}
@media (max-width:430px){
  .header--vip .logo__text{font-size:16px}
  .header--vip .logo__mark--vip{width:28px;height:28px;font-size:14px}
  /* На узком экране от названия отказались: «Сосед по лавочке» и длинные имена
     не влезали в шапку и обрезались многоточием до 66px. Решение владельца
     30.09.2026: «убрать текст из мобильной версии и оставить эмодзи, но
     покрупнее». Обводка остаётся, значок становится крупнее, чтобы плашка не
     выглядела пустой. */
  .vip-rank-pill{padding:6px 11px;gap:0}
  .vip-rank-pill__name{display:none}
  .vip-rank-pill__emoji{font-size:19px}
}
/* «Клуб открыт» — заголовок под приветствием с рангом. */
.vip-open__title{margin:22px 0 10px;font-size:clamp(24px,3.4vw,34px);font-weight:900;letter-spacing:-.01em}
/* Короткая строка ранга — блок «Доступ» и страница «Мои месяцы». */
.vip-rank-mini{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;
  font-size:15px;color:#bdb9d6}
.vip-rank-mini__emoji{font-size:20px;line-height:1}
.vip-rank-mini strong{color:#fff}
.vip-pass{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 26px;padding:18px 22px;
  border:1px solid #332a6b;border-radius:var(--radius);background:rgba(124,92,255,.08)}
.vip-pass__code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:22px;
  letter-spacing:3px;color:#c9b8ff;font-weight:700}
.vip-pass__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.vip-pass__label{font-size:14px;color:#bdb9d6}
.vip-pass__months{font-size:15px;color:#fff;font-weight:600}
.vip-pass .btn{margin-left:auto}

/* Карточка открытого спецвыпуска: рамка фиолетовее, чтобы видеть разницу с витриной. */
.vip-issue--open{border-color:#4b3ba8;box-shadow:0 12px 34px rgba(124,92,255,.14)}

/* Почта в блоке доступа: подсказка обязана быть читаемой, а не серой мелкой. */
.vip-form__hint{display:block;font-size:13px;line-height:1.5;color:#a9a5c2;margin-top:6px}
.vip-form--mail{margin-top:18px;padding-top:18px;border-top:1px solid rgba(124,92,255,.25)}
.vip-code-exist{margin-bottom:18px;padding:14px 16px;border:1px dashed #4b3ba8;border-radius:12px;
  background:rgba(124,92,255,.07)}
.vip-code-exist .access-code{margin-top:4px}
.vip-next{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding:14px 16px;border:1px dashed #4b3ba8;border-radius:12px;background:rgba(124,92,255,.07)}
.vip-next strong{color:#fff}
.vip-next .muted{color:#a9a5c2}

/* Плашка режима просмотра от имени администратора. */
.vip-preview{background:rgba(246,100,9,.14);border-bottom:1px solid rgba(246,100,9,.4);
  color:#ffd9bd;font-size:14px;padding:10px 0}
.vip-preview a{color:#fff;text-decoration:underline}

/* ---- Внутренние страницы комнаты: /vip/music, /vip/recipes, /vip/fraza, /vip/jokes ---- */.vip-room-hero{padding:38px 0 6px;background:
  radial-gradient(900px 320px at 12% -20%,rgba(124,92,255,.28),transparent 62%),
  radial-gradient(700px 300px at 92% -10%,rgba(246,100,9,.14),transparent 60%)}
.vip-room-hero__title{display:flex;align-items:center;gap:12px;margin:10px 0 8px;
  font-size:38px;line-height:1.1;letter-spacing:-.01em}
.vip-room-hero__lead{color:#bdb9d6;font-size:17px;line-height:1.6;margin:0 0 24px;max-width:62ch}

/* Полоса вкладок комнаты — одна и та же на всех внутренних страницах. */
.vip-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0;list-style:none}
.vip-tabs__item{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  border:1px solid #332a6b;background:rgba(124,92,255,.07);color:#c9c4e4;font-size:15px;font-weight:600;
  text-decoration:none;transition:border-color .15s,background .15s,color .15s}
.vip-tabs__item:hover{border-color:#5b47b8;color:#fff;background:rgba(124,92,255,.16)}
.vip-tabs__item.is-active{border-color:#7c5cff;background:rgba(124,92,255,.24);color:#fff}
.vip-tabs__emoji{font-size:17px;line-height:1}
.vip-tabs__sub{color:#8a86a8;font-size:14px;margin:10px 0 0}

/* Закрытая дверь: раздел club виден, но не отдаётся. */
.vip-locked{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
  padding:28px 30px;border:1px solid #332a6b;border-radius:20px;background:rgba(124,92,255,.07)}
.vip-locked__icon{font-size:32px;line-height:1}
.vip-locked h2{margin:0 0 8px}

/* Плейлист внутри комнаты: та же фиолетовая гамма, платные помечены. */
.player--vip{border-color:#332a6b;background:rgba(124,92,255,.06)}
.player--vip .track__vip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:rgba(246,100,9,.16);border:1px solid rgba(246,100,9,.4);color:#ffc79b;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;vertical-align:middle}
.track--vip .track__name{color:#fff}

/* Рецепты клуба: платные блюда помечены, но выглядят так же, как остальные. */
.recipe--vip{border-color:#4b3ba8;background:rgba(124,92,255,.07)}
.tag--vip{background:rgba(246,100,9,.16);border:1px solid rgba(246,100,9,.42);color:#ffc79b}
.vip-paywall-note{margin-top:20px;padding:16px 18px;border:1px dashed #4b3ba8;border-radius:14px;
  background:rgba(124,92,255,.07);color:#bdb9d6;font-size:15px;line-height:1.6}
.vip-paywall-note strong{color:#c9b8ff}

/* Фраза/анекдот внутри комнаты. */
.reveal--vip{border-color:#332a6b;background:rgba(124,92,255,.07)}
.vip-room-foot{margin-top:8px;padding-top:22px;border-top:1px solid rgba(124,92,255,.2)}

/* Карта клуба: все разделы блоками под «Клуб открыт» — видно, куда нажать. */
.vip-hero__hint{margin:16px 0 0;color:#bdb9d6;font-size:15px;line-height:1.6}
.vip-hero__hint a{color:#c9b8ff}
/* Картинка комнаты в шапке: та же схема, что у «Еды», «Фразы» и «Анекдота». */
.vip-hero__row,.vip-room-hero__row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:28px;align-items:center}
.vip-hero__text,.vip-room-hero__text{min-width:0}
/* 30.09.2026, жалоба владельца: «блок под фото уезжает за пределы браузера».
   Проверено замером на живой странице, окно 1209px:
     колонка сетки (вторая)   460px
     блок фото                 666px
     правый край блока        1392px — на 182px за окном
   Причина: у .busel-cover--side стоит aspect-ratio:4/3 (строка 1223), а здесь
   ещё и align-self:stretch. Высота растягивалась по строке — 497px, и
   aspect-ratio тут же выводил из неё ширину: 497 * 4/3 = 664. Колонка 460,
   блок 664 — перебор на 205px, и он уезжал вправо за край секции.
   Теперь ширина ограничена колонкой, и блок стоит на месте: ничего не
   обрезается, он просто сдвигается влево и садится в свою колонку.
   min-width:0 обязателен: без него грид не даёт элементу сжать уже своей
   минимальной ширины, и перебор вернулся бы. */
.vip-hero__cover,.vip-room-hero__cover{margin:0;align-self:stretch;min-width:0;max-width:100%}
.vip-hero__cover .busel-cover--side,.vip-room-hero__cover .busel-cover--side{width:100%;max-width:100%}
.vip-hero__cover img,.vip-room-hero__cover img{height:100%;min-height:220px;object-fit:cover}
/* 30.09.2026, выбор владельца из восьми вариантов: B — «16:9, вся фотография
   целиком». Фотография входа в клуб 2752x1536, пропорция 1.79. Рамка в шапке была
   459x457, то есть квадрат, и в неё попадало только 56% ширины: камин слева и
   полки справа срезались. Владелец выбрал прямоугольную рамку 16:9, где видна вся
   картина целиком — камин, кот, полки и кружка.
   align-self:start — блок перестаёт растягиваться по высоте текстовой колонки.
   Это и было причиной перебора ширины: растянутая высота 497px при aspect-ratio
   4/3 давала ширину 664px при колонке 460px, и блок уезжал за край браузера.
   min-height:0 снимает нижнюю границу в 220px: на узком экране колонка становится
   одной, и рамка 16:9 была бы выше этой границы, а с ней — снова перебор.
   Селектор с двумя классами — обязателен. Первая попытка была .vip-hero__cover, и
   не сработала: правило .busel-cover--side{aspect-ratio:4/3} (style.css 1223) стоит
   НИЖЕ и при равной специфичности (0,1,0) побеждает по порядку. Рамка вышла
   461x346 — то есть 4:3, а не 16:9. С двумя классами специфичность (0,2,0) и
   порядок уже не важны.

   30.09.2026, ПОЗЖЕ. Вариант 16/9 ОТМЕНЁН по решению владельца: «стало хуже,
   не нравится пустое место под картинкой». Фото вернулось к исходному виду —
   справа и во всю высоту текстовой колонки, края картины срезаны. Именно так
   выглядел блок до всех правок этого дня. Правило с aspect-ratio:16/9 и
   align-self:start убрано, остаётся только починка против выезда за край.
   Пустоту, которая появилась, заполнять больше нечем: карточка ранга уехала из
   шапки в блок рангов — владелец сам её туда и попросил («корона над рангами»).
   Правило .vip-hello--wide, которым она держалась под фото, тоже убрано. */
.vip-hero__cover .busel-cover--empty,.vip-room-hero__cover .busel-cover--empty{height:100%;min-height:220px}
.vip-room-hero__cover{max-width:320px;margin-left:auto}

/* Код доступа — полоса над колонками, на одной линии с остальными блоками. */
.vip-code-bar{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:26px;align-items:center;
  margin-top:20px;padding:18px 24px;border:1px solid #332a6b;border-radius:var(--radius);
  background:linear-gradient(90deg,rgba(124,92,255,.16),rgba(124,92,255,.05))}
.vip-code-bar__code,.vip-code-bar__meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.vip-code-bar__label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#a9a5c2}
.vip-code-bar__months{font-size:16px;font-weight:700;color:#fff}
.vip-code-bar__hint{margin:0;color:#a9a5c2;font-size:14px;line-height:1.5}
.vip-code-bar .access-code{margin-top:2px}
@media (max-width:900px){
  .vip-code-bar{grid-template-columns:1fr;gap:14px}
  .vip-hero__row,.vip-room-hero__row{grid-template-columns:1fr;gap:20px}
  .vip-room-hero__cover{max-width:none}
}

.vip-map{background:linear-gradient(180deg,rgba(124,92,255,.10),transparent 70%)}
.vip-map__grid{margin-top:0!important}
.vip-card--map{display:flex;flex-direction:column;gap:4px;position:relative;
  border-color:#332a6b;background:rgba(124,92,255,.08);transition:border-color .15s,background .15s,transform .15s}
.vip-card--map:hover{border-color:#7c5cff;background:rgba(124,92,255,.16);transform:translateY(-2px)}
.vip-card--map .vip-card__title{margin-top:2px}
.vip-card__go{margin-top:auto;padding-top:12px;color:#c9b8ff;font-size:14px;font-weight:700;letter-spacing:.01em}
.vip-card--map:hover .vip-card__go{color:#fff}
/* «На главную» в меню клуба — заметная кнопка, но буквы такие же светлые,
   как у всех остальных кнопок сайта. */
.nav__back--vip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  background:linear-gradient(90deg,#f97316,#fb923c);color:#fff;font-weight:700;font-size:15px;
  text-decoration:none;white-space:nowrap;box-shadow:0 8px 22px rgba(249,115,22,.28);
  border:1px solid rgba(255,255,255,.22);transition:transform .15s,box-shadow .15s,filter .15s}
/* Правило после общих для VIP — иначе приглушённый цвет перебивает белый. */
.header--vip .nav__back--vip{color:#fff}
.header--vip .nav__back--vip:hover{color:#fff;transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 10px 26px rgba(249,115,22,.38)}
@media (max-width:900px){ .nav__back--vip{width:100%;justify-content:center} }

/* Иконки плеера и кнопок: SVG наследует currentColor, поэтому цвет везде одинаковый.
   В круглой кнопке иконку центрирует флекс, а не базовая линия текста: иначе на андроиде
   и вебе значки «плывут» вниз на пиксель-два. */
.ico{display:inline-block;vertical-align:middle;fill:currentColor;pointer-events:none}
.pdvbar__btn,.track__play{display:inline-flex;align-items:center;justify-content:center}
.pdvbar__btn .ico,.track__play .ico,.btn .ico{width:18px;height:18px}
.btn:has(.ico){display:inline-flex;align-items:center;gap:8px}
.vip-lock{display:inline-flex;align-items:center;gap:6px}
.vip-lock .ico{width:15px;height:15px}

/* Блок «Кто ты» на главной: заметный, но в общем ритме страницы. */
.quiz-promo{display:flex;gap:22px;align-items:flex-start;margin-top:26px;padding:24px 26px;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);
  background:var(--bg-2)}
.quiz-promo__icon{font-size:38px;line-height:1}
.quiz-promo__text{min-width:0}
.quiz-promo__text h2{margin:0 0 8px}
.quiz-promo__text p{margin:0}

/* Приветственный набор со стикерами в VIP-клубе. */
.vip-stickers{border-left:3px solid #f66409}
@media (max-width:700px){
  .vip-room-hero__title{font-size:30px}
  .vip-locked{grid-template-columns:1fr;gap:12px;padding:22px}
  .vip-card__go{padding-top:10px}
}
/* Подвал на страницах клуба — сначала разделы комнаты. */
.footer--vip{border-top-color:#332a6b;background:rgba(124,92,255,.05)}
.vip-card{background:#100e1c;border:1px solid #2a2150;border-radius:var(--radius);padding:22px 22px 20px}
.vip-card__icon{font-size:26px;line-height:1;margin-bottom:10px}
.vip-card__title{font-size:19px;font-weight:800;margin:0 0 8px}
.vip-card__text{color:#a9a5c2;font-size:15px;line-height:1.55;margin:0}
.vip-price{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:6px 0 4px}
.vip-price__num{font-size:clamp(38px,6vw,56px);font-weight:900;line-height:1;color:#c9b8ff}
.vip-price__old{color:#7f7a9c;text-decoration:line-through;font-size:18px}
.vip-note{background:rgba(124,92,255,.08);border:1px solid #332a6b;border-radius:var(--radius);padding:22px 24px;margin-top:26px}
.vip-note__title{font-weight:800;margin-bottom:8px}
.vip-note ul{margin:0;padding-left:20px;color:#a9a5c2;line-height:1.7}
/* Личный кабинет /account. 30.09.2026: страница перестала быть «ещё одним
   экраном про код» и стала кабинетом участника — по решению владельца
   «такой своеобразный личный кабинет, без личности». Отсюда подписи-плашки
   acc-label, код крупно, месяцы плашками в ряд, ранг с той же полосой
   делений, что на главной: человек должен узнавать это место, а не разбираться
   заново, что за полоска нарисована.
   Межстрочный интервал везде 1,45 — на телефоне длинный текст без воздуха
   слипается в стену. */
/* Полоса в подвале: «вы вошли на этом устройстве» и выход. Стоит рядом с
   «Добавить на экран», то есть в самом низу подвала на любой странице.
   Показывается только вошедшим — гостю выходить не откуда. */
.footer__session{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid rgba(255,255,255,.07)}
.footer__session .muted{font-size:13px;flex:1 1 auto;min-width:0}
.footer__logout{font-size:13px;font-weight:600;color:#c9b8ff;text-decoration:none;
  padding:7px 14px;border:1px solid #4b3ba8;border-radius:999px}
.footer__logout:hover{color:#fff;border-color:#7c5cff}

/* КОМНАТА кабинета. 01.10.2026. Владелец: «человек не только читает комиксы, но
   олицетворяет себя с персонажами». Поэтому сверху не строка данных, а комната:
   тёплая стена, лампа справа сверху, карточка персонажа слева как угол, а ранг —
   справа от него, чтобы статус усиливал, а не спорил. Мотив двери — потому что
   кабинет «тайная комната»: пустое место у двери убирает ощущение свалки.
   Персонаж и ранг — на одном уровне по важности, но персонаж слева и крупнее:
   он и есть тот, кто здесь живёт. */
.acc-room{position:relative;isolation:isolate;margin-top:16px;padding:26px 24px 20px;
  border-radius:18px;border:1px solid rgba(240,163,94,.22);overflow:hidden;
  background:linear-gradient(180deg,#2a211a 0%,#221b16 52%,#1c1613 100%)}
.acc-room::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 82% at 80% -14%,rgba(240,163,94,.20),transparent 62%)}
.acc-room__face{width:96px;height:96px;flex:none;display:grid;place-items:center;
  border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 34% 28%,#4a3826,#241c15);
  box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.10)}
.acc-room__face--empty{opacity:.55}
.acc-room__face img{width:100%;height:100%;object-fit:cover;display:block}
.acc-room__emoji{font-size:44px;line-height:1}
.acc-room__who{min-width:0}
.acc-room__name{font-size:clamp(24px,4vw,32px);font-weight:900;line-height:1.1;color:#fff}
.acc-room__short{margin-top:6px;font-size:14px;color:#c9b9a4}
.acc-room__rank{display:flex;flex-direction:column;gap:3px;text-align:right}
.acc-room__rankname{font-size:16px;font-weight:800;color:#f0a35e}
.acc-room__ranknum{font-size:12px;color:#a49a92}
.acc-room__door{margin:16px 0 0;font-size:13px;font-style:italic;color:#a49a92}
/* Сетка троек: карточка слева, кто вы по центру, ранг справа. На телефоне — в
   столбик с рангом под именем, иначе три колонки по 100px читаются плохо. */
.acc-room{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:18px}
@media (max-width:560px){
  .acc-room{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .acc-room__rank{grid-column:1 / -1;text-align:left;border-top:1px solid rgba(255,255,255,.09);
    padding-top:12px}
  .acc-room__door{grid-column:1 / -1}
  .acc-room__face{width:76px;height:76px}
  .acc-room__emoji{font-size:34px}
}

/* Выбор персонажа: шесть карточек в три колонки. Нажимается вся карточка,
   выбранная помечена и подсвечена, чтобы «кто я» читался с одного взгляда. */
.acc-chars{margin-top:22px;padding:20px 18px;border-radius:16px;
  border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.18)}
.acc-chars__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.acc-chars__yours{font-size:12.5px;color:#a49a92}
.acc-chars__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:620px){ .acc-chars__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.acc-char{display:block;margin:0;padding:0}
.acc-char__btn{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;
  padding:16px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);color:inherit;font:inherit;text-align:center;
  cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.acc-char__btn:hover{border-color:#f0a35e;background:rgba(240,163,94,.10);transform:translateY(-2px)}
.acc-char__btn.is-on{border-color:#f0a35e;background:rgba(240,163,94,.14);
  box-shadow:0 10px 26px rgba(240,163,94,.14)}
.acc-char__btn:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}
.acc-char__face{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
  overflow:hidden;background:radial-gradient(circle at 34% 28%,#4a3826,#241c15)}
.acc-char__face img{width:100%;height:100%;object-fit:cover;display:block}
.acc-char__emoji{font-size:30px;line-height:1}
.acc-char__name{font-size:15px;font-weight:800;color:#fff}
.acc-char__short{font-size:12px;line-height:1.35;color:#a49a92}
.acc-char__mark{margin-top:2px;font-size:10.5px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;color:#8fe9b8}

.acc-label{font-size:12px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:#a49a92}
.acc-code .access-code{font-size:clamp(28px,6vw,38px);letter-spacing:.10em;margin-top:6px}
/* 01.10.2026. Блок «Освободить место»: заметка о результате нажатия стоит в
   ряду с кнопкой, а не под ней — иначе блок прыгает высотой после нажатия. */
.acc-space__note{font-size:13px;line-height:1.4;color:var(--muted,#a49a92)}

/* ==========================================================================
   КАБИНЕТ, А+Б. 01.10.2026. Решения владельца этого дня: не столбик, а блок
   личности сбоку (вариант А) и функции плитками (аккуратность из варианта Б);
   окно выбора после выбора сворачивается и не фонит.
   Порядок: раскладка → блок личности → окно выбора → роли → плитки.
   ========================================================================== */

.acc-cab{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);
  gap:20px;align-items:start;margin-top:16px}

.acc-cab__side{position:sticky;top:16px}

.acc-me{position:relative;isolation:isolate;border-radius:18px;overflow:hidden;
  border:1px solid rgba(240,163,94,.22);
  background:linear-gradient(180deg,#2a211a 0%,#221b16 52%,#1c1613 100%)}
.acc-me::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 82% at 80% -14%,rgba(240,163,94,.20),transparent 62%)}

/* summary и есть блок личности: клик открывает окно выбора. Отдельного
   постоянного блока «кто вы» на странице нет — ровно то, о чём просил
   владелец: «выбрал — и это фонить не должно». */
.acc-me__sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  align-items:center;padding:28px 24px;cursor:pointer;list-style:none}
.acc-me__sum::-webkit-details-marker{display:none}
.acc-me__sum::marker{content:""}
.acc-me__sum:hover .acc-me__face{border-color:#f0a35e}

.acc-me__face{width:104px;height:104px;flex:none;display:grid;place-items:center;
  border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 34% 28%,#4a3826,#241c15);
  box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.10);
  border:1px solid transparent;transition:border-color .18s}
.acc-me__face img{width:100%;height:100%;object-fit:cover;display:block}
/* Нейтральная заглушка по решению владельца: знак, а не пустой круг. */
.acc-me__face--empty{opacity:.55}
.acc-me__emoji{font-size:48px;line-height:1}

.acc-me__text{min-width:0}
.acc-me__name{display:block;font-size:30px;font-weight:900;line-height:1.08;color:#fff}
.acc-me__short{display:block;margin-top:8px;font-size:15px;line-height:1.45;color:#c9b9a4}
/* Решение владельца 01.10.2026: «блок с рангом и аватаркой я бы сделал крупнее».
   Почту из кабинета убрали, плитка о потерянном коде встала на её место, и блоку
   личности теперь не с кем спорить за внимание. */
.acc-me__rankname{font-size:17px}

/* Ранг и фраза занимают всю ширину блока, а не соседнюю колонку: иначе
   «Дверь за спиной» встаёт вровень с рангом и читается как продолжение
   строчки рангов. */
.acc-me__rank{display:block;grid-column:1 / -1;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.09)}
.acc-me__rankname{display:block;font-size:15px;font-weight:800;color:#f0a35e}
.acc-me__ranknum{display:block;margin-top:2px;font-size:12px;color:#a49a92}
.acc-me__seg{display:flex;gap:4px;margin-top:8px}
.acc-me__seg i{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.10);
  overflow:hidden}
.acc-me__seg i>u{display:block;height:100%;text-decoration:none;border-radius:999px;
  background:linear-gradient(90deg,#7c5cff,#f0a35e)}

.acc-me__door{display:block;grid-column:1 / -1;margin-top:12px;
  font-size:12.5px;font-style:italic;color:#a49a92}

.acc-me__pick{padding:0 20px 20px;border-top:1px solid rgba(255,255,255,.09)}
.acc-me__sub{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:#a49a92}

/* Две колонки, а не пять: колонка личности шириной 300px, в пяти ячейках
   подпись не помещалась и наезжала на соседнюю («РабочыйСтудентТворческий»).
   Проверено на экране, а не прикинуто. */
.acc-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.acc-roles--chars{grid-template-columns:repeat(2,minmax(0,1fr))}
.acc-role{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;
  padding:10px 6px;border-radius:12px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);color:inherit;font:inherit;cursor:pointer;
  text-align:center;transition:border-color .18s,background .18s}
.acc-role:hover{border-color:#f0a35e;background:rgba(240,163,94,.10)}
.acc-role.is-on{border-color:#f0a35e;background:rgba(240,163,94,.14)}
.acc-role__e{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  overflow:hidden;background:radial-gradient(circle at 34% 28%,#4a3826,#241c15);
  font-size:19px;line-height:1}
.acc-role__e img{width:100%;height:100%;object-fit:cover;display:block}
.acc-role__n{font-size:11.5px;font-weight:800;color:#fff;line-height:1.25;
  overflow-wrap:anywhere}

.acc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.acc-tile{padding:22px}
.acc-tile .acc-months{gap:7px}
.acc-tile .chip{padding:6px 12px;border-radius:999px;background:#3a332e;
  border:1px solid var(--line);font-size:13.5px;line-height:1.4}
.acc-code .access-code{font-size:clamp(26px,5vw,34px);letter-spacing:.10em;margin-top:6px;
  white-space:nowrap}

@media (max-width:900px){
  .acc-cab{grid-template-columns:1fr}
  .acc-cab__side{position:static}
}
@media (max-width:620px){
  .acc-tiles{grid-template-columns:1fr}
  .acc-roles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .acc-me__face{width:66px;height:66px}
  .acc-me__emoji{font-size:30px}
  .acc-me__name{font-size:21px}
}
.acc-copy{width:100%;margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:#111;color:var(--text);font:inherit;font-family:Consolas,monospace;letter-spacing:.10em}
.acc-months{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.acc-rank{text-align:center}
.acc-rank .acc-rank__crest{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.acc-rank .acc-rank__emoji{font-size:40px;line-height:1}
.acc-rank .acc-rank__name{font-size:clamp(24px,5vw,34px);font-weight:900;line-height:1.1;color:#fff}
.acc-rank .acc-rank__stat{display:flex;gap:8px 18px;flex-wrap:wrap;justify-content:center;
  margin:12px 0 0;font-size:14px;color:#bdb9d6}
.acc-seg{display:flex;gap:4px;justify-content:center;margin:16px auto 0;max-width:420px}
.acc-seg__cell{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.acc-seg__cell i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#7c5cff,#f0a35e)}

.vip-issue{background:#100e1c;border:1px solid #2a2150;border-radius:var(--radius);padding:0;overflow:hidden;
  display:flex;flex-direction:column}
.vip-issue .card__body{padding:18px}
.vip-issue .card__title a{color:#e9e5ff}
.vip-issue .card__text{color:#a9a5c2}
.vip-open{font-size:12px;font-weight:700;color:#8fe9b8}
.vip-lock{font-size:12px;font-weight:700;color:#c9b8ff}

/* Блок «Вышло свежее, но не оплачено». Решения владельца 30.09.2026:
   «добавляем что свежее вышло, но тизер» и «и не мешаем между собой».
   Поэтому это отдельная панель со своей рамкой и своей подложкой, а не ещё одна
   сетка карточек под уже показанными: открытые карточки и тизеры закрытых
   месяцев должны читаться как два разных дела, а не как один список.
   Тизер отдаёт месяц, число выпусков и название самого свежего — этого хватает,
   чтобы понять, что там есть и стоит ли платить, но содержания он не выдаёт. */
.vip-teasers-block{margin-top:34px;padding:22px 20px;border:1px solid #3a3168;border-radius:18px;
  background:linear-gradient(180deg,rgba(124,92,255,.10),rgba(124,92,255,.03))}
.vip-teasers-block .h3{margin-top:0}
.vip-teasers{display:grid;gap:12px;margin-top:16px}
@media (min-width:900px){ .vip-teasers{grid-template-columns:repeat(2,minmax(0,1fr))} }
.vip-teaser{padding:16px 18px;border:1px solid #332a6b;border-radius:var(--radius);
  background:rgba(16,14,28,.6)}
.vip-teaser__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vip-teaser__month{font-size:17px;font-weight:800;color:#fff}
.vip-teaser__lead{margin:8px 0 0;font-size:14px;color:#bdb9d6}

/* Карточки «Что внутри» стали ссылками: тот же вид, но с наведением. */
a.vip-card{display:block;color:inherit;text-decoration:none;transition:border-color .18s,transform .18s,background .18s}
a.vip-card:hover{border-color:#4b3ba8;background:#15112a;transform:translateY(-2px);text-decoration:none}
a.vip-card .vip-card__text{color:#a9a5c2}
a.vip-card:hover .vip-card__title{color:#c9b8ff}

/* Подменю VIP — то же, что в основном меню, но в фиолетовой гамме. */
.header--vip .nav__item--vip{position:relative}
.header--vip .nav__item--vip>.nav__link{color:#c9b8ff}
.header--vip .nav__sub{background:#100e1c;border-color:#2a2150}
.header--vip .nav__sublink{color:#e9e5ff}
.header--vip .nav__sublink:hover{background:rgba(124,92,255,.14);color:#c9b8ff}
.nav__sublink--section{border-top:1px solid rgba(124,92,255,.22);margin-top:6px;padding-top:12px}

/* Блок «Доступ»: две равноправные колонки одинаковой высоты,
   поля не растягиваются, а «Ваш доступ» и «Уже платили?» стоят ровно. */
/* Честная плашка про паузу в оплате: видно сразу, без мелкого шрифта. */
.vip-pause{margin:0;padding:14px 16px;border:1px solid rgba(246,100,9,.45);
  border-radius:14px;background:rgba(246,100,9,.08);color:var(--text);
  font-size:14px;line-height:1.6;text-align:left}
.vip-pause strong{display:block;margin-bottom:4px;color:var(--accent-2);font-size:15px}
.vip-pause--box{margin:4px 0 6px}
.vip-pause__title{font-weight:700;color:var(--accent-2);margin-bottom:6px}
.vip-pause p{margin:0 0 8px}
.vip-pause p:last-child{margin-bottom:0}
.vip-pause .hint{color:var(--muted);font-size:13px}
.vip-access{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;
  align-items:stretch;margin-top:22px}
.vip-access>*{min-width:0}
.vip-access>.panel{display:flex;flex-direction:column;height:100%}
.vip-access>.panel>.vip-access__foot{margin-top:auto;padding-top:18px}
.vip-access__side{display:flex;flex-direction:column;min-width:0}
.vip-access__side>*{min-width:0}
.vip-access__side .vip-note{margin-top:0;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.vip-access__side .vip-note+.vip-note{margin-top:16px;flex:0 0 auto}
.vip-price-line{color:#bdb9d6;font-size:15px;line-height:1.55;margin:16px 0 14px}
.vip-price-line strong{color:#c9b8ff;font-size:20px}

/* Формы внутри VIP — те же поля, что и на сайте, но в тёмно-фиолетовой гамме. */
.vip-form{display:grid;gap:14px}
.vip-form__field{display:grid;gap:6px;font-size:14px;font-weight:600;color:#bdb9d6;min-width:0}
.vip-form__field input,.vip-form__field select{
  background:#15112a;border:1px solid #332a6b;color:#f2efff;
  padding:12px 14px;border-radius:10px;font:inherit;font-size:15px;width:100%;max-width:100%;min-width:0}
.vip-form__field select{
  -webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a5c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
.vip-form__field select option{background:#15112a;color:#f2efff}
.vip-form__field input:focus,.vip-form__field select:focus{outline:none;border-color:#7c5cff}
.vip-form__agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;color:#a9a5c2;line-height:1.5}
.vip-form__agree input{width:18px;height:18px;margin-top:2px;flex:none}
.vip-form__submit{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.vip-form__submit .hint{color:#8a86a8}
.vip-form--row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.vip-form--row .btn{margin-bottom:0}
@media (max-width:820px){
  .vip-grid{grid-template-columns:1fr}
  .vip-hero__inner{padding:48px 20px 40px}
  .vip-access{grid-template-columns:1fr}
  .vip-form--row{grid-template-columns:1fr}
  .vip-form--row .btn{width:100%}
}
/* ---------- Обложка раздела «Бусельдорфф» ---------- */

/* Рамка на месте картинки: размеры совпадают с будущей картинкой,
   поэтому в день загрузки фото блоки под ним не сдвинутся. */
.busel-cover{margin:24px 0 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);aspect-ratio:16/9;display:block}
.busel-cover--wide{aspect-ratio:21/9}
.busel-cover img,.busel-cover>span{width:100%;height:100%;display:block}
.busel-cover img{object-fit:cover}
.busel-cover--empty{display:grid;place-items:center;border:0;color:var(--muted);font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,rgba(255,255,255,.04) 12px 24px)}
@media (max-width:640px){ .busel-cover,.busel-cover--wide{aspect-ratio:4/3} }

/* Три подраздела карточками в ряд: на телефоне — в столбик */
.busel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
/* «Все разделы»: картинка справа, как у «Бусельдорффа». Пустое место — пунктиром,
   чтобы было видно, что сюда кладут фото. */
.busel-cover--side.is-empty{display:grid;place-items:center;border-style:dashed;
  color:var(--muted);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,rgba(255,255,255,.04) 12px 24px)}

@media (max-width:900px){ .busel-cards{grid-template-columns:1fr} }

/* ---------- Показ блюд партиями ---------- */
.eda-list .recipe.is-more{display:none}
.eda-more{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.eda-more .hint{margin-left:auto}
@media (max-width:520px){
  .eda-more .hint{margin-left:0;width:100%}
}

/* ---------- «Фраза дня» / «Анекдот дня»: пустое поле и кнопка ---------- */
.reveal{position:relative;margin-top:26px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(246,100,9,.10),rgba(255,255,255,.03));padding:34px 30px;text-align:center}
.reveal--locked{border-style:dashed;border-color:#5b4bd6;background:rgba(124,92,255,.07)}
.reveal__hint{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 18px}
.reveal__btn{padding:16px 34px;font-size:17px}
.reveal__text{font-size:clamp(20px,2.8vw,28px);line-height:1.45;font-weight:600;margin:0 0 10px;white-space:pre-line}
.reveal__by{color:var(--muted);font-size:14px;margin:0 0 14px}
.reveal__done{font-size:15px;color:var(--accent-2);font-weight:600;margin:0 0 16px}
.reveal__share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  padding-top:14px;border-top:1px solid var(--line)}
.reveal__share .hint{width:100%;text-align:center}
.reveal.is-open .reveal__btn{display:none}
.busel-joke__teaser{color:var(--muted);font-size:17px;line-height:1.6;margin:0 0 18px}
/* ---------- «Еда»: сначала выбор категории, потом блюда ---------- */
.eda-filters{margin-top:26px}
.eda-filters__note{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 14px}
.eda-filters__note strong{color:var(--text)}
.eda-wait{color:var(--muted);text-align:center;font-size:15px}
/* Выбрали категорию — фильтры остаются на экране и липнут под шапкой:
   переключить блюдо можно, не возвращаясь наверх. */
.eda-filters--sticky{position:sticky;top:76px;z-index:20;margin:22px 0 0;padding:14px;
  border:1px solid var(--line);border-radius:16px;background:rgba(32,29,27,.96);backdrop-filter:blur(8px)}
.eda-filters--sticky .eda-pick__chips{gap:10px}
.eda-filters--sticky .eda-pick__chip{padding:11px 14px;border-radius:12px}
.eda-filters--sticky .eda-pick__chip-title{font-size:15px}
.eda-pick__chip.is-active{border-color:var(--accent);background:rgba(255,255,255,.06)}
.eda-pick__chip.is-active .eda-pick__chip-title{color:var(--accent-2)}
.eda-pick__hint{text-align:center;color:var(--muted);font-size:17px;line-height:1.6;margin:0 0 22px}
.eda-pick__chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.eda-pick__chip{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);
  border-radius:14px;background:var(--bg-2);color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s}
.eda-pick__chip:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none}
.eda-pick__chip-title{font-weight:700;font-size:17px}
.eda-pick__chip-meta{font-size:13px;color:var(--muted)}

/* Рамка на месте картинки: место зарезервировано, поэтому блоки не прыгают */
.busel-cover--empty{display:grid;place-items:center;border-style:dashed;color:var(--muted);
  font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.busel-cover--empty::before{content:""}

/* ---------- Админка: слоты картинок ---------- */
.busel-imgline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 4px;padding:12px 16px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-2);font-size:14px}
.busel-imgline.is-ok{border-color:#2ecc71}
.slot{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line)}
.slot:last-of-type{border-bottom:0}
.slot__preview{height:120px;border-radius:12px;border:1px solid var(--line);background:var(--bg-3);
  display:grid;place-items:center;overflow:hidden}
.slot__preview img{width:100%;height:100%;object-fit:cover}
.slot__placeholder{color:var(--muted);font-size:12px;text-align:center;padding:0 10px;line-height:1.4}
.slot__title{font-weight:700}
@media (max-width:640px){
  .slot{grid-template-columns:1fr}
  .slot__preview{height:150px}
}
/* Фильтры «Еды» на узком экране не липнут: иначе занимают пол-экрана. */
@media (max-width:900px){
  .eda-filters--sticky{position:static;background:none;border:0;padding:0;
    backdrop-filter:none;margin-top:24px}
}
/* ---------- «Бусельдорфф»: фото вбок, чтобы не сдвигать смысл вниз ---------- */
.busel-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:start;margin-bottom:26px}
.busel-hero__text{min-width:0}
.busel-hero__text .h1{margin-bottom:12px}
.busel-cover--side{margin:0;aspect-ratio:4/3}
@media (max-width:900px){
  .busel-hero{grid-template-columns:1fr;gap:20px}
  .busel-cover--side{aspect-ratio:16/9;max-height:240px}
  .busel-cover--side img{object-position:center 30%}
}
@media (max-width:560px){ .busel-cover--side{max-height:190px} }

/* ---------- PWA: приглашение поставить сайт на экран ----------
   Два вида: подвал (тихая строка) и подробный блок с объяснением — он стоит
   на главной, в каталоге, в конце выпуска, в играх, в клубе и в «Все разделы».
   В режиме «только чтение» блок внутри .series скрыт правилом .reading-mode. */
.pwa-install{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0 4px;
  border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.pwa-install[hidden]{display:none}
.pwa-install .btn{flex:none}
.pwa-install__text{display:grid;gap:4px;flex:1 1 240px;min-width:0}
.pwa-install__text strong{color:var(--text);font-size:16px;line-height:1.25}
.pwa-install__text small{color:var(--muted);font-size:14px;line-height:1.4}
.pwa-install__help{flex-basis:100%;margin:0}

/* Блок установки внутри страницы.
   Решение владельца 26.09.2026: раньше блок шёл полосой во всю ширину, с одними
   верхней и нижней границами, и выбивался из оформления — соседние блоки
   (например «Кто ты в подворотнях») оформлены карточкой. Теперь блок
   установки сделан такой же карточкой: тот же фон, та же рамка, оранжевая
   Карточка надета на внутренний контейнер, а не на саму секцию. Это важно:
   секция .pwa растянута на всю ширину окна, а соседние карточки лежат внутри
   .container и уже на 40px уже (1180 минус отступы по 20). Если одеть карточку
   на секцию, её рамка выходит ровно на 40px шире соседних — владелец это сразу
   заметил и попросил поправить. */
.pwa{margin-top:34px}
.pwa[hidden]{display:none}
.pwa__inner{background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--radius);padding:24px 26px}
.pwa__inner{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:start}
.pwa__art{position:relative;display:grid;place-items:center;padding-top:6px}
.pwa__art img{position:relative;z-index:1;width:96px;height:96px;border-radius:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.pwa__screen{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:172px;
  border:2px solid var(--line);border-radius:22px;background:var(--bg-2)}
.pwa__screen::after{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:38px;height:5px;border-radius:3px;background:var(--line)}
.pwa__body{min-width:0}
.pwa__title{margin:0 0 12px;font-size:clamp(24px,3vw,32px);font-weight:900;line-height:1.15}
.pwa__lead{margin:0 0 18px;color:var(--muted);font-size:16.5px;line-height:1.6;max-width:62ch}
.pwa__list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.pwa__list li{position:relative;padding:12px 14px 12px 42px;border-radius:13px;
  background:var(--bg-2);border:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--muted)}
.pwa__list li::before{content:"✓";position:absolute;left:14px;top:12px;width:19px;height:19px;
  border-radius:50%;background:rgba(246,100,9,.16);color:var(--accent-2);
  font-size:12px;font-weight:800;line-height:19px;text-align:center}
.pwa__list strong{color:var(--text)}
.pwa__actions{margin-bottom:14px}
.pwa__note{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.55;max-width:70ch}
.pwa__how{border-top:1px solid var(--line);padding-top:12px;max-width:760px}
.pwa__how summary{cursor:pointer;color:var(--accent-2);font-weight:700;font-size:15px}
.pwa__how summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pwa__how ul{margin:12px 0 8px;padding-left:22px;display:grid;gap:6px;
  color:var(--muted);font-size:14.5px;line-height:1.55}
/* Мелкая подпись под приложением: Android предупреждает, что веб-приложение
   «собрано под более раннюю версию». Это говорит сам телефон, а не сайт,
   поэтому предупреждаем заранее и коротко. */
.pwa__fine{margin:12px 0 0;max-width:72ch;font-size:12.5px;line-height:1.5;color:var(--muted);opacity:.85}
.pwa__help{display:block;margin-top:10px}
.pwa--reader{margin:26px 0;padding:26px 24px;border-radius:20px;border:1px solid var(--line);
  background-color:var(--bg-2);background-image:linear-gradient(180deg,rgba(246,100,9,.07),rgba(255,255,255,.02))}
.pwa--reader .pwa__inner{grid-template-columns:110px minmax(0,1fr);gap:20px}
.pwa--reader .pwa__art img{width:72px;height:72px;border-radius:18px}
.pwa--reader .pwa__screen{width:90px;height:130px;border-radius:18px}
.pwa--reader .pwa__title{font-size:22px}
.pwa--reader .pwa__list{grid-template-columns:1fr;gap:6px;margin-bottom:16px}
.pwa--reader .pwa__list li{font-size:14px;padding:9px 12px 9px 38px}
.pwa--reader .pwa__list li::before{top:9px}
.pwa--reader .pwa__lead{font-size:15.5px;margin-bottom:14px}
@media (max-width:900px){
  .pwa__inner{grid-template-columns:1fr;gap:20px}
  .pwa__art{order:2}
  .pwa__list{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pwa{padding:32px 0}
  .pwa--reader{padding:20px 18px}
  .pwa--reader .pwa__inner{grid-template-columns:1fr}
  .pwa--reader .pwa__art{text-align:center}
  .pwa__art img{width:76px;height:76px}
}

/* ---------- Игровая: три тестовые механики ---------- */
.play-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 18px}
.play-tab{padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);
  color:var(--muted);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.play-tab:hover{border-color:var(--accent);color:var(--accent-2)}
.play-tab.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.play-tab__mark{display:inline-block;margin-left:4px;padding:2px 5px;border-radius:5px;background:rgba(124,92,255,.22);color:#c9b8ff;font-size:10px;vertical-align:middle}
.play-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:24px}
.play-panel[hidden]{display:none}
.play-panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.play-progress{color:var(--accent-2);font-size:14px;font-weight:700;white-space:nowrap}
.play-message{min-height:24px;margin:14px 0 0;color:var(--accent-2);font-size:15px}
.play-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.play-actions .play-message{margin:0}
.cat-stage{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--bg-3);
  cursor:crosshair;line-height:0}
.cat-stage img{display:block;width:100%;opacity:0;transition:opacity .2s}
.cat-stage img.is-ready{opacity:1}
.cat-stage.is-hit{outline:3px solid #2ecc71;outline-offset:-3px}
.cat-stage.is-miss{animation:play-shake .28s ease}
@keyframes play-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:560px;margin-top:18px}
.memory-card{aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:var(--bg-3);color:var(--text);
  font-size:30px;line-height:1;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.memory-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.memory-card.is-open{background:var(--bg);border-color:var(--accent-2)}
.memory-card.is-matched{background:rgba(46,204,113,.16);border-color:#2ecc71;cursor:default}
.memory-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:11px}
.play-locked{display:flex;align-items:flex-start;gap:16px;max-width:680px;margin-top:20px;padding:20px;
  border:1px dashed #5b4bd6;border-radius:14px;background:rgba(124,92,255,.08)}
.play-locked__icon{font-size:32px;line-height:1}
.play-locked .muted{margin:6px 0 14px}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.choice-card{display:grid;gap:6px;padding:18px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg-3);color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:.15s}
.choice-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.choice-card.is-selected{border-color:var(--accent);background:rgba(246,100,9,.12)}
.choice-card span{font-size:26px}
.choice-card strong{font-size:16px}
.choice-card small{color:var(--muted);font-size:13px;line-height:1.4}
@media (max-width:640px){
  .play-panel{padding:18px}
  .play-tabs{gap:6px}
  .play-tab{padding:10px 12px;font-size:14px}
  .memory-grid{gap:7px}
  .memory-card{font-size:24px}
  .choice-grid{grid-template-columns:1fr}
}
/* Якоря: липкая шапка не должна накрывать цель перехода */
#eda-list,.catnav,.busel-cards,.reveal,.eda-filters{scroll-margin-top:84px}

/* ===== ПЛЕЙЛИСТЫ: решение владельца от 27.09.2026 =====
   Плеер — отдельное окошко снизу, по умолчанию пустое. Плейлисты — блоки
   внизу под контентом, стоят рядом. Внутри блока: обложка, название, подпись
   мелким шрифтом «Бусельдорфф одобряет» и только названия песен. */
/* 30.09.2026. Три альбома в ряд — решение владельца. Две колонки давали блок
   шириной почти в километр, и картинка становилась полотном во всю страницу.
   Перенос на две колонки — 1100px, а не 900: в три колонки описание альбома
   должно помещаться, а не превращаться в столбик из одного слова. Проверено:
   на 1920 три колонки по 371px, описание 333px идёт четырьмя строками; на
   1000px три колонки дали бы подписи 84px и двадцать строк. */
.pls{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
@media (max-width:1100px){ .pls{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .pls{grid-template-columns:1fr} }
.pls__box{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pls__box.is-on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
/* 30.09.2026. Правило .pls__box--mine{border-style:dashed} УБРАНО по жалобе
   владельца: «мой плейлист в какой-то пунктирной обводке, оформление должно быть
   как основного плейлиста». Пунктир ничего не значил — в нём не было ни задумки,
   ни упоминания в правилах, он просто стоял в стилях с момента появления блоков.
   Раз «Мой плейлист» теперь не отличается от остальных, оформление у всех
   альбомов одинаковое: сплошная рамка var(--line), скругление var(--radius).
   Отличие остаётся по содержимому, а не по рамке. */
.pls__box--empty{opacity:.92}
/* Обложка альбома. 30.09.2026: 16:9 во всю ширину блока, сверху. Владелец
   выбрал это после сравнения пяти вариантов: картинка даёт атмосферу и при
   этом описание под ней получает всю ширину блока, а не теснится рядом.
   Картинка приглушена и притемнена — по замечанию владельца «фонят, а не
   создают атмосферу»: насыщенность и яркость срезаны, поверх мягкая
   растушёвка вниз, чтобы кадр не кончался стеной. */
.pls__cover{width:100%;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(246,100,9,.22),rgba(246,100,9,0) 58%),
    linear-gradient(180deg,var(--bg-3),var(--bg-2));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex:none}
.pls__cover::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.42))}
.pls__cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:var(--accent);opacity:.6}
.pls__letter{font-size:clamp(38px,7vw,56px);font-weight:800;color:var(--muted);opacity:.85;
  line-height:1;text-transform:uppercase}
.pls__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Смещение окна обрезки вверх. 30.09.2026, жалоба владельца: «у картинки
     верх обрезает». Обложки альбомов 4:3 и 5:4, рамка 16:9 шире кадра, и
     object-fit:cover срезает сверху и снизу. Померил: для 925x766 в рамке
     333x187 срезается 88 пикселей, поровну 44 и 44. При 30% сверху
     срезается 26, снизу 62: верх кадра уцелел, уходит передний план —
     так с обложками и надо. Совсем без обрезки не выйдет: 1:1 в 16:9
     всегда теряет треть высоты. Целый кадр — если грузить картинку 16:9. */
  object-position:center 30%;
  filter:saturate(.62) brightness(.74) contrast(1.05)}
.pls__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.pls__title{background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--text);
  font:inherit;font-size:19px;font-weight:800;text-align:left;line-height:1.2}
.pls__title:hover{color:var(--accent-2)}
.pls__box.is-on .pls__title{color:var(--accent-2)}
.pls__sign{font-size:12px;color:var(--muted);opacity:.85;line-height:1.3}
.pls__note{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.pls__hint{margin:0;font-size:13px;color:var(--muted);line-height:1.5;
  border-left:3px solid var(--line);padding-left:10px}
/* Список песен альбома.
   30.09.2026, решение владельца: «блок под песни должен быть сразу на 4, и пусть
   он будет не заполнен». Высота фиксированная — четыре строки, независимо от
   числа песен. Отсюда же высота строки 46px, померил в браузере: 4x46 плюс три
   промежутка по 2px равно 190px.
   align-content:start — песни прижаты к верху, и если их меньше четырёх, снизу
   остаётся пустое место, а не растянутые на весь блок строки. Так и просил:
   «пусть он будет не заполнен».
   Прокрутка: песен больше четырёх — список листается, и в самом низу, после
   последней песни, выезжает фраза-конец альбома.
   overscroll-behavior:contain — без него колесо в конце списка продолжает
   листать страницу, и до фразы не домотать. */
.pls__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;align-content:start;
  height:190px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.pls__list::-webkit-scrollbar{width:8px}
.pls__list::-webkit-scrollbar-track{background:transparent}
.pls__list::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.pls__list::-webkit-scrollbar-thumb:hover{background:var(--accent)}
/* Заглушка пустого альбома: фото и текст, пока песен нет. Текст и фото
   заводит владелец в панели (ph_text и ph_cover в реестре альбомов). */
.pls__ph{position:relative;border:1px dashed var(--line);border-radius:12px;
  overflow:hidden;background:var(--bg-3)}
.pls__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.pls__ph p{position:relative;margin:0;padding:14px 16px;font-size:14px;line-height:1.55;
  color:var(--muted);text-align:center}
/* Фраза в конце альбома. 30.09.2026. Последняя строка ПРОКРУЧИВАЕМОГО списка,
   а не элемент рядом с ним: фраза должна приезжать последней строкой, когда
   домотать список до конца, и служить обозначением конца альбома. Позиция
   static именно поэтому — position:sticky прижал бы её к низу окна списка, и
   она выглядела бы как приклеенная, а не как конец. */
.pls__tail{list-style:none;margin:0;padding:12px 12px 4px;font-size:13px;line-height:1.5;
  color:var(--muted);border-top:1px solid var(--line);text-align:center}
.pls__row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;
  background:var(--bg-3);min-width:0}
.pls__row.is-playing{background:var(--bg-4)}
.pls__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.pls__len{flex:none;font-size:12.5px;color:var(--muted)}
.pls__play{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--text);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0}
.pls__play:hover{border-color:var(--accent);color:var(--accent-2)}
.pls__play.is-active{border-color:var(--accent);color:var(--accent);background:rgba(246,100,9,.12)}
.pls__add{flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.pls__add:hover{border-color:var(--accent);color:var(--accent-2)}
.pls__add.is-on{border-color:var(--accent);color:var(--accent-2);background:rgba(246,100,9,.12)}
/* Кнопка «Очистить» в панели плеера. На телефоне остальные ссылки панели
   прячутся, а эта остаётся: без неё нельзя вернуть плеер в пустое состояние.
   Владелец 28.09.2026: кнопка выглядела как серая сноска, а должна быть
   в формате сайта — скруглённая, с белым текстом. Оранжевый под запрет:
   оранжевый у нас означает главное действие, а очистка плейлиста им не
   является. Поэтому рамка и белый текст, оранжевый появляется только при
   наведении, как у всех остальных кнопок сайта.
   Шрифт наследуется обязательно: без font:inherit кнопка рисуется
   системным шрифтом и отличается от всех остальных кнопок панели. */
.pdvbar__clear{font:inherit;font-size:13px;font-weight:600;line-height:1.25;
  background:transparent;border:1px solid var(--line);border-radius:30px;
  padding:8px 16px;color:var(--text);cursor:pointer;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s}
.pdvbar__clear:hover{border-color:var(--accent);color:var(--text);background:rgba(246,100,9,.12)}
.pdvbar__clear:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
@media (max-width:820px){
  .pdvbar__clear{display:inline-flex}
  .pls__row{padding:8px}
}
.pls__row.is-current{outline:1px solid rgba(246,100,9,.45);outline-offset:-1px}