/* ============================================================
   Cinovo — веб-версия. Дизайн-система из макета cinovo.html,
   адаптированная под адаптивный сайт.
============================================================ */

:root{
  --bg:#080808;
  --bg2:#141414;
  --card:#1B1B1B;
  --accent:#6C3EFF;
  --accent-lt:#8B5CFF;
  --accent2:#00C2FF;
  --text:#FFFFFF;
  --text2:#9B9B9B;
  --gold:#FFD873;
  --green:#7CE0A8;
  --pink:#FF5C8A;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --maxw:1240px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:'Manrope','Inter',sans-serif; min-height:100vh;
  background-image:radial-gradient(120% 80% at 50% 0%, #16101f 0%, #000 55%);
  background-attachment:fixed;}
body{padding-bottom:60px;}
a{color:inherit; text-decoration:none;}
svg{display:block;}
.icon{flex-shrink:0;}
button,input,select{font-family:inherit;}
img{max-width:100%;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

/* ---------- Header / navbar ---------- */
.header{position:sticky; top:0; z-index:100;
  background:rgba(10,10,12,.72); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.06);}
.header-inner{max-width:var(--maxw); margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.brand .mark{width:32px; height:32px; filter:drop-shadow(0 3px 10px rgba(108,62,255,.5));}
.logo{font-family:'Manrope',sans-serif; font-weight:800; font-size:23px; letter-spacing:-.5px;
  background:linear-gradient(120deg,#fff 0%,#fff 50%,var(--accent2) 115%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}

.nav-links{display:flex; align-items:center; gap:2px; flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none;}          /* страховка: меню не наезжает на правую группу */
.nav-links::-webkit-scrollbar{display:none;}
.nav-link{padding:9px 11px; border-radius:12px; font-size:14px; font-weight:700; color:var(--text2);
  white-space:nowrap; transition:.15s;}
.nav-link:hover{color:#fff; background:rgba(255,255,255,.05);}
.nav-link.active{color:#fff; background:rgba(108,62,255,.16);}
/* Кнопка Cinovo AI — фирменный градиент логотипа, выделена бордюром (бета-доступ) */
.nav-ai{font-weight:800; background:linear-gradient(120deg,#8B5CFF,#00C2FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  box-shadow:inset 0 0 0 1px rgba(108,62,255,.5); transition:box-shadow .15s, background .15s;}
.nav-ai:hover{background:linear-gradient(120deg,#8B5CFF,#00C2FF); -webkit-background-clip:text; background-clip:text;
  box-shadow:inset 0 0 0 1px rgba(0,194,255,.85);}
.nav-ai.active{box-shadow:inset 0 0 0 1px rgba(0,194,255,.95);}

/* ---------- Страница Cinovo AI (/ai) ---------- */
.ai-page{max-width:760px; margin:0 auto;}
.ai-hero{text-align:center; padding:48px 0 60px;}
.ai-mark{width:96px; height:96px; margin:0 auto 20px; display:block; filter:drop-shadow(0 6px 22px rgba(108,62,255,.45));}
.ai-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:40px; letter-spacing:-1px; margin:0 0 14px; color:#fff;}
.ai-title .ai-grad{background:linear-gradient(120deg,#8B5CFF,#00C2FF); -webkit-background-clip:text; background-clip:text; color:transparent;}
.ai-title .ai-beta{display:inline-block; vertical-align:middle; font-size:13px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color:#00C2FF; border:1px solid rgba(0,194,255,.5); border-radius:999px; padding:2px 10px; margin-left:6px;}
.ai-greeting{font-size:17px; line-height:1.6; color:var(--text2); max-width:560px; margin:0 auto 28px; white-space:pre-line;}
.ai-box{display:flex; align-items:center; gap:8px; max-width:600px; margin:0 auto; padding:6px 6px 6px 18px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(108,62,255,.15);}
.ai-input{flex:1; background:none; border:0; outline:0; color:#fff; font:inherit; font-size:15.5px; padding:12px 0;}
.ai-input::placeholder{color:var(--text2);}
.ai-send{flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:0; border-radius:12px; color:#fff; background:linear-gradient(120deg,#8B5CFF,#00C2FF); transition:filter .15s;}
.ai-send:hover{filter:brightness(1.12);}
.ai-note{margin:18px auto 0; font-size:13.5px; color:var(--text2);}
@media (max-width:600px){ .ai-title{font-size:32px;} .ai-greeting{font-size:15.5px;} }

/* ---------- Cinovo AI — чат ---------- */
.ai-grad{background:linear-gradient(120deg,#8B5CFF,#00C2FF); -webkit-background-clip:text; background-clip:text; color:transparent;}
.ai-beta{display:inline-block; vertical-align:middle; font-size:11px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color:#00C2FF; border:1px solid rgba(0,194,255,.5); border-radius:999px; padding:1px 8px; margin-left:4px;}
.ai-chat{max-width:720px; margin:18px auto 0; display:flex; flex-direction:column;
  height:calc(100vh - 108px); min-height:420px;}   /* почти во весь экран → поле ввода внизу, лог скроллится внутри */
.ai-chat[hidden]{display:none;}                     /* иначе display:flex перебивает атрибут hidden (готча) */
.ai-chat:not([hidden]){animation:aiChatIn .38s cubic-bezier(.2,.7,.2,1);}
@keyframes aiChatIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
.ai-chat-head{display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08);}
.ai-chat-mark{width:44px; height:44px; flex:none; filter:drop-shadow(0 4px 14px rgba(108,62,255,.45));}
.ai-chat-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:21px; color:#fff; line-height:1.1; flex:1;}
.ai-chat-sub{font-size:13px; color:var(--text2); margin-top:2px;}
.ai-clear{margin-left:auto; flex:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:var(--text2); border-radius:10px; cursor:pointer; transition:.15s;}
.ai-clear:hover{color:#ff8a8a; border-color:rgba(255,92,92,.4); background:rgba(255,92,92,.08);}
.ai-log{flex:1; overflow-y:auto; padding:20px 6px 20px 2px; display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;}
.ai-log::-webkit-scrollbar{width:8px;}
.ai-log::-webkit-scrollbar-track{background:transparent;}
.ai-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:8px;}
.ai-log::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);}
.ai-msg{display:flex; flex-direction:column; max-width:82%; animation:aiMsgIn .28s ease;}
@keyframes aiMsgIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.ai-msg.ai-user{align-self:flex-end; align-items:flex-end;}
.ai-msg.ai-assistant{align-self:flex-start; align-items:flex-start;}
.ai-bubble{padding:11px 15px; border-radius:16px; font-size:15px; line-height:1.5; color:#fff;}
.ai-user .ai-bubble{background:linear-gradient(120deg,#6C3EFF,#00C2FF); border-bottom-right-radius:5px;}
.ai-assistant .ai-bubble{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-bottom-left-radius:5px;}
.ai-typing{display:flex; gap:4px; align-items:center;}
.ai-typing span{width:7px; height:7px; border-radius:50%; background:var(--text2); animation:aiblink 1.2s infinite both;}
.ai-typing span:nth-child(2){animation-delay:.2s;} .ai-typing span:nth-child(3){animation-delay:.4s;}
@keyframes aiblink{0%,80%,100%{opacity:.25;} 40%{opacity:1;}}
.ai-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; width:100%;}
.ai-msg.ai-wide{max-width:100%;}   /* сообщение с рекомендациями — во всю ширину под сетку 2×3 */
.ai-empty{flex:1; display:flex; align-items:center; justify-content:center; min-height:200px;}
.ai-ask{padding:13px 26px; border:0; border-radius:14px; cursor:pointer; font:inherit; font-weight:800; font-size:15px; color:#fff;
  background:linear-gradient(120deg,#8B5CFF,#00C2FF); box-shadow:0 6px 22px rgba(108,62,255,.4); transition:filter .15s, transform .15s;}
.ai-ask:hover{filter:brightness(1.1); transform:translateY(-1px);}
.ai-rec{display:flex; gap:8px; padding:9px; border-radius:14px; align-items:stretch;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); transition:.15s;}
.ai-rec:hover{background:rgba(108,62,255,.12); border-color:rgba(108,62,255,.4);}
.ai-rec.ai-rec-hidden{opacity:.4;}
.ai-rec-link{display:flex; gap:12px; flex:1; min-width:0; text-decoration:none;}
.ai-rec-poster{width:52px; height:74px; border-radius:8px; flex:none; background:#222 center/cover no-repeat;}
.ai-rec-body{min-width:0; display:flex; flex-direction:column; justify-content:center;}
.ai-rec-title{color:#fff; font-weight:700; font-size:15px; margin-bottom:3px;}
.ai-rec-meta{color:var(--accent2); font-size:12.5px; margin-bottom:4px;}
.ai-rec-reason{color:var(--text2); font-size:13px; line-height:1.35;}
.ai-rec-fb{display:flex; flex-direction:column; gap:5px; justify-content:center; flex:none;}
.ai-fb{width:30px; height:30px; border:0; border-radius:8px; cursor:pointer; font-size:14px; line-height:1;
  background:rgba(255,255,255,.06); opacity:.55; transition:.15s;}
.ai-fb:hover{opacity:1; background:rgba(255,255,255,.12);}
.ai-fb.active{opacity:1; background:rgba(108,62,255,.4);}
.ai-chat .ai-box{max-width:none; margin:6px 0 24px;}
@media (max-width:600px){ .ai-chat{min-height:calc(100vh - 180px);} .ai-msg{max-width:92%;} .ai-cards{grid-template-columns:1fr;} }

.header-right{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.lang-toggle{display:flex; align-items:center; height:38px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:3px; user-select:none;}
.lang-toggle .opt{padding:6px 10px; font-size:11.5px; font-weight:700; color:var(--text2);
  border-radius:9px; letter-spacing:.3px;}
.lang-toggle .opt.active{background:linear-gradient(135deg,var(--accent),var(--accent-lt)); color:#fff;}
.icon-btn{width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;
  color:var(--text); cursor:pointer;}
.avatar{width:38px; height:38px; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff;
  border:1px solid rgba(255,255,255,.15);}
.btn-signin{height:38px; padding:0 16px; border-radius:12px; display:flex; align-items:center;
  font-size:13.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow:0 6px 16px rgba(108,62,255,.35);}

/* burger */
.burger{display:none; width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06); color:#fff; align-items:center; justify-content:center; cursor:pointer;}

/* ---------- Buttons ---------- */
.btn{height:46px; padding:0 20px; border-radius:14px; border:none; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; font-size:14.5px; font-weight:700; font-family:'Manrope',sans-serif; cursor:pointer;}
.btn-primary{background:#fff; color:#0c0c0c;}
.btn-room{background:linear-gradient(135deg,var(--accent) 0%, var(--accent-lt) 100%); color:#fff;
  box-shadow:0 8px 20px rgba(108,62,255,.45);}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.1);}

/* ---------- Hero ---------- */
.hero{margin:28px 0 40px; height:420px; border-radius:var(--radius-lg); position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 15% 0%, rgba(108,62,255,.5), transparent 60%),
    radial-gradient(100% 80% at 92% 8%, rgba(0,194,255,.32), transparent 55%),
    linear-gradient(160deg,#241a3d 0%, #150f24 45%, #0c0c10 100%);
  box-shadow:0 20px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);}
.hero::before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,.1) 40%, rgba(8,8,8,.92) 100%);}
/* hero с загруженным баннером */
.hero.has-bg{background-size:cover; background-position:center;}
.hero.has-bg::before{
  background:linear-gradient(180deg, rgba(8,8,8,.12) 0%, rgba(8,8,8,.35) 45%, rgba(8,8,8,.96) 100%),
            linear-gradient(90deg, rgba(8,8,8,.88) 0%, rgba(8,8,8,.4) 42%, transparent 72%);}
.hero-texture{position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 7px);}
.hero-badge{position:absolute; top:22px; left:24px; display:flex; align-items:center; gap:6px;
  background:rgba(8,8,8,.55); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.12);
  padding:7px 13px; border-radius:20px; font-size:12px; font-weight:700; color:var(--gold); z-index:5;}
.hero-content{position:absolute; left:34px; right:34px; bottom:34px; z-index:5; max-width:640px;}
.hero-tags{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.tag{font-size:12px; font-weight:600; color:var(--text2); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08); padding:5px 12px; border-radius:20px; letter-spacing:.2px;}
.hero-title{font-family:'Manrope',sans-serif; font-size:46px; font-weight:800; color:#fff;
  letter-spacing:-1px; line-height:1.05; margin:0 0 10px; text-shadow:0 4px 24px rgba(0,0,0,.5);}
.hero-meta{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--text2);
  font-weight:600; margin-bottom:22px; flex-wrap:wrap;}
.hero-meta .imdb{color:var(--gold); font-weight:700; display:flex; align-items:center; gap:5px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.hero-desc{font-size:15px; line-height:1.55; color:#cfcfcf; margin:0 0 20px; max-width:560px; font-weight:500;}

/* ---------- Hero-карусель с трейлерами ---------- */
.hero-carousel{position:relative; height:440px; margin:28px 0 40px; border-radius:var(--radius-lg); overflow:hidden;
  background:#0c0c10; box-shadow:0 20px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);}
.hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;
  transition:opacity .8s ease; pointer-events:none;}
.hero-slide.active{opacity:1; pointer-events:auto;}
.hero-slide::before{content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(8,8,8,.15) 0%, rgba(8,8,8,.4) 45%, rgba(8,8,8,.96) 100%),
            linear-gradient(90deg, rgba(8,8,8,.88) 0%, rgba(8,8,8,.4) 42%, transparent 72%);}
.hero-trailer-holder{position:absolute; inset:0; z-index:1; overflow:hidden;}
.hero-trailer{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; pointer-events:none;}
iframe.hero-trailer{width:120%; height:120%; left:-10%; top:-10%;} /* немного увеличиваем, чтобы скрыть рамки плеера */
.hero-slide .hero-badge, .hero-slide .hero-content{z-index:5;}
.hero-dots{position:absolute; bottom:16px; right:22px; z-index:6; display:flex; gap:8px;}
.hero-dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; padding:0; transition:.2s;}
.hero-dot.on{background:#fff; width:22px; border-radius:6px;}

/* метка «Новинка» на карточке */
.new-badge{position:absolute; left:10px; top:10px; z-index:4; font-size:10px; font-weight:800; color:#04222e;
  background:var(--green); padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.4px;}
/* если рядом номер (ряд «Популярное») — сдвигаем бейдж под него, чтобы не наложился */
.rank-badge + .new-badge{top:48px;}

/* виджет оценки */
.rate-widget{display:flex; align-items:center; gap:14px; margin:-6px 0 20px; flex-wrap:wrap;}
.rate-stars{display:inline-flex; gap:3px; font-size:26px; line-height:1; cursor:pointer;}
.rate-stars span{color:rgba(255,255,255,.22); transition:color .12s, transform .12s;}
.rate-stars span.on{color:var(--gold);}
.rate-stars span:hover{transform:scale(1.15);}
.rate-head{font-size:13.5px; color:var(--text2); font-weight:600;}
.rate-head .rate-num{font-family:'Manrope'; font-size:17px; font-weight:800; color:var(--gold);}

/* ---------- Sections / rails ---------- */
.section{margin:6px 0 40px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px;}
.section-title{font-size:22px; font-weight:800; color:var(--text); font-family:'Manrope',sans-serif; letter-spacing:-.4px;}
.section-link{font-size:13.5px; color:var(--text2); font-weight:700; display:flex; align-items:center; gap:3px; white-space:nowrap;}
.section-link:hover{color:#fff;}
.rail{display:flex; gap:18px; overflow-x:auto; overflow-y:hidden; padding-bottom:8px; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;}
.rail::-webkit-scrollbar{display:none; height:0;}
.rail > *{scroll-snap-align:start;}

/* Прокрутка стрелками (в стиле сайта) */
.rail-wrap{position:relative;}
.rail-arrow{position:absolute; top:38%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(18,16,26,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); color:#fff; cursor:pointer; z-index:6;
  opacity:0; transition:opacity .22s ease, background .2s ease, border-color .2s ease, transform .1s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.5);}
.rail-wrap:hover .rail-arrow{opacity:1;}
.rail-arrow:hover{background:linear-gradient(135deg,var(--accent),var(--accent-lt)); border-color:transparent;}
.rail-arrow:active{transform:translateY(-50%) scale(.9);}
.rail-arrow.left{left:-8px;}
.rail-arrow.right{right:-8px;}
.rail-wrap.at-start .rail-arrow.left{opacity:0; pointer-events:none;}
.rail-wrap.at-end .rail-arrow.right{opacity:0; pointer-events:none;}
.rail-wrap.no-scroll .rail-arrow{display:none;}
@media (hover:none){ .rail-arrow{display:none;} } /* на телефоне — привычный свайп */

/* ---------- Poster cards ---------- */
.card{flex:0 0 auto; width:184px; cursor:pointer; display:block;}
.poster{width:100%; aspect-ratio:2/3; border-radius:var(--radius-md); position:relative; overflow:hidden;
  background:var(--card); box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .2s ease, box-shadow .2s ease;}
.card:hover .poster{transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(108,62,255,.25);}
.poster::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);}
.poster-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.rank-badge{position:absolute; top:10px; left:11px; z-index:4; font-family:'Manrope',sans-serif;
  font-size:30px; font-weight:800; color:rgba(255,255,255,.92); text-shadow:0 3px 10px rgba(0,0,0,.6);
  -webkit-text-stroke:1px rgba(0,0,0,.35);}
/* кнопка play — по центру обложки */
.poster-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85); z-index:4;
  width:54px; height:54px; border-radius:50%; background:rgba(8,8,8,.5); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center; color:#fff;
  opacity:0; transition:opacity .2s ease, transform .2s ease;}
.card:hover .poster-play, .cw-card:hover .poster-play{opacity:1; transform:translate(-50%,-50%) scale(1);}
.play-chip{position:absolute; top:11px; right:11px; z-index:4; width:30px; height:30px; border-radius:50%;
  background:rgba(8,8,8,.55); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; color:#fff;}
.g-rate{position:absolute; top:10px; right:10px; z-index:3; display:flex; align-items:center; gap:3px;
  background:rgba(8,8,8,.6); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12);
  color:var(--gold); font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:20px;}
.card-title{font-size:14.5px; font-weight:700; color:#fff; margin-top:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.card-sub{font-size:12px; color:var(--text2); margin-top:3px; font-weight:600;}

/* continue-watching (landscape) */
.cw-card{flex:0 0 auto; width:250px; cursor:pointer;}
.cw-poster{width:100%; height:150px; border-radius:var(--radius-md); position:relative; overflow:hidden;
  background:var(--card); box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04); transition:transform .2s;}
.cw-card:hover .cw-poster{transform:translateY(-4px);}
.cw-poster::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);}
.poster-label{position:absolute; left:12px; bottom:11px; right:12px; z-index:3; font-size:13.5px;
  font-weight:700; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.progress-track{height:3px; width:100%; background:rgba(255,255,255,.15); border-radius:3px; margin-top:9px; overflow:hidden;}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:3px;}
.cw-meta{font-size:12px; color:var(--text2); margin-top:7px; font-weight:600;}

/* poster art variants */
.art-1{background:linear-gradient(155deg,#3a1f78,#160c2b 70%);}
.art-2{background:linear-gradient(155deg,#0e3a52,#0a1620 70%);}
.art-3{background:linear-gradient(155deg,#5a1f3a,#1c0a12 70%);}
.art-4{background:linear-gradient(155deg,#1f3a2c,#0a1610 70%);}
.art-5{background:linear-gradient(155deg,#3a2a10,#160e05 70%);}
.art-6{background:linear-gradient(155deg,#241f52,#0c0a1c 70%);}
.art-7{background:linear-gradient(155deg,#0a2a3a,#050f16 70%);}
.art-8{background:linear-gradient(155deg,#402060,#150818 70%);}
.art-9{background:linear-gradient(155deg,#52210e,#1a0a05 70%);}
.art-10{background:linear-gradient(155deg,#123a3a,#061616 70%);}
.art-11{background:linear-gradient(155deg,#2a2a2a,#0d0d0d 70%);}
.art-12{background:linear-gradient(155deg,#3a1f2a,#160c11 70%);}

/* ---------- Page title ---------- */
.page-head{padding:34px 0 22px;}
.page-title{font-family:'Manrope',sans-serif; font-size:34px; font-weight:800; color:#fff; letter-spacing:-.6px; margin:0;}
.page-sub{font-size:14.5px; color:var(--text2); font-weight:600; margin-top:8px;}
.page-intro{font-size:14.5px; color:var(--text2); font-weight:500; margin:10px 0 0; max-width:760px; line-height:1.5;}

/* Случайный фильм */
.random-box{display:flex; gap:34px; align-items:center; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); padding:30px; margin-bottom:34px;}
.random-info{flex:1; min-width:0;}
.random-poster{flex:0 0 260px; aspect-ratio:2/3; border-radius:var(--radius-md); overflow:hidden; background:#15151c;}
.random-poster img{width:100%; height:100%; object-fit:cover;}
.random-title{font-family:'Manrope',sans-serif; font-size:30px; font-weight:800; color:#fff; margin:10px 0 0; letter-spacing:-.4px;}
.random-desc{font-size:15.5px; line-height:1.6; color:#cfcfcf; margin:16px 0 22px; max-width:640px; font-weight:500;}
.random-actions{display:flex; gap:12px; flex-wrap:wrap;}
@media(max-width:760px){
  .random-box{flex-direction:column; align-items:stretch; padding:20px; gap:20px;}
  .random-poster{width:190px; align-self:center; order:-1;}
  .random-title{font-size:24px;}
}

/* Перелинковка каталога (SEO): ссылки по жанрам и годам */
.seo-links{margin:40px 0 10px; padding-top:22px; border-top:1px solid var(--line, rgba(255,255,255,.08));}
.seo-links-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:12px;}
.seo-links-title{font-size:13px; font-weight:700; color:var(--text2); margin-right:4px;}
.seo-links a{font-size:13px; color:var(--text2); text-decoration:none; padding:4px 11px; border-radius:20px; background:rgba(255,255,255,.05); transition:.15s;}
.seo-links a:hover{color:#fff; background:rgba(108,62,255,.25);}

/* ---------- Комментарии ---------- */
.cmt-form{margin-bottom:22px;}
.cmt-input{width:100%; box-sizing:border-box; resize:vertical; min-height:72px; padding:12px 14px;
  border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  color:#fff; font-family:inherit; font-size:14.5px; line-height:1.5; outline:none;}
.cmt-input:focus{border-color:var(--accent, #6C3EFF); background:rgba(255,255,255,.06);}
.cmt-form-foot{display:flex; justify-content:flex-end; margin-top:10px;}
.cmt-guest{margin-bottom:22px; color:var(--text2); font-size:14.5px;}
.cmt-guest a{color:var(--accent2, #00C2FF); font-weight:600;}
.comment-list{display:flex; flex-direction:column; gap:14px;}
.cmt-node, .comment.reply{display:flex; gap:12px; align-items:center;}
.comment.c-hidden{display:none;}
.cmt-main{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:12px 15px;}
.comment.reply .cmt-main{background:rgba(255,255,255,.035);}
.cmt-replies{margin:14px 0 0 50px; display:flex; flex-direction:column; gap:14px;}
.cmt-replies:empty{display:none; margin:0;}
.cmt-reply-form{margin:12px 0 0 50px;}
.cmt-actions{display:flex; gap:14px; margin-top:6px;}
.cmt-act{background:none; border:none; padding:0; cursor:pointer; color:var(--text2); font-size:12.5px; font-weight:600;}
.cmt-act:hover{color:#fff;}
.cmt-del:hover{color:#ff6b6b;}
.cmt-like{display:inline-flex; align-items:center; gap:5px; background:none; border:none; padding:0; cursor:pointer; color:var(--text2); font-size:12.5px; font-weight:700;}
.cmt-like svg{display:block; transition:.15s;}
.cmt-like:hover{color:#fff;}
.cmt-like.on{color:var(--accent, #6C3EFF);}
.cmt-sort{display:flex; gap:8px; margin:0 0 16px;}
.cmt-sort-btn{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:var(--text2); font-size:13px; font-weight:600; padding:5px 14px; border-radius:20px; cursor:pointer; transition:.15s;}
.cmt-sort-btn:hover{color:#fff;}
.cmt-sort-btn.active{background:var(--accent,#6C3EFF); border-color:transparent; color:#fff;}

/* ---------- Уведомления (колокольчик) ---------- */
.notif-wrap{position:relative; display:flex; align-items:center;}
.notif-bell{position:relative; background:none; border:none; color:var(--text2); cursor:pointer; padding:6px; display:flex; align-items:center; border-radius:8px; transition:.15s;}
.notif-bell:hover{color:#fff; background:rgba(255,255,255,.06);}
.notif-badge{position:absolute; top:0; right:0; background:#FF5C8A; color:#fff; font-size:10px; font-weight:800; line-height:1; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px;}
.notif-badge[hidden]{display:none;}
.notif-panel{position:absolute; top:calc(100% + 10px); right:0; width:330px; max-width:86vw; max-height:420px; overflow-y:auto;
  background:rgba(20,18,28,.98); border:1px solid rgba(255,255,255,.1); border-radius:14px; box-shadow:0 22px 55px rgba(0,0,0,.6); z-index:120; padding:6px;}
.notif-item{display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text1,#e8e8ee);}
.notif-item + .notif-item{margin-top:2px;}
.notif-item:hover{background:rgba(255,255,255,.05);}
.notif-item.unread{background:rgba(108,62,255,.14);}
/* На телефоне панель уведомлений — фиксированная, не уезжает за край экрана */
@media(max-width:600px){
  .notif-panel{position:fixed; top:60px; left:10px; right:10px; width:auto; max-width:none; max-height:72vh;}
}
.notif-text{font-size:13.5px; line-height:1.4;}
.notif-time{font-size:11.5px; color:var(--text2); margin-top:3px;}
.notif-empty{padding:26px 16px; text-align:center; color:var(--text2); font-size:13.5px;}

/* ---------- Живой поиск ---------- */
.hdr-search-btn{background:none; border:none; color:var(--text2); cursor:pointer; padding:6px; display:flex; align-items:center; border-radius:8px; transition:.15s;}
.hdr-search-btn:hover{color:#fff; background:rgba(255,255,255,.06);}
.search-overlay{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.6); display:flex; justify-content:center; align-items:flex-start; padding:78px 16px 20px;}
.search-overlay[hidden]{display:none;}
.search-box{width:100%; max-width:600px; background:rgba(20,18,28,.98); border:1px solid rgba(255,255,255,.12); border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.6); overflow:hidden;}
.search-box input{width:100%; box-sizing:border-box; padding:16px 20px; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.08); color:#fff; font-size:16px; outline:none; font-family:inherit;}
.search-results{max-height:60vh; overflow-y:auto;}
.search-item{display:flex; gap:12px; align-items:center; padding:8px 14px; text-decoration:none; color:var(--text1,#e8e8ee);}
.search-item:hover{background:rgba(255,255,255,.06);}
.search-thumb{flex:none; width:38px; height:54px; border-radius:6px; background:#15151c center/cover no-repeat;}
.search-info{min-width:0;}
.search-title{font-size:14.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.search-sub{font-size:12px; color:var(--text2);}
.search-empty{padding:20px; text-align:center; color:var(--text2); font-size:14px;}

/* ---------- Оверлей трейлера ---------- */
.trailer-overlay{position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; padding:20px;}
.trailer-box{position:relative; width:100%; max-width:900px; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.6);}
.trailer-box iframe, .trailer-box video{width:100%; height:100%; border:0; display:block;}
.trailer-close{position:absolute; top:-40px; right:0; background:none; border:none; color:#fff; font-size:26px; line-height:1; cursor:pointer;}
@media(max-width:600px){ .trailer-close{top:-34px; font-size:22px;} }

/* Постер как фон детальной, если нет баннера — размываем, чтобы вертикаль смотрелась фоном */
.detail-hero .bg-poster{filter:blur(12px); transform:scale(1.15);}

/* Выбор типа комнаты (публичная/приватная) */
.room-choose{position:fixed; inset:0; z-index:250; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; padding:20px;}
.room-choose-card{width:100%; max-width:420px; background:rgba(20,18,28,.98); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.6);}
.rc-h{font-size:18px; font-weight:800; color:#fff; margin-bottom:16px; text-align:center;}
.rc-opt{display:block; width:100%; text-align:left; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px 14px; margin-bottom:10px; cursor:pointer; color:#fff; font-family:inherit;}
.rc-opt:hover{background:rgba(108,62,255,.2); border-color:transparent;}
.rc-opt b{display:block; font-size:15px;}
.rc-opt span{display:block; font-size:12.5px; color:var(--text2); margin-top:2px;}
.rc-cancel{display:block; width:100%; background:none; border:none; color:var(--text2); padding:8px; margin-top:2px; cursor:pointer; font-weight:600; font-family:inherit;}
.rc-cancel:hover{color:#fff;}

/* Премьеры */
.prem-banner{display:flex; gap:16px; align-items:center; text-decoration:none; margin:20px 0 4px; padding:12px 16px; border-radius:14px;
  background:linear-gradient(90deg, rgba(108,62,255,.20), rgba(255,255,255,.03)); border:1px solid rgba(108,62,255,.4);}
.prem-banner-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin:20px 0 4px;}
.prem-banner-row .prem-banner{margin:0; min-width:0;}
.prem-b-poster{flex:none; width:54px; height:78px; border-radius:8px; background:#15151c center/cover no-repeat;}
.prem-b-info{min-width:0;}
.prem-b-badge{font-size:12px; font-weight:700; color:#c9b6ff;}
.prem-b-title{font-size:17px; font-weight:800; color:#fff; margin:2px 0;}
.prem-b-cd{font-size:13.5px; color:#8ef0b0; font-weight:700;}

/* --- «Смотри вместе с Cinovo»: рельса премьер (боковые стрелки как в сериалах) --- */
.prem-rail{padding-top:4px;}
.prem-cardx{flex:none; width:240px; scroll-snap-align:start; text-decoration:none; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, rgba(108,62,255,.14), rgba(255,255,255,.03)); border:1px solid rgba(108,62,255,.35);
  transition:transform .12s, border-color .12s;}
.prem-cardx:hover{transform:translateY(-3px); border-color:rgba(108,62,255,.7);}
.prem-cardx-poster{height:132px; background:#15151c center/cover no-repeat;}
.prem-cardx-body{padding:11px 13px 14px;}
.prem-cardx-badge{font-size:11.5px; font-weight:800; color:#c9b6ff; text-transform:uppercase; letter-spacing:.02em;}
.prem-cardx-title{font-size:15.5px; font-weight:800; color:#fff; margin:3px 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.prem-cardx-cd{font-size:13px; color:#8ef0b0; font-weight:700;}
.prem-cardx-cd.live{color:#ff8a8a;}

/* завершение премьеры */
.sync-badge.end{color:#ffb3c8;}
.sync-badge.end i{background:#ff5c8a; box-shadow:0 0 8px #ff5c8a;}
.premiere-hero{position:relative; min-height:66vh; border-radius:var(--radius-lg); overflow:hidden; margin:24px 0; background:#0c0c10 center/cover no-repeat; display:flex; align-items:center;}
.premiere-hero::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,10,.45), rgba(8,8,10,.93));}
.premiere-inner{position:relative; z-index:2; padding:44px; max-width:640px;}
.premiere-badge{display:inline-block; background:rgba(108,62,255,.28); color:#c9b6ff; font-weight:700; font-size:13px; padding:5px 12px; border-radius:20px; margin-bottom:14px;}
.premiere-title{font-family:'Manrope',sans-serif; font-size:40px; font-weight:800; color:#fff; margin:0 0 10px; line-height:1.05; letter-spacing:-.5px;}
.premiere-when{color:#cfcfcf; font-size:15px; margin-bottom:16px;}
.premiere-countdown{font-family:'Manrope',sans-serif; font-size:46px; font-weight:800; color:#fff; letter-spacing:1px; margin-bottom:20px;}
.premiere-watch{font-size:16px; padding:14px 28px;}
.premiere-remind{margin:0;} /* ровно под таймером, без смещения вправо */
.premiere-hint{color:var(--text2); font-size:13px; margin-top:14px; max-width:440px; line-height:1.5;}

/* --- Афиша киновечеров --- */
.sched-day{font-size:15px; color:var(--text2); font-weight:700; margin:22px 0 12px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.08);}
.sched-day b{color:#fff;}
.sched-card{display:flex; align-items:center; gap:16px; text-decoration:none; padding:12px 16px; margin-bottom:12px; border-radius:14px;
  background:linear-gradient(90deg, rgba(108,62,255,.14), rgba(255,255,255,.03)); border:1px solid rgba(108,62,255,.32); transition:transform .12s, border-color .12s;}
.sched-card:hover{transform:translateX(3px); border-color:rgba(108,62,255,.7);}
.sched-poster{flex:none; width:56px; height:80px; border-radius:9px; background:#15151c center/cover no-repeat;}
.sched-info{flex:1; min-width:0;}
.sched-badge{font-size:11.5px; font-weight:800; color:#c9b6ff; text-transform:uppercase; letter-spacing:.02em;}
.sched-title{font-size:17px; font-weight:800; color:#fff; margin:2px 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sched-time{font-size:13.5px; color:#8ef0b0; font-weight:700;}
.sched-live{color:#ff8a8a;}
.sched-go{flex:none; color:var(--accent2); font-size:18px;}
@media(max-width:600px){
  .premiere-hero{min-height:58vh;} .premiere-inner{padding:24px;} .premiere-title{font-size:28px;} .premiere-countdown{font-size:34px;}
  /* Кнопки премьеры — на всю ширину, стопкой, не вылезают при длинной подписи */
  .premiere-watch, .premiere-remind{width:100%; box-sizing:border-box; margin-top:10px;}
  .prem-cardx{width:200px;}
}
.cmt-ava{flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#6C3EFF,#00C2FF);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;}
.cmt-main{flex:1; min-width:0;}
.cmt-head{display:flex; align-items:baseline; gap:10px; margin-bottom:3px;}
.cmt-name{font-weight:700; font-size:14px; color:#fff;}
.cmt-time{font-size:12px; color:var(--text2);}
.cmt-body{font-size:14.5px; line-height:1.55; color:var(--text1, #e8e8ee); word-wrap:break-word; overflow-wrap:anywhere;}
.cmt-more{margin-top:18px;}
.cmt-empty{color:var(--text2); font-size:14.5px;}

/* ---------- Текстовые страницы (О нас, Политика) ---------- */
.static-page{max-width:820px; padding-bottom:60px; color:var(--text2); font-size:15.5px; line-height:1.75;}
.static-page h2{font-family:'Manrope',sans-serif; font-size:21px; font-weight:800; color:#fff; margin:30px 0 10px; letter-spacing:-.3px;}
.static-page h3{font-size:17px; font-weight:700; color:#fff; margin:22px 0 8px;}
.static-page p{margin:0 0 14px;}
.static-page .lead{font-size:18px; color:#fff; font-weight:600; line-height:1.6; margin-bottom:18px;}
.static-page a{color:var(--accent2);}
.static-page a:hover{text-decoration:underline;}
.static-page ul{margin:0 0 14px; padding-left:22px;}
.static-page li{margin:6px 0;}
.static-page strong{color:#fff;}
.static-page .muted-note{margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); font-size:13px; color:var(--text2);}

/* ---------- Catalog ---------- */
.toolbar{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:22px;}
.search{display:flex; align-items:center; gap:10px; height:48px; padding:0 16px; border-radius:14px; flex:1; min-width:240px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:var(--text2);}
.search input{flex:1; background:none; border:none; outline:none; color:#fff; font-size:15px; font-weight:500;}
.search input::placeholder{color:var(--text2);}
.seg{display:flex; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:4px;}
.seg a{padding:10px 20px; border-radius:11px; font-size:14px; font-weight:700; color:var(--text2); transition:.2s;}
.seg a.active{color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow:0 6px 16px rgba(108,62,255,.35);}
.select-sort{height:48px; padding:0 14px; border-radius:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); color:#fff; font-size:14px; font-weight:700; cursor:pointer; outline:none;
  color-scheme:dark;} /* тёмный нативный список и ползунок в тон сайту */
.select-sort option{background:#161616;}

/* --- Список серий на странице просмотра (как на странице сериала) --- */
.player-eps{margin-top:26px;}
.player-eps .pl-ep{width:100%; text-align:left; background:none; border:0; font-family:inherit; cursor:pointer;}
.player-eps .ep{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); margin-bottom:10px;}
.player-eps .ep:hover{background:rgba(255,255,255,.06);}
.player-eps .pl-ep.active .ep{background:rgba(108,62,255,.16); border-color:rgba(108,62,255,.5);}
.player-eps .pl-ep.active .ep-title{color:#c9b6ff;}

/* --- FAQ (аккордеон) --- */
.faq-list{display:flex; flex-direction:column; gap:12px; margin-top:8px;}
.faq-item{background:var(--card,#15151c); border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden;}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px;
  cursor:pointer; font-weight:700; color:#fff; font-size:15.5px; list-style:none;}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:hover{background:rgba(255,255,255,.03);}
.faq-chevron{flex:none; color:var(--text2); transition:transform .2s;}
.faq-item[open] .faq-chevron{transform:rotate(180deg);}
.faq-item[open] .faq-q{color:#c9b6ff;}
.faq-a{padding:0 20px 18px; color:var(--text2); line-height:1.65; font-size:14.5px;}
.faq-a p{margin:0 0 10px;}
.faq-a p:last-child{margin-bottom:0;}

.load-more-wrap{display:flex; justify-content:center; margin:28px 0 8px;}
.load-more-wrap .btn{min-width:220px; justify-content:center;}
.filter-row{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px;}
.chip{padding:9px 16px; border-radius:12px; font-size:13px; font-weight:700; color:var(--text2);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); cursor:pointer; transition:.15s;}
.chip:hover{color:#fff;}
.chip.active{color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-lt)); border-color:transparent;}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:24px;}
.grid .card{width:100%; min-width:0;}
.count{font-size:13.5px; color:var(--text2); font-weight:600; margin-bottom:18px;}
.empty{text-align:center; color:var(--text2); font-size:15px; padding:70px 20px; font-weight:600;}
.empty .big{font-size:20px; color:#fff; font-weight:800; margin-bottom:10px;}

/* ---------- Movie / Series detail ---------- */
.detail-hero{position:relative; height:440px; border-radius:0 0 var(--radius-lg) var(--radius-lg); overflow:hidden; margin-bottom:0;}
.detail-hero .bg{position:absolute; inset:0; background-size:cover; background-position:center top;}
.detail-hero .bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,8,.1) 0%, rgba(8,8,8,.35) 40%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8,8,8,.7) 0%, transparent 60%);}
.detail-body{margin-top:-140px; position:relative; z-index:5; display:flex; gap:34px; align-items:flex-end;}
.detail-poster{width:220px; aspect-ratio:2/3; border-radius:var(--radius-md); overflow:hidden; flex:0 0 auto;
  position:relative; box-shadow:0 16px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);}
.detail-info{flex:1; min-width:0; padding-bottom:6px;}
.detail-tags{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.detail-title{font-family:'Manrope',sans-serif; font-size:40px; font-weight:800; color:#fff; letter-spacing:-.8px; line-height:1.05; margin:0 0 12px;}
.detail-meta{display:flex; align-items:center; gap:14px; font-size:14.5px; color:var(--text2); font-weight:600; margin-bottom:22px; flex-wrap:wrap;}
.detail-meta .imdb{color:var(--gold); font-weight:700; display:flex; align-items:center; gap:5px;}
.detail-actions{display:flex; gap:12px; flex-wrap:wrap;}
.detail-actions .btn{height:50px;}
.fav-btn{width:50px; height:50px; border-radius:14px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition:.15s;}
.fav-btn.on{color:var(--pink); background:rgba(255,92,138,.14); border-color:rgba(255,92,138,.4);}

.detail-section{margin-top:40px;}
.detail-desc{font-size:16px; line-height:1.65; color:#cfcfcf; max-width:820px; font-weight:500;}
.crew{display:flex; gap:50px; margin-top:26px; flex-wrap:wrap;}
.crew .k{font-size:11.5px; color:var(--text2); font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px;}
.crew .v{font-size:15px; color:#fff; font-weight:600; line-height:1.4;}
.cast-rail{display:flex; gap:22px; overflow-x:auto; padding-bottom:8px; margin-top:16px; scrollbar-width:none;}
.cast-rail::-webkit-scrollbar{display:none;}
.cast{flex:0 0 auto; width:84px; text-align:center;}
.cast .ph{width:84px; height:84px; border-radius:50%; margin-bottom:9px; border:1px solid rgba(255,255,255,.1);}
.cast .nm{font-size:12.5px; color:#fff; font-weight:600; line-height:1.25;}

/* seasons & episodes */
.season-row{display:flex; gap:10px; margin:8px 0 20px; flex-wrap:wrap;}
.season-chip{padding:9px 18px; border-radius:12px; font-size:14px; font-weight:700; color:var(--text2);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); cursor:pointer;}
.season-chip.active{color:#fff; background:rgba(108,62,255,.18); border-color:rgba(108,62,255,.55);}
.ep{display:flex; gap:18px; align-items:center; padding:16px; border-radius:var(--radius-md); cursor:pointer;
  border:1px solid rgba(255,255,255,.05); background:var(--card); margin-bottom:12px; transition:.15s;}
.ep:hover{border-color:rgba(108,62,255,.4);}
.ep-thumb{width:150px; height:86px; border-radius:11px; flex:0 0 auto; position:relative; overflow:hidden;
  background-size:cover; background-position:center;}
.ep-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55));}
.ep-num{position:absolute; top:8px; left:10px; z-index:3; font-size:12px; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7);}
.ep-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:36px; height:36px; border-radius:50%;
  background:rgba(8,8,8,.5); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:#fff;}
.ep-info{flex:1; min-width:0;}
.ep-title{font-size:15px; font-weight:700; color:#fff;}
.ep-dur{font-size:12.5px; color:var(--text2); font-weight:600; margin-top:4px;}
.ep-showmore{display:block; width:100%; padding:13px 16px; margin:2px 0 12px; border-radius:var(--radius-md);
  border:1px dashed rgba(108,62,255,.5); background:rgba(108,62,255,.06); color:#cdbcff; font-size:14px; font-weight:700;
  cursor:pointer; transition:.15s;}
.ep-showmore:hover{background:rgba(108,62,255,.14); border-color:rgba(108,62,255,.7); color:#fff;}

/* ---------- Player ---------- */
.player-page{max-width:1100px; margin:0 auto; padding:30px 22px;}
.player-stage{width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; position:relative;
  background:radial-gradient(120% 100% at 30% 30%, #2a1c4a 0%, #0a0713 55%, #000 100%);
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);}
.player-stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.player-stage video, .cinovo-video{position:absolute; inset:0; width:100%; height:100%; background:#000; object-fit:contain;}

/* Plyr в нашей сцене (фирменный цвет + заполнение 16:9) */
:root{ --plyr-color-main:#6C3EFF; }
.player-stage .plyr{position:absolute; inset:0; width:100%; height:100%;}
.player-stage .plyr, .player-stage .plyr__video-wrapper{height:100%;}
.player-stage .plyr video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}
.player-grain{position:absolute; inset:0; opacity:.3;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px);}
.player-center{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;}
.player-center .pc{width:84px; height:84px; border-radius:50%; margin:0 auto 16px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:#fff;}
.player-note{color:var(--text2); font-size:13.5px; font-weight:600; max-width:340px;}
.player-bar{display:flex; align-items:center; justify-content:space-between; margin-top:22px; gap:16px; flex-wrap:wrap;}
.player-title{font-family:'Manrope'; font-size:24px; font-weight:800; color:#fff;}
.player-sub{font-size:13.5px; color:var(--text2); font-weight:600; margin-top:4px;}

/* выбор источника видео (наш плеер / KinoBD) — сегментированный переключатель */
.player-src{display:inline-flex; padding:3px; gap:3px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);}
.psrc{padding:7px 14px; border-radius:9px; font-size:13px; font-weight:700; color:var(--text2);
  background:transparent; border:0; cursor:pointer; white-space:nowrap; transition:.15s;}
.psrc:hover{color:#fff;}
.psrc.active{color:#fff; background:rgba(108,62,255,.22); box-shadow:inset 0 0 0 1px rgba(108,62,255,.55);}

/* пояснение к выбору плеера — только когда плеера два */
.player-hint{margin-top:16px; padding:14px 16px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06);
  font-size:13.5px; line-height:1.55; color:var(--text2);}
.player-hint p{margin:0;}
.player-hint p + p{margin-top:8px;}
.player-hint b{color:#fff; font-weight:800;}

/* плашка авто-перехода к следующей серии */
.player-stage{position:relative;}
.next-overlay{position:absolute; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  background:rgba(6,6,10,.72); backdrop-filter:blur(8px);}
.next-overlay.show{display:flex; animation:screenIn .25s ease;}
.next-card{background:rgba(20,18,28,.9); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg);
  padding:26px 30px; text-align:center; max-width:420px; box-shadow:0 24px 60px rgba(0,0,0,.6);}
.next-cap{font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--accent2); margin-bottom:8px;}
.next-title{font-family:'Manrope'; font-size:22px; font-weight:800; color:#fff; margin-bottom:8px;}
.next-count{font-size:13.5px; color:var(--text2); font-weight:600; margin-bottom:18px;}
.next-count span{color:#fff; font-weight:800;}
.next-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
@keyframes screenIn{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}

/* ============================================================
   Watch Party — комнаты
============================================================ */
.room-wrap{display:grid; grid-template-columns:1fr 360px; gap:24px; padding:24px 0 10px; align-items:start;}
.room-main{min-width:0;}
.room-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; flex-wrap:wrap;}
.host-badge{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:#04222e;
  background:var(--gold); padding:8px 14px; border-radius:20px;}
.sync-badge{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:var(--accent2);
  background:rgba(0,194,255,.12); border:1px solid rgba(0,194,255,.4); padding:8px 14px; border-radius:20px;}
.sync-badge i{width:7px; height:7px; border-radius:50%; background:var(--accent2); box-shadow:0 0 8px var(--accent2); animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

.host-controls{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:center;}
.host-controls .select-sort{height:44px;}
.mk-host{width:28px; height:28px; border-radius:9px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
  color:var(--gold); font-size:13px; cursor:pointer; flex:0 0 auto;}
.mk-host:hover{background:rgba(255,216,115,.15); border-color:rgba(255,216,115,.4);}
.mk-kick{width:28px; height:28px; border-radius:9px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
  color:#ff8a8a; font-size:13px; cursor:pointer; flex:0 0 auto; margin-left:6px;}
.mk-kick:hover{background:rgba(255,92,138,.16); border-color:rgba(255,92,138,.45);}

/* пикер смены контента */
.picker-overlay{position:fixed; inset:0; z-index:400; display:none; align-items:flex-start; justify-content:center;
  background:rgba(6,6,10,.7); backdrop-filter:blur(6px); padding:70px 20px;}
.picker-overlay.show{display:flex; animation:screenIn .2s ease;}
.picker{width:100%; max-width:560px; background:rgba(20,18,28,.98); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg); padding:20px; box-shadow:0 30px 80px rgba(0,0,0,.6); max-height:75vh; display:flex; flex-direction:column;}
.picker-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-family:'Manrope'; font-size:18px; font-weight:800; color:#fff;}
.picker-x{width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:#fff; cursor:pointer; font-size:15px;}
.picker-results{margin-top:14px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;}
.pick-row{display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px; cursor:pointer; border:1px solid transparent;}
.pick-row:hover{background:rgba(255,255,255,.05); border-color:rgba(108,62,255,.35);}
.pick-thumb{width:40px; height:56px; border-radius:8px; flex:0 0 auto; background-size:cover; background-position:center;}
.pick-info{display:flex; flex-direction:column; min-width:0;}
.pick-info b{font-size:14px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pick-info span{font-size:12px; color:var(--text2); font-weight:600;}

.room-side{display:flex; flex-direction:column; gap:16px;}
.invite-box, .members-box, .chat-box{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-md); padding:16px;}
.invite-box .lab, .members-box .lab{font-size:11px; color:var(--text2); font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px;}
.code-row{display:flex; gap:8px;}
.code-box{flex:1; height:48px; border-radius:12px; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-family:'Manrope'; font-size:22px; font-weight:800; letter-spacing:4px; color:#fff;}
.copy-btn{flex:0 0 auto; padding:0 18px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-lt));
  color:#fff; font-weight:700; font-size:13.5px; border:none; cursor:pointer;}
.join-input{flex:1; min-width:0; height:48px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  padding:0 14px; color:#fff; font-size:16px; font-weight:800; letter-spacing:2px; outline:none; font-family:'Manrope',inherit;}
.join-input::placeholder{color:var(--text2); letter-spacing:.5px; font-weight:600; text-transform:none;}

.mem-list{display:flex; flex-direction:column; gap:4px;}
.member{display:flex; align-items:center; gap:11px; padding:7px 0;}
.member .mav{width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:#fff; flex:0 0 auto;}
.member .mn{flex:1; font-size:13.5px; font-weight:600; color:#fff; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.host-tag{font-size:10px; font-weight:800; color:var(--accent2); background:rgba(0,194,255,.12); padding:3px 8px; border-radius:8px;}

.chat-box{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.chat-head{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; font-size:13px; font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,.06);}
.chat-mod{display:flex; gap:6px;}
.chat-mod-btn{width:28px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); cursor:pointer; font-size:13px; line-height:1;}
.chat-mod-btn:hover{background:rgba(255,255,255,.12);}
.chat-off-note{padding:11px 14px; text-align:center; font-size:12.5px; color:var(--text2); border-top:1px solid rgba(255,255,255,.06);}

/* --- Живые эмодзи-реакции над плеером --- */
.stage-wrap{position:relative;}
.react-layer{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5;}
.react-fly{position:absolute; bottom:8%; will-change:transform,opacity; animation:reactFly 2.3s ease-out forwards; text-shadow:0 2px 10px rgba(0,0,0,.5);}
@keyframes reactFly{
  0%{transform:translateY(0) scale(.4); opacity:0;}
  15%{transform:translateY(-10%) scale(1.1); opacity:1;}
  70%{opacity:1;}
  100%{transform:translateY(-320%) scale(1); opacity:0;}
}
.react-bar{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0;}
.react-btn{width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
  font-size:20px; line-height:1; cursor:pointer; transition:transform .08s, background .12s;}
.react-btn:hover{background:rgba(108,62,255,.22);}
.react-btn:active{transform:scale(.86);}
@media (prefers-reduced-motion: reduce){ .react-fly{animation-duration:1.2s;} }

/* --- Кнопки полного экрана в комнате (оверлейные — только в фуллскрине) --- */
.room-fs-btn, .room-fschat-btn{display:none;}
.room-wrap.is-fs .room-fs-btn{display:inline-flex; align-items:center; gap:6px; position:absolute; top:16px; right:16px; z-index:9;
  padding:9px 15px; border-radius:11px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-weight:700; font-size:13.5px;}

/* Полноэкранный режим комнаты: разворачиваем всю обёртку, чат — выдвижной поверх видео */
.room-wrap.is-fs{display:block; position:fixed; inset:0; z-index:1000; max-width:none; width:100%; height:100%; margin:0; padding:0; background:#000;}
.room-wrap.is-fs .room-main{position:absolute; inset:0; margin:0;}
.room-wrap.is-fs .stage-wrap{height:100%;}
.room-wrap.is-fs .player-stage{aspect-ratio:auto; height:100%; border-radius:0;}
.room-wrap.is-fs .react-bar, .room-wrap.is-fs .room-bar, .room-wrap.is-fs .host-controls{display:none;}
.room-wrap.is-fs .room-fschat-btn{display:inline-flex; align-items:center; gap:6px; position:absolute; right:16px; bottom:16px; z-index:9;
  padding:11px 17px; border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-weight:700; font-size:14px;}
.room-wrap.is-fs .room-side{position:absolute; top:0; right:0; bottom:0; width:min(380px,92vw); z-index:10; margin:0; padding:14px;
  overflow-y:auto; background:rgba(12,10,18,.97); border-left:1px solid rgba(255,255,255,.1);
  transform:translateX(100%); transition:transform .25s ease;}
.room-wrap.is-fs.fs-chat .room-side{transform:none;}
.room-side-close{display:none;}
.room-wrap.is-fs .room-side-close{display:inline-flex; align-items:center; justify-content:center; align-self:flex-end;
  position:sticky; top:0; z-index:2; width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer; font-size:16px; line-height:1;}
.room-wrap.is-fs .room-side-close:hover{background:rgba(255,255,255,.14);}
/* На мобиле/планшете в фуллскрине панель ниже видео — не даём блокам схлопнуться,
   иначе чат ужимается в ноль. Панель скроллится, высота чата — по экрану. */
.room-wrap.is-fs .room-side > *{flex-shrink:0;}
.room-wrap.is-fs .chat-body{height:min(260px,32vh);}
.chat-body{height:260px; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin;}
.chat-body::-webkit-scrollbar{width:6px;} .chat-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1); border-radius:6px;}
.msg{display:flex; flex-direction:column; max-width:85%;}
.msg .who{font-size:10.5px; color:var(--text2); font-weight:700; margin-bottom:3px;}
.msg .bubble{background:rgba(255,255,255,.06); border-radius:12px; padding:8px 12px; font-size:13px; color:#eee; line-height:1.4; word-break:break-word;}
.msg.me{align-self:flex-end; align-items:flex-end;}
.msg.me .bubble{background:linear-gradient(135deg,var(--accent),var(--accent-lt)); color:#fff;}
.chat-input{display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,.06);}
.chat-input input{flex:1; height:42px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:0 12px; color:#fff; font-size:13.5px; outline:none;}
.chat-input input::placeholder{color:var(--text2);}
.send-btn{width:42px; height:42px; border-radius:11px; background:linear-gradient(135deg,var(--accent),var(--accent-lt)); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;}

.room-cta{margin-bottom:26px; padding:22px; border-radius:var(--radius-lg); cursor:default;
  background:radial-gradient(120% 120% at 15% 0%, rgba(108,62,255,.45), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(0,194,255,.3), transparent 55%), #17102b;
  border:1px solid rgba(255,255,255,.08);}
.room-cta h3{margin:0 0 6px; font-size:19px; font-weight:800; color:#fff;}
.room-cta p{margin:0 0 14px; font-size:13.5px; color:#cbb9ff; font-weight:600; line-height:1.5; max-width:520px;}
.room-cta .go{display:inline-flex; align-items:center; gap:8px; background:#fff; color:#160b2e; font-weight:800; font-size:13.5px; padding:11px 18px; border-radius:12px;}

.room-list{display:flex; flex-direction:column; gap:14px;}
.room-card{display:flex; gap:14px; align-items:center; padding:14px; border-radius:var(--radius-md); background:var(--card); border:1px solid rgba(255,255,255,.06); transition:.15s;}
.room-card:hover{border-color:rgba(108,62,255,.4);}
.room-card .rp{width:56px; height:76px; border-radius:10px; flex:0 0 auto;}
.room-card .ri{flex:1; min-width:0;}
.room-card .rt{font-size:15px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.room-card .rs{font-size:12.5px; color:var(--text2); font-weight:600; margin-top:3px;}
.live-dot{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--pink); margin-top:7px;}
.live-dot i{width:7px; height:7px; border-radius:50%; background:var(--pink); box-shadow:0 0 8px var(--pink); animation:pulse 1.4s infinite;}
.room-code-badge{flex:0 0 auto; font-family:'Manrope'; font-weight:800; letter-spacing:2px; color:#fff; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); padding:8px 12px; border-radius:10px; font-size:13px;}
.room-card.room-locked{cursor:default;}
.room-card.room-locked:hover{border-color:rgba(255,255,255,.06);}
.room-code-badge.lock{letter-spacing:0; font-size:12px; color:var(--text2); font-weight:700;}

@media (max-width:900px){
  .room-wrap{grid-template-columns:1fr;}
}

/* ---------- Auth ---------- */
.auth-page{min-height:calc(100vh - 200px); display:flex; align-items:center; justify-content:center; padding:50px 22px;}
.auth-card{width:100%; max-width:420px; background:rgba(20,18,28,.6); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg); padding:38px 32px; backdrop-filter:blur(20px);
  box-shadow:0 30px 80px rgba(0,0,0,.6);}
.auth-logo{display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:22px;}
.auth-logo .mark{width:58px; height:58px; filter:drop-shadow(0 4px 14px rgba(108,62,255,.5));}
.auth-h{font-family:'Manrope'; font-size:25px; font-weight:800; color:#fff; text-align:center; letter-spacing:-.5px;}
.auth-p{font-size:13.5px; color:var(--text2); font-weight:600; text-align:center; margin:6px 0 6px; line-height:1.5;}
.auth-form{display:flex; flex-direction:column; gap:14px; margin-top:16px;}
.field{height:52px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; gap:11px; padding:0 15px; color:var(--text2); transition:.15s;}
.field:focus-within{border-color:rgba(108,62,255,.6); background:rgba(108,62,255,.06);}
.field input{flex:1; background:none; border:none; outline:none; color:#fff; font-size:15px;}
.field input::placeholder{color:var(--text2);}
.auth-submit{height:52px; border-radius:14px; border:none; font-size:15px; font-weight:800; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-lt)); color:#fff; box-shadow:0 10px 24px rgba(108,62,255,.4);}
/* --- Вход через соцсети --- */
.auth-or{display:flex; align-items:center; gap:12px; color:#8a8a94; font-size:12.5px; margin:20px 0 14px;}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.12);}
.auth-socials{display:flex; flex-direction:column; gap:10px;}
.auth-social{display:flex; align-items:center; justify-content:center; gap:10px; height:48px; border-radius:13px;
  font-size:14.5px; font-weight:800; color:#fff; text-decoration:none; transition:filter .15s, transform .05s;}
.auth-social:hover{filter:brightness(1.09);}
.auth-social:active{transform:scale(.99);}
.auth-social .soc-mark{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:7px; background:rgba(255,255,255,.22); font-size:12px; font-weight:900; line-height:1;}
.soc-yandex{background:#fc3f1d;}
.auth-alt{text-align:center; color:var(--accent2); font-size:13.5px; font-weight:700; margin-top:18px; cursor:pointer;}
.auth-terms{text-align:center; color:#6a6a72; font-size:11.5px; line-height:1.5; margin-top:16px;}
.auth-error{background:rgba(255,92,138,.12); border:1px solid rgba(255,92,138,.35); color:#ffb3c8;
  font-size:13.5px; font-weight:600; padding:12px 14px; border-radius:12px; margin-bottom:4px;}

/* ---------- Profile ---------- */
.prof-head{display:flex; align-items:center; gap:22px; margin:34px 0 28px; flex-wrap:wrap;}
.prof-av{width:96px; height:96px; border-radius:28px; background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:800; color:#fff; border:1px solid rgba(255,255,255,.15);
  background-position:center; overflow:hidden; flex:0 0 auto;}

/* карточки редактирования профиля */
.edit-card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-lg);
  padding:24px 26px; margin-bottom:20px;}
.edit-h{font-family:'Manrope'; font-size:18px; font-weight:800; color:#fff; margin:0 0 16px;}
.avatar-prev{width:96px; height:96px; border-radius:28px; flex:0 0 auto; background-size:cover; background-position:center;
  background-color:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; color:#fff;
  background-image:linear-gradient(135deg,var(--accent),var(--accent2));}
.avatar-prev span{color:#fff;}
.prof-name{font-family:'Manrope'; font-size:28px; font-weight:800; color:#fff;}
.prof-mail{font-size:14px; color:var(--text2); font-weight:600; margin-top:5px;}
.prof-since{font-size:12.5px; color:var(--text2); font-weight:600; margin-top:4px;}
.stats{display:flex; gap:16px; margin-bottom:34px; flex-wrap:wrap;}
.stat{flex:1; min-width:130px; background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-md); padding:20px; text-align:center;}
.stat .n{font-family:'Manrope'; font-size:30px; font-weight:800; color:#fff;}
.stat .l{font-size:12.5px; color:var(--text2); font-weight:600; margin-top:5px;}
.support-card{padding:26px; border-radius:var(--radius-lg); margin-bottom:34px;
  background:radial-gradient(120% 120% at 100% 0%, rgba(0,194,255,.28), transparent 55%), #131a24; border:1px solid rgba(255,255,255,.08);}
.support-card h3{margin:0 0 8px; font-size:19px; font-weight:800; color:#fff;}
.support-card p{margin:0 0 18px; font-size:14px; color:#9fd8ef; font-weight:600; line-height:1.5; max-width:520px;}
.support-btn{background:linear-gradient(135deg,var(--accent2),#3ad0ff); color:#04222e; font-weight:800; font-size:14.5px;
  padding:13px 22px; border-radius:12px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.app-dl{margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);}
.app-dl h4{margin:0 0 6px; font-size:16px; font-weight:800; color:#fff;}
.app-dl p{margin:0 0 14px; font-size:13.5px; color:#9fd8ef; font-weight:600; line-height:1.5; max-width:520px;}
.app-btn{background:linear-gradient(135deg,#6C3EFF,#8b5cff); color:#fff; font-weight:800; font-size:14.5px;
  padding:13px 22px; border-radius:12px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none;}
.app-btn:hover{filter:brightness(1.08);}

/* ---------- Гейт "нужен аккаунт" ---------- */
.auth-gate{position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center;
  background:rgba(6,6,10,.72); backdrop-filter:blur(8px); padding:20px;}
.auth-gate.show{display:flex; animation:screenIn .22s ease;}
.auth-gate-card{width:100%; max-width:380px; background:rgba(20,18,28,.98); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg); padding:30px 26px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.6);
  display:flex; flex-direction:column; align-items:center; gap:12px;}
.auth-gate-h{font-family:'Manrope'; font-size:22px; font-weight:800; color:#fff;}
.auth-gate-p{font-size:14px; color:var(--text2); font-weight:600; line-height:1.5; margin-bottom:6px;}
.auth-gate-card .btn{height:50px;}
.auth-gate-close{background:none; border:none; color:var(--text2); font-size:13px; font-weight:700; cursor:pointer; margin-top:4px;}
.auth-gate-close:hover{color:#fff;}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px); z-index:300;
  background:rgba(20,20,22,.96); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.12); color:#fff;
  font-size:14px; font-weight:600; padding:14px 22px; border-radius:14px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; box-shadow:0 12px 30px rgba(0,0,0,.5);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Footer ---------- */
.footer{border-top:1px solid rgba(255,255,255,.06); margin-top:60px; padding:34px 0;}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:0 22px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.footer .muted{color:var(--text2); font-size:13px; font-weight:600;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap;}
.footer-links a{color:var(--text2); font-size:13px; font-weight:600;}
.footer-links a:hover{color:#fff;}
/* Правая колонка футера: ссылки, а под ними — кнопки */
.footer-right{display:flex; flex-direction:column; align-items:flex-end; gap:16px;}
.footer-right .footer-links{justify-content:flex-end;}
/* Кнопки «Скачать приложение» и «Поддержать проект» — отдельной строкой под ссылками */
.footer-cta-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;}
.footer-cta{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px;
  color:#fff; font-size:13px; font-weight:700; text-decoration:none;
  border:1px solid rgba(108,62,255,.45); background:rgba(108,62,255,.16);}
.footer-cta:hover{background:rgba(108,62,255,.3); border-color:rgba(108,62,255,.7);}
.footer-cta.support{border-color:rgba(255,92,138,.45); background:rgba(255,92,138,.14);}
.footer-cta.support:hover{background:rgba(255,92,138,.26); border-color:rgba(255,92,138,.7);}

/* ---------- Подборки ---------- */
.col-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; padding:6px 0 40px;}
.col-card{display:block; cursor:pointer;}
.col-cover{position:relative; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; background:var(--card) center/cover;
  box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04); transition:transform .2s ease, box-shadow .2s ease;}
.col-cover.empty{background:linear-gradient(135deg,var(--accent),var(--accent2));}
.col-cover::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);}
.col-card:hover .col-cover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(108,62,255,.4);}
.col-badge{position:absolute; top:10px; right:10px; z-index:2; background:rgba(8,8,8,.6); backdrop-filter:blur(6px);
  color:#fff; font-size:12px; font-weight:800; padding:4px 9px; border-radius:20px;}
.col-title{margin-top:10px; font-family:'Manrope',sans-serif; font-weight:800; font-size:16px; color:#fff;}
.col-desc{margin-top:3px; font-size:13px; color:var(--text2); line-height:1.35;}

/* Панель фильтров в админке */
.admin-filter{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px;
  padding:12px 14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px;}
.admin-filter .form-input{height:40px;}

/* Читаемые опции во всех выпадающих списках (тёмный фон, белый текст) */
select{color:var(--text);}
select option{background:#17171c; color:#fff;}

/* ============================================================
   Сезонные темы (data-theme на <html>, переключаются в профиле)
============================================================ */
[data-theme="halloween"]{
  --accent:#FF7A18; --accent-lt:#FF9A45; --accent2:#B15CFF; --gold:#FFB347;
  background-image:radial-gradient(120% 80% at 50% 0%, #2a1408 0%, #000 55%);
}
[data-theme="halloween"] body{ background-image:radial-gradient(120% 80% at 50% 0%, #2a1408 0%, #000 55%); }
[data-theme="halloween"] .header{ background:rgba(20,10,4,.72); }

[data-theme="newyear"]{
  --accent:#3E7BFF; --accent-lt:#6FA8FF; --accent2:#5CE1FF; --gold:#CFE8FF;
  background-image:radial-gradient(120% 80% at 50% 0%, #0a1830 0%, #000 55%);
}
[data-theme="newyear"] body{ background-image:radial-gradient(120% 80% at 50% 0%, #0a1830 0%, #000 55%); }
[data-theme="newyear"] .header{ background:rgba(6,14,28,.72); }

/* Падающие украшения (снег / листья) */
.theme-fx{position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden;}
.theme-fx span{position:absolute; top:-6vh; opacity:.5; animation:themeFall linear infinite; will-change:transform;}
@keyframes themeFall{ to{ transform:translateY(112vh) rotate(360deg); } }

/* Пикер тем в профиле */
.theme-picker{display:flex; gap:12px; flex-wrap:wrap;}
.theme-opt{flex:1; min-width:150px; cursor:pointer; border:1px solid rgba(255,255,255,.1); border-radius:14px;
  background:rgba(255,255,255,.03); padding:14px; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text); font:inherit; transition:border-color .2s, transform .1s, background .2s;}
.theme-opt:hover{border-color:rgba(255,255,255,.28); transform:translateY(-2px);}
.theme-opt.active{border-color:var(--accent);}
.theme-swatch{width:100%; height:44px; border-radius:10px;}
.theme-opt.theme-default .theme-swatch{background:linear-gradient(135deg,#6C3EFF,#00C2FF);}
.theme-opt.theme-halloween .theme-swatch{background:linear-gradient(135deg,#FF7A18,#B15CFF);}
.theme-opt.theme-newyear .theme-swatch{background:linear-gradient(135deg,#3E7BFF,#5CE1FF);}
.theme-emoji{font-size:22px;}
.theme-name{font-weight:700; font-size:14px;}
.theme-cur{font-size:11px; color:var(--accent2); font-weight:700;}

/* Тематический декор в шапке и футере */
.theme-deco{display:none;}
[data-theme="halloween"] .theme-deco,
[data-theme="newyear"]   .theme-deco{display:flex;}
.theme-deco > span{display:none;}
[data-theme="halloween"] .theme-deco .d-hallo{display:inline-block;}
[data-theme="newyear"]   .theme-deco .d-ny{display:inline-block;}

/* шапка: гирлянда, свисающая из-под меню */
.theme-deco-top{position:absolute; left:0; right:0; top:100%; justify-content:space-around;
  padding:0 30px; font-size:22px; pointer-events:none; z-index:99;}
.theme-deco-top > span{transform:translateY(-52%); filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
  animation:decoBob 3.6s ease-in-out infinite;}
.theme-deco-top > span:nth-child(2n){animation-duration:4.4s;}
.theme-deco-top > span:nth-child(3n){animation-duration:5.1s;}
@keyframes decoBob{0%,100%{transform:translateY(-52%) rotate(-5deg);} 50%{transform:translateY(-42%) rotate(5deg);}}

/* футер: ряд украшений над подвалом */
.theme-deco-footer{justify-content:center; gap:26px; font-size:30px; margin-bottom:14px;}
.theme-deco-footer > span{animation:decoBob2 4s ease-in-out infinite;}
.theme-deco-footer > span:nth-child(2n){animation-duration:5s;}
@keyframes decoBob2{0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-6px) rotate(3deg);}}

/* Halloween: картинки по краям футера */
.footer{position:relative;}
.footer-inner{position:relative; z-index:2;}
.hallo-footer-imgs{display:none;}
[data-theme="halloween"] .hallo-footer-imgs{display:block;}
.hallo-footer-imgs img{position:absolute; bottom:0; max-height:160px; width:auto; pointer-events:none; z-index:1;}
.hallo-footer-imgs .hf-left{left:0;}
.hallo-footer-imgs .hf-right{right:0;}
@media(max-width:700px){ .hallo-footer-imgs img{max-height:90px; opacity:.85;} }

/* ============================================================
   Админ-панель
============================================================ */
body.admin{background:#0a0a0d; background-image:none; padding:0;}
.admin-shell{display:flex; min-height:100vh;}
.admin-side{width:240px; flex:0 0 240px; background:rgba(16,16,20,.9); border-right:1px solid rgba(255,255,255,.06);
  padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.admin-tag{font-size:10px; font-weight:800; color:#04222e; background:var(--accent2); padding:2px 7px; border-radius:6px; letter-spacing:.5px; text-transform:uppercase;}
.admin-nav{display:flex; flex-direction:column; gap:4px;}
.admin-navlink{padding:11px 14px; border-radius:11px; font-size:14px; font-weight:700; color:var(--text2); transition:.15s;}
.admin-navlink:hover{color:#fff; background:rgba(255,255,255,.05);}
.admin-navlink.active{color:#fff; background:rgba(108,62,255,.18);}
.admin-side-foot{margin-top:auto; display:flex; flex-direction:column; gap:4px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06);}
.admin-who{font-size:12px; color:var(--text2); font-weight:600; padding:8px 14px;}
.admin-main{flex:1; min-width:0; padding:32px 36px;}
.admin-flash{background:rgba(124,224,168,.12); border:1px solid rgba(124,224,168,.35); color:#bff0d4;
  font-size:14px; font-weight:600; padding:13px 16px; border-radius:12px; margin-bottom:22px;}

.admin-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.admin-h1{font-family:'Manrope'; font-size:28px; font-weight:800; color:#fff; letter-spacing:-.5px; margin:0;}
.admin-sub{font-size:13.5px; color:var(--text2); font-weight:600; margin-top:4px;}

.admin-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:30px;}
.admin-card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-md); padding:20px;}
.admin-card .n{font-family:'Manrope'; font-size:32px; font-weight:800; color:#fff;}
.admin-card .l{font-size:13px; color:var(--text2); font-weight:600; margin-top:4px;}

.bulk-bar{display:flex; align-items:center; gap:16px; margin-bottom:14px; padding:11px 16px; background:var(--card);
  border:1px solid rgba(255,255,255,.06); border-radius:12px;}
.bulk-bar .bulk-count{color:var(--text2); font-size:13px; font-weight:600;}
.bulk-bar .abtn.danger{margin-left:auto;}
.bulk-cb, #selAll{width:17px; height:17px; accent-color:var(--accent); cursor:pointer;}
.admin-table{width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius-md); overflow:hidden;
  border:1px solid rgba(255,255,255,.06);}
.admin-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text2);
  font-weight:700; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02);}
.admin-table td{padding:13px 16px; font-size:14px; color:#eee; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr:hover td{background:rgba(255,255,255,.02);}
.admin-thumb{width:40px; height:56px; border-radius:8px; flex:0 0 auto; display:inline-block; vertical-align:middle;}
.badge{display:inline-block; font-size:11px; font-weight:800; padding:3px 9px; border-radius:7px; letter-spacing:.3px;}
.badge.synced{color:#04222e; background:var(--accent2);}
.badge.generic{color:#ccc; background:rgba(255,255,255,.1);}
.badge.on{color:#0c2b18; background:var(--green);}
.badge.gold{color:#2a1e05; background:var(--gold);}
.badge.admin{color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-lt));}

.admin-actions{display:flex; gap:8px; align-items:center;}
.abtn{height:38px; padding:0 15px; border-radius:11px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06);
  color:#fff; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-decoration:none;}
.abtn:hover{background:rgba(255,255,255,.1);}
.abtn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-lt)); border-color:transparent; box-shadow:0 6px 16px rgba(108,62,255,.35);}
.abtn.danger{color:#ffb3c8; border-color:rgba(255,92,138,.35); background:rgba(255,92,138,.1);}
.abtn.danger:hover{background:rgba(255,92,138,.18);}
.abtn.sm{height:32px; padding:0 11px; font-size:12px; border-radius:9px;}

/* формы */
.admin-form{max-width:820px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-row{margin-bottom:18px;}
.form-row.full{grid-column:1 / -1;}
.form-label{display:block; font-size:12.5px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px;}
.form-input, .form-textarea, .form-select{width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:12px 14px; color:#fff; font-size:14.5px; outline:none; transition:.15s;}
.form-input:focus, .form-textarea:focus, .form-select:focus{border-color:rgba(108,62,255,.6); background:rgba(108,62,255,.06);}
.form-textarea{min-height:110px; resize:vertical; line-height:1.5;}
.form-select option{background:#161616;}
.form-hint{font-size:12px; color:var(--text2); font-weight:500; margin-top:6px;}
.genre-check{display:flex; flex-wrap:wrap; gap:9px;}
.genre-check label{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-size:13px; font-weight:700; color:var(--text2);}
.genre-check input{accent-color:var(--accent); width:15px; height:15px;}
.genre-check input:checked + span{color:#fff;}
.poster-prev{width:92px; height:138px; border-radius:10px; background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,.12); flex:0 0 auto; background-color:rgba(255,255,255,.03);}
.banner-prev{width:210px; height:118px; border-radius:10px; background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,.12); flex:0 0 auto; background-color:rgba(255,255,255,.03);}
.poster-prev.empty, .banner-prev.empty{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px);}
.admin-thumb.has-img{background-size:cover; background-position:center;}
.upload-row{display:flex; gap:16px; align-items:flex-start;}
.upload-row .upload-body{flex:1; min-width:0;}
.upload-pick{display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin-top:9px;}
.upload-pick .pick-name{font-size:12px; color:var(--text2); font-weight:600;}
.upload-or{font-size:12px; color:var(--text2); font-weight:700; margin:9px 0 4px; text-transform:uppercase; letter-spacing:.4px;}
.check-row{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#fff; cursor:pointer;}
.check-row input{accent-color:var(--accent); width:17px; height:17px;}
.form-foot{display:flex; gap:12px; margin-top:26px; align-items:center;}
.admin-empty{text-align:center; color:var(--text2); padding:50px; font-weight:600; background:var(--card); border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.06);}

.season-box{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-md); padding:18px; margin-bottom:16px;}
.season-box h4{margin:0 0 14px; font-size:16px; color:#fff; display:flex; align-items:center; justify-content:space-between;}
.ep-row-adm{display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.05); flex-wrap:wrap;}
.ep-row-adm:last-child{border-bottom:none;}
.ep-edit-row{display:flex; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); flex-wrap:wrap; margin:0;}
.ep-edit-row:last-of-type{border-bottom:none;}
.ep-edit-row .form-input{padding:9px 11px; font-size:13.5px;}
.ep-num-badge{flex:0 0 auto;}

@media (max-width:760px){
  .admin-side{position:fixed; z-index:200; transform:translateX(-100%); transition:.2s;}
  .admin-main{padding:20px 16px;}
  .form-grid{grid-template-columns:1fr;}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero, .hero-carousel{height:360px;}
  .hero-title{font-size:34px;}
  /* Меню ушло в бургер — правую группу (поиск/войти/бургер) прижимаем к краю */
  .header-right{margin-left:auto;}
  .nav-links{position:fixed; top:63px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    background:rgba(12,12,16,.98); backdrop-filter:blur(22px); padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08);
    display:none; z-index:99;}
  .nav-links.open{display:flex;}
  .burger{display:flex;}
  .detail-body{flex-direction:column; align-items:flex-start; margin-top:-90px;}
  .detail-poster{width:150px;}
  .detail-title{font-size:30px;}
  .crew{gap:30px;}
}
@media (max-width:560px){
  .wrap{padding:0 16px;}
  .header-inner{padding:12px 16px; gap:12px;}
  .hero, .hero-carousel{height:300px;}
  .hero-title{font-size:26px;}
  .hero-content{left:20px; right:20px; bottom:20px;}
  /* Баннер: угловой бейдж «Новинка» наезжал на теги (жанр/год) — убираем на телефоне,
     описание ограничиваем, чтобы высокий контент не распирал баннер вверх */
  .hero-badge{display:none;}
  .hero-desc{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:16px;}
  .detail-title{font-size:24px;}
  .page-title{font-size:26px;}
  .ep-thumb{width:110px; height:64px;}
  /* Каталог/подборки — ровно 2 колонки, карточки не раздуваются */
  .grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .col-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .card{width:150px;}
  .card-title{font-size:13.5px;}
  .card-sub{font-size:11.5px;}
  /* Профиль/формы: компактнее отступы и аватар */
  .prof-av, .avatar-prev{width:76px; height:76px; border-radius:22px; font-size:26px;}
  .prof-name{font-size:23px;}
  .edit-card{padding:20px 16px;}
  .support-card, .auth-gate-card{padding:22px 18px;}
  .auth-card{padding:30px 22px;}
  /* Футер — по центру, без прижатия к правому краю */
  .footer-inner{justify-content:center; text-align:center;}
  .footer-right{align-items:center;}
  .footer-links{justify-content:center;}
  .footer-cta-row{justify-content:center;}
}


/* ============================================================
   Рекламные слоты (раздел «Коммерция») — карусель баннеров
============================================================ */
.ad-slot{position:relative; margin:22px 0; border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);}
.ad-badge{position:absolute; top:8px; left:8px; z-index:3; font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; background:rgba(0,0,0,.5); padding:2px 7px; border-radius:6px; pointer-events:none;}
.ad-viewport{position:relative;}
.ad-slide{display:none; position:relative; text-decoration:none; color:inherit;}
.ad-slide.is-active{display:block; animation:adFade .5s ease;}
@keyframes adFade{from{opacity:.3} to{opacity:1}}
.ad-media{display:block; width:100%; height:auto; max-height:360px; object-fit:cover;}
iframe.ad-media{aspect-ratio:16/6; min-height:180px; max-height:none; border:0;}
a.ad-slide iframe.ad-media{pointer-events:none;}
.ad-cap{position:absolute; left:0; right:0; bottom:0; padding:16px 16px 12px; font-weight:700;
  color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.72)); font-size:15px;}
.ad-dots{position:absolute; bottom:9px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:6px;}
.ad-dot{width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.45); transition:background .2s;}
.ad-dot.is-active{background:#fff;}
@media (max-width:560px){
  .ad-media{max-height:220px;}
  .ad-cap{font-size:13px; padding:12px 12px 10px;}
}


/* ============================================================
   Киноклуб (статьи/блог)
============================================================ */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:8px 0 26px;}
.article-card{display:flex; flex-direction:column; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .18s, border-color .18s, box-shadow .18s; min-width:0;}
.article-card:hover{transform:translateY(-4px); border-color:rgba(108,62,255,.5); box-shadow:0 14px 34px rgba(0,0,0,.35);}
.ac-cover{aspect-ratio:16/9; background:#1a1a22 center/cover no-repeat;}
.ac-cover-empty{display:flex; align-items:center; justify-content:center; font-size:40px;
  background:linear-gradient(135deg,#2a2140,#182634);}
.ac-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.ac-title{font-weight:800; font-size:17px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.ac-excerpt{color:var(--text2); font-size:14px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.ac-date{margin-top:auto; color:var(--text2); font-size:12px; opacity:.8;}

/* Страница статьи */
.article-page{max-width:820px; margin:0 auto; padding-top:6px;}
.article-h1{font-size:34px; font-weight:800; line-height:1.15; margin:10px 0 8px;}
.article-date{color:var(--text2); font-size:14px; margin-bottom:22px;}
.article-body{font-size:18px; line-height:1.7;}
.article-body p{margin:0 0 18px;}
.article-body h2{font-size:26px; font-weight:800; margin:32px 0 12px; line-height:1.25;}
.article-body h3{font-size:21px; font-weight:700; margin:26px 0 10px;}
.article-body ul{margin:0 0 18px; padding-left:26px; list-style:disc;}
.article-body li{margin:6px 0;}
.article-body ol{margin:0 0 18px; padding-left:26px; list-style:none; counter-reset:list-0;}
.article-body ol li{position:relative;}
.article-body ol li[data-list="ordered"]{counter-increment:list-0;}
.article-body ol li[data-list="ordered"]::before{content:counter(list-0) ". "; position:absolute; left:-26px; width:24px; text-align:right; color:var(--text2);}
.article-body ol li[data-list="bullet"]::before{content:"\2022"; position:absolute; left:-16px; color:var(--text2);}
.article-body a{color:var(--accent2, #00C2FF); text-decoration:underline;}
.article-body blockquote{margin:22px 0; padding:10px 20px; border-left:3px solid rgba(108,62,255,.7);
  background:rgba(108,62,255,.08); border-radius:0 10px 10px 0; color:var(--text2);}
/* Выравнивание из редактора: Quill пишет его классами ql-align-*, а его CSS на сайте
   не подключён — без этого шима выравнивание видно в админке, но пропадает на странице.
   text-align на img не действует — для картинок дублируем через margin. */
.article-body .ql-align-center{text-align:center;}
.article-body .ql-align-right{text-align:right;}
.article-body .ql-align-justify{text-align:justify;}
.article-body img.ql-align-center{display:block; margin-left:auto; margin-right:auto;}
.article-body img.ql-align-right{display:block; margin-left:auto;}
.article-body img{max-width:100%; height:auto; border-radius:12px; margin:14px 0;}
.article-body iframe,.article-body .ql-video{width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:12px; margin:14px 0;}

/* Пагинация */
.pager{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0 30px;}
.pager-btn{min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  color:inherit; text-decoration:none; font-weight:700;}
.pager-btn:hover{border-color:rgba(108,62,255,.5);}
.pager-btn.active{background:linear-gradient(135deg,#6C3EFF,#00C2FF); border-color:transparent; color:#fff;}

@media (max-width:760px){ .article-grid{grid-template-columns:repeat(2,1fr); gap:16px;} .article-h1{font-size:27px;} .article-body{font-size:17px;} }
@media (max-width:560px){ .article-grid{grid-template-columns:1fr;} }


/* ============================================================
   Самохостинг шрифтов (вариативные Inter + Manrope) — без Google.
   РФ-блокировки больше не влияют. font-display:swap → текст виден
   сразу системным фолбэком, начертание подхватывается по загрузке.
============================================================ */

@font-face{
  font-family:'Manrope';
  src:url('../fonts/Manrope.ttf') format('truetype');
  font-weight:200 800; font-style:normal; font-display:swap;
}