:root{
  --bg:#0f1117; --surface:#141826; --surface-2:#1a1f30; --card:#191f2e;
  --text:#eef0f5; --muted:#a7afc3; --accent:#ff4f7c; --accent-2:#e9416a;
  --stroke:rgba(255,255,255,0.08); --warn:#f7d36a;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Ubuntu,sans-serif}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{border:0;background:transparent;color:inherit;cursor:pointer}
.container{max-width:1280px;margin:0 auto;padding:0 16px}
.main{padding-top:90px}
.header{position:fixed;inset:0 0 auto 0;z-index:1000;background:linear-gradient(180deg, rgba(18,20,30,0.95), rgba(18,20,30,0.72) 65%, rgba(18,20,30,0));border-bottom:1px solid var(--stroke);backdrop-filter:saturate(1.15) blur(6px)}
.header-inner{display:flex;align-items:center;gap:14px;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand-title{font-weight:900;letter-spacing:.35px}
.badge{font-size:12px;color:var(--muted)}
.nav-primary{display:flex;gap:18px;align-items:center;position:relative}
.nav-link{padding:8px 12px;border-radius:10px}
.nav-link:hover{background:rgba(255,255,255,0.06)}
.btn-genres{background:var(--surface-2);border:1px solid var(--stroke);border-radius:12px;padding:8px 14px}
.btn-genres.active{background:linear-gradient(180deg, var(--accent), var(--accent-2));color:#fff}
.megamenu{position:absolute;top:100%;left:0;margin-top:8px;background:var(--surface);border:1px solid var(--stroke);border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.35);display:none;min-width:560px}
.megamenu.open{display:block}
.megagrid{display:grid;grid-template-columns:repeat(3, minmax(180px, 1fr));gap:6px 18px;padding:12px}
.megagrid h4{margin:6px 0 8px;font-size:14px;color:#d6dbeb}
.megagrid a{display:block;padding:8px 6px;border-radius:10px}
.megagrid a:hover{background:rgba(255,255,255,0.06)}
.nav-spacer{flex:1}
.searchbar{position:relative;display:flex;align-items:center;gap:8px;flex:1;max-width:620px;background:var(--surface-2);border:1px solid var(--stroke);border-radius:14px;padding:8px 10px}
.searchbar input{flex:1;background:transparent;border:0;outline:none;color:var(--text)}
.primary-btn{background:linear-gradient(180deg, var(--accent), var(--accent-2));color:#fff;border-radius:12px;padding:9px 14px;font-weight:700;box-shadow:0 8px 24px rgba(233,65,106,0.35)}
.icon-btn{width:36px;height:36px;border-radius:12px;display:grid;place-items:center}
.autocomplete{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--stroke);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);display:none;max-height:440px;overflow:auto}
.autocomplete.open{display:block}
.sugg{display:flex;gap:10px;align-items:center;padding:8px 10px}
.sugg:hover,.sugg.active{background:rgba(255,255,255,0.06)}
.sugg .thumb{width:36px;height:54px;background:#0b0e16;border-radius:6px;overflow:hidden;flex:0 0 auto}
.sugg .thumb img{width:100%;height:100%;object-fit:cover}
.sugg .label{flex:1}
.sugg .type{font-size:12px;color:var(--muted)}
.lang{position:relative}
.flagbtn{width:40px;height:40px;border-radius:999px;border:1px solid var(--stroke);background:var(--surface-2);display:grid;place-items:center;padding:4px;box-shadow:0 1px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.25)}
.flagbtn svg{width:28px;height:28px;display:block;border-radius:999px}
.flagpanel{position:absolute;top:52px;right:0;background:var(--surface);border:1px solid var(--stroke);border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.35);display:none;padding:10px;transform-origin:top right;opacity:0;transform:scale(.96) translateY(-4px);transition:.2s}
.flagpanel.open{display:flex;gap:10px;flex-wrap:wrap;max-width:360px;opacity:1;transform:scale(1) translateY(0)}
.flag{width:36px;height:36px;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,0.18);background:#000;box-shadow:0 0 0 0 rgba(233,65,106,0);transition:transform .15s ease, box-shadow .25s ease}
.flag svg{display:block;width:100%;height:100%}
.flag:hover{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(233,65,106,.25)}
.hero{margin:16px 0 10px}
.slider{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--stroke);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.slide{display:none;position:relative;user-select:none}
.slide.active{display:block}
.slide img{width:100%;height:420px;object-fit:cover;display:block;filter:saturate(1.05)}
.slide .caption{position:absolute;left:24px;bottom:24px;background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15));backdrop-filter:blur(4px);padding:12px 16px;border-radius:14px}
.slide .title{font-size:38px;font-weight:900;margin:0 0 8px;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.slide .meta{color:var(--warn);font-weight:800}
.slider .nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 8px;pointer-events:none}
.sbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,0.35);color:#fff;pointer-events:auto}
.section-title{font-size:28px;margin:20px 0 12px}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fill, minmax(180px, 1fr))}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .28s ease, transform .28s ease}
.card.in{opacity:1;transform:none}
.poster{position:relative}
.poster .imgwrap{width:100%;aspect-ratio:2/3;overflow:hidden;background:#0a0d16}
.poster img{width:100%;height:100%;object-fit:cover}
.rating{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,0.6);color:var(--warn);padding:4px 8px;border-radius:10px;font-weight:800;display:flex;gap:6px;align-items:center}
.rating .star{font-size:16px}
.card .meta{padding:10px 12px;font-size:15px;color:#e9edf7;line-height:1.2;min-height:56px}
.cast-cloud{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--stroke);border-radius:12px;padding:6px 10px}
.pill img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.ad-side{position:fixed;top:96px;width:120px;height:70vh;background:var(--surface-2);border:1px solid var(--stroke);border-radius:16px;display:grid;place-items:center;color:var(--muted);z-index:10}
.ad-left{left:12px} .ad-right{right:12px}
.ad-box{background:var(--surface-2);border:1px solid var(--stroke);border-radius:16px;display:grid;place-items:center;color:var(--muted);height:120px;margin:14px 0}
@media (max-width:1180px){ .ad-side{display:none} }
@media (max-width:720px){ .ad-sticky{position:fixed;left:8px;right:8px;bottom:8px;height:58px;background:var(--surface-2);border:1px solid var(--stroke);border-radius:14px;display:grid;place-items:center;color:var(--muted);z-index:1000}}
.footer{padding:32px 0 60px;color:var(--muted)}
.footer .row{display:flex;align-items:center;gap:10px;justify-content:space-between;border-top:1px solid var(--stroke);padding-top:14px;margin-top:14px}
.leaving{opacity:0;transform:translateY(8px);transition:opacity .22s ease, transform .22s ease}
.person-info{display:flex;gap:20px;margin:20px 0;align-items:flex-start}
.person-photo img{width:220px;max-width:40vw;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45);background:#1a1f30}
.person-bio{flex:1}
.person-bio h1{margin:0 0 8px;font-size:28px;color:#ff4f7c}
.person-bio .muted{color:var(--muted);margin-bottom:8px}
.person-bio p{color:#cfd6e6;line-height:1.6}
.player-section{margin:20px 0;display:flex;justify-content:center}
#player{width:100%;max-width:1200px;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 0 20px rgba(0,0,0,.5);display:grid;place-items:center;color:#888}
@media (max-width:760px){
  .person-info{flex-direction:column;align-items:center;text-align:center}
  .person-photo img{width:60vw}
  .cards{grid-template-columns:repeat(auto-fill, minmax(140px,1fr))}
  .slide img{height:300px}
}
@media (prefers-reduced-motion: reduce){ .card{transition:none}.leaving{transition:none}.flagpanel{transition:none} }
/* ==== Карточка фильма над плеером ==== */
.movie-head{
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: flex-start;
}
@media (max-width: 640px){
  .movie-head{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .movie-head .poster img{ margin: 0 auto; }
}
.movie-head .poster img{
  width: 160px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.movie-head .info h1{
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
}
.movie-head .meta{
  color: #aab;
  font-size: 14px;
  margin-bottom: 10px;
}
.movie-head .overview{
  color: #ccd;
  font-size: 15px;
  line-height: 1.6;
}
/* ===== DVDPixel: watch layout + sources ===== */

/* Двухколоночная сетка: слева источники, справа плеер */
.watch-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:24px;
  align-items:start;
}

/* Левая колонка с источниками */
.sources{
  position: sticky;
  top: 96px;           /* подстрой: если шапка ниже/выше — поменяй число */
  align-self: start;
}
.sources-title{
  font-weight:700;
  margin:0 0 8px;
  opacity:.9;
}
.source-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.source-list .chip-btn{
  width:100%;
  justify-content:center;
}

/* Колонка плеера */
.player-col .player-section{ width:100%; }
.player-col iframe{
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  background:#000;
  display:block;
}

/* Активный источник — мягкий акцент */
.chip-btn.active{
  outline:2px solid rgba(255,255,255,.18);
}

/* Мобилки/планшеты: источники переезжают над плеером, в строку */
@media (max-width: 1024px){
  .watch-grid{ grid-template-columns: 1fr; }
  .sources{ position: static; }
  .source-list{ flex-direction:row; flex-wrap:wrap; }
  .source-list .chip-btn{ width:auto; }
}

/* (необязательно) чуть меньше отступов на очень узких экранах */
@media (max-width: 560px){
  .watch-grid{ gap:16px; }
  .source-list{ gap:6px; }
}
.play-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:18px;
  padding:12px 28px;
  border-radius:9999px;
  background:linear-gradient(135deg, #ff4f7c, #e9416a);
  color:#fff;
  cursor:pointer;
  transition:all .2s ease;
}
.play-btn:hover {
  filter:brightness(1.1);
  transform:scale(1.05);
}