/* =====================================================================
   Library — оформление «Кино»: фото на весь экран, всё управление поверх,
   плавающее нижнее меню с кнопкой «+» по центру.

   Оптимизация (важно для встроенного браузера Telegram на iPhone):
   - никаких backdrop-filter (размытие под элементом пересчитывается на каждом кадре прокрутки);
   - анимации только transform/opacity — их считает видеокарта, без перерисовки страницы;
   - плитки сеток с content-visibility:auto — невидимые браузер не рисует;
   - prefers-reduced-motion выключает все анимации.
   ===================================================================== */
:root{
  --bg:#000;--panel:#121214;--panel-2:#1b1b1f;--panel-3:#26262c;
  --line:#ffffff17;--line-2:#ffffff2b;
  --ink:#fff;--muted:#ffffffa6;--faint:#ffffff6b;
  --accent:#7c5cff;--accent-2:#9b83ff;--accent-ink:#fff;
  --like:#ff3b5c;--gold:#ffd36b;--gold-bg:#3a2e0e;--red:#ff6b6b;--ok:#5ee08f;
  --nav-h:58px;--nav-gap:10px;
  --nav-total:calc(var(--nav-h) + var(--nav-gap) + env(safe-area-inset-bottom));
  --ease:cubic-bezier(.2,.8,.2,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg);color-scheme:dark;-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
[hidden]{display:none!important}
a{color:inherit}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;pointer-events:none}
.muted{color:var(--faint)}
.danger{color:var(--red)}

/* ---------------- Каркас ---------------- */
main{height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:0 16px calc(var(--nav-total) + 24px);-webkit-overflow-scrolling:touch}
main.enter>*{animation:fadeUp .24s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(min-width:801px){main{max-width:980px;margin:0 auto}}

/* Шапка страницы (паки, модерация, новый пост). */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 2px 14px}
.page-head h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-.6px}
.page-head p{margin:4px 0 0;color:var(--faint);font-size:13px}
.page-head p:empty{display:none}
.kicker{display:none}
.counter{text-align:right}
.counter strong{display:block;font-size:20px;font-weight:600}
.counter span{color:var(--faint);font-size:12px}
.counter strong:empty+span,.counter span:empty{display:none}

/* Поиск — только в «Паках». */
.filters{display:none}
body[data-mode="packs"] .filters{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:5;padding:8px 0 12px;background:var(--bg)}
.search{flex:1;min-width:0;height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:20px;background:var(--panel-2);color:var(--faint)}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font-size:15px}
.search input::placeholder{color:var(--faint)}
.search span{font-size:18px}
.range{display:flex;align-items:center;font-size:0}
.range select{height:40px;padding:0 12px;border:0;border-radius:20px;background:var(--panel-2);color:var(--ink);font-size:14px}
.pack-number-filter{display:flex;flex-wrap:nowrap;align-items:center;flex-basis:100%;gap:6px;overflow-x:auto;margin:0;padding:0 0 2px;scrollbar-width:none}
.pack-number-filter::-webkit-scrollbar{display:none}
.pack-number-filter .chip{min-width:44px;padding:8px 12px}
.pack-number-label{flex:none;padding-right:4px;color:var(--faint);font-size:12px}

/* ---------------- Нижнее меню: плавающая панель, «+» по центру ---------------- */
.bottom-nav{position:fixed;z-index:30;left:var(--nav-gap);right:var(--nav-gap);bottom:calc(var(--nav-gap) + env(safe-area-inset-bottom));height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-around;padding:0 6px;border-radius:20px;background:#17171bf2;border:1px solid var(--line);box-shadow:0 10px 30px #0009}
@media(min-width:801px){.bottom-nav{left:50%;right:auto;width:440px;transform:translateX(-50%)}}
.bottom-nav button{position:relative;flex:1;height:100%;display:grid;place-items:center;border:0;background:none;color:#ffffff7a;transition:color .2s}
.bottom-nav button .ic{width:26px;height:26px;transition:transform .25s var(--ease)}
.bottom-nav button.active{color:#fff}
.bottom-nav button.active .ic{animation:navBump .35s var(--ease)}
.bottom-nav button::after{content:"";position:absolute;bottom:7px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:2px;background:#fff;opacity:0;transform:scale(0);transition:opacity .2s,transform .25s var(--ease)}
.bottom-nav button.active::after{opacity:1;transform:none}
.bottom-nav button:active .ic{transform:scale(.88)}
@keyframes navBump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------------- Лента «как в ТТ» (основная и «Любимое») ---------------- */
body[data-mode="photos"] main,body[data-mode="favfeed"] main{max-width:none;padding:0;scroll-snap-type:y mandatory;scrollbar-width:none}
body[data-mode="photos"] main::-webkit-scrollbar,body[data-mode="favfeed"] main::-webkit-scrollbar{display:none}
body[data-mode="photos"] .page-head,body[data-mode="favfeed"] .page-head{display:none}
.tt-item{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;background:#000;overflow:hidden;contain:strict}
.tt-item>img,.tt-item>video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.tt-item>img:not([src]){visibility:hidden}
/* В ленте фото стоит НАД нижним меню (меню плавает поверх нижней части экрана). Фото не во весь экран
   по высоте — центрируется в оставшейся области, а не уходит под меню. В просмотрщике меню нет — там на весь экран. */
#feed .tt-item>img,#feed .tt-item>video{height:calc(100% - var(--nav-total))}
/* Затемнение снизу — под кнопками и меню (статичное, рисуется один раз). */
.tt-item::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,#000a 70%,#000d);pointer-events:none}
.tt-item.is-disliked>img{opacity:.25}
.tt-item.tt-empty{display:grid;place-items:center;padding:0 24px}
.tt-item.tt-empty::after{display:none}
@media(min-width:801px){.tt-item{max-width:560px;margin:0 auto}}
.tt-actions{position:absolute;z-index:2;right:6px;bottom:calc(var(--nav-total) + 12px);display:flex;flex-direction:column;align-items:center;gap:6px}
.stage-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:52px;min-height:50px;padding:4px 0;border:0;background:none;color:#fff}
.stage-action .ic{width:32px;height:32px;stroke-width:1.8;filter:drop-shadow(0 1px 3px #0009);transition:transform .2s var(--ease),color .2s}
.stage-action small{font-size:12px;font-weight:600;text-shadow:0 1px 3px #000c}
.stage-action:active .ic{transform:scale(.85)}
.stage-action.is-on{color:#fff}
.stage-action[data-act="like"].is-on{color:var(--like)}
.stage-action[data-act="like"].is-on .ic{fill:currentColor}
.stage-action.dislike.is-on{color:var(--red)}
.stage-action[data-act="fav-pack"].is-on{color:var(--gold)}
.stage-action[data-act="fav-pack"].is-on .ic{fill:currentColor}
.stage-action.locked{color:#ffffffa0}
.stage-action.pop .ic{animation:likePop .45s var(--ease)}
@keyframes likePop{0%{transform:scale(1)}30%{transform:scale(1.35)}55%{transform:scale(.9)}100%{transform:scale(1)}}
/* Большое сердце при лайке (двойной тап или кнопка). */
.heart-burst{position:absolute;z-index:3;width:110px;height:110px;margin:-55px 0 0 -55px;color:var(--like);pointer-events:none;animation:burst .8s var(--ease) forwards}
.heart-burst .ic{width:100%;height:100%;fill:currentColor;stroke:none;filter:drop-shadow(0 4px 14px #0008)}
@keyframes burst{0%{opacity:0;transform:scale(.3) rotate(-12deg)}25%{opacity:1;transform:scale(1.12) rotate(4deg)}45%{transform:scale(.96) rotate(0)}75%{opacity:1;transform:scale(1) translateY(-6px)}100%{opacity:0;transform:scale(1.05) translateY(-40px)}}
.tt-sound{position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top));right:12px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#0008;color:#fff}
.tt-sound .ic{width:22px;height:22px}
/* Видео: полоса перемотки над меню (тянуть пальцем), значок паузы/×2 по центру. */
.vbar{position:absolute;z-index:3;left:0;right:0;bottom:var(--nav-total);height:22px;display:flex;align-items:center;padding:0 12px;touch-action:none;cursor:pointer}
.vbar-track{position:relative;flex:1;height:3px;border-radius:2px;background:#ffffff40;overflow:hidden;transition:height .15s}
.vbar-fill{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.vbar.active .vbar-track,.tt-item.is-paused .vbar-track{height:6px}
.photo-dialog .vbar{bottom:calc(6px + env(safe-area-inset-bottom))}
.vstate{position:absolute;z-index:3;left:50%;top:50%;display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#0008;color:#fff;font-size:22px;opacity:0;pointer-events:none}
.vstate .ic{width:34px;height:34px;fill:currentColor;stroke:none}
.vstate.show{animation:vstate .7s var(--ease) forwards}
.tt-item.is-fast .vstate{animation:none;opacity:1}
.tt-item.is-paused .vstate{animation:none;opacity:1}
@keyframes vstate{0%{opacity:0;transform:scale(.7)}20%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(1.1)}}
/* Шапка «Любимого»: подпись и переключатель порядка поверх фото. */
.fav-top{display:none}
body[data-mode="favfeed"] .fav-top{position:fixed;z-index:20;top:calc(12px + env(safe-area-inset-top));left:14px;right:64px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;pointer-events:none}
.fav-top b{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:700;text-shadow:0 1px 4px #000c}
.fav-top b .ic{width:20px;height:20px;color:var(--like);fill:currentColor;stroke:none}
.fav-top button{pointer-events:auto;display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:0;border-radius:14px;background:#0009;color:#fff;font-size:12px;white-space:nowrap}
.fav-top button .ic{width:15px;height:15px}
.sentinel{display:none}
body[data-mode="photos"] .sentinel,body[data-mode="favfeed"] .sentinel{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;padding-bottom:var(--nav-total);color:var(--faint);font-size:13px}
.sentinel.done .spinner{display:none}
.spinner{width:18px;height:18px;border:2px solid #ffffff26;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-block{display:grid;place-items:center;min-height:200px}

/* ---------------- Пусто ---------------- */
.empty{grid-column:1/-1;padding:48px 20px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.empty strong{display:block;margin-bottom:4px;color:var(--ink);font-size:17px}

/* ---------------- Сетки: фото, паки, мои посты ---------------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0 -16px}
@media(min-width:801px){.grid{grid-template-columns:repeat(5,minmax(0,1fr));margin:0}}
.grid-photo{position:relative;aspect-ratio:3/4;border:0;padding:0;background:var(--panel);overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 160px}
.grid-photo img,.grid-photo video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.grid-badge{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0009;color:#fff;font-size:10px}
.grid-photo img:not([src]),.pack-tile img:not([src]),.dialog-photo img:not([src]),.mod-thumb img:not([src]),.post-tile img:not([src]){visibility:hidden}
img{animation:fadeIn .3s}

.pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:801px){.pack-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
.pack-tile{position:relative;min-width:0;border-radius:14px;overflow:hidden;background:var(--panel);content-visibility:auto;contain-intrinsic-size:auto 260px}
.pack-tile.is-disliked{opacity:.5}
.pack-tile .cover{position:relative;display:block;width:100%;aspect-ratio:3/4;border:0;padding:0;background:var(--panel-2)}
.pack-tile .cover img,.pack-tile .cover video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pack-tile .cover::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,#000c);pointer-events:none}
.pack-tile .count{position:absolute;z-index:1;left:10px;bottom:8px;color:#ffffffd0;font-size:12px}
.pack-tile .corner{position:absolute;z-index:1;left:8px;top:8px}
.pack-tile .corner:empty{display:none}
.pack-tile .meta{position:absolute;z-index:1;left:10px;right:10px;bottom:26px;pointer-events:none}
.pack-tile .meta strong{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000a}
.pack-tile .meta small{display:none}
.pack-tile .tile-actions{position:absolute;z-index:2;top:6px;right:6px;display:flex;gap:4px}
.icon-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#000a;color:#fff}
.icon-btn .ic{width:17px;height:17px}
.icon-btn.is-on{color:var(--like)}
.icon-btn.is-on .ic{fill:currentColor}
.icon-btn.danger{color:var(--red)}
.icon-btn.vip-toggle{color:#ffffff9a}
.icon-btn.vip-toggle.is-vip{color:var(--gold)}
.icon-btn.vip-toggle.is-vip .ic{fill:currentColor}
.cover-lock{display:grid;place-items:center;align-content:center;gap:6px;width:100%;height:100%;color:var(--gold)}
.cover-lock .ic{width:30px;height:30px}
.cover-lock small{font-size:11px;color:var(--faint)}
.vip-badge{display:inline-block;padding:2px 7px;border-radius:7px;background:var(--gold);color:#3a2a00;font-size:11px;font-weight:700}
.packs-more{display:grid;place-items:center;min-height:80px}
.packs-more.done .spinner{display:none}

/* Мои посты: обложка + лайки/просмотры. */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0 -16px}
@media(min-width:801px){.post-grid{grid-template-columns:repeat(5,minmax(0,1fr));margin:0}}
.post-tile{position:relative;aspect-ratio:3/4;border:0;padding:0;background:var(--panel-2);overflow:hidden;color:#fff;content-visibility:auto;contain-intrinsic-size:auto 160px}
.post-tile:disabled{cursor:default}
.post-tile img{display:block;width:100%;height:100%;object-fit:cover}
.post-tile::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#000b);pointer-events:none}
.post-empty{display:grid;place-items:center;width:100%;height:100%;color:var(--faint)}
.post-stats{position:absolute;z-index:1;left:6px;right:6px;bottom:6px;display:flex;gap:10px;font-size:12px;font-weight:600}
.post-stats span{display:flex;align-items:center;gap:3px}
.post-stats .ic{width:14px;height:14px}
.post-count{position:absolute;z-index:1;top:6px;right:6px;display:flex;align-items:center;gap:3px;padding:2px 6px;border-radius:8px;background:#0009;font-size:11px}
.post-count .ic{width:13px;height:13px}
.post-status{position:absolute;z-index:1;top:6px;left:6px;padding:2px 7px;border-radius:8px;font-size:11px;font-weight:600}
.post-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 14px;padding:13px;border:0;border-radius:14px;background:var(--accent);color:#fff;font-size:15px;font-weight:600}
.post-new .ic{width:20px;height:20px}

/* ---------------- Профиль ---------------- */
.profile-head,.profile-tabs{display:none}
/* Вкладки профиля — шапка с VIP и вкладками; внутренние страницы (настройки, скрытое, новый пост) — заголовок с «Назад». */
body[data-mode="liked_photos"] .page-head,body[data-mode="my_posts"] .page-head,body[data-mode="liked_packs"] .page-head{display:none}
body[data-mode="liked_photos"] .profile-head,body[data-mode="my_posts"] .profile-head,body[data-mode="liked_packs"] .profile-head{position:relative;display:block;padding:calc(18px + env(safe-area-inset-top)) 0 4px}
.back-btn{display:none}
body[data-mode="settings"] .back-btn,body[data-mode="disliked"] .back-btn,body[data-mode="submit"] .back-btn{display:grid;place-items:center;flex-shrink:0;align-self:center;width:38px;height:38px;margin:0 -4px 0 -8px;padding:0;border:0;border-radius:50%;background:none;color:#fff}
.back-btn .ic{transform:rotate(180deg)}
body[data-mode="settings"] .page-head,body[data-mode="disliked"] .page-head,body[data-mode="submit"] .page-head{justify-content:flex-start;align-items:center;padding-top:calc(16px + env(safe-area-inset-top))}
body[data-mode="settings"] .page-head h1,body[data-mode="disliked"] .page-head h1,body[data-mode="submit"] .page-head h1{font-size:22px}
.profile-menu{position:absolute;top:calc(12px + env(safe-area-inset-top));right:-6px;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:none;color:#fff}
.profile-menu .ic{width:26px;height:26px}
.profile-menu:active{background:var(--panel-2)}
.ph-top{padding-right:40px}
.ph-top{display:flex;align-items:center;gap:14px}
.avatar{display:grid;place-items:center;flex-shrink:0;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff5c8a);color:#fff;font-size:24px;font-weight:700}
.profile-head h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px}
.profile-role{margin:3px 0 0;color:var(--faint);font-size:13px}
.vip-card{margin:16px 0 0;padding:14px;border-radius:16px;background:var(--panel)}
.vip-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vip-label{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600}
.vip-label .ic{width:20px;height:20px}
.vip-card.on .vip-label{color:var(--gold)}
.vip-until{color:var(--muted);font-size:14px;text-align:right}
.vip-buy{display:block;width:100%;margin-top:12px;padding:11px;border:0;border-radius:12px;background:#fff;color:#000;font-size:15px;font-weight:600;transition:transform .15s}
.vip-buy:active{transform:scale(.98)}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 6px;text-align:center}
.profile-stats b{display:block;font-size:19px;font-weight:700}
.profile-stats span{color:var(--faint);font-size:12px}

/* Вкладки профиля и модерации — «таблетки» с горизонтальной прокруткой. */
body[data-section="mod"] .mod-tabs{position:sticky;top:0;z-index:5;display:flex;gap:6px;margin:0 -16px 12px;padding:12px 16px 10px;overflow-x:auto;scrollbar-width:none;background:var(--bg)}
/* Вкладки профиля как в ТТ: три иконки во всю ширину, под активной — полоска, которая переезжает. */
body[data-mode="liked_photos"] .profile-tabs,body[data-mode="my_posts"] .profile-tabs,body[data-mode="liked_packs"] .profile-tabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);margin:6px -16px 3px;border-bottom:1px solid var(--line);background:var(--bg)}
.profile-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 9px;border:0;background:none;color:var(--faint);font-size:12px;font-weight:500;transition:color .2s}
.profile-tabs button .ic{width:24px;height:24px;transition:transform .25s var(--ease)}
.profile-tabs button::after{content:"";position:absolute;left:30%;right:30%;bottom:-1px;height:2px;border-radius:1px;background:#fff;transform:scaleX(0);transition:transform .25s var(--ease)}
.profile-tabs button.active{color:#fff}
.profile-tabs button.active::after{transform:none}
.profile-tabs button.active .ic{animation:navBump .35s var(--ease)}
.profile-tabs button[data-mode="liked_photos"].active .ic{color:var(--like);fill:currentColor}
.profile-tabs button[data-mode="liked_packs"].active .ic{color:var(--gold);fill:currentColor}
body[data-mode="my_posts"] .post-new,body[data-mode="liked_photos"] .fav-watch,body[data-mode="liked_packs"] .fav-watch{margin-top:10px}
/* Меню профиля (шторка). */
.menu-list{display:grid;margin:0 -4px;border-radius:16px;background:var(--panel-2);overflow:hidden}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font-size:16px;text-align:left}
.menu-item:last-child{border-bottom:0}
.menu-item span{flex:1}
.menu-item .ic{width:22px;height:22px;color:var(--muted)}
.menu-item .chev{width:18px;height:18px;color:var(--faint)}
.menu-item:active{background:var(--panel-3)}
.profile-tabs::-webkit-scrollbar,.mod-tabs::-webkit-scrollbar{display:none}
.mod-tabs{display:none}
.mod-tabs button{flex-shrink:0;height:34px;padding:0 14px;border:0;border-radius:17px;background:var(--panel-2);color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.mod-tabs button.active{background:#fff;color:#000}
.section-title{margin:18px 0 10px;color:var(--faint);font-size:13px;font-weight:600}
.section-title:first-child{margin-top:4px}
.section-title+.empty{padding:20px}

/* Настройки. */
.settings{display:grid;gap:14px;max-width:560px}
.settings fieldset{margin:0;padding:4px 14px;border:0;border-radius:16px;background:var(--panel)}
.settings legend{float:left;width:100%;padding:12px 0 2px;color:var(--faint);font-size:13px;font-weight:600}
.settings .opt{clear:both}
.opt{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.opt:last-child{border-bottom:0}
.opt input{flex-shrink:0;width:20px;height:20px;margin:0;accent-color:var(--accent)}
.opt b{display:block;font-size:15px;font-weight:500}
.opt small{display:block;margin-top:2px;color:var(--faint);font-size:13px;line-height:1.35}
.opt.is-locked{opacity:.5;cursor:not-allowed}
.opt.inline{border:0;padding:8px 0}
.settings-actions{display:flex;flex-wrap:wrap;gap:8px}
.settings-note{margin:0;color:var(--faint);font-size:13px;line-height:1.4}

/* ---------------- Кнопки ---------------- */
.dialog-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border:0;border-radius:12px;background:var(--panel-2);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;transition:transform .15s,background .2s}
.dialog-button:active{transform:scale(.97)}
.dialog-button .ic{width:18px;height:18px}
.dialog-button.primary{background:var(--accent);color:#fff}
.dialog-button.danger{color:var(--red)}
.dialog-button.is-liked{color:var(--like)}
.dialog-button.is-on{color:var(--red)}
.dialog-button:disabled{opacity:.45}
.fav-watch{display:flex;width:100%;margin:0 0 12px}
.likes-export-status{margin:-4px 0 12px;color:var(--muted);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.chip{padding:9px 12px;border:0;border-radius:12px;background:var(--panel-2);color:var(--muted);font-size:14px}
.chip.active{background:var(--gold-bg);color:var(--gold)}
.vip-price{margin:10px 0 0;color:var(--gold);font-size:17px;font-weight:700}

/* ---------------- Поля форм ---------------- */
.field{display:grid;gap:6px;color:var(--faint);font-size:13px}
.field input,.field select,.field textarea{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--ink);font-size:15px}
.field textarea{resize:vertical}
.field-row{display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.field-row .field{flex:1;min-width:110px}

/* ---------------- Новый пост ---------------- */
.file-pick{position:relative;display:grid;place-items:center;gap:8px;margin:4px 0 10px;padding:30px 16px;border:2px dashed #7c5cff80;border-radius:18px;color:var(--accent-2);font-size:15px;font-weight:600;text-align:center;cursor:pointer;transition:background .2s}
.file-pick:active{background:#7c5cff14}
.file-pick .ic{width:34px;height:34px}
.file-pick input{position:absolute;width:1px;height:1px;opacity:0}
.file-pick:focus-within{outline:2px solid var(--accent-2);outline-offset:2px}
.submit-form{max-width:560px}
.submit-list{display:grid;gap:8px;margin:0 0 12px}
.up-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:var(--panel);animation:fadeUp .2s var(--ease)}
.up-item.has-error{box-shadow:inset 0 0 0 1px #ff6b6b80}
.up-thumb{position:relative;flex-shrink:0;width:46px;height:58px;border-radius:8px;overflow:hidden;background:var(--panel-2)}
.up-thumb img,.up-thumb video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.up-body{flex:1;min-width:0}
.up-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-meta{margin-top:2px;color:var(--faint);font-size:12px}
.up-error{color:var(--red)}
.up-bar{height:4px;margin-top:6px;border-radius:2px;background:var(--panel-3);overflow:hidden}
.up-bar span{display:block;height:100%;background:var(--accent);transition:width .25s}
.up-item .icon-btn{background:var(--panel-2)}
.submit-send{width:100%;min-height:50px;font-size:16px;font-weight:600}

/* ---------------- Модерация ---------------- */
.mod-card{display:flex;gap:12px;padding:12px;margin-bottom:10px;border-radius:16px;background:var(--panel);content-visibility:auto;contain-intrinsic-size:auto 180px}
.mod-body{flex:1;min-width:0;display:grid;gap:8px}
.mod-title{font-size:15px;font-weight:600}
.mod-sub{color:var(--faint);font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.mod-comment{margin:0;padding:9px 11px;border-radius:10px;background:var(--panel-2);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.mod-actions{display:flex;flex-wrap:wrap;gap:6px}
.mod-thumb{position:relative;flex-shrink:0;align-self:flex-start;width:84px;aspect-ratio:3/4;border:0;border-radius:10px;padding:0;overflow:hidden;background:var(--panel-2)}
.mod-thumb img,.mod-thumb video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.empty-thumb{display:grid;place-items:center;color:var(--faint);font-size:12px;text-align:center}
.sub-media{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.sub-media .mod-thumb{width:70px}
.user-search{max-width:none;margin-bottom:12px}
.role-badge{padding:2px 8px;border-radius:8px;background:var(--panel-2);color:var(--muted);font-size:12px}
.role-moder{color:#8fc7ff}
.role-admin{color:#ff9c8b}
.status-chip,.post-status{background:#000b}
.st-pending{color:var(--gold)}
.st-ok{color:var(--ok)}
.st-bad{color:var(--red)}

/* ---------------- Окна ---------------- */
dialog{color:var(--ink)}
dialog::backdrop{background:#000b}
dialog[open]::backdrop{animation:fadeIn .2s}
/* Пак целиком: на телефоне — на весь экран, выезжает снизу. */
#pack-dialog{width:min(980px,100vw);max-width:none;height:100dvh;max-height:none;margin:0 auto;padding:0 16px 24px;border:0;background:var(--bg);overflow:auto;overflow-anchor:none}
#pack-dialog[open]{animation:sheetUp .3s var(--ease)}
@media(min-width:801px){#pack-dialog{height:auto;max-height:90vh;margin:auto;border-radius:20px;background:var(--panel)}}
.dialog-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 0 10px;background:inherit}
.dialog-head h2{margin:0;font-size:20px;font-weight:700;overflow-wrap:anywhere}
.round-button{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:var(--panel-2);color:#fff;font-size:22px;line-height:1}
.round-button .ic{width:20px;height:20px}
.dialog-actions{display:flex;flex-wrap:wrap;gap:6px}
#dialog-note{margin:10px 0 12px;color:var(--faint);font-size:13px}
.dialog-photos{--pack-columns:3;--pack-gap:3px;position:relative;margin:0 -16px}
@media(min-width:801px){.dialog-photos{--pack-columns:4;margin:0}}
.dialog-photo-row{position:absolute;inset-inline:0;height:var(--pack-row-height);display:grid;grid-template-columns:repeat(var(--pack-columns),minmax(0,1fr));gap:var(--pack-gap);contain:layout paint}
.dialog-photo{position:relative;min-height:0;min-width:0;border:0;padding:0;background:var(--panel-2);overflow:hidden}
.dialog-photo:focus-visible{outline-offset:-3px}
.dialog-photo img,.dialog-photo video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.dialog-photo.is-disliked{opacity:.35}
@keyframes sheetUp{from{opacity:.4;transform:translateY(40px)}to{opacity:1;transform:none}}

/* Просмотрщик: на весь экран, шапка поверх фото. */
.photo-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#000}
.photo-dialog[open]{display:block;animation:fadeIn .2s}
.photo-dialog-head{position:absolute;z-index:5;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 14px 24px;background:linear-gradient(#000b,transparent);pointer-events:none}
.photo-dialog-head>*{pointer-events:auto}
.photo-dialog-buttons{display:flex;gap:8px}
.photo-dialog-head h2{margin:0;font-size:16px;font-weight:600}
.photo-dialog-head span{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.photo-dialog-body{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;overflow-anchor:none}
.photo-dialog-body::-webkit-scrollbar{display:none}
#viewer-track{position:relative}
.photo-dialog .tt-item,.viewer-slot{height:var(--viewer-height,100dvh)}
.viewer-slot{position:absolute;inset-inline:0;scroll-snap-align:start;scroll-snap-stop:always;contain:strict}
.viewer-slot .tt-item{scroll-snap-align:none}
.photo-dialog .tt-actions{bottom:calc(24px + env(safe-area-inset-bottom))}
.photo-dialog .tt-sound{top:calc(64px + env(safe-area-inset-top))}
.photo-dialog-controls{display:none}
@media(min-width:801px){.photo-dialog-controls{position:absolute;z-index:5;right:18px;top:45%;display:grid;gap:8px}}

body.fav-clean .fav-top,body.fav-clean .bottom-nav,
.viewer-clean .photo-dialog-head,.viewer-clean .photo-dialog-controls,
.fav-clean #feed :is(.tt-actions,.tt-sound,.vbar,.vstate,.heart-burst),
.viewer-clean :is(.tt-actions,.tt-sound,.vbar,.vstate,.heart-burst){display:none}
.fav-clean #feed .tt-item,.viewer-clean .tt-item{max-width:none}
.fav-clean #feed .tt-item::after,.viewer-clean .tt-item::after{display:none}
.fav-clean #feed .tt-item>img,.fav-clean #feed .tt-item>video,
.viewer-clean .tt-item>img,.viewer-clean .tt-item>video{height:100%;opacity:1}
.fav-clean #main:focus,.viewer-clean .photo-dialog-body:focus{outline:none}

/* Шторка (формы): выезжает снизу. */
.sheet{width:min(520px,100vw);max-width:none;max-height:88dvh;margin:auto auto 0;padding:6px 18px calc(18px + env(safe-area-inset-bottom));border:0;border-radius:22px 22px 0 0;background:var(--panel);overflow:auto}
.sheet[open]{animation:sheetUp .28s var(--ease)}
.sheet::before{content:"";display:block;width:38px;height:5px;margin:4px auto 6px;border-radius:3px;background:var(--line-2)}
@media(min-width:801px){.sheet{margin:auto;border-radius:22px}.sheet::before{display:none}}
.sheet .dialog-head{position:static;padding:8px 0 6px}
.sheet .dialog-head h2{font-size:19px}
.sheet-body{display:grid;gap:4px;margin:4px 0 16px}
.sheet-text{margin:0 0 8px;color:var(--muted);font-size:15px;line-height:1.45}
.sheet-actions{display:flex;gap:8px}
.sheet-actions .dialog-button{flex:1;min-height:46px}

/* Вход не из Telegram / бан / сервер недоступен. */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;text-align:center;background:var(--bg)}
.gate .avatar{margin:0 auto 18px}
.gate h2{margin:0 0 10px;font-size:22px;font-weight:700}
.gate p{margin:0;max-width:320px;color:var(--muted);font-size:15px;line-height:1.5}

.toast{position:fixed;z-index:60;left:50%;bottom:calc(var(--nav-total) + 14px);max-width:calc(100vw - 32px);padding:11px 18px;border-radius:22px;background:#fff;color:#000;font-size:14px;font-weight:500;box-shadow:0 8px 30px #0008;transform:translateX(-50%);animation:toastIn .3s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}

/* ---------------- Обучение ---------------- */
.tour{position:fixed;inset:0;z-index:300}
.tour-spot{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:50%;box-shadow:0 0 0 9999px #000c;pointer-events:none;
  transition:left .38s var(--ease),top .38s var(--ease),width .38s var(--ease),height .38s var(--ease),border-radius .38s}
.tour-spot::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid var(--accent-2);animation:tourPulse 1.4s ease-out infinite}
.tour-spot.is-center{box-shadow:0 0 0 9999px #000d}
.tour-spot.is-center::after{display:none}
@keyframes tourPulse{0%{transform:scale(1);opacity:.95}100%{transform:scale(1.45);opacity:0}}
.tour-tip{position:fixed;padding:14px 16px 12px;border-radius:18px;background:var(--panel-2);box-shadow:0 18px 50px #000b;transition:left .38s var(--ease),top .38s var(--ease),bottom .38s var(--ease)}
.tour-tip.pop{animation:tourPop .32s var(--ease)}
.tour-tip.is-center{left:50%;top:50%;width:min(330px,calc(100vw - 32px));transform:translate(-50%,-50%)}
.tour-tip.is-center.pop{animation:tourPopCenter .32s var(--ease)}
@keyframes tourPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tourPopCenter{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%)}}
.tour-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tour-head b{font-size:16px;font-weight:700}
.tour-count{padding:2px 8px;border-radius:8px;background:#7c5cff33;color:var(--accent-2);font-size:12px}
.tour-text p{margin:0 0 8px;color:var(--muted);font-size:14px;line-height:1.45}
.tour-big{margin:6px 0 10px;color:var(--gold);font-size:20px;font-weight:700;line-height:1.25}
.tour-actions{display:flex;justify-content:space-between;gap:8px;margin-top:4px}

/* Ник: если не задан — приглашение задать. */
#profile-name{cursor:pointer}
#profile-name.no-nick{color:var(--accent-2);font-size:18px}
/* Пост на проверке: фото сеткой (нажатие — посмотреть, зажатие — выделить). */
.sub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;border-radius:10px;overflow:hidden}
.sub-photo{border-radius:0}
/* Топ по лайкам. */
.top-periods{margin:0 0 10px}
.top-likes{position:absolute;z-index:2;left:6px;bottom:6px;display:flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;background:#000a;color:#fff;font-size:12px;font-weight:600}
.top-likes .ic{width:13px;height:13px;color:var(--like);fill:currentColor;stroke:none}

/* Управление категориями (только команда). */
.cat-badge{position:absolute;z-index:1;right:8px;bottom:8px;max-width:60%;padding:1px 7px;border-radius:8px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-badge:empty{display:none}
.stage-action.cat-btn.is-on{color:var(--accent-2)}
.dialog-button.is-cat{color:var(--accent-2)}
.cat-row .mod-title .ic{width:16px;height:16px;vertical-align:-2px;color:var(--accent-2)}
.cat-tag-search{max-width:none;margin:10px 0 14px}
.field select{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--ink);font-size:15px}
.sheet .section-title{margin:12px 0 4px}

/* Ярлык категорий на фото в паке (команде): значок и число. */
.photo-cats{position:absolute;z-index:2;right:5px;bottom:5px;display:flex;align-items:center;gap:2px;padding:2px 6px 2px 4px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:1;pointer-events:auto}
.photo-cats .ic{width:12px;height:12px}

/* ---------------- Выделение зажатием ---------------- */
.grid-photo,.dialog-photo,.pack-tile,.post-tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.is-selected{outline:3px solid var(--accent);outline-offset:-3px}
.grid-photo::before,.dialog-photo::before,.pack-tile::before,.post-tile::before{content:"";position:absolute;z-index:4;top:7px;left:7px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:#0006;opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s var(--ease);pointer-events:none}
body.selecting .grid-photo::before,body.selecting .dialog-photo::before,body.selecting .pack-tile::before,body.selecting .post-tile::before{opacity:1;transform:none}
.is-selected::before{background:var(--accent)!important;border-color:var(--accent)!important;box-shadow:inset 0 0 0 4px var(--accent),inset 0 0 0 7px #fff}
body.selecting .pack-tile .tile-actions{display:none}
body.selecting .bottom-nav{display:none}
.select-bar{position:fixed;z-index:40;left:var(--nav-gap);right:var(--nav-gap);bottom:calc(var(--nav-gap) + env(safe-area-inset-bottom));min-height:var(--nav-h);display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:20px;background:#17171bf7;border:1px solid var(--line);box-shadow:0 10px 30px #0009;animation:sheetUp .25s var(--ease)}
@media(min-width:801px){.select-bar{left:50%;right:auto;width:520px;transform:translateX(-50%)}}
.select-bar b{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap}
.sel-x{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:var(--panel-2);color:#fff}
.sel-x .ic{width:18px;height:18px}
.sel-all{height:34px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--accent-2);font-size:14px}
.sel-actions{display:flex;gap:6px}
.sel-act{height:38px;padding:0 12px;border:0;border-radius:12px;background:#fff;color:#000;font-size:14px;font-weight:600;white-space:nowrap}
.sel-act.danger{background:var(--red);color:#fff}
.sel-act.sel-icon{display:grid;place-items:center;width:38px;padding:0;background:var(--accent);color:#fff}
.sel-act.sel-icon .ic{width:19px;height:19px}
.sel-actions{min-width:0;overflow-x:auto;scrollbar-width:none}
.sel-actions::-webkit-scrollbar{display:none}
.sel-act:disabled{opacity:.5}
#pack-dialog .select-bar{bottom:calc(14px + env(safe-area-inset-bottom))}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}