/* ProsmotrFilm v4 - Production-Ready Global Styles */

/* ===== DESIGN TOKENS ===== */
:root{
  /* Layout */
  --cv-shell-max:1680px;
  --cv-rail-card-width:160px;
  --cv-similar-card-min:150px;
  --cv-similar-card-max:160px;
  
  /* Colors - Brand */
  --cv-accent:#e94560;
  --cv-accent-light:#ff6b81;
  --cv-accent-dark:#c23152;
  
  /* Colors - Dark */
  --cv-bg-900:#0a0a1a;
  --cv-bg-800:#111128;
  --cv-bg-700:#1a1a2e;
  --cv-bg-600:#16213e;
  
  /* Colors - Text */
  --cv-text-primary:#f3f4f6;
  --cv-text-secondary:#9ca3af;
  --cv-text-muted:#6b7280;
  
  /* Spacing */
  --cv-space-xs:4px;
  --cv-space-sm:8px;
  --cv-space-md:16px;
  --cv-space-lg:24px;
  --cv-space-xl:32px;
  --cv-space-2xl:48px;
  
  /* Radius */
  --cv-radius-sm:8px;
  --cv-radius-md:12px;
  --cv-radius-lg:16px;
  --cv-radius-xl:20px;
  --cv-radius-2xl:24px;
  --cv-radius-full:999px;
  
  /* Shadows */
  --cv-shadow-sm:0 4px 12px rgba(0,0,0,.2);
  --cv-shadow-md:0 12px 30px rgba(0,0,0,.3);
  --cv-shadow-lg:0 20px 50px rgba(0,0,0,.4);
  --cv-shadow-xl:0 30px 70px rgba(0,0,0,.5);
  --cv-shadow-accent:0 10px 30px rgba(233,69,96,.2);
  
  /* Transitions */
  --cv-ease-out:cubic-bezier(.4,0,.2,1);
  --cv-ease-spring:cubic-bezier(.22,.61,.36,1);
  --cv-duration-fast:.15s;
  --cv-duration-normal:.25s;
  --cv-duration-slow:.4s;
  
  /* Z-index layers */
  --cv-z-dropdown:50;
  --cv-z-sticky:40;
  --cv-z-fixed:30;
  --cv-z-modal:100;
  --cv-z-toast:110;
}

/* Tailwind's preflight already resets margins/padding. Repeating that reset in
   the unlayered stylesheet overrides every layered spacing utility (p-8,
   pt-24, mb-6, ...), because unlayered rules outrank CSS cascade layers. */
*{font-family:'Inter',sans-serif;box-sizing:border-box}
html{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,107,129,.95) rgba(255,255,255,.08);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
body{background:var(--cv-bg-900);color:#e8e8e8;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ===== FOCUS VISIBLE (Accessibility) ===== */
:focus-visible{
  outline:2px solid var(--cv-accent);
  outline-offset:2px;
  border-radius:4px;
}
:focus:not(:focus-visible){
  outline:none;
}
::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.08));
  border-radius:999px;
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ff6b81,#e94560 58%,#c23152);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
  min-height:42px;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ff8799,#f0556d 58%,#cf3357);
  border:2px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-corner{
  background:transparent;
}
.glass{background:rgba(17,17,40,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.06)}
.card{transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:12px;overflow:hidden;background:#111128;position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.04)}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(233,69,96,0.15);border-color:rgba(233,69,96,.15)}
.card img{transition:transform .5s}.card:hover img{transform:scale(1.08)}
.gradient-text{background:linear-gradient(135deg,#e94560,#ff6b81);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.shimmer{background:linear-gradient(90deg,#111128 25%,#1a1a2e 50%,#111128 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.fade-in{animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.pulse-soft{animation:pulseSoft .35s ease-out}
@keyframes pulseSoft{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.01)}100%{transform:translateY(0) scale(1)}}
.overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,transparent 60%);opacity:0;transition:opacity .3s;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:16px}
.card:hover .overlay{opacity:1}
.pill{padding:6px 16px;border-radius:20px;font-size:13px;font-weight:500;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:all .2s;white-space:nowrap;user-select:none;background:transparent;color:#aaa}
.pill:hover,.pill.active{background:#e94560;color:#fff;border-color:#e94560}
.player-tab{padding:8px 18px;border-radius:10px;font-size:13px;font-weight:500;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:all .2s;background:transparent;color:#aaa;transform:translateY(0);will-change:transform,box-shadow}
.player-tab.active{background:linear-gradient(135deg,#e94560,#c23152);color:#fff;border-color:transparent;box-shadow:0 4px 15px rgba(233,69,96,.3);animation:pulseSoft .35s ease-out}
.player-tab:not(.active):hover{background:rgba(233,69,96,.15);color:#fff}
.ep-btn{
  padding:8px 6px;
  border-radius:8px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:all .18s ease;
  transform:translateY(0);
  background:#111128;
  text-align:left;
  min-width:60px;
  line-height:1.3;
  white-space:normal;
}
.ep-btn:hover,.ep-btn.active{border-color:#e94560;background:rgba(233,69,96,.15);color:#e94560;transform:translateY(-1px);box-shadow:0 6px 16px rgba(233,69,96,.18)}

/* Навигация по эпизодам (prev/next) */
.ep-nav-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:12px;
}
.ep-nav-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:10px 14px;min-height:62px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,rgba(20,20,40,.6),rgba(10,10,26,.55));
  color:#cfd2de;
  text-align:left;
  transition:all .2s var(--cv-ease-spring);
  cursor:pointer;
  overflow:hidden;
}
.ep-nav-btn:hover{
  border-color:rgba(233,69,96,.35);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -8px rgba(233,69,96,.4);
  color:#fff;
}
.ep-nav-btn .ep-nav-dir{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:#9ca3af;
}
.ep-nav-btn:hover .ep-nav-dir{color:#ff6b81}
.ep-nav-btn .ep-nav-meta{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;
  width:100%;overflow:hidden;
}
.ep-nav-btn .ep-nav-num{
  flex-shrink:0;
  padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:11px;letter-spacing:.04em;color:#cfd2de;
}
.ep-nav-btn:hover .ep-nav-num{background:rgba(233,69,96,.18);color:#fff}
.ep-nav-btn .ep-nav-title{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:500;color:inherit;
}
.ep-nav-btn:nth-child(2){text-align:right;align-items:flex-end}
.ep-nav-btn:nth-child(2) .ep-nav-meta{justify-content:flex-end}
.ep-nav-btn-disabled{
  opacity:.45;cursor:not-allowed;pointer-events:none;
  background:rgba(15,15,30,.4);
}
@media (max-width:480px){
  .ep-nav-row{grid-template-columns:1fr;gap:8px}
  .ep-nav-btn:nth-child(2){text-align:left;align-items:flex-start}
  .ep-nav-btn:nth-child(2) .ep-nav-meta{justify-content:flex-start}
}

/* Модалка горячих клавиш */
.watch-hotkeys-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  animation:fadeInPlain .18s ease;
}
.watch-hotkeys-backdrop{
  position:absolute;inset:0;
  background:rgba(8,8,18,.72);
  backdrop-filter:blur(6px);
}
.watch-hotkeys-card{position:relative;z-index:1;animation:countUp .25s var(--cv-ease-spring) both}
.cv-kbd{
  display:inline-block;
  min-width:28px;padding:2px 8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:600;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-bottom-width:2px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  text-align:center;
}
@keyframes fadeInPlain{from{opacity:0}to{opacity:1}}
.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.genres-scroll{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(233,69,96,.9) rgba(255,255,255,.08);
  padding-bottom:10px;
}
.genres-scroll::-webkit-scrollbar{
  display:none;
  height:0;
}
.genres-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08);
  border-radius:999px;
}
.genres-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#e94560,#ff6b81);
  border-radius:999px;
}
#yearsBar{
  width:100%;
  max-width:1400px!important;
  margin-left:auto;
  margin-right:auto;
  padding-left:16px!important;
  padding-right:16px!important;
  box-sizing:border-box;
  overflow:visible;
}
#yearsList{
  display:block!important;
  width:100%;
  min-width:0;
  overflow:visible!important;
  padding-bottom:0;
}
#yearsList .year-filter-shell{
  width:min(100%,720px);
  min-width:0;
  max-width:720px;
}
.year-filter-shell{
  position:relative;
  display:grid;
  grid-template-columns:auto auto minmax(180px,1fr) auto auto;
  align-items:center;
  gap:8px;
  width:min(100%,720px);
  max-width:720px;
  min-height:46px;
  margin:0;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(19,21,29,.92),rgba(9,10,15,.92));
  box-shadow:0 12px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.year-filter-reset{
  flex:0 0 auto;
  min-width:48px;
  height:30px;
  padding:0 11px;
  font-size:11px;
  font-weight:750;
  color:#aeb4c0;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.065);
  border-radius:10px;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s var(--cv-ease-premium);
}
.year-filter-reset:hover{color:#fff;border-color:rgba(251,113,133,.32);transform:translateY(-1px)}
.year-filter-reset.active{
  color:#fff;
  border-color:rgba(251,113,133,.58);
  background:linear-gradient(135deg,#f43f5e,#be123c);
  box-shadow:0 7px 18px rgba(190,18,60,.28),inset 0 1px 0 rgba(255,255,255,.2);
}
.year-filter-label{display:none}
.year-filter-value{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:104px;
  height:30px;
  padding:0 10px;
  border:1px solid rgba(251,113,133,.16);
  border-radius:10px;
  background:rgba(244,63,94,.075);
  font-size:11px;
  font-weight:750;
  color:#f5c4cc;
  text-align:center;
  letter-spacing:.025em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.year-filter-edge{
  flex:0 0 auto;
  min-width:28px;
  font-size:10px;
  font-weight:650;
  color:#747c8b;
  text-align:center;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.year-range-track-box{
  --year-start:0%;
  --year-end:100%;
  position:relative;
  flex:1 1 auto;
  height:30px;
  width:100%;
  min-width:0;
}
.year-range-track,
.year-range-fill{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:4px;
  border-radius:999px;
  pointer-events:none;
}
.year-range-track{
  left:0;
  right:0;
  background:rgba(255,255,255,.105);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}
.year-range-fill{
  left:var(--year-start);
  width:calc(var(--year-end) - var(--year-start));
  background:linear-gradient(90deg,#fb7185,#e11d48);
  box-shadow:0 0 12px rgba(244,63,94,.34);
}
.year-range-input{
  position:absolute;
  inset:0;
  width:100%;
  height:30px;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
  pointer-events:none;
}
.year-range-input-from{
  z-index:2;
}
.year-range-input-to{
  z-index:3;
}
.year-range-input:focus{
  outline:none;
}
.year-range-input::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:transparent;
}
.year-range-input::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  margin-top:-6px;
  border-radius:50%;
  border:3px solid #12141c;
  background:#fb7185;
  box-shadow:0 0 0 1px rgba(251,113,133,.72),0 4px 12px rgba(190,18,60,.36);
  pointer-events:auto;
  cursor:grab;
  transition:transform .12s var(--cv-ease-out);
}
.year-range-input::-webkit-slider-thumb:hover{
  transform:scale(1.18);
}
.year-range-input:active::-webkit-slider-thumb{
  cursor:grabbing;
  transform:scale(1.25);
}
.year-range-input::-moz-range-track{
  height:4px;
  border:none;
  border-radius:999px;
  background:transparent;
}
.year-range-input::-moz-range-thumb{
  width:10px;
  height:10px;
  border:3px solid #12141c;
  border-radius:50%;
  background:#fb7185;
  box-shadow:0 0 0 1px rgba(251,113,133,.72),0 4px 12px rgba(190,18,60,.36);
  pointer-events:auto;
  cursor:grab;
  transition:transform .12s var(--cv-ease-out);
}
.year-range-input::-moz-range-thumb:hover{
  transform:scale(1.18);
}
@media(max-width:767px){
  #yearsBar{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .genres-scroll{
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:4px;
  }
  .genres-scroll::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
  }
  .year-filter-shell{
    width:100%;
    grid-template-columns:auto auto minmax(120px,1fr) auto auto;
    gap:6px;
    padding:6px;
    border-radius:14px;
  }
  .year-filter-reset{
    min-width:44px;
    height:28px;
    padding:0 9px;
    font-size:11px;
  }
  .year-filter-value{
    height:28px;
    min-width:92px;
    padding:0 8px;
    font-size:10px;
  }
  .year-filter-edge{
    font-size:10px;
  }
  .year-range-input::-webkit-slider-thumb{
    width:16px;
    height:16px;
    margin-top:-7px;
  }
  .year-range-input::-moz-range-thumb{
    width:16px;
    height:16px;
  }
}
@media(min-width:768px){
  #yearsBar{
    width:100%;
    max-width:1400px!important;
    position:relative;
    left:auto;
    transform:none;
  }
  #yearsList .year-filter-shell{
    width:min(100%,720px);
    min-width:0;
    max-width:720px;
  }
  .genres-scroll{
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .genres-scroll::-webkit-scrollbar{
    display:none;
  }
}
.imdb-logo-wrap{display:inline-block;vertical-align:middle;line-height:0}.imdb-logo-wrap svg{display:block;height:1rem;width:auto}
.similar-grid-wrap{transition:max-height .25s ease}
.similar-grid-inner .card{
  min-width:var(--cv-similar-card-min);
  max-width:var(--cv-similar-card-max);
  flex-shrink:0;
}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600}
.donut-block{
  position:relative;
}
.donut-svg{
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.55));
}
.donut-tooltip{
  position:fixed;
  z-index:60;
  min-width:210px;
  max-width:260px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at top right, rgba(233,69,96,.24), transparent 55%),
    linear-gradient(135deg,rgba(17,17,40,.98),rgba(8,8,20,.98));
  box-shadow:0 22px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  color:#e5e7eb;
  font-size:12px;
  line-height:1.4;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px) scale(.98);
  transform-origin:top left;
  transition:opacity .16s ease,transform .16s ease;
}
.donut-tooltip.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.donut-tooltip-kicker{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#9ca3af;
}
.donut-tooltip-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#e94560;
  box-shadow:0 0 0 4px rgba(233,69,96,.24);
}
.donut-tooltip-title{
  font-size:13px;
  font-weight:600;
  color:#f9fafb;
  margin-bottom:4px;
}
.donut-tooltip-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.donut-tooltip-value{
  font-size:18px;
  font-weight:700;
  color:#f9fafb;
}
.donut-tooltip-share{
  font-size:11px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:#e5e7eb;
}
.admin-overlay-card{
  animation:adminOverlayIn .22s ease-out;
  transform-origin:top center;
}
@keyframes adminOverlayIn{
  from{opacity:0;transform:translateY(12px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media (max-width:767px){
  .donut-tooltip{
    max-width:220px;
    padding:9px 10px;
    font-size:11px;
  }
  .donut-tooltip-value{
    font-size:16px;
  }
}
.search-dropdown{background:rgba(17,17,40,.97);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.08);border-radius:16px}
.btn{padding:10px 24px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;border:none;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:#e94560;color:#fff}.btn-primary:hover{background:#c23152;box-shadow:0 4px 20px rgba(233,69,96,.3)}
.btn-secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:rgba(255,255,255,.12)}

@keyframes reportModalIn{
  0%{
    opacity:0;
    transform:translateY(10px) scale(.96);
  }
  60%{
    opacity:1;
    transform:translateY(0) scale(1.02);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
.report-modal-panel{
  animation:reportModalIn .28s cubic-bezier(.22,.7,.3,1) both;
}

@keyframes reportModalOut{
  0%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  100%{
    opacity:0;
    transform:translateY(8px) scale(.96);
  }
}
.report-modal-panel-leave{
  animation:reportModalOut .22s cubic-bezier(.22,.7,.3,1) forwards;
}

/* ── 2FA modal animations ─────────────────────────────────────────────── */
@keyframes tfa-modal-in {
  from { opacity:0; transform:translateY(20px) scale(.95); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
@keyframes tfa-modal-backdrop-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes qr-appear {
  from { opacity:0; transform:scale(.88); filter:blur(6px); }
  to   { opacity:1; transform:scale(1);   filter:blur(0);   }
}
@keyframes qr-spin {
  to { transform:rotate(360deg); }
}

/* Враппер модалки 2FA — плавное появление */
#accountModal {
  animation: tfa-modal-backdrop-in .25s ease both;
}
#accountModal > div {
  animation: tfa-modal-in .32s cubic-bezier(.22,.7,.3,1) both;
}

/* QR-код — появление после загрузки */
.qr-appear {
  animation: qr-appear .45s cubic-bezier(.22,.7,.3,1) both;
}

/* Спиннер пока грузится QR */
.qr-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: #e94560;
  border-radius: 50%;
  animation: qr-spin .8s linear infinite;
}

/* Фрейм QR — белый фон с мягкой тенью */
[data-2fa-qr-frame] {
  transition: box-shadow .3s ease;
}
[data-2fa-qr-frame]:not(:empty) {
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}

/* Пульс-подсветка секретного кода при копировании */
@keyframes secret-copied {
  0%   { box-shadow: 0 0 0 0 rgba(233,69,96,.5); }
  60%  { box-shadow: 0 0 0 10px rgba(233,69,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,69,96,0); }
}
.secret-copied {
  animation: secret-copied .6s ease;
}

/* Верификация кода — shake при ошибке */
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-8px); }
  40%     { transform:translateX(8px); }
  60%     { transform:translateX(-5px); }
  80%     { transform:translateX(5px); }
}
.shake {
  animation: shake .4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Успешная активация — scale-bounce */
@keyframes success-bounce {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.04); }
  70%  { transform:scale(.97); }
  100% { transform:scale(1); }
}
.success-bounce {
  animation: success-bounce .5s cubic-bezier(.22,.7,.3,1) both;
}


@keyframes reportBtnIn{
  0%{
    opacity:0;
    transform:translateY(6px) scale(.96);
  }
  60%{
    opacity:1;
    transform:translateY(0) scale(1.02);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
.report-btn-appear{
  animation:reportBtnIn .35s cubic-bezier(.22,.7,.3,1) both;
}
.input{width:100%;padding:10px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-size:14px;transition:border-color .2s}
.input:focus{outline:none;border-color:#e94560}
.input[type="file"]{
  padding:0;
  background:transparent;
  border:none;
}
.input[type="file"]::file-selector-button{
  padding:9px 18px;
  margin-right:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(233,69,96,.12);
  color:#fff;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;
}
.input[type="file"]::file-selector-button:hover{
  background:rgba(233,69,96,.2);
  border-color:rgba(233,69,96,.6);
  box-shadow:0 10px 25px rgba(233,69,96,.25);
  transform:translateY(-1px);
}
.input[type="file"]::file-selector-button:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(233,69,96,.18);
}
/* Safari / old WebKit */
.input[type="file"]::-webkit-file-upload-button{
  padding:9px 18px;
  margin-right:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(233,69,96,.12);
  color:#fff;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;
}
.input[type="file"]::-webkit-file-upload-button:hover{
  background:rgba(233,69,96,.2);
  border-color:rgba(233,69,96,.6);
  box-shadow:0 10px 25px rgba(233,69,96,.25);
  transform:translateY(-1px);
}
.input[type="file"]::-webkit-file-upload-button:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(233,69,96,.18);
}

@media(max-width:768px){
  .input,
  input.input,
  textarea.input,
  #searchInput{
    font-size:16px;
  }
}
/* Универсальные плейсхолдеры — единый стиль и адаптация по медиа-запросам */
.input::placeholder,
input.input::placeholder,
textarea.input::placeholder,
input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="url"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder,
#searchInput::placeholder{
  color:rgba(229,231,235,.45);
  opacity:1;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .18s ease;
}
.input:focus::placeholder,
textarea:focus::placeholder,
#searchInput:focus::placeholder{
  color:rgba(229,231,235,.28);
}
@media(max-width:480px){
  .input::placeholder,
  textarea::placeholder,
  #searchInput::placeholder{
    font-size:14px;
  }
}
@media(min-width:1920px){
  .input::placeholder,
  textarea::placeholder,
  #searchInput::placeholder{
    font-size:15px;
  }
}
@media(min-width:2560px){
  .input::placeholder,
  textarea::placeholder,
  #searchInput::placeholder{
    font-size:17px;
  }
}
body.is-tv .input::placeholder,
body.is-tv textarea::placeholder,
body.is-tv #searchInput::placeholder{
  font-size:16px;
  color:rgba(229,231,235,.55);
}
.select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;border-radius:999px;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px 8px}
.select::-ms-expand{display:none}
.season-select{min-width:160px}
#seasonSection.is-single-season #seasonSelect,
#seasonSection.is-single-season .cv-select.season-select,
#seasonSelect[data-single-season="1"] + .cv-select{
  display:none!important;
}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.abs-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
/* Content grid */
.content-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.content-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:768px){.content-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
@media(min-width:1024px){.content-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1280px){.content-grid{grid-template-columns:repeat(6,1fr)}}
/* Profile dropdown */
.profile-dropdown{position:absolute;right:0;top:calc(100% + 4px);width:200px;background:#111128;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:100}
.dd-item{display:flex;align-items:center;padding:10px 16px;font-size:13px;transition:background .15s;text-decoration:none;color:inherit;cursor:pointer;border:none;background:none;width:100%}
.dd-item:hover{background:rgba(255,255,255,.06)}
.profile-menu-wrap{position:relative}
/* Horizontal scroll for related/similar sections */
.related-scroll{scroll-behavior:smooth}
.genres-scroll,
#tabsBar{
  display:flex !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  box-sizing:border-box;
}
.genres-scroll::-webkit-scrollbar,
#tabsBar::-webkit-scrollbar{
  display:none;
}
@media(max-width:1024px){
  #tabsBar{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  #tabsBar::-webkit-scrollbar{
    display:none;
  }
}
/* Hero */
.hero-bg{position:relative;overflow:hidden}
.hero-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,26,.3)0%,rgba(10,10,26,.7)55%,#0a0a1a 100%);z-index:1}
.hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(233,69,96,.14),transparent 72%);z-index:1}
/* Bottom nav */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(17,17,40,.97);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.06);box-shadow:0 -18px 42px rgba(0,0,0,.34);z-index:50;padding:4px 0 calc(4px + env(safe-area-inset-bottom));min-height:64px}
.bnav-item{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;font-size:10px;text-decoration:none;transition:color .2s;min-width:0}
.bnav-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:768px){
  .bottom-nav{display:flex}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .desktop-nav{display:none!important}
  .site-footer{padding-bottom:calc(106px + env(safe-area-inset-bottom))}
  #playerTabs{
    display:flex;
    flex-wrap:nowrap!important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* glow активной вкладки: box-shadow 0 4px 15px → ~19px вниз, ~11px вверх,
       плюс scale(1.02). Без запаса горизонтальный скролл-контейнер
       срезает свечение сверху/снизу. */
    padding-top:14px;
    padding-bottom:22px;
    margin-inline:-2px;
  }
  #playerTabs::-webkit-scrollbar{display:none}
  #playerTabs .player-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }
}
/* Season grid */
.season-grid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:96px;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-top:6px;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.watch-episodes-list{
  min-height:64px;
}
.season-grid::-webkit-scrollbar{display:none}
.season-grid .ep-btn{
  min-width:0;
  width:100%;
  scroll-snap-align:start;
}
@media(min-width:640px){
  .season-grid{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
    overflow-x:visible;
    padding-bottom:0;
    touch-action:auto;
    scroll-snap-type:none;
  }
}
@media(min-width:1024px){.season-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}}
.watch-details-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.watch-details-panel{
  min-width:0;
}
.watch-poster-shell{
  width:min(100%,280px);
  margin:0 auto;
}
.watch-poster-placeholder{
  width:100%;
  aspect-ratio:2/3;
  border-radius:28px;
}
.watch-poster-frame{
  position:relative;
  width:100%;
  padding:6px;
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at top,rgba(255,107,129,.18),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    rgba(13,13,24,.94);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 28px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
}
.watch-poster-aura{
  position:absolute;
  inset:-10% 14% auto;
  height:42%;
  border-radius:999px;
  background:radial-gradient(circle,rgba(233,69,96,.24),transparent 72%);
  filter:blur(24px);
  pointer-events:none;
}
.watch-poster-image{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:26px;
  background:#111128;
  box-shadow:0 20px 44px rgba(0,0,0,.4);
}
.watch-page-shell{
  width:min(100%,var(--cv-shell-max));
  --px:1rem;
}
.watch-player-section,
.watch-season-section,
.watch-overview,
.watch-relations-section,
.watch-comments-section{
  min-width:0;
}
.watch-player-actions{
  align-items:stretch;
}
.watch-player-actions .btn{
  min-width:0;
}

/* Party layout */
.party-layout{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.party-main-column,
.party-side-column{
  min-width:0;
}
.party-player-frame{
  box-shadow:0 26px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.04);
}
/* правый столбец комнаты: всё аккуратно внутри карточек */
.party-side-column{
  word-break:break-word;
}
.party-side-column .glass{
  overflow:hidden;
}
/* сетка статуса/хоста/участников/host ping — шире, чтобы не ломать текст */
#partyInfo .grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
@media(min-width:1280px){
  #partyInfo .grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(min-width:900px){
  .party-layout{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
    align-items:flex-start;
    gap:22px;
  }
}
@media(min-width:1280px){
  .party-layout{
    grid-template-columns:minmax(0,2.1fr) minmax(320px,1fr);
    gap:26px;
  }
}

.watch-meta-card{
  display:grid;
  gap:10px;
}
.watch-meta-head{
  display:grid;
  gap:2px;
}
.watch-meta-title{
  line-height:1.02;
  text-wrap:balance;
}
.watch-meta-original{
  margin:0;
}
.watch-meta-stats{
  gap:8px 10px;
}
.watch-meta-tags{
  gap:6px;
}
.watch-genre-pill{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.watch-meta-short{
  margin:0;
  max-width:62ch;
}
.watch-meta-description{
  margin:0;
  max-width:72ch;
}
.watch-meta-facts{
  display:grid;
  gap:6px;
}
.watch-meta-line{
  margin:0;
  color:#e5e7eb;
  line-height:1.55;
}
.watch-meta-line a{
  font-weight:600;
}
.watch-user-rating{
  min-width:0;
}

.session-card{
  position:relative;
  overflow:hidden;
  transition:opacity .3s ease, transform .3s ease, filter .3s ease;
}
.session-card-removing{
  opacity:0;
  transform:translateY(-4px) scale(.97);
  filter:blur(1px);
}
.watch-comments-section{
  margin-top:36px;
  padding-top:4px;
}
.watch-comment-form{
  align-items:flex-start;
}
.watch-comment-input{
  min-height:96px;
}
.watch-comment-submit{
  justify-content:center;
}

.comment-spoiler{
  position:relative;
  display:inline-block;
  border-radius:4px;
  padding:0 3px;
  background:transparent;
  cursor:pointer;
  user-select:none;
  color:inherit;
  transition:background .15s ease,color .15s ease;
}
.comment-spoiler::before{
  content:'Спойлер';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  border-radius:inherit;
  background:rgba(10,10,18,.9);
  color:#fca5a5;
  font-size:inherit;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
}
.comment-spoiler-inner{
  filter:blur(5px);
  transition:filter .15s ease;
}
.comment-spoiler.is-open{
  color:inherit;
  background:rgba(249,115,129,.1);
}
.comment-spoiler.is-open::before{
  content:'';
  display:none;
}
.comment-spoiler.is-open .comment-spoiler-inner{
  filter:none;
}
.watch-translation-wrap{
  width:100%;
}
.watch-relations-rail{
  padding-bottom:2px;
}
.user-rating-panel{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.user-rating-summary,
.user-rating-vote,
.user-rating-guest{
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:
    radial-gradient(circle at top left,rgba(233,69,96,.16),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    rgba(17,17,40,.86);
  box-shadow:0 22px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
}
.user-rating-summary{
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.user-rating-summary-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9ca3af;
}
.user-rating-summary-score{
  font-size:clamp(2rem,6vw,3.1rem);
  line-height:.95;
  font-weight:900;
  color:#fff;
  text-shadow:0 8px 24px rgba(233,69,96,.24);
}
.user-rating-summary-meta{
  font-size:12px;
  color:#cbd5e1;
}
.user-rating-vote{
  padding:18px 18px 16px;
}
.user-rating-vote-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.user-rating-vote-label{
  font-size:13px;
  font-weight:700;
  color:#fff;
}
.user-rating-vote-subtitle{
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
  color:#9ca3af;
  max-width:34rem;
}
.user-rating-current{
  flex-shrink:0;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.rating-stars-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.rating-star-btn{
  position:relative;
  min-height:44px;
  border:none;
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    rgba(255,255,255,.02);
  color:#d1d5db;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.rating-star-btn:hover{
  transform:translateY(-1px);
  color:#fff;
  background:
    radial-gradient(circle at top,rgba(255,107,129,.18),transparent 54%),
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),
    rgba(255,255,255,.03);
  box-shadow:0 14px 24px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.08);
}
.rating-star-btn.is-active{
  color:#fff;
  background:
    linear-gradient(135deg,rgba(233,69,96,.92),rgba(255,107,129,.88));
  box-shadow:0 16px 32px rgba(233,69,96,.28),inset 0 0 0 1px rgba(255,255,255,.14);
}
.rating-star-btn.is-current{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 0 0 2px rgba(255,255,255,.16),0 18px 34px rgba(233,69,96,.32);
}
.user-rating-guest{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 18px;
  color:#d1d5db;
  font-size:13px;
  line-height:1.45;
}
.rating-strip{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top left,rgba(233,69,96,.16),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    rgba(17,17,40,.88);
  box-shadow:0 20px 46px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
}
.rating-strip-summary{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  padding-right:8px;
}
.rating-strip-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9ca3af;
}
.rating-strip-value{
  font-size:clamp(1.15rem,2vw,1.55rem);
  font-weight:900;
  color:#fff;
  text-shadow:0 8px 24px rgba(233,69,96,.24);
}
.rating-strip-count{
  font-size:12px;
  color:#cbd5e1;
}
.rating-strip-vote{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 420px;
  justify-content:space-between;
  min-width:min(100%,320px);
}
.rating-strip-vote-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.rating-strip-user-label{
  font-size:12px;
  color:#cbd5e1;
}
.rating-strip-current{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.rating-strip-stars{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.rating-strip-btn{
  min-width:31px;
  min-height:31px;
  padding:4px 8px;
  line-height:1.1;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:#cbd5e1;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:transform .16s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.rating-strip-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(233,69,96,.35);
  background:rgba(233,69,96,.12);
  color:#fff;
  box-shadow:0 10px 22px rgba(233,69,96,.16);
}
.rating-strip-btn.is-active{
  border-color:rgba(233,69,96,.7);
  background:linear-gradient(135deg,rgba(233,69,96,.95),rgba(255,107,129,.9));
  color:#fff;
  box-shadow:0 12px 26px rgba(233,69,96,.22);
}
.rating-strip-btn.is-current{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 0 0 2px rgba(255,255,255,.12),0 16px 30px rgba(233,69,96,.24);
}
.rating-strip-guest{
  display:flex;
  align-items:center;
  gap:10px;
  color:#d1d5db;
  font-size:13px;
  line-height:1.45;
}
.rating-strip-guest i{
  color:#e94560;
}
@media(min-width:768px){
  .watch-details-layout{
    grid-template-columns:minmax(230px,270px) minmax(0,1fr);
    gap:28px;
  }
  .watch-poster-shell{
    width:100%;
    margin:0;
  }
  .user-rating-panel{
    grid-template-columns:minmax(190px,230px) minmax(0,1fr);
    align-items:stretch;
  }
}
@media(min-width:1440px){
  .watch-details-layout{
    grid-template-columns:minmax(280px,340px) minmax(0,1fr);
    gap:34px;
  }
}
@media(min-width:2200px){
  .watch-details-layout{
    grid-template-columns:minmax(340px,420px) minmax(0,1fr);
    gap:42px;
  }
  .watch-poster-frame{
    padding:14px;
    border-radius:34px;
  }
  .watch-poster-image{
    border-radius:26px;
  }
  .user-rating-summary{
    padding:24px 26px;
  }
  .user-rating-vote{
    padding:22px 24px 20px;
  }
}
@media(max-width:767px){
  .watch-page-shell{
    padding-left:12px!important;
    padding-right:12px!important;
    --px:12px;
  }
  .watch-poster-shell{
    width:min(100%,220px);
  }
  .watch-player-actions{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
    gap:10px;
    margin-top:12px;
    padding-inline:12px;
  }
  .watch-player-actions .btn{
    width:100%;
    min-height:44px;
    padding-inline:12px;
  }
  .watch-season-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    align-items:stretch;
  }
  .watch-season-controls .watch-section-title{
    margin:0;
  }
  .watch-season-select,
  .watch-episode-select,
  .watch-player-translation,
  .watch-player-translation .watch-translation-wrap,
  .watch-player-translation .watch-translation-select,
  .watch-player-translation .cv-select-trigger,
  .watch-player-translation-mount,
  .watch-player-translation-mount .watch-translation-wrap,
  .watch-player-translation-mount .watch-translation-select,
  .watch-player-translation-mount .cv-select-trigger{
    width:100%!important;
    min-width:0!important;
  }
  .watch-player-translation .watch-translation-wrap,
  .watch-player-translation-mount .watch-translation-wrap{
    display:grid!important;
    gap:8px;
  }
  .watch-player-translation .watch-translation-wrap > span,
  .watch-player-translation-mount .watch-translation-wrap > span{
    min-width:0!important;
  }
  .watch-details-layout{
    gap:18px;
    margin-bottom:28px;
  }
  .watch-meta-card{
    gap:12px;
  }
  .watch-meta-title{
    font-size:1.7rem;
  }
  .watch-meta-stats{
    gap:8px;
  }
  .watch-meta-description{
    font-size:14px;
    line-height:1.72;
  }
  .watch-comments-section{
    margin-top:30px;
  }
  .watch-comment-form{
    flex-direction:column;
  }
  .watch-comment-input{
    min-height:120px;
  }
  .watch-comment-submit{
    width:100%;
  }
  .user-rating-vote-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .user-rating-current{
    align-self:flex-start;
  }
  .rating-strip{
    align-items:flex-start;
    padding:13px 14px;
  }
  .rating-strip-vote{
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
    width:100%;
  }
  .rating-strip-stars{
    justify-content:flex-start;
  }
}
/* Footer */
.site-footer{position:relative;border-top:1px solid rgba(255,255,255,.05);padding:40px 0 24px;margin-top:40px;background:rgba(10,10,26,.5);overflow:hidden}
.site-footer-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:20px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.05);
}
.site-footer-credit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:rgba(156,163,175,.78);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, color .22s ease;
  pointer-events:none;
  white-space:nowrap;
}
.site-footer-credit-heart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media(hover:hover) and (pointer:fine){
  .site-footer:hover .site-footer-credit,
  .site-footer:focus-within .site-footer-credit{
    opacity:1;
    transform:translateY(0);
  }
}
@media(hover:none), (pointer:coarse){
  .site-footer-meta{display:none}
}

/* Cinema mode — режим кинотеатра в стиле Кинопоиска */
body.cinema{
  background:#000;
  color:#f5f5f5;
}
body.cinema .glass{
  background:rgba(10,10,10,.96);
  border-color:rgba(255,255,255,.04);
}
body.cinema nav.glass{
  box-shadow:0 18px 40px rgba(0,0,0,.7);
  border-bottom-color:rgba(255,255,255,.08);
}
body.cinema .hero-bg{
  height:420px!important;
}
@media(min-width:768px){
  body.cinema .hero-bg{height:520px!important}
}
/* Плавный переход Hero -> контент в кино-теме */
body.cinema .hero-bg::before{
  background:linear-gradient(180deg,rgba(0,0,0,.15)0%,rgba(0,0,0,.85)60%,#000 100%);
}
body.cinema .hero-bg::after{
  background:radial-gradient(ellipse at 25% 45%,rgba(229,9,20,.18),transparent 70%);
}
body.cinema .card{
  border-radius:6px;
  background:#181818;
  border-color:rgba(255,255,255,.02);
}
body.cinema .card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.8);
  border-color:rgba(229,9,20,.25);
}
body.cinema .overlay{
  background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,transparent 55%);
}
body.cinema .shimmer{
  background:linear-gradient(90deg,#181818 25%,#252525 50%,#181818 75%);
  background-size:200% 100%;
}
body.cinema .pill{
  border-radius:999px;
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.08);
}
body.cinema .pill.active{
  background:#e50914;
  border-color:#e50914;
}
body.cinema .btn-primary{
  background:#e50914;
}
body.cinema .btn-primary:hover{
  background:#b2070f;
}
body.cinema .player-tab.active{
  background:#e50914;
  box-shadow:0 4px 18px rgba(229,9,20,.4);
}
body.cinema .ep-btn.active{
  border-color:#e50914;
  color:#e50914;
  background:rgba(229,9,20,.18);
}
body.cinema .watch-poster-frame,
body.cinema .user-rating-summary,
body.cinema .user-rating-vote,
body.cinema .user-rating-guest,
body.cinema .rating-strip{
  background:
    radial-gradient(circle at top left,rgba(229,9,20,.18),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),
    rgba(10,10,10,.94);
  border-color:rgba(255,255,255,.08);
}
body.cinema .watch-poster-aura{
  background:radial-gradient(circle,rgba(229,9,20,.28),transparent 72%);
}
body.cinema .rating-star-btn.is-active{
  background:linear-gradient(135deg,#e50914,#ff424d);
  box-shadow:0 16px 32px rgba(229,9,20,.34),inset 0 0 0 1px rgba(255,255,255,.12);
}
body.cinema .rating-star-btn.is-current{
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 18px 36px rgba(229,9,20,.34);
}
body.cinema .rating-strip-btn.is-active{
  background:linear-gradient(135deg,#e50914,#ff424d);
  border-color:#ff5b66;
  box-shadow:0 14px 28px rgba(229,9,20,.3);
}
body.cinema .rating-strip-btn.is-current{
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 16px 30px rgba(229,9,20,.32);
}
body.cinema .gradient-text{
  background:linear-gradient(135deg,#e50914,#ff4040);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.cinema .site-footer{
  background:#000;
  border-top:none;
  margin-top:0;
}
body.cinema .profile-dropdown{
  background:#181818;
  border-color:rgba(255,255,255,.08);
}
body.cinema .search-dropdown{
  background:rgba(18,18,18,.98);
}
body.cinema .bottom-nav{
  background:rgba(18,18,18,.98);
}
/* TV mode */
@media(min-width:1920px){.card{border-radius:16px}.card:hover{transform:translateY(-8px)}.content-grid{grid-template-columns:repeat(7,1fr)}}
/* TV / 4K / Ultra-wide support */
@media(min-width:2560px){
  :root{
    --cv-shell-max:2200px;
    --cv-space-md:20px;
    --cv-space-lg:32px;
    --cv-space-xl:48px;
  }
  .content-grid{grid-template-columns:repeat(8,1fr);gap:20px}
  .card{border-radius:18px}
  .card:hover{transform:translateY(-10px)}
  body{font-size:18px}
  .glass{padding-top:14px;padding-bottom:14px}
  .btn{padding:14px 30px;font-size:16px;border-radius:14px}
  .input{padding:14px 20px;font-size:16px;border-radius:14px}
  .pill{padding:8px 20px;font-size:15px}
  .player-tab{padding:10px 22px;font-size:15px}
  nav.glass{padding:12px 16px}
  .bottom-nav{min-height:72px;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  .bnav-item{font-size:12px;gap:4px}
  .bnav-item i{font-size:1.25rem}
}
@media(min-width:3840px){
  :root{
    --cv-shell-max:3200px;
  }
  .content-grid{grid-template-columns:repeat(10,1fr);gap:24px}
  body{font-size:22px}
  .card{border-radius:22px}
  .btn{padding:18px 36px;font-size:20px;border-radius:18px}
  .input{padding:18px 26px;font-size:20px;border-radius:18px}
  nav.glass{padding:16px 20px}
  .search-dropdown{border-radius:28px}
}
/* Large touch screens (Smart TVs with touch) */
@media(min-width:1920px) and (pointer:coarse){
  .card{min-height:auto}
  .btn{min-height:52px}
  .bnav-item{min-height:56px}
  .pill{min-height:44px}
}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
/* Smooth page transitions + sticky footer layout */
#root{min-height:100vh;transition:opacity .15s ease-out;display:flex;flex-direction:column}
#root > main{flex:1 0 auto}
#root > footer{flex:0 0 auto}
#root.page-transition-out{opacity:0}
#root.page-transition-in{opacity:0}
#root.page-transition-in.visible{opacity:1}
@media(max-width:768px){
  body.watch-page{
    padding-bottom:24px!important;
  }
  body.watch-page .bottom-nav{
    display:none;
  }
  body.watch-page .site-footer{
    padding-bottom:40px;
  }
}
@media(max-width:768px) and (orientation:portrait){
  #playerSection{
    /* Растягиваем на всю ширину экрана без горизонтального скролла.
       Родитель .watch-page-shell имеет px-4 (16px), поэтому компенсируем. */
    margin-left:calc(-1 * var(--px, 1rem));
    margin-right:calc(-1 * var(--px, 1rem));
    width:calc(100% + 2 * var(--px, 1rem));
    /* Страхуем от выхода за вьюпорт */
    max-width:100vw;
    overflow:hidden;
  }
  #playerFrame{
    width:100%;
    max-width:100%;
    border-radius:0;
    border-left-width:0;
    border-right-width:0;
  }
  /* Убеждаемся что родитель не создаёт скролл */
  .watch-page-shell{
    overflow-x:hidden;
  }
}
@media(max-width:900px) and (orientation:landscape){
  body.watch-page{
    padding-bottom:24px!important;
  }
  body.watch-page .bottom-nav{
    display:none;
  }
  body.watch-page .site-footer{
    padding-bottom:40px;
  }
  body.watch-page #playerSection{
    margin-left:0;
    margin-right:0;
  }
  body.watch-page #playerFrame{
    border-left-width:1px;
    border-right-width:1px;
    border-radius:22px;
    max-width:none;
  }
  body.watch-page .watch-page-shell{
    padding-top:14px!important;
  }
  body.watch-page .watch-player-actions{
    padding-inline:0;
  }
  body.watch-page .watch-details-layout{
    grid-template-columns:minmax(170px,210px) minmax(0,1fr);
    gap:18px;
  }
  body.watch-page .watch-poster-shell{
    width:100%;
    margin:0;
  }
  body.watch-page .watch-season-controls{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 12px;
    align-items:end;
  }
  body.watch-page .watch-season-controls .watch-section-title{
    grid-column:1 / -1;
  }
}

/* 2026 refresh */
[class*="max-w-[1400px]"]{max-width:var(--cv-shell-max)!important}
body{
  background:
    radial-gradient(circle at top, rgba(229,9,20,.14), transparent 28%),
    linear-gradient(180deg, #050505 0%, #0b0b0d 38%, #101114 100%);
}
.glass{
  background:linear-gradient(180deg,rgba(15,15,18,.94),rgba(10,10,13,.92));
  border-bottom-color:rgba(255,255,255,.05);
}
.hero-bg{
  border-bottom:none;
}
.hero-media{
  transition:transform 1.2s ease, opacity .45s ease, filter .45s ease;
}
.hero-visual-enter{
  animation:heroVisualIn .8s cubic-bezier(.22,.61,.36,1);
}
.hero-panel-enter{
  animation:heroPanelIn .55s cubic-bezier(.22,.61,.36,1);
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-kicker::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:999px;
  background:#e50914;
  box-shadow:0 0 18px rgba(229,9,20,.8);
}
@keyframes heroVisualIn{
  from{opacity:.5;transform:scale(1.04)}
  to{opacity:1;transform:scale(1)}
}
@keyframes heroPanelIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
.search-dropdown,
.profile-dropdown{
  opacity:0;
  transform:translateY(10px) scale(.98);
  transform-origin:top right;
  transition:opacity .18s ease,transform .18s ease;
}
.search-dropdown.is-open,
.profile-dropdown.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
}
.search-dropdown{
  border-radius:20px;
  box-shadow:0 28px 60px rgba(0,0,0,.45);
}
.search-result-item{
  opacity:0;
  transform:translateY(10px);
  animation:searchItemIn .36s cubic-bezier(.22,.61,.36,1) forwards;
}
.search-result-item:nth-child(2){animation-delay:.03s}
.search-result-item:nth-child(3){animation-delay:.06s}
.search-result-item:nth-child(4){animation-delay:.09s}
.search-result-item:nth-child(5){animation-delay:.12s}
.search-result-item:nth-child(6){animation-delay:.15s}
.search-result-item:nth-child(7){animation-delay:.18s}
.search-result-item:nth-child(8){animation-delay:.21s}
@keyframes searchItemIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.reduced-search-motion .search-result-item{
  animation:none;
  opacity:1;
  transform:none;
}
.profile-dropdown{
  width:230px;
  border-radius:22px;
  background:linear-gradient(180deg,#17181d,#101115);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(22px);
}
.dd-item{
  position:relative;
  gap:10px;
  min-height:44px;
  padding:12px 16px;
  font-size:13px;
  color:#f3f4f6;
}
.dd-item::after{
  content:'';
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
.dd-item:last-child::after{
  display:none;
}
.dd-item:hover{
  background:linear-gradient(90deg,rgba(229,9,20,.14),rgba(255,255,255,.04));
}
.dd-item i{
  color:#9ca3af!important;
}
.dd-item-logout{
  margin-top:4px;
}
.select{
  min-height:46px;
  padding-right:44px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background-color:rgba(255,255,255,.06);
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.25 1.5L7 7.25L12.75 1.5' stroke='%23E5E7EB' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  background-repeat:no-repeat,no-repeat;
  background-position:right 15px center,0 0;
  background-size:14px 9px,100% 100%;
  color:#f5f5f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.16);
}
.select:hover{
  border-color:rgba(255,255,255,.24);
  background-color:rgba(255,255,255,.08);
}
.select:focus{
  border-color:#e50914;
  background-color:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(229,9,20,.16),0 14px 30px rgba(0,0,0,.24);
}
.cv-select-native{
  display:none!important;
}
.cv-select{
  position:relative;
  display:block;
  min-width:inherit;
  isolation:isolate;
}
.cv-select[hidden],
.cv-select.hidden{
  display:none!important;
}
.cv-select.w-auto{
  display:inline-block;
}
.cv-select.is-open{
  z-index:1000;
}
.cv-select-trigger{
  width:100%;
  min-height:42px;
  padding:9px 14px;
  padding-right:42px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  color:#f5f5f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.cv-select-trigger:hover{
  border-color:rgba(255,255,255,.24);
  background-color:rgba(255,255,255,.08);
}
.cv-select.is-open .cv-select-trigger{
  border-color:#e50914;
  background-color:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(229,9,20,.16),0 14px 30px rgba(0,0,0,.24);
}
.cv-select.is-disabled .cv-select-trigger{
  opacity:.55;
  cursor:not-allowed;
}
.cv-select-trigger-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cv-select-trigger-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  color:#9ca3af;
  transition:transform .18s ease,color .18s ease;
}
.cv-select.is-open .cv-select-trigger-icon{
  transform:rotate(180deg);
  color:#f5f5f5;
}
.cv-select-menu{
  position:fixed;
  top:0;
  left:0;
  right:auto;
  width:100%;
  min-width:100%;
  z-index:10000;
  max-width:min(300px, calc(100vw - 24px));
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  -ms-overflow-style:none;
  scrollbar-width:none;
  padding:8px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(20,20,24,.98),rgba(12,12,15,.98));
  box-shadow:0 22px 48px rgba(0,0,0,.4);
  backdrop-filter:blur(20px);
  opacity:0;
  transform:translateY(8px) scale(.98);
  transform-origin:top center;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.cv-select.is-open .cv-select-menu,
.cv-select-menu.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.cv-select.is-open-up .cv-select-menu,
.cv-select-menu.is-open-up{
  transform-origin:bottom center;
}
.cv-select-menu::-webkit-scrollbar{
  display:none;
}
.cv-select-group + .cv-select-group,
.cv-select-option + .cv-select-group,
.cv-select-group + .cv-select-option{
  margin-top:6px;
}
.cv-select-group-label{
  padding:4px 8px 6px;
  color:#9ca3af;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.cv-select-option{
  position:relative;
  width:100%;
  min-height:30px;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#f3f4f6;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .12s ease,color .16s ease;
}
.cv-select-option:hover{
  background:linear-gradient(90deg,rgba(229,9,20,.14),rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.06);
}
.cv-select-option.is-selected{
  background:linear-gradient(135deg,rgba(229,9,20,.26),rgba(255,255,255,.06));
  border-color:rgba(229,9,20,.4);
  color:#fff;
}
.cv-select-option.is-selected::after{
  content:'';
  position:absolute;
  top:50%;
  right:14px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff6b81;
  box-shadow:0 0 14px rgba(255,107,129,.8);
  transform:translateY(-50%);
}
.cv-select-option.is-disabled,
.cv-select-option:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.cv-select-option:active{
  transform:translateY(1px);
}
select.input,
select.select,
.profile-dropdown,
.search-dropdown{
  color-scheme:dark;
}
.search-dropdown{
  background:
    linear-gradient(180deg,rgba(20,20,24,.98),rgba(12,12,15,.98));
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
}
.search-results-panel{
  position:relative;
}
.search-results-panel::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
#adminContent .select,
#adminContent select.input,
#adminContent .profile-dropdown,
#adminContent .search-dropdown{
  background-color:#141519;
}
#adminContent .pill + .select{
  min-width:150px;
}
.glass select,
.glass .select,
.glass .profile-dropdown,
.glass .search-dropdown{
  border-radius:22px;
}
select option{
  background:#111317;
  color:#f3f4f6;
}
select optgroup{
  background:#111317;
  color:#9ca3af;
}
.continue-rail{
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scroll-snap-type:x proximity;
  scroll-padding-left:16px;
  /* Momentum-friendly on mobile */
  will-change:scroll-position;
}
/* Disable smooth scroll when JS momentum animation is active */
.continue-rail.momentum-active{
  scroll-behavior:auto;
}
.continue-rail .card{
  min-width:var(--cv-rail-card-width);
  scroll-snap-align:start;
}
/* Show subtle scroll arrows on hover (desktop) */
.continue-rail-wrap{
  position:relative;
}
.continue-rail-wrap .rail-arrow{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:16px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
  transition:opacity .2s,background .2s;
  opacity:0;
}
.continue-rail-wrap .rail-arrow[hidden]{
  display:none!important;
}
.continue-rail-wrap .rail-arrow.left{left:6px}
.continue-rail-wrap .rail-arrow.right{right:6px}
@media(hover:hover) and (pointer:fine){
  .continue-rail-wrap:hover .rail-arrow{
    display:flex;
    opacity:.8;
  }
  .continue-rail-wrap .rail-arrow:hover{
    opacity:1;
    background:rgba(0,0,0,.85);
  }
}
@media(min-width:1024px){.content-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1280px){.content-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(min-width:1536px){.content-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(min-width:1920px){.content-grid{grid-template-columns:repeat(9,minmax(0,1fr))}}
@media(min-width:2560px){
  :root{
    --cv-shell-max:2200px;
    --cv-rail-card-width:190px;
    --cv-similar-card-min:190px;
    --cv-similar-card-max:210px;
  }
  html{
    font-size:18px;
  }
  .content-grid{
    grid-template-columns:repeat(10,minmax(0,1fr));
    gap:20px;
  }
  .continue-rail{
    gap:18px;
  }
  .hero-bg{
    height:680px!important;
  }
  body.cinema .hero-bg{
    height:680px!important;
  }
  #heroContent{
    max-width:min(62rem,46vw)!important;
  }
  .watch-details-layout{
    grid-template-columns:minmax(380px,480px) minmax(0,1fr);
    gap:48px;
  }
  .watch-poster-shell{
    width:min(100%,420px);
  }
  .season-grid{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:10px;
  }
  .btn{
    min-height:52px;
    padding:12px 28px;
    font-size:16px;
  }
  .input,
  .select,
  .cv-select-trigger{
    min-height:54px;
    font-size:16px;
  }
  .profile-dropdown{
    width:280px;
  }
  .search-dropdown,
  .profile-dropdown{
    box-shadow:0 32px 70px rgba(0,0,0,.45);
  }
}
@media(min-width:3840px){
  :root{
    --cv-shell-max:3000px;
    --cv-rail-card-width:220px;
    --cv-similar-card-min:220px;
    --cv-similar-card-max:240px;
  }
  html{
    font-size:20px;
  }
  .content-grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:24px;
  }
  .hero-bg{
    height:820px!important;
  }
  body.cinema .hero-bg{
    height:820px!important;
  }
  #heroContent{
    max-width:min(72rem,44vw)!important;
  }
  .watch-details-layout{
    grid-template-columns:minmax(460px,620px) minmax(0,1fr);
    gap:56px;
  }
  .watch-poster-shell{
    width:min(100%,520px);
  }
  .season-grid{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:12px;
  }
  .btn{
    min-height:58px;
    padding:14px 32px;
    font-size:18px;
  }
  .input,
  .select,
  .cv-select-trigger{
    min-height:60px;
    font-size:18px;
  }
  .profile-dropdown{
    width:320px;
  }
  .dd-item{
    min-height:52px;
    font-size:15px;
  }
  .cv-select-menu{
    max-width:min(420px,calc(100vw - 40px));
    max-height:min(420px,calc(100vh - 120px));
  }
}
@media(min-width:7680px){
  :root{
    --cv-shell-max:4400px;
    --cv-rail-card-width:260px;
    --cv-similar-card-min:260px;
    --cv-similar-card-max:290px;
  }
  html{
    font-size:24px;
  }
  .content-grid{
    grid-template-columns:repeat(14,minmax(0,1fr));
    gap:30px;
  }
  .continue-rail{
    gap:24px;
  }
  .hero-bg{
    height:1100px!important;
  }
  body.cinema .hero-bg{
    height:1100px!important;
  }
  #heroContent{
    max-width:min(84rem,42vw)!important;
  }
  .watch-details-layout{
    grid-template-columns:minmax(620px,840px) minmax(0,1fr);
    gap:72px;
  }
  .watch-poster-shell{
    width:min(100%,720px);
  }
  .season-grid{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:16px;
  }
  .btn{
    min-height:70px;
    padding:18px 40px;
    font-size:22px;
    border-radius:18px;
  }
  .input,
  .select,
  .cv-select-trigger{
    min-height:72px;
    font-size:22px;
    border-radius:24px;
  }
  .profile-dropdown{
    width:400px;
  }
  .dd-item{
    min-height:64px;
    font-size:18px;
    padding:18px 22px;
  }
  .cv-select-menu{
    max-width:min(560px,calc(100vw - 64px));
    max-height:min(560px,calc(100vh - 160px));
  }
  .cv-select-option{
    min-height:54px;
    font-size:20px;
    border-radius:16px;
  }
  .cv-select-group-label{
    font-size:13px;
  }
}
body.compact-cards .content-grid{
  gap:14px;
}
body.compact-cards .card .p-2\.5{
  padding:10px;
}
.error-shell{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:110px 20px 56px;
  overflow:hidden;
}
.error-shell::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(229,9,20,.18), transparent 24%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.08), transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(233,69,96,.12), transparent 28%);
  pointer-events:none;
}
.error-card{
  position:relative;
  width:min(100%, 980px);
  padding:42px 34px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(145deg, rgba(24,24,30,.96), rgba(10,10,12,.92));
  box-shadow:
    0 30px 90px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  animation:errorCardReveal .9s cubic-bezier(.22,.61,.36,1) both;
}
.error-card::after{
  content:'';
  position:absolute;
  inset:auto -10% -45% auto;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(229,9,20,.22), transparent 66%);
  pointer-events:none;
}
.error-badge{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fca5a5;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.error-item{
  opacity:0;
  transform:translateY(18px) scale(.98);
  animation:errorItemReveal .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.error-item:nth-child(3){animation-delay:.08s}
.error-item:nth-child(4){animation-delay:.16s}
.error-item:nth-child(5){animation-delay:.24s}
.error-item:nth-child(6){animation-delay:.32s}
.error-item:nth-child(7){animation-delay:.4s}
.error-item:nth-child(8){animation-delay:.48s}
.error-emoji-wrap{
  position:relative;
  z-index:1;
  width:min(260px, 46vw);
  margin:22px auto 6px;
}
.error-emoji-shadow{
  position:absolute;
  left:50%;
  bottom:10px;
  width:72%;
  height:26px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(0,0,0,.42), transparent 72%);
  transform:translateX(-50%);
  filter:blur(8px);
}
.error-emoji{
  position:relative;
  z-index:1;
  font-size:clamp(96px, 18vw, 180px);
  line-height:1;
  text-align:center;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.35));
  animation:errorEmojiFloat 4.5s ease-in-out infinite;
}
.error-code{
  position:relative;
  z-index:1;
  margin-top:18px;
  font-size:clamp(88px, 20vw, 220px);
  line-height:.9;
  font-weight:900;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.12));
  -webkit-background-clip:text;
}
.error-title{
  position:relative;
  z-index:1;
  max-width:700px;
  margin-top:14px;
  font-size:clamp(28px, 4vw, 56px);
  line-height:1.02;
  font-weight:800;
}
.error-description{
  position:relative;
  z-index:1;
  max-width:640px;
  margin-top:14px;
  color:#b7bcc6;
  font-size:15px;
  line-height:1.7;
}
.error-meta{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.error-meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#d1d5db;
  font-size:13px;
}
.error-actions{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.error-action-item{
  opacity:0;
  transform:translateY(12px);
  animation:errorItemReveal .55s cubic-bezier(.22,.61,.36,1) .56s forwards;
}
.error-action-item:nth-child(2){
  animation-delay:.64s;
}
.error-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.error-orbit-one{
  top:-120px;
  right:-80px;
  width:260px;
  height:260px;
  animation:floatOrbit 7s ease-in-out infinite;
}
.error-orbit-two{
  bottom:-120px;
  left:-90px;
  width:220px;
  height:220px;
  animation:floatOrbit 9s ease-in-out infinite reverse;
}
@keyframes floatOrbit{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-12px) scale(1.04)}
}
@keyframes errorCardReveal{
  from{opacity:0;transform:translateY(26px) scale(.965)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes errorItemReveal{
  from{opacity:0;transform:translateY(18px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes errorEmojiFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-10px) rotate(-2deg)}
}
@media(max-width:768px){
  .error-shell{
    padding:90px 16px 32px;
  }
  .error-card{
    padding:28px 20px;
    border-radius:26px;
  }
  .error-description{
    font-size:14px;
  }
  .error-meta-chip{
    width:100%;
    border-radius:18px;
  }
  .error-actions .btn{
    width:100%;
    justify-content:center;
  }
  .error-emoji-wrap{
    width:min(220px, 58vw);
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .shimmer { animation: none !important; background: rgba(255,255,255,.04) !important; }
  .fade-in { animation: none !important; opacity: 1 !important; }
  .card:hover { transform: none !important; }
  .card:hover img { transform: none !important; }
}

/* ===== ENHANCED ANIMATIONS & MICRO-INTERACTIONS ===== */

/* Staggered card entrance animations */
.content-grid .card{
  animation:cardReveal .45s var(--cv-ease-spring) forwards;
}
.content-grid .card:nth-child(1){animation-delay:0s}
.content-grid .card:nth-child(2){animation-delay:.04s}
.content-grid .card:nth-child(3){animation-delay:.08s}
.content-grid .card:nth-child(4){animation-delay:.12s}
.content-grid .card:nth-child(5){animation-delay:.16s}
.content-grid .card:nth-child(6){animation-delay:.2s}
.content-grid .card:nth-child(7){animation-delay:.24s}
.content-grid .card:nth-child(8){animation-delay:.28s}
.content-grid .card:nth-child(9){animation-delay:.32s}
.content-grid .card:nth-child(10){animation-delay:.36s}
.content-grid .card:nth-child(11){animation-delay:.4s}
.content-grid .card:nth-child(12){animation-delay:.44s}
/* Cards past the first row: keep a subtle stagger, capped so late items don't lag */
.content-grid .card:nth-child(12n+13){animation-delay:.04s}
.content-grid .card:nth-child(12n+14){animation-delay:.08s}
.content-grid .card:nth-child(12n+15){animation-delay:.12s}
.content-grid .card:nth-child(12n+16){animation-delay:.16s}
.content-grid .card:nth-child(12n+17){animation-delay:.2s}
.content-grid .card:nth-child(12n+18){animation-delay:.24s}
.content-grid .card:nth-child(12n+19){animation-delay:.28s}
.content-grid .card:nth-child(12n+20){animation-delay:.32s}
.content-grid .card:nth-child(12n+21){animation-delay:.36s}
.content-grid .card:nth-child(12n+22){animation-delay:.4s}
.content-grid .card:nth-child(12n+23){animation-delay:.44s}
.content-grid .card:nth-child(12n+24){animation-delay:.48s}

@keyframes cardReveal{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Button press feedback */
.btn:active{
  transform:translateY(1px) scale(.98);
  transition:transform .08s ease;
}

/* Pill hover glow */
.pill{
  transition:all var(--cv-duration-normal) var(--cv-ease-out);
}
.pill:hover{
  box-shadow:0 4px 16px rgba(233,69,96,.15);
}
.pill.active{
  box-shadow:0 6px 20px rgba(233,69,96,.25);
}

/* Tab switch animation */
.player-tab{
  transition:all var(--cv-duration-normal) var(--cv-ease-out);
}
.player-tab.active{
  animation:tabActivate .3s var(--cv-ease-spring);
}
@keyframes tabActivate{
  0%{transform:scale(.95)}
  60%{transform:scale(1.02)}
  100%{transform:scale(1)}
}

/* Modal/overlay entrance */
@keyframes slideUp{
  from{opacity:0;transform:translateY(20px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes slideDown{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(12px) scale(.97)}
}

/* Skeleton loading pulse */
.shimmer{
  background:linear-gradient(90deg,var(--cv-bg-800) 25%,var(--cv-bg-700) 50%,var(--cv-bg-800) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:var(--cv-radius-md);
}

/* Toast notification animation */
@keyframes toastIn{
  from{opacity:0;transform:translateX(20px) scale(.95)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes toastOut{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(20px)}
}

/* Expand/collapse section animation */
.section-expand{
  overflow:hidden;
  transition:max-height var(--cv-duration-slow) var(--cv-ease-out),
             opacity var(--cv-duration-normal) ease;
}

/* Success checkmark animation */
@keyframes successPop{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.2)}
  100%{transform:scale(1);opacity:1}
}

/* Loading spinner */
@keyframes spin{to{transform:rotate(360deg)}}
.cv-spinner{
  width:20px;
  height:20px;
  border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--cv-accent);
  border-radius:50%;
  animation:spin .6s linear infinite;
}

/* Gentle float for decorative elements */
@keyframes gentleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* Image zoom on card hover - smoother */
.card img{
  transition:transform .5s var(--cv-ease-out),filter .5s var(--cv-ease-out);
}
.card:hover img{
  transform:scale(1.06);
  filter:brightness(1.05);
}

/* ===== IMPROVED RESPONSIVE SPACING ===== */

/* Small phones (< 375px) */
@media(max-width:374px){
  .content-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .btn{padding:8px 16px;font-size:13px}
  .pill{padding:5px 12px;font-size:12px}
  nav.glass{padding:6px 8px}
}

/* Responsiveness fixes */
@media (max-width: 639px) {
  .profile-dropdown { right: 0; left: auto; max-width: calc(100vw - 24px); }
  .year-range-track-box { min-height: 28px; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .site-footer .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== SKIP TO CONTENT (Accessibility) ===== */
.skip-to-content{
  position:absolute;
  top:-100%;
  left:16px;
  z-index:9999;
  padding:12px 24px;
  background:var(--cv-accent);
  color:#fff;
  font-weight:700;
  border-radius:0 0 var(--cv-radius-md) var(--cv-radius-md);
  transition:top .2s ease;
}
.skip-to-content:focus{
  top:0;
}

/* ═══════════════════════════════════════════════════════════════
   УЛУЧШЕННЫЕ АНИМАЦИИ И ДИЗАЙН ПРОФИЛЯ  (v5)
   ═══════════════════════════════════════════════════════════════ */

/* ── Общие анимации ────────────────────────────────────────────── */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes fadeInScale{
  from{opacity:0;transform:scale(.94)}
  to  {opacity:1;transform:scale(1)}
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(233,69,96,.0)}
  50%    {box-shadow:0 0 0 8px rgba(233,69,96,.12)}
}
@keyframes borderGlow{
  0%,100%{border-color:rgba(233,69,96,.2)}
  50%    {border-color:rgba(233,69,96,.6)}
}
@keyframes countUp{
  from{opacity:0;transform:translateY(6px) scale(.9)}
  to  {opacity:1;transform:translateY(0)   scale(1)}
}

/* Применяем к секциям при первом появлении */
.fade-in-up  {animation:fadeInUp   .4s var(--cv-ease-spring) both}
.fade-in-scale{animation:fadeInScale .3s var(--cv-ease-spring) both}

/* ── Переход между страницами ──────────────────────────────────── */
#root.page-transition-out{
  opacity:0;
  transform:translateY(8px) scale(.99);
  transition:opacity .15s ease,transform .15s ease;
  pointer-events:none;
}
#root.page-transition-in{
  opacity:0;
  transform:translateY(-4px) scale(.99);
}
#root.page-transition-in.visible{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .25s var(--cv-ease-spring),transform .25s var(--cv-ease-spring);
}

/* ── Улучшенные карточки ───────────────────────────────────────── */
.card{
  transition:transform .28s var(--cv-ease-spring),
             box-shadow .28s var(--cv-ease-out),
             border-color .28s ease;
  will-change:transform,box-shadow;
}
.card:hover{
  transform:translateY(-7px) scale(1.012);
  box-shadow:0 24px 52px rgba(233,69,96,.18),
             0  8px 24px rgba(0,0,0,.45);
  border-color:rgba(233,69,96,.22);
}
.card:active{transform:translateY(-3px) scale(1.004)}

/* ── Кнопки ───────────────────────────────────────────────────── */
.btn{
  position:relative;
  overflow:hidden;
  transition:all .2s var(--cv-ease-spring);
}
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0);
  transition:background .15s;
  border-radius:inherit;
  pointer-events:none;
}
.btn:hover::after{background:rgba(255,255,255,.06)}
.btn:active::after{background:rgba(255,255,255,.12)}
.btn:active{transform:scale(.97)}

.btn-primary{
  background:linear-gradient(135deg,#e94560 0%,#c23152 100%);
  box-shadow:0 4px 14px rgba(233,69,96,.3);
  transition:all .2s var(--cv-ease-spring);
}
.btn-primary:hover{
  box-shadow:0 6px 20px rgba(233,69,96,.45);
  transform:translateY(-1px);
}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(233,69,96,.2)}

/* ── Личный кабинет (профиль) ──────────────────────────────────── */

/* Аватар-инициал */
.profile-avatar{
  width:72px; height:72px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(233,69,96,.25),rgba(194,49,82,.15));
  border:2px solid rgba(233,69,96,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;color:#e94560;
  box-shadow:0 8px 24px rgba(233,69,96,.15);
  transition:all .3s var(--cv-ease-spring);
  animation:fadeInScale .4s var(--cv-ease-spring);
}
.profile-avatar:hover{
  transform:scale(1.05) rotate(-2deg);
  box-shadow:0 12px 32px rgba(233,69,96,.25);
  border-color:rgba(233,69,96,.4);
}

/* Счётчик-карточка (Избранное, История и т.д.) */
.stat-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(145deg,rgba(17,17,40,.9),rgba(10,10,26,.8));
  padding:16px;
  transition:all .25s var(--cv-ease-spring);
  animation:countUp .35s var(--cv-ease-spring) both;
  cursor:default;
}
.stat-card:hover{
  transform:translateY(-3px);
  border-color:rgba(233,69,96,.2);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.stat-card .stat-value{
  font-size:26px;font-weight:800;
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.75));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-card .stat-label{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#6b7280;margin-top:4px;
}

/* Достижения */
.achievement-tile{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  min-height:84px;padding:10px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(145deg,rgba(20,20,40,.55),rgba(10,10,26,.5));
  color:#5b6478;
  text-align:center;
  transition:transform .2s var(--cv-ease-spring),border-color .2s ease,box-shadow .2s ease,color .2s ease;
  outline:none;cursor:default;
  overflow:hidden;
}
.achievement-tile i{font-size:20px;line-height:1}
.achievement-tile .achievement-label{
  font-size:10px;line-height:1.15;letter-spacing:.04em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:100%;
}
.achievement-tile:hover,.achievement-tile:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.achievement-tile.is-earned{
  color:#fff;
  border-color:rgba(233,69,96,.32);
  background:linear-gradient(145deg,rgba(233,69,96,.18),rgba(139,92,246,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 6px 18px -8px rgba(233,69,96,.55);
}
.achievement-tile.is-earned i{
  color:#ff6b81;
  filter:drop-shadow(0 2px 6px rgba(233,69,96,.5));
}
.achievement-tile.is-earned::after{
  content:"";position:absolute;inset:-40% -40% auto auto;
  width:120%;height:120%;
  background:radial-gradient(circle,rgba(255,107,129,.18),transparent 60%);
  pointer-events:none;
}
.achievement-tile:not(.is-earned){opacity:.55}
.achievement-tile:not(.is-earned) i{opacity:.6}

/* Сессии */
.session-card{
  transition:all .25s ease;
  border-radius:16px;
}
.session-card:hover{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
@keyframes sessionRemove{
  to{opacity:0;transform:translateX(24px) scale(.96);max-height:0;padding:0;margin:0;overflow:hidden}
}
.session-card-removing{
  animation:sessionRemove .3s var(--cv-ease-out) forwards;
  pointer-events:none;
}

/* Карточки истории просмотра */
.history-card{
  transition:all .22s var(--cv-ease-spring);
}
.history-card:hover{
  transform:translateX(3px);
  border-color:rgba(233,69,96,.25);
  background:rgba(255,255,255,.05);
}

/* Прогресс-бар просмотра */
.watch-progress-bar{
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.watch-progress-fill{
  height:100%;
  background:linear-gradient(90deg,#e94560,#ff6b81);
  border-radius:999px;
  transition:width .4s var(--cv-ease-spring);
}

/* 2FA Badge */
.tfa-badge-on{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  border:1px solid rgba(52,211,153,.25);
  background:rgba(52,211,153,.1);
  color:#6ee7b7;font-size:12px;
}
.tfa-badge-off{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  border:1px solid rgba(251,191,36,.2);
  background:rgba(251,191,36,.08);
  color:#fde68a;font-size:12px;
}

/* QR-код блок */
.tfa-qr-wrapper{
  border-radius:20px;
  padding:12px;
  background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  transition:transform .3s var(--cv-ease-spring),box-shadow .3s ease;
}
.tfa-qr-wrapper:hover{
  transform:scale(1.02);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}
.tfa-qr-wrapper img{border-radius:12px;display:block;width:100%}

/* ── Улучшенный фильтр фильмов ─────────────────────────────────── */
.filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;font-weight:500;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(17,17,40,.85);
  color:#9ca3af;
  cursor:pointer;
  transition:all .18s var(--cv-ease-spring);
  white-space:nowrap;
  user-select:none;
}
.filter-chip:hover{
  border-color:rgba(233,69,96,.4);
  color:#fff;
  background:rgba(233,69,96,.1);
  transform:translateY(-1px);
}
.filter-chip.active,.filter-chip[aria-pressed="true"]{
  background:linear-gradient(135deg,rgba(233,69,96,.25),rgba(194,49,82,.15));
  border-color:rgba(233,69,96,.5);
  color:#f87171;
  box-shadow:0 4px 12px rgba(233,69,96,.15);
}

/* Секция фильтров с горизонтальным скроллом */
.filter-row{
  display:flex;gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
.filter-row::-webkit-scrollbar{display:none}

/* ── Навигация ─────────────────────────────────────────────────── */
nav.glass{
  transition:background .2s ease,backdrop-filter .2s ease,border-color .2s ease;
}
/* Активная ссылка в навбаре */
nav .nav-link-active{color:#e94560!important}

/* ── Watch Party ───────────────────────────────────────────────── */
.party-player-frame{
  position:relative;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  overflow:hidden;
  transition:box-shadow .3s ease;
}
.party-player-frame > div,
.party-player-frame iframe{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%!important;
  max-width:none;
}
.party-player-frame:hover{box-shadow:0 28px 60px rgba(0,0,0,.6)}

/* Статус-бейдж с пульсирующей точкой */
#partyConnectionStatus{
  transition:all .3s ease;
}

/* Никнейм-диалог гостя */
#partyNicknameDialog .glass{
  animation:slideUp .3s var(--cv-ease-spring);
}

/* ── Комментарии ───────────────────────────────────────────────── */
.comment-item{
  border-radius:14px;
  padding:14px 16px;
  background:rgba(17,17,40,.7);
  border:1px solid rgba(255,255,255,.05);
  transition:all .2s ease;
  animation:fadeInUp .25s var(--cv-ease-spring);
}
.comment-item:hover{border-color:rgba(255,255,255,.1)}

.comment-username{
  font-size:13px;font-weight:600;color:#f3f4f6;
}
.comment-date{
  font-size:11px;color:#6b7280;
}
.comment-avatar{
  width:36px;height:36px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  background:rgba(233,69,96,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#e94560;
  letter-spacing:.2px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.06);
}
.comment-avatar--fallback{
  background:linear-gradient(135deg,rgba(233,69,96,.22),rgba(139,92,246,.18));
}
.comment-text{
  font-size:14px;color:#d1d5db;line-height:1.6;
  margin-top:6px;
  /* Защита от очень длинных слов */
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* ── Адаптивность ──────────────────────────────────────────────── */
@media(max-width:768px){
  .profile-avatar{width:56px;height:56px;font-size:22px;border-radius:18px}
  .stat-card .stat-value{font-size:20px}
  .party-layout{grid-template-columns:1fr!important}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE OVERFLOW GUARD — глобальная защита от выхода за экран
   ═══════════════════════════════════════════════════════════════ */

/* Запрет горизонтального скролла на любом уровне */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Все блочные контейнеры не должны расширяться шире вьюпорта */
*,
*::before,
*::after {
  max-width: 100%;
  /* НЕ задаём min-width здесь — переопределяем только проблемные классы ниже */
}

/* Исключения: инлайн и flex/grid-элементы не должны получать max-width:100% глобально */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}
iframe {
  /* Плеер всегда растягивается в родителя */
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   ПЛАНШЕТ  768 – 1023px
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:768px) and (max-width:1023px) {
  /* Навбар: чуть больше padding для пальцев */
  nav.glass { padding: 8px 12px; }

  /* Тач-таргеты: минимум 44px */
  .btn { min-height: 44px; }
  .pill { min-height: 36px; padding: 7px 16px; }
  .player-tab { padding: 9px 16px; }
  .dd-item { min-height: 44px; }

  /* Поиск — не сжимать слишком сильно */
  #searchInput { font-size: 15px; }

  /* Сетка контента */
  .content-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  /* Плеер — убрать отрицательные margin на планшете */
  #playerSection {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #playerFrame {
    max-width: 100% !important;
    border-radius: 18px;
  }

  /* Watch-details — постер + текст рядом */
  .watch-details-layout {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: 22px;
  }

  /* Таблица foot — 2 колонки достаточно */
  footer .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   МАЛЫЕ ТЕЛЕФОНЫ  < 480px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:479px) {
  /* Навбар: логотип-текст скрыт, поиск занимает всё место */
  nav.glass { padding: 6px 8px; gap: 6px; }
  nav.glass .flex-1 { min-width: 0; }

  /* Hero чуть ниже */
  #heroSection .hero-bg { height: 320px !important; }

  /* Фильтры — компактные отступы */
  .year-filter-shell {
    grid-template-columns:auto minmax(112px,1fr) auto;
    padding:6px;
    gap:6px;
  }
  .year-filter-edge { display:none; }

  /* Кнопки в playerActions — всегда в колонку */
  .watch-player-actions {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* Постер чуть уже */
  .watch-poster-shell { width: min(100%, 180px); }

  /* cv-select-menu не шире экрана */
  .cv-select-menu {
    max-width: calc(100vw - 16px) !important;
  }

  /* Ошибки */
  .error-shell { padding: 80px 12px 24px; }
  .error-card { padding: 22px 14px; border-radius: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   SMART TV — 1920px+ с D-pad / без hover
   pointer:none  = телевизор с пультом
   pointer:coarse = телевизор с тачпадом или тач-пультом
   ═══════════════════════════════════════════════════════════════ */

/* TV-специфичные классы, добавляемые через window.__IS_TV */
body.is-tv .bottom-nav { display: none !important; }
body.is-tv { padding-bottom: 0 !important; }

/* Навигация: сильно увеличиваем тач-зоны и шрифт */
@media (min-width:1920px) and (pointer:none),
       (min-width:1920px) and (pointer:coarse) {
  /* Базовые размеры */
  body { font-size: 17px; }

  nav.glass {
    padding: 14px 24px;
    min-height: 72px;
  }

  /* Кнопки — крупные, легко выбрать D-pad'ом */
  .btn {
    min-height: 56px;
    padding: 14px 32px;
    font-size: 16px;
    border-radius: 14px;
  }
  .pill {
    min-height: 48px;
    padding: 10px 22px;
    font-size: 15px;
  }
  .player-tab {
    padding: 12px 24px;
    font-size: 15px;
  }
  .ep-btn {
    min-height: 54px;
    padding: 10px 10px;
    font-size: 14px;
  }
  .dd-item {
    min-height: 54px;
    font-size: 15px;
    padding: 14px 20px;
  }
  .input,
  .select,
  .cv-select-trigger {
    min-height: 54px;
    font-size: 16px;
  }
  .bnav-item { min-height: 60px; font-size: 13px; }

  /* Фокус-кольцо — обязательно видно на TV */
  a:focus,
  button:focus,
  [tabindex]:focus,
  input:focus,
  select:focus {
    outline: 5px solid #e94560 !important;
    outline-offset: 4px;
    border-radius: 6px;
    box-shadow: 0 0 0 8px rgba(233,69,96,.22) !important;
  }

  /* Карточки — крупнее и без hover-трансформ (пульт не hover) */
  .card {
    border-radius: 18px;
  }
  .card:hover {
    transform: translateY(-6px);
  }

  /* Сетка — больше карточек */
  .content-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px;
  }

  /* Плеер */
  #playerFrame { border-radius: 24px; }

  /* Watch-details */
  .watch-details-layout {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 36px;
  }

  /* Профиль-дропдаун */
  .profile-dropdown {
    width: 260px;
    border-radius: 24px;
  }

  /* Поиск */
  #searchInput { font-size: 17px; }
  .search-dropdown { border-radius: 24px; }

  /* Шапка навбара — поиск не сжимается */
  nav.glass .flex-1 { max-width: 600px; }

  /* Пагинация */
  #loadMoreBtn { min-height: 56px; font-size: 16px; padding: 14px 36px; }

  /* Сезоны */
  .season-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }

  /* Hero */
  .hero-bg { height: 540px !important; }

  /* Scroll-arrows Rail — крупнее */
  .continue-rail-wrap .rail-arrow {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
}

/* Только pointer:none (пульт без тача) — убираем hover-анимации */
@media (min-width:1920px) and (pointer:none) {
  .card:hover {
    transform: none;
    box-shadow: none;
  }
  .card:hover img { transform: none; }
  .btn:hover { transform: none; }
  .pill:hover { transform: none; box-shadow: none; }
  .player-tab:hover { transform: none; }
  /* Вместо hover — выделяем только focus */
  .card:focus-within {
    outline: 5px solid #e94560;
    outline-offset: 3px;
    transform: scale(1.03);
  }
}

/* Добавляем tabindex карточкам через JS — здесь страховка через CSS */
@media (min-width:1920px) {
  .card { cursor: pointer; }
  .card:focus {
    outline: 5px solid #e94560 !important;
    outline-offset: 3px;
    transform: scale(1.03);
  }
}

/* ═══════════════════════════════════════════════════════════════
   ЛАНДШАФТ  ТЕЛЕФОН  (высота < 500px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-height:499px) and (max-width:900px) {
  /* Навбар сжимается */
  nav.glass { padding: 4px 8px; min-height: 44px; }
  /* Hero в ландшафте — маленький */
  #heroSection .hero-bg { height: 200px !important; }
  /* Нижняя навигация скрыта в ландшафте */
  .bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
  /* Плеер полноэкранный */
  #playerFrame { border-radius: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ЗАЩИТА ПЕРЕПОЛНЕНИЯ — конкретные проблемные элементы
   ═══════════════════════════════════════════════════════════════ */

/* Поисковый дропдаун не шире вьюпорта */
#searchResults {
  max-width: min(100vw, 600px);
  width: calc(100vw - 32px);
}
@media (min-width:640px) {
  #searchResults { width: 100%; }
}

/* Профиль-дропдаун не вылезает за правый край */
.profile-dropdown {
  max-width: calc(100vw - 16px);
}

/* cv-select-menu: position:fixed — страхуем от выхода за правый край */
.cv-select-menu {
  max-width: min(300px, calc(100vw - 16px));
}

/* tabsBar — горизонтальный скролл без overflow страницы.
   Жёсткая страховка: ширина = 100% родителя + защита от родителя
   с min-width:auto через overflow-clip на самом блоке. */
#tabsBar {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  box-sizing: border-box;
}
/* Прямой родитель #tabsBar (а также аналогичных горизонтальных скролл-
   рядов) — клипуем по X, иначе если родитель распёрся inline-контентом
   или Tailwind utility, #tabsBar показывается шире экрана. clip
   современнее hidden и не создаёт scrolling context. Фолбэк — hidden. */
body :where(div, section, main) > #tabsBar{
  contain: paint;
}
body :where(div):has(> #tabsBar){
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  min-width: 0;
}
@supports not (selector(:has(*))){
  /* Без :has — клип на ближайший max-w-* контейнер через явный класс,
     это последнее правило для старых браузеров. */
}
#tabsBar::-webkit-scrollbar{ display: none; }
/* Пилюли внутри tabsBar не должны сжиматься — иначе ряд помещается в
   ширину экрана и скроллить становится нечего. */
#tabsBar > .pill,
#tabsBar > button,
#tabsBar > .tab-btn{
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* yearsBar — не шире экрана */
#yearsBar {
  max-width: 100vw;
  overflow: visible;
}
#yearsList {
  overflow: visible;
  width: 100%;
}

/* Таблица footer — не переполняется */
.site-footer { overflow: hidden; }
.site-footer .max-w-\[1400px\] { overflow: hidden; }

/* Длинные слова в комментариях */
.comment-text,
.watch-meta-description,
.watch-meta-short {
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Hero-контент не шире вьюпорта */
#heroContent {
  max-width: min(56rem, calc(100vw - 32px)) !important;
  width: 100%;
}

/* Постер на watch-странице */
.watch-poster-frame {
  max-width: 100%;
}

/* ep-nav-row не ломает layout на узких экранах */
.ep-nav-row {
  max-width: 100%;
}

/* Сетка сезонов не переполняется */
.season-grid {
  max-width: 100%;
}

/* Рейтинг-полоска */
.rating-strip {
  max-width: 100%;
  overflow: hidden;
}

/* Плеер-секция: не режем свечение/анимацию активной вкладки.
   Сам iframe-фрейм (.watch-player-frame) обрезает себя rounded-2xl+overflow-hidden,
   поэтому здесь overflow:hidden обрезал бы только glow .player-tab.active. */
#playerSection {
  max-width: 100%;
  overflow: visible;
}
/* Плеер на десктопе: оставляем ширину родителя (1400px shell).
   Раньше расширяли +20% за края, но при некоторых провайдерах (Alloha)
   их внутренний .allplay__video-wrapper не заполнял всё окно iframe,
   и видео визуально оказывалось прижатым к левому краю — наш CSS
   до содержимого cross-origin iframe не дотягивается. */
@media (min-width:1024px) {
  #playerFrame {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* На 15% ниже стандартного 16:9: 9 × .85 = 7.65. */
    aspect-ratio: 16 / 7.65;
  }
}
.watch-player-frame > iframe{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%!important;
  max-width:none;
  border:0;
}
.watch-player-tabs{
  /* запас под scale(1.02) + box-shadow 15px у .player-tab.active,
     чтобы свечение не упиралось ни в верх секции, ни в #playerFrame ниже */
  padding-top: 14px;
  padding-bottom: 14px;
  margin-top: -10px;
  margin-bottom: -6px;
  /* iframe ниже по потоку перекрывал нижний glow активной вкладки —
     поднимаем стек, чтобы тень рисовалась поверх соседнего #playerFrame */
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   TV-КЛАСС — применяется JS-ом через window.__IS_TV
   ═══════════════════════════════════════════════════════════════ */
body.is-tv {
  /* Увеличенный курсор фокуса */
  --tv-focus-color: #e94560;
}
body.is-tv *:focus {
  outline: 5px solid var(--tv-focus-color) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 10px rgba(233,69,96,.18) !important;
}
body.is-tv .card:focus {
  transform: scale(1.04);
  z-index: 2;
}
body.is-tv .btn {
  min-height: 56px;
  font-size: 16px;
  border-radius: 14px;
}
body.is-tv .pill {
  min-height: 46px;
  font-size: 15px;
}
body.is-tv .player-tab {
  font-size: 15px;
}
body.is-tv nav.glass {
  min-height: 72px;
  padding: 14px 24px;
}
body.is-tv .dd-item {
  min-height: 52px;
  font-size: 15px;
}
body.is-tv #searchInput {
  font-size: 17px;
  min-height: 50px;
}
body.is-tv .ep-btn {
  min-height: 52px;
  font-size: 14px;
}
body.is-tv #root > main,
body.is-tv .site-nav__inner,
body.is-tv .home-tabs-shell,
body.is-tv #genresBar {
  padding-left: max(48px, env(safe-area-inset-left)) !important;
  padding-right: max(48px, env(safe-area-inset-right)) !important;
}
body.is-tv .content-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
body.is-tv .card h3 {
  font-size: 17px;
  line-height: 1.35;
}
body.is-tv .card:focus,
body.is-tv a:focus,
body.is-tv button:focus {
  scroll-margin: 110px 64px;
}
body.is-tv .search-dropdown,
body.is-tv .cv-select-menu,
body.is-tv .profile-dropdown {
  max-height: 70vh;
  overflow-y: auto;
}
@media (min-width: 3000px) {
  body.is-tv .content-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  body.is-tv #root > main,
  body.is-tv .site-nav__inner,
  body.is-tv .home-tabs-shell,
  body.is-tv #genresBar {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ЗАПАС ПО ГРАНИЦАМ ДЛЯ КНОПОК С ЭФФЕКТАМИ
   Свечение (box-shadow), обводка (outline/ring), scale/translate и
   анимации кнопок не должны выезжать за границы родителя и обрезаться.
   Контейнерам с overflow (скролл-ряды, обрезающие карточки) даём
   внутренний запас больше максимальной тени/расширения (~24–34px).
   ═══════════════════════════════════════════════════════════════ */

/* Горизонтальные скролл-ряды с кнопками-эффектами:
   overflow-x:auto принудительно делает overflow-y:auto/hidden, поэтому
   единственный способ не обрезать вертикальный glow/scale — внутренний
   запас. Отрицательные вертикальные margin'ы возвращают часть отступа,
   чтобы лейаут не разъезжался, оставляя ~12px чистого буфера. */
.genres-scroll,
#tabsBar,
#playerTabs,
.season-grid,
.filter-row {
  padding-top: 22px;
  padding-bottom: 22px;
  margin-top: -10px;
  margin-bottom: -10px;
  /* запас по краям прокрутки, чтобы свечение первой/последней кнопки
     не срезалось у границы вьюпорта прокрутки */
  scroll-padding-inline: 8px;
}

/* season-grid: ep-btn даёт translateY(-1px)+тень 16px — нужен запас,
   перебиваем старые padding-top/bottom:6px */
.season-grid {
  padding-left: 4px;
  padding-right: 4px;
}

/* Рейтинг-полоска обрезала glow/scale своих кнопок (.rating-strip-btn
   .is-current: scale(1.04) + тень 30px) из-за overflow:hidden.
   Сохраняем защиту от переполнения ширины, но даём внутренний запас
   больше тени, чтобы свечение помещалось внутри обрезанной области. */
.rating-strip {
  padding: 24px 26px 30px;
}

/* Сетка звёзд рейтинга: .rating-star-btn.is-current scale(1.03)+тень 34px.
   Сама сетка не режет, но добавляем запас на случай обрезающего предка. */
.rating-stars-grid {
  padding: 20px 6px 26px;
  margin-top: -12px;
  margin-bottom: -18px;
}

/* Кнопки навигации по эпизодам: их собственный overflow:hidden не режет
   внешнюю тень, но ряд-грид прижат — даём запас под translateY(-2px)+тень. */
.ep-nav-row {
  padding: 12px 2px 22px;
  margin-top: -8px;
  margin-bottom: -14px;
}

/* Строка действий плеера: кнопки .btn-primary дают translateY(-1px)+тень
   20px — запас снизу/сверху, чтобы свечение не обрезалось контейнером. */
.watch-player-actions {
  padding-top: 6px;
  padding-bottom: 18px;
}

/* ═══════════════════════════════════════════════════════════════
   АДАПТАЦИЯ КАРТОЧЕК И РЕЛЬСОВ — ВСЕ ВЬЮПОРТЫ
   Проект подключает Tailwind через cdn.tailwindcss.com — он инжектит
   <style> после /static/style.css, поэтому utility-классы (w-40, text-sm,
   p-2, p-2.5, w-12, h-12, text-xs, gap-4 и т.д.) выигрывают каскад при
   равной специфичности. Чтобы перебить utility-стили tailwind-CDN,
   используем !important для размеров/типографики карточек.
   Высота карточки нигде не ограничивается жёстко — только width / font-size
   / padding, что не конфликтует с правилом «не ограничивать кнопки с
   свечением по высоте/ширине» (карточки не имеют фикс. высоты).
   ═══════════════════════════════════════════════════════════════ */

/* Селекторы Tailwind-классов нужно цеплять через атрибут, потому что
   квадратные скобки в utility (text-[10px], aspect-[2/3]) разбираются
   браузером как селекторы. Здесь работаем по составным классам. */

/* ═══════════════════════════════════════════════════════════════
   CONTENT-GRID: фluid-сетка через auto-fill + minmax + clamp
   Вместо жёстких брейкпоинтов сетка сама заполняется столько колонок,
   сколько влезает по min-ширине карточки. На 360px → 3 шт по ~108px,
   на 768px → 6 шт, на 1920px → 11 шт, на 4K → ~16 шт. Никаких прыжков.
   Текст внутри тоже масштабируется через clamp() — мобильный/планшет/
   ПК/TV получают пропорциональный размер без отдельных правил.
   Tailwind CDN инжектит utility после style.css → !important.
   ═══════════════════════════════════════════════════════════════ */
.content-grid{
  display: grid !important;
  /* auto-fit (а не auto-fill): пустые «фантомные» треки в последнем ряду
     схлопываются, поэтому реальные карточки растягиваются на всю ширину
     ряда и пустота не появляется даже когда N карточек не кратно
     числу колонок. */
  grid-template-columns: repeat(auto-fit, minmax(clamp(104px, 18vw, 240px), 1fr)) !important;
  gap: clamp(6px, 1.6vw, 22px) !important;
}
/* Избранное / История: ширина карточки фиксирована, чтобы одна-две карточки
   не растягивались на всю ширину контейнера. Без `1fr` пустые треки просто
   остаются слева, а карточки остаются нормального размера. */
#favGrid .content-grid,
#histGrid .content-grid{
  grid-template-columns: repeat(auto-fill, minmax(clamp(104px, 18vw, 240px), max-content)) !important;
  justify-content: start !important;
}
.content-grid > .card{
  min-width: 0 !important;
}
.content-grid .card .p-2,
.content-grid .card .p-2\.5{
  padding: clamp(5px, 1.2vw, 14px) !important;
}
.content-grid .card h3,
.content-grid .card .text-sm{
  font-size: clamp(10.5px, 1.4vw, 16px) !important;
  line-height: 1.22 !important;
  margin-bottom: 2px !important;
}
.content-grid .card .text-xs,
.content-grid .card .text-\[11px\]{
  font-size: clamp(9px, 1.05vw, 13px) !important;
  gap: 3px !important;
}
.content-grid .card .overlay .w-12.h-12{
  width: clamp(28px, 4.5vw, 60px) !important;
  height: clamp(28px, 4.5vw, 60px) !important;
}
.content-grid .card .overlay p{
  font-size: clamp(9.5px, 1.2vw, 14px) !important;
}
.content-grid .card .badge{
  font-size: clamp(8.5px, 1vw, 12.5px) !important;
  padding: clamp(1px, 0.3vw, 4px) clamp(4px, 0.8vw, 10px) !important;
}
.content-grid .card .top-2{ top: clamp(3px, 0.6vw, 8px) !important; }
.content-grid .card .left-2{ left: clamp(3px, 0.6vw, 8px) !important; }
.content-grid .card .right-2{ right: clamp(3px, 0.6vw, 8px) !important; }

/* На совсем больших экранах (>=3840px) даём ещё крупнее карточки,
   чтобы постеры не выглядели крошечными на 4K/8K мониторах. */
@media (min-width: 3840px){
  .content-grid{
    grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 8vw, 380px), 1fr)) !important;
    gap: clamp(22px, 1.2vw, 36px) !important;
  }
  .content-grid .card .p-2,
  .content-grid .card .p-2\.5{ padding: clamp(14px, 0.6vw, 24px) !important; }
  .content-grid .card h3,
  .content-grid .card .text-sm{ font-size: clamp(16px, 0.7vw, 26px) !important; }
  .content-grid .card .text-xs,
  .content-grid .card .text-\[11px\]{ font-size: clamp(13px, 0.55vw, 20px) !important; }
  .content-grid .card .overlay .w-12.h-12{
    width: clamp(60px, 2.5vw, 120px) !important;
    height: clamp(60px, 2.5vw, 120px) !important;
  }
  .content-grid .card .overlay p{ font-size: clamp(14px, 0.6vw, 22px) !important; }
  .content-grid .card .badge{
    font-size: clamp(12.5px, 0.5vw, 20px) !important;
    padding: clamp(4px, 0.2vw, 7px) clamp(10px, 0.4vw, 16px) !important;
  }
}

/* ─── Tiny phones (<360px) ────────────────────────────────────────── */
@media (max-width: 359px) {
  :root{ --cv-rail-card-width: 104px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 104px !important;
    min-width: 104px !important;
  }
  .continue-rail .card{ min-width: 104px !important; }
  .continue-rail{ gap: 6px !important; }

  .card .p-2,
  .card .p-2\.5{ padding: 6px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 9px !important; }
  .card .overlay .w-12.h-12{
    width: 30px !important;
    height: 30px !important;
  }
  .card .overlay p{ font-size: 10px !important; }
  .card .badge{ font-size: 8.5px !important; padding: 1px 5px !important; }
  .content-grid{ gap: 6px !important; }
}

/* ─── Small phones (360–479px) ────────────────────────────────────── */
@media (min-width: 360px) and (max-width: 479px) {
  :root{ --cv-rail-card-width: 118px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 118px !important;
    min-width: 118px !important;
  }
  .continue-rail .card{ min-width: 118px !important; }
  .continue-rail{ gap: 8px !important; }

  .card .p-2,
  .card .p-2\.5{ padding: 7px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 9.5px !important; }
  .card .overlay .w-12.h-12{
    width: 34px !important;
    height: 34px !important;
  }
  .card .overlay p{ font-size: 10.5px !important; }
  .card .badge{ font-size: 9px !important; padding: 2px 6px !important; }
  .content-grid{ gap: 8px !important; }

  /* Секции */
  #continueWatching h2,
  #recsSection h2{ font-size: 15px !important; }
  #recsSection h3{ font-size: 14px !important; }
  #recsSection article.glass{ padding: 14px !important; }
  #recsSection section.glass{ padding: 14px !important; }
}

/* ─── Phablet (480–639px) ─────────────────────────────────────────── */
@media (min-width: 480px) and (max-width: 639px) {
  :root{ --cv-rail-card-width: 128px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 128px !important;
    min-width: 128px !important;
  }
  .continue-rail .card{ min-width: 128px !important; }
  .continue-rail{ gap: 10px !important; }

  .card .p-2,
  .card .p-2\.5{ padding: 8px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 12px !important; line-height: 1.3 !important; }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 10px !important; }
  .card .overlay .w-12.h-12{ width: 38px !important; height: 38px !important; }
  .card .overlay p{ font-size: 11px !important; }
  .card .badge{ font-size: 9.5px !important; padding: 2px 7px !important; }
}

/* ─── Tablet portrait (640–767px) ─────────────────────────────────── */
@media (min-width: 640px) and (max-width: 767px) {
  :root{ --cv-rail-card-width: 138px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 138px !important;
    min-width: 138px !important;
  }
  .continue-rail .card{ min-width: 138px !important; }

  .card .p-2,
  .card .p-2\.5{ padding: 9px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 12.5px !important; line-height: 1.3 !important; }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 10.5px !important; }
  .card .overlay .w-12.h-12{ width: 42px !important; height: 42px !important; }
  .card .overlay p{ font-size: 11.5px !important; }
}

/* ─── Tablet landscape (768–1023px) ───────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  :root{ --cv-rail-card-width: 150px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 150px !important;
    min-width: 150px !important;
  }
  .continue-rail .card{ min-width: 150px !important; }

  .card .p-2,
  .card .p-2\.5{ padding: 10px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 13px !important; }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 11px !important; }
  .card .overlay .w-12.h-12{ width: 46px !important; height: 46px !important; }
}

/* ─── Laptop (1024–1279px) — стандарт 160px, переопределения для текста */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root{ --cv-rail-card-width: 160px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 160px !important;
    min-width: 160px !important;
  }
  .continue-rail .card{ min-width: 160px !important; }

  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 14px !important; }
}

/* ─── Desktop HD (1280–1535px) ────────────────────────────────────── */
@media (min-width: 1280px) and (max-width: 1535px) {
  :root{ --cv-rail-card-width: 172px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 172px !important;
    min-width: 172px !important;
  }
  .continue-rail .card{ min-width: 172px !important; }

  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 14.5px !important; }
}

/* ─── Desktop FullHD (1536–1919px) ────────────────────────────────── */
@media (min-width: 1536px) and (max-width: 1919px) {
  :root{ --cv-rail-card-width: 188px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 188px !important;
    min-width: 188px !important;
  }
  .continue-rail .card{ min-width: 188px !important; }

  .card .p-2,
  .card .p-2\.5{ padding: 12px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 15px !important; }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 12.5px !important; }
}

/* ─── 2K / TV (1920–2559px) ───────────────────────────────────────── */
@media (min-width: 1920px) and (max-width: 2559px) {
  :root{ --cv-rail-card-width: 220px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 220px !important;
    min-width: 220px !important;
  }
  .continue-rail .card{ min-width: 220px !important; }

  .card .p-2,
  .card .p-2\.5{ padding: 14px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 17px !important; }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 13.5px !important; }
  .card .overlay .w-12.h-12{ width: 60px !important; height: 60px !important; }
  .card .overlay p{ font-size: 15px !important; }
  .card .badge{ font-size: 12.5px !important; padding: 4px 11px !important; }
}

/* ─── 4K (2560–3839px) ────────────────────────────────────────────── */
@media (min-width: 2560px) and (max-width: 3839px) {
  :root{ --cv-rail-card-width: 260px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 260px !important;
    min-width: 260px !important;
  }
  .continue-rail .card{ min-width: 260px !important; }

  .card{ border-radius: 18px; }
  .card .p-2,
  .card .p-2\.5{ padding: 18px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 20px !important; }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 16px !important; }
  .card .overlay .w-12.h-12{ width: 80px !important; height: 80px !important; }
  .card .overlay p{ font-size: 18px !important; }
  .card .badge{ font-size: 15px !important; padding: 5px 13px !important; }
}

/* ─── 5K–6K (3840–5119px) ─────────────────────────────────────────── */
@media (min-width: 3840px) and (max-width: 5119px) {
  :root{ --cv-rail-card-width: 320px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 320px !important;
    min-width: 320px !important;
  }
  .continue-rail .card{ min-width: 320px !important; }

  .card{ border-radius: 22px; }
  .card .p-2,
  .card .p-2\.5{ padding: 24px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 24px !important; }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 18px !important; }
  .card .overlay .w-12.h-12{ width: 100px !important; height: 100px !important; }
  .card .overlay p{ font-size: 20px !important; }
  .card .badge{ font-size: 17px !important; padding: 6px 15px !important; }
}

/* ─── 8K и выше (5120px+) ─────────────────────────────────────────── */
@media (min-width: 5120px) {
  :root{ --cv-rail-card-width: 400px; }

  .continue-rail > .w-40,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40{
    width: 400px !important;
    min-width: 400px !important;
  }
  .continue-rail .card{ min-width: 400px !important; }

  .card{ border-radius: 28px; }
  .card .p-2,
  .card .p-2\.5{ padding: 30px !important; }
  .card .p-2 p,
  .card .p-2\.5 h3,
  .card .p-2 h3{ font-size: 30px !important; }
  .card .p-2\.5 .text-xs,
  .card .p-2 .text-xs{ font-size: 24px !important; }
  .card .overlay .w-12.h-12{ width: 130px !important; height: 130px !important; }
  .card .overlay p{ font-size: 24px !important; }
  .card .badge{ font-size: 22px !important; padding: 8px 20px !important; }
}

/* TV-фокус-режим: дополнительный буст карточки в фокусируемом интерфейсе. */
body.is-tv .continue-rail > .w-40,
body.is-tv .continue-rail > .shrink-0,
body.is-tv .continue-rail > .shrink-0.w-40{
  width: max(220px, var(--cv-rail-card-width)) !important;
  min-width: max(220px, var(--cv-rail-card-width)) !important;
}
body.is-tv .continue-rail .card{
  min-width: max(220px, var(--cv-rail-card-width)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   РЕЛЬСЫ → WRAP-СЕТКА НА УЗКИХ ЭКРАНАХ
   На широких экранах .continue-rail остаётся горизонтальным скроллом
   со стрелками (это часть UX «карусели»). На мобильном и планшете-
   портрете карточки уезжают за край и пользователь не видит, что
   их там много. Переключаем на flex-wrap (или grid auto-fill) —
   карточки переносятся на следующую строку. Прячем rail-arrows.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px){
  .continue-rail{
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(clamp(104px, 20vw, 160px), 1fr)) !important;
    grid-auto-flow: row !important;
    gap: clamp(6px, 1.6vw, 14px) !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    touch-action: auto !important;
    cursor: default !important;
    padding-bottom: 0 !important;
  }
  /* Дочерние обёртки (.shrink-0 / .w-40) больше не должны фиксировать
     ширину — пусть растягиваются под колонку сетки. */
  .continue-rail > .shrink-0,
  .continue-rail > .w-40,
  .continue-rail > .shrink-0.w-40,
  .continue-rail > a.card,
  .continue-rail > .card{
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
  }
  .continue-rail .card{
    min-width: 0 !important;
    scroll-snap-align: none !important;
  }
  /* Стрелки навигации бесполезны при wrap — прячем. */
  .continue-rail-wrap .rail-arrow{
    display: none !important;
  }
  /* Чтобы курсор grab не вводил в заблуждение на wrap-сетке. */
  .continue-rail[style*="cursor"]{
    cursor: default !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FLUID ADAPTATION — финальное переопределение, плавно тянет контент
   во всю ширину контейнера на промежуточных вьюпортах (≈768–1280),
   куда раньше попадал «пустой» правый край (например 923×914).
   ─ Принципы:
   • Никаких max-width в `ch` на параграфах watch/party — растягиваем по
     колонке, читабельность сохраняется за счёт самой ширины колонки.
   • Hero-блок центрируется и тянется fluid-кламом, а не прижат влево.
   • .watch-details-layout переходит на fr/fr без жёсткого 230–270 пика.
   • .party-layout переключается на двухколоночный режим чуть позже и с
     fluid-сайдбаром.
   ═══════════════════════════════════════════════════════════════ */

/* Hero — fluid, не прижат влево */
#heroContent{
  max-width:min(64rem, 100%)!important;
  width:100%;
  margin-right:auto;
}

/* Текстовые ограничители в watch-странице — снимаем ch-кэп, чтобы
   текст занимал всю ширину колонки. Читабельность держим тем, что
   сама колонка ограничена `.watch-details-panel` и контейнером. */
.watch-meta-short,
.watch-meta-description{
  max-width:none;
}

/* watch-details-layout: вместо фиксированной колонки постера
   используем fluid-пропорцию, плавно подстраивающуюся к ширине.
   На совсем узких экранах (<768) остаётся одноколоночный режим. */
@media(min-width:768px) and (max-width:1439.98px){
  .watch-details-layout{
    grid-template-columns:minmax(200px, clamp(220px, 26vw, 320px)) minmax(0, 1fr)!important;
    gap:clamp(18px, 2.4vw, 32px)!important;
  }
}

/* party-layout: между 900 и 1280 — fluid-доли вместо фикс 260px. */
@media(min-width:900px) and (max-width:1279.98px){
  .party-layout{
    grid-template-columns:minmax(0, 1.8fr) minmax(260px, 1fr)!important;
    gap:clamp(16px, 2vw, 24px)!important;
  }
}

/* user-rating-panel: на промежуточных ширинах тоже fluid */
@media(min-width:768px) and (max-width:1279.98px){
  .user-rating-panel{
    grid-template-columns:minmax(170px, clamp(180px, 22vw, 240px)) minmax(0, 1fr)!important;
  }
}

/* Универсальный контейнер шелла: используем всю ширину окна минус
   небольшие поля. На очень больших экранах остаётся прежний
   --cv-shell-max через существующее правило. */
[class*="max-w-[1400px]"]{
  width:min(100%, var(--cv-shell-max))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Боковые отступы — fluid от ~16px до 32px вместо фиксированных px-4 (16). */
@media(min-width:768px){
  main[class*="max-w-[1400px]"],
  header[class*="max-w-[1400px]"],
  div[class*="max-w-[1400px]"]{
    padding-left:clamp(16px, 2.4vw, 32px)!important;
    padding-right:clamp(16px, 2.4vw, 32px)!important;
  }
}

/* Карточные «полки» (рельсы) на ШИРОКИХ экранах (≥1024px) — карточки
   плавно скейлятся вместо жёстких 160px (w-40). На узких (<1024) рельс
   переключается в grid auto-fill (см. блок выше), там свой clamp. */
@media(min-width:1024px){
  .continue-rail > .card,
  .continue-rail > a.card,
  .continue-rail > .shrink-0,
  .continue-rail > .shrink-0.w-40,
  .continue-rail > a.shrink-0,
  .continue-rail > .w-40{
    width:clamp(160px, 14vw, 220px)!important;
    min-width:clamp(160px, 14vw, 220px)!important;
    flex:0 0 auto!important;
  }
}

/* На промежуточных экранах (640–1023, куда попадает 923×914) рельс
   уже в grid-режиме — нужно поднять минимальную ширину карточки,
   чтобы они были «нормального» размера, а не 104px. */
@media(min-width:640px) and (max-width:1023.98px){
  .continue-rail{
    grid-template-columns:repeat(auto-fill, minmax(clamp(150px, 17vw, 200px), 1fr))!important;
    gap:clamp(10px, 1.6vw, 18px)!important;
  }
}

/* Карточки content-grid: гарантируем fluid auto-fill, минимум 150px,
   плавно растущий до 220px. Перебивает старые repeat(N,1fr). */
@media(min-width:480px) and (max-width:1279.98px){
  .content-grid{
    grid-template-columns:repeat(auto-fit, minmax(clamp(150px, 18vw, 220px), 1fr))!important;
    gap:clamp(10px, 1.6vw, 20px)!important;
  }
}

/* Auth/account узкие шеллы — на больших промежуточных ширинах тянем шире */
@media(min-width:768px){
  main.max-w-3xl,
  main.max-w-4xl,
  main.max-w-5xl,
  main.max-w-6xl{
    max-width:min(100%, 1100px)!important;
    padding-left:clamp(16px, 2.4vw, 32px)!important;
    padding-right:clamp(16px, 2.4vw, 32px)!important;
  }
}

/* Типография внутри карточек рельса должна повторять content-grid,
   иначе будет 2 разные шкалы шрифтов рядом. Используем clamp(). */
@media (max-width: 1023px){
  .continue-rail .card .p-2,
  .continue-rail .card .p-2\.5{
    padding: clamp(5px, 1.2vw, 12px) !important;
  }
  .continue-rail .card h3,
  .continue-rail .card .text-sm{
    font-size: clamp(10.5px, 1.4vw, 14px) !important;
    line-height: 1.22 !important;
  }
  .continue-rail .card .text-xs,
  .continue-rail .card .text-\[11px\]{
    font-size: clamp(9px, 1.05vw, 12px) !important;
  }
  .continue-rail .card .overlay .w-12.h-12{
    width: clamp(28px, 4.5vw, 48px) !important;
    height: clamp(28px, 4.5vw, 48px) !important;
  }
  .continue-rail .card .badge{
    font-size: clamp(8.5px, 1vw, 11px) !important;
    padding: clamp(1px, 0.3vw, 3px) clamp(4px, 0.8vw, 8px) !important;
  }
}

/* ── Account settings: вкладочный layout ──────────────────────── */
.settings-hero{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:24px;
  margin-bottom:24px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,rgba(233,69,96,.08),rgba(139,92,246,.06));
  position:relative; overflow:hidden;
}
.settings-hero::before{
  content:''; position:absolute; inset:-2px; pointer-events:none;
  background:radial-gradient(600px 200px at 90% 0%,rgba(233,69,96,.12),transparent 60%);
}
.settings-hero__chip{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:18px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
  min-width:0; max-width:100%;
}
.profile-avatar--sm{
  width:44px;height:44px;border-radius:14px;font-size:18px;
  box-shadow:0 4px 14px rgba(233,69,96,.18);
}
.profile-avatar--sm img,
.profile-avatar img{
  width:100%; height:100%; border-radius:inherit; object-fit:cover; display:block;
}

.settings-layout{
  display:grid; gap:20px;
  grid-template-columns:240px minmax(0,1fr);
}
@media (max-width: 900px){
  .settings-layout{ grid-template-columns:1fr; }
}

.settings-nav{
  display:flex; flex-direction:column; gap:4px;
  padding:8px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(145deg,rgba(17,17,40,.65),rgba(10,10,26,.5));
  backdrop-filter:blur(8px);
  align-self:flex-start;
  position:sticky; top:80px;
}
@media (max-width: 900px){
  .settings-nav{
    position:static; flex-direction:row; flex-wrap:wrap; padding:6px;
  }
}
.settings-nav__item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  font-size:13px; color:#cbd5e1; text-align:left;
  background:transparent; border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  cursor:pointer; position:relative;
}
.settings-nav__item:hover{
  background:rgba(255,255,255,.04); color:#fff;
}
.settings-nav__item.is-active{
  background:linear-gradient(135deg,rgba(233,69,96,.18),rgba(233,69,96,.06));
  color:#fff;
  border-color:rgba(233,69,96,.32);
  box-shadow:0 6px 18px rgba(233,69,96,.18);
}
.settings-nav__item i{ width:16px; text-align:center; color:#94a3b8; }
.settings-nav__item.is-active i{ color:#ff8aa0; }
.settings-nav__item[data-settings-tab="danger"]{ color:#fda4af; }
.settings-nav__item[data-settings-tab="danger"] i{ color:#fda4af; }
.settings-nav__item[data-settings-tab="danger"].is-active{
  background:linear-gradient(135deg,rgba(239,68,68,.16),rgba(239,68,68,.05));
  border-color:rgba(239,68,68,.35);
  color:#fecaca;
}
.settings-nav__dot{
  width:6px; height:6px; border-radius:50%; background:#ef4444;
  margin-left:auto;
}

.settings-panes{
  display:flex; flex-direction:column; gap:20px; min-width:0;
}
.settings-card{
  display:none;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,rgba(17,17,40,.7),rgba(10,10,26,.55));
  padding:24px;
  animation:fadeInUp .35s var(--cv-ease-spring) both;
}
.settings-card.is-active{ display:block; }
.settings-card__head{ margin-bottom:18px; }
.settings-card__head h2{
  font-size:18px; font-weight:700; color:#fff; display:flex; align-items:center;
}
.settings-card__sub{ font-size:13px; color:#94a3b8; margin-top:6px; }

.settings-block{
  padding:16px; border-radius:18px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  margin-bottom:14px;
}
.settings-block:last-child{ margin-bottom:0; }
.settings-block__title{
  font-size:13px; font-weight:600; color:#fff;
  letter-spacing:.05em; margin-bottom:10px;
}
.settings-block__hint{
  font-size:12px; color:#94a3b8; margin-bottom:10px;
}
.settings-label{
  display:block; font-size:12px; color:#94a3b8; margin-bottom:4px;
  letter-spacing:.04em;
}

.settings-list{
  display:flex; flex-direction:column; gap:10px;
}
.settings-list__footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding-top:8px;
}

/* Toggle row ---------------------------------------------------- */
.setting-toggle{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.setting-toggle:hover{
  border-color:rgba(233,69,96,.25);
  background:rgba(255,255,255,.035);
}
.setting-toggle__text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.setting-toggle__label{ font-size:14px; font-weight:500; color:#fff; }
.setting-toggle__desc{ font-size:12px; color:#94a3b8; line-height:1.45; }

.setting-switch{ position:relative; flex:0 0 auto; padding-top:2px; }
.setting-switch input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.setting-switch__track{
  display:inline-block; width:40px; height:22px;
  border-radius:11px; background:rgba(255,255,255,.12);
  position:relative; transition:background .2s ease;
}
.setting-switch__thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:transform .2s var(--cv-ease-spring), background .2s ease;
}
.setting-switch input:checked + .setting-switch__track{
  background:linear-gradient(135deg,#e94560,#c23152);
}
.setting-switch input:checked + .setting-switch__track .setting-switch__thumb{
  transform:translateX(18px);
}
.setting-switch input:focus-visible + .setting-switch__track{
  outline:2px solid rgba(233,69,96,.6);
  outline-offset:2px;
}

/* Select row (theme/language) ---------------------------------- */
.setting-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}
.setting-row__text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.setting-row__label{ font-size:14px; font-weight:500; color:#fff; }
.setting-row__desc{ font-size:12px; color:#94a3b8; line-height:1.45; }
.setting-select{
  background:rgba(15,15,32,.85);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  border-radius:12px;
  padding:8px 12px; font-size:13px;
  min-width:160px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.setting-select:hover{ border-color:rgba(233,69,96,.4); }
.setting-select:focus-visible{
  outline:2px solid rgba(233,69,96,.6); outline-offset:2px;
  border-color:rgba(233,69,96,.55);
}

/* Status banners (2FA on/off) ---------------------------------- */
.status-banner{
  border-radius:16px; padding:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.status-banner--ok{
  border-color:rgba(16,185,129,.25);
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.02));
}
.status-banner--warn{
  border-color:rgba(245,158,11,.28);
  background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.02));
}

/* Profile edit grid (avatar + fields) -------------------------- */
.profile-edit-grid{
  display:grid; gap:18px;
  grid-template-columns:200px minmax(0,1fr);
}
@media (max-width:640px){
  .profile-edit-grid{ grid-template-columns:1fr; }
}
.profile-edit-avatar{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.profile-avatar-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
}
.profile-avatar-actions .btn{
  width:100%;
  min-width:0;
  white-space:nowrap;
  justify-content:center;
}
.profile-avatar-preview{
  width:128px;height:128px;border-radius:32px;overflow:hidden;
  background:linear-gradient(135deg,rgba(233,69,96,.25),rgba(194,49,82,.15));
  border:2px solid rgba(233,69,96,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:48px;font-weight:800;color:#e94560;
  box-shadow:0 12px 36px rgba(233,69,96,.18);
}
.profile-avatar-preview img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Danger zone -------------------------------------------------- */
.settings-card--danger{
  border-color:rgba(239,68,68,.25);
  background:linear-gradient(145deg,rgba(80,15,25,.45),rgba(30,8,12,.55));
}
.danger-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:14px 16px; border-radius:16px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(239,68,68,.15);
  margin-bottom:10px;
}
.danger-row:last-child{ margin-bottom:0; }
.btn-danger{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:12px;
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:#fff; font-weight:600;
  border:1px solid rgba(239,68,68,.5);
  transition:transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.btn-danger:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(239,68,68,.4);
}
.btn-danger:active{ transform:translateY(0); }

/* Reduced motion: вырубаем все хейровые анимации, hover-translate'ы и пр. */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
body.reduce-motion .stat-card:hover,
body.reduce-motion .btn-primary:hover,
body.reduce-motion .btn-danger:hover{ transform:none; }


/* ── Promo banners (внутренняя рекламная система) ───────────────────────
   Имя классов нейтральное (promo-*, не ad-*), чтобы не цеплялись
   списки фильтров блокировщиков. */
[data-promo-slot]{display:block;margin:0 auto;}
[data-promo-slot].is-empty{display:none;}
.promo-banner{
  display:block;position:relative;overflow:hidden;border-radius:14px;
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);
  text-decoration:none;color:inherit;
}
.promo-banner-img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;background:rgba(0,0,0,.15);}
.promo-banner.is-broken{display:none !important;}
.promo-banner-frame{
  display:block;width:100%;border:0;background:transparent;
  min-height:90px;height:120px;
}
.promo-banner-html .promo-banner-frame,
.promo-banner-text .promo-banner-frame{min-height:120px;}
.promo-banner-label{
  position:absolute;top:6px;right:8px;
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);background:rgba(0,0,0,.45);
  padding:2px 6px;border-radius:6px;pointer-events:none;
  border:1px solid rgba(255,255,255,.08);
}
/* Конкретные размещения */
[data-promo-slot="home_top"]{margin:0 auto 12px;max-width:1400px;padding:0 16px;}
[data-promo-slot="home_inline"]{margin:16px auto;max-width:1400px;padding:0 16px;}
[data-promo-slot="watch_above"],
[data-promo-slot="watch_below"]{margin:12px 0;}
[data-promo-slot="sidebar"]{position:sticky;top:80px;}
[data-promo-slot="footer"]{margin:24px auto;max-width:1400px;padding:0 16px;}
[data-promo-slot="search_results"]{margin:8px 0 16px;}
[data-promo-slot="player_overlay"]{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  max-width:520px;width:90%;z-index:5;pointer-events:auto;
}
[data-promo-slot="player_overlay"] .promo-banner{
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
}
@media (max-width:640px){
  .promo-banner-img{max-height:160px;}
  .promo-banner-frame{height:100px;}
  [data-promo-slot="sidebar"]{position:static;}
}
/* Скрытие через настройку — добавляется через html[data-promo-enabled="0"] */
html[data-promo-enabled="0"] [data-promo-slot]{display:none !important;}

/* ========================================================================== 
   PROSMOTRFILM 2026 — CINEMATIC DESIGN UNIFICATION
   Final visual layer: one palette, one depth system and viewport-aware motion.
   ========================================================================== */
:root{
  --cv-accent:#f43f5e;
  --cv-accent-light:#fb7185;
  --cv-accent-dark:#be123c;
  --cv-bg-900:#06070a;
  --cv-bg-800:#0d0f14;
  --cv-bg-700:#141720;
  --cv-bg-600:#1b1f2a;
  --cv-text-primary:#f8fafc;
  --cv-text-secondary:#b2b8c5;
  --cv-text-muted:#737b8c;
  --cv-surface-1:rgba(16,18,24,.86);
  --cv-surface-2:rgba(24,27,36,.72);
  --cv-surface-3:rgba(255,255,255,.055);
  --cv-border:rgba(255,255,255,.085);
  --cv-border-strong:rgba(255,255,255,.14);
  --cv-shadow-card:0 20px 55px rgba(0,0,0,.34);
  --cv-shadow-float:0 30px 90px rgba(0,0,0,.52);
  --cv-ease-premium:cubic-bezier(.2,.72,.24,1);
}

html{
  color-scheme:dark;
  background:#06070a;
  scroll-behavior:smooth;
}
body{
  isolation:isolate;
  line-height:1.5;
  letter-spacing:-.006em;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  background:
    radial-gradient(1100px 650px at 8% -10%,rgba(244,63,94,.15),transparent 62%),
    radial-gradient(900px 620px at 100% 24%,rgba(99,102,241,.09),transparent 68%),
    linear-gradient(180deg,#06070a 0%,#080a0f 45%,#0b0d12 100%);
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(520px 280px at 22% 15%,rgba(244,63,94,.055),transparent 72%),
    radial-gradient(580px 340px at 82% 72%,rgba(129,140,248,.035),transparent 74%);
}
#root{position:relative;z-index:1;min-height:100vh}
::selection{background:rgba(244,63,94,.38);color:#fff}

/* Shared surfaces and fields */
.glass{
  background:linear-gradient(145deg,rgba(18,20,27,.9),rgba(9,11,16,.84));
  border-color:var(--cv-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(24px) saturate(1.18);
  -webkit-backdrop-filter:blur(24px) saturate(1.18);
}
.input,
textarea.input,
select.input{
  min-height:46px;
  border:1px solid var(--cv-border)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.045)!important;
  color:var(--cv-text-primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.input:hover{border-color:var(--cv-border-strong)!important;background:rgba(255,255,255,.06)!important}
.input:focus{
  border-color:rgba(244,63,94,.72)!important;
  background:rgba(255,255,255,.072)!important;
  box-shadow:0 0 0 4px rgba(244,63,94,.12),0 14px 34px rgba(0,0,0,.22)!important;
}
.input::placeholder{color:#687082;opacity:1}

/* Navigation */
.site-nav{
  view-transition-name:site-navigation;
  min-height:64px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:linear-gradient(180deg,rgba(7,8,11,.93),rgba(7,8,11,.78));
  box-shadow:0 8px 36px rgba(0,0,0,0);
  transition:min-height .25s var(--cv-ease-premium),background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
body.has-scrolled .site-nav{
  min-height:58px;
  background:rgba(7,8,11,.94);
  border-bottom-color:rgba(255,255,255,.1);
  box-shadow:0 12px 38px rgba(0,0,0,.34);
}
.site-nav__inner{min-height:42px}
.site-brand{position:relative;transition:transform .25s var(--cv-ease-premium)}
.site-brand:hover{transform:translateY(-1px)}
.site-brand__mark{
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 22px rgba(244,63,94,.17),inset 0 1px 0 rgba(255,255,255,.08);
}
.site-brand__name{
  background:linear-gradient(115deg,#fff 8%,#fb7185 50%,#f43f5e 88%);
  -webkit-background-clip:text;
  background-clip:text;
  letter-spacing:-.045em;
}
.site-search{transition:max-width .25s var(--cv-ease-premium)}
.site-search__input{
  height:44px;
  padding-left:42px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.04)!important;
}
.site-search:focus-within{max-width:680px}
.site-search:focus-within > i{color:var(--cv-accent-light)!important;scale:1.06}
.site-nav__actions > a:not(.btn),
.site-nav__actions button{
  border:1px solid transparent;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease;
}
.site-nav__actions > a:not(.btn):hover,
.site-nav__actions button:hover{
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.site-nav__login{min-height:42px;padding-inline:20px!important}

/* Buttons and controls */
.btn{
  min-height:42px;
  padding:10px 20px;
  border-radius:14px;
  letter-spacing:-.01em;
  border:1px solid transparent;
  isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .22s var(--cv-ease-premium),box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.btn::before{
  content:'';
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.18) 44%,transparent 66%);
  transform:translateX(-135%);
  transition:transform .55s var(--cv-ease-premium);
  pointer-events:none;
}
.btn:hover::before{transform:translateX(135%)}
.btn-primary{
  background:linear-gradient(135deg,#fb3f5f 0%,#e11d48 55%,#be123c 100%);
  box-shadow:0 10px 28px rgba(225,29,72,.25),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#ff5571 0%,#ed254f 55%,#c91442 100%);
  box-shadow:0 15px 36px rgba(225,29,72,.36),inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(-2px);
}
.btn-secondary{
  background:rgba(255,255,255,.055);
  border-color:var(--cv-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.btn-secondary:hover{background:rgba(255,255,255,.09);border-color:var(--cv-border-strong);transform:translateY(-1px)}
.pill{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:13px;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.075);
  color:#9da5b4;
  box-shadow:none;
}
.pill:hover{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13);box-shadow:none;transform:translateY(-1px)}
.pill.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(244,63,94,.98),rgba(190,18,60,.98));
  border-color:rgba(251,113,133,.46);
  box-shadow:0 10px 28px rgba(225,29,72,.24),inset 0 1px 0 rgba(255,255,255,.2);
}

/* Cinematic home hero */
#heroSection{position:relative;background:#07080b}
.hero-bg{height:clamp(500px,45vw,620px)!important;isolation:isolate}
.hero-bg::before{
  background:
    linear-gradient(90deg,rgba(5,6,9,.97) 0%,rgba(5,6,9,.76) 32%,rgba(5,6,9,.22) 68%,rgba(5,6,9,.64) 100%),
    linear-gradient(180deg,rgba(5,6,9,.1) 0%,rgba(5,6,9,.08) 52%,#06070a 100%);
}
.hero-bg::after{
  background:
    radial-gradient(ellipse at 22% 58%,rgba(244,63,94,.18),transparent 56%),
    linear-gradient(180deg,transparent 76%,rgba(6,7,10,.92));
  mix-blend-mode:screen;
  opacity:.55;
}
.hero-media{
  background-position:center 28%;
  filter:brightness(.66) saturate(1.1) contrast(1.03)!important;
  transform:scale(1.018);
}
.hero-visual-enter{animation:heroCinemaIn 1.15s var(--cv-ease-premium) both}
@keyframes heroCinemaIn{
  from{opacity:.28;transform:scale(1.075);filter:brightness(.45) saturate(.8)}
  to{opacity:1;transform:scale(1.018);filter:brightness(.66) saturate(1.1)}
}
.hero-panel-enter{animation:heroPanelPremium .7s var(--cv-ease-premium) both}
@keyframes heroPanelPremium{
  from{opacity:0;transform:translateY(24px);filter:blur(6px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.hero-kicker{
  background:rgba(9,10,14,.58);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
.hero-kicker::before{background:#fb3158;box-shadow:0 0 0 5px rgba(244,63,94,.12),0 0 18px rgba(244,63,94,.82);animation:heroLivePulse 2.2s ease-in-out infinite}
@keyframes heroLivePulse{50%{box-shadow:0 0 0 8px rgba(244,63,94,0),0 0 24px rgba(244,63,94,.9)}}
.hero-title{
  max-width:900px;
  font-size:clamp(40px,5vw,74px)!important;
  line-height:.99;
  letter-spacing:-.055em;
  text-wrap:balance;
  text-shadow:0 8px 34px rgba(0,0,0,.48);
}
.hero-description{max-width:720px!important;font-size:clamp(14px,1.25vw,18px)!important;line-height:1.68;color:#d7dbe4!important;text-shadow:0 2px 16px rgba(0,0,0,.74)}
.hero-meta{color:#c8ced9}
.hero-meta > span{display:inline-flex;align-items:center}
.hero-genre{padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(5,6,9,.38);font-size:11px;color:#cdd2dc;backdrop-filter:blur(10px)}
.hero-cta{min-height:50px;padding-inline:22px}
.hero-cta__play{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.18);font-size:10px}
.hero-action-note{font-size:12px;color:#9299a8}.hero-action-note i{color:#fbbf24;margin-right:5px}
.hero-progress{display:flex;align-items:center;gap:6px;margin-top:24px;height:4px}
.hero-progress__dot{width:18px;height:3px;border-radius:99px;background:rgba(255,255,255,.2);transition:width .35s ease,background .35s ease}
.hero-progress__dot.is-active{width:42px;background:linear-gradient(90deg,#fb7185,#e11d48);box-shadow:0 0 18px rgba(244,63,94,.45)}

/* Home navigation and catalogue */
.home-tabs{width:max-content;max-width:100%;padding:6px;border:1px solid var(--cv-border);border-radius:18px;background:rgba(11,13,18,.84);box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:blur(20px)}
.home-tabs .pill{flex:none}
.catalog-heading{display:flex;align-items:end;gap:18px;margin:16px 0 20px}
.catalog-heading__eyebrow{margin-bottom:3px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cv-accent-light)}
.catalog-heading h2{font-size:clamp(21px,2vw,28px)!important;line-height:1.15;letter-spacing:-.035em}
.catalog-heading__line{height:1px;flex:1;margin-bottom:5px;background:linear-gradient(90deg,rgba(244,63,94,.32),rgba(255,255,255,.055),transparent)}

/* Cards and catalogue density */
.card{
  display:flex;
  flex-direction:column;
  border-radius:18px;
  border-color:rgba(255,255,255,.075);
  background:#0d0f14;
  box-shadow:0 10px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.025);
  transform-origin:center bottom;
}
.card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(244,63,94,.04);
  background:transparent;
  opacity:.38;
  pointer-events:none;
  transition:opacity .3s ease,border-color .3s ease;
}
.card:hover::before{opacity:1;border-color:rgba(244,63,94,.34)}
.card img{transition:transform .65s var(--cv-ease-premium),filter .45s ease}
.card .p-2,.card .p-2\.5{flex:1;background:#0d0f14;min-height:64px}
@media(hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-8px) scale(1.012);border-color:rgba(244,63,94,.26);box-shadow:0 26px 64px rgba(0,0,0,.46),0 12px 34px rgba(190,18,60,.13)}
  .card:hover img{transform:scale(1.055);filter:brightness(1.07) saturate(1.06)}
}
@media(min-width:1024px) and (max-width:1439.98px){
  .content-grid{grid-template-columns:repeat(auto-fill,minmax(174px,1fr))!important;gap:18px!important}
}
@media(min-width:1440px) and (max-width:1919.98px){
  .content-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))!important;gap:20px!important}
}
@media(min-width:1920px) and (max-width:3839.98px){
  .content-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;gap:24px!important}
}

/* Watch page */
.watch-page-shell{max-width:min(var(--cv-shell-max),100%)!important}
.watch-player-section{
  padding:10px;
  border:1px solid var(--cv-border);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(18,20,28,.88),rgba(7,8,12,.93));
  box-shadow:var(--cv-shadow-card),inset 0 1px 0 rgba(255,255,255,.04);
}
.watch-player-tabs{padding:2px 2px 4px}
.watch-player-frame{
  border-radius:21px!important;
  border-color:rgba(255,255,255,.1)!important;
  background:radial-gradient(circle at 50% 45%,#16192a,#090b12 70%)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.025);
}
.watch-player-actions{padding:4px 2px 2px}
.watch-season-section{
  padding:18px;
  border:1px solid var(--cv-border);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(20,23,31,.72),rgba(10,12,17,.76));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.watch-comments-section{
  margin-top:28px;
  padding:18px 20px;
  border:1px solid var(--cv-border);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(20,23,31,.72),rgba(10,12,17,.76));
  box-shadow:0 16px 44px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03);
}
.watch-comments-section > h2{
  display:flex;
  align-items:center;
  gap:2px;
}
.watch-comments-section #commentsList > p{
  margin:0;
  padding:12px 14px;
  border:1px dashed rgba(255,255,255,.075);
  border-radius:14px;
  background:rgba(4,5,8,.22);
}
.watch-overview{
  padding:22px;
  border:1px solid var(--cv-border);
  border-radius:28px;
  background:linear-gradient(150deg,rgba(20,23,31,.8),rgba(9,11,16,.82));
  box-shadow:0 22px 58px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.035);
}
.watch-poster-frame{border-color:rgba(255,255,255,.12);box-shadow:0 24px 55px rgba(0,0,0,.42)}
.watch-meta-title{font-size:clamp(30px,3.1vw,48px);letter-spacing:-.05em;line-height:1.04}
.watch-meta-description{color:#c8ced8;line-height:1.7}
.watch-user-rating{border-color:var(--cv-border);background:rgba(255,255,255,.032)}

/* Authentication */
.auth-shell{width:min(1120px,100%);min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center}
.auth-card{
  width:100%;
  min-height:590px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  overflow:hidden;
  border:1px solid var(--cv-border);
  border-radius:30px;
  box-shadow:var(--cv-shadow-float),inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-story{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:44px;background:linear-gradient(145deg,#300a17 0%,#16101c 48%,#0b0d13 100%)}
.auth-story::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 24% 22%,rgba(251,113,133,.44),transparent 34%),radial-gradient(circle at 82% 72%,rgba(99,102,241,.22),transparent 42%),linear-gradient(135deg,transparent 48%,rgba(255,255,255,.035));}
.auth-story::after{content:'';position:absolute;width:330px;height:330px;right:-120px;top:-90px;border-radius:50%;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 50px rgba(255,255,255,.018),0 0 0 100px rgba(255,255,255,.012)}
.auth-story__glow{position:absolute;left:-70px;bottom:-90px;width:310px;height:310px;border-radius:50%;background:rgba(244,63,94,.2);filter:blur(70px);animation:authGlow 7s ease-in-out infinite alternate}
@keyframes authGlow{to{transform:translate(70px,-35px) scale(1.18);opacity:.68}}
.auth-story__content{position:relative;z-index:1;max-width:480px}
.auth-story__brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:84px;font-weight:800;letter-spacing:-.03em}.auth-story__brand i{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:linear-gradient(135deg,#fb7185,#be123c);box-shadow:0 12px 26px rgba(190,18,60,.32);font-size:12px}
.auth-story__eyebrow,.auth-panel__eyebrow{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fda4af}
.auth-story h2{max-width:520px;margin-top:10px;font-size:clamp(31px,3vw,46px);line-height:1.05;letter-spacing:-.055em;text-wrap:balance}
.auth-story__copy{max-width:470px;margin-top:18px;color:#c4c9d3;line-height:1.7;font-size:14px}
.auth-story__features{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.auth-story__features span{padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(7,8,12,.24);font-size:10px;color:#d7dbe4;backdrop-filter:blur(8px)}.auth-story__features i{color:#fda4af;margin-right:4px}
.auth-panel{display:flex;flex-direction:column;justify-content:center;padding:48px;background:linear-gradient(160deg,rgba(17,19,26,.96),rgba(9,11,16,.96))}
.auth-panel__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:28px}.auth-panel__icon{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:15px;color:#fff;background:linear-gradient(135deg,rgba(244,63,94,.95),rgba(190,18,60,.95));box-shadow:0 14px 30px rgba(190,18,60,.26)}.auth-panel__head h1{margin-top:3px;font-size:30px;line-height:1.1;letter-spacing:-.04em}.auth-panel__head p:last-child{margin-top:8px;color:#858d9d;font-size:12px;line-height:1.5}
.auth-field{display:block}.auth-field > span{display:block;margin:0 0 7px 2px;font-size:11px;font-weight:600;color:#a6adba}.auth-field > div{position:relative}.auth-field > div > i{position:absolute;left:15px;top:50%;z-index:1;transform:translateY(-50%);font-size:12px;color:#687082;transition:color .2s ease}.auth-field > div:focus-within > i{color:var(--cv-accent-light)}.auth-field .input{width:100%;height:50px;padding-left:42px!important}
.auth-submit{min-height:50px;margin-top:4px;justify-content:space-between!important;padding-inline:20px}.auth-submit i{width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.16);font-size:10px;transition:transform .25s var(--cv-ease-premium)}.auth-submit:hover i{transform:translateX(3px)}
.auth-switch{margin-top:20px;text-align:center;font-size:12px;color:#727a89}.auth-switch a{color:#fda4af;font-weight:700}.auth-switch a:hover{color:#fff}

/* Party, settings and admin */
.party-layout{gap:22px}.party-main-column,.party-side-column{min-width:0}
.party-player-frame{border-color:rgba(255,255,255,.1);border-radius:24px;box-shadow:0 26px 70px rgba(0,0,0,.46)}
#partyConnectionStatus{position:relative;padding-left:22px}
#partyConnectionStatus::before{content:'';position:absolute;left:9px;top:50%;width:6px;height:6px;border-radius:50%;background:#34d399;transform:translateY(-50%);box-shadow:0 0 0 5px rgba(52,211,153,.1);animation:connectionPulse 2s ease-in-out infinite}
@keyframes connectionPulse{50%{box-shadow:0 0 0 9px rgba(52,211,153,0),0 0 14px rgba(52,211,153,.45)}}
.party-side-column .glass,.settings-card,.settings-hero,.settings-nav{border-color:var(--cv-border);background:linear-gradient(150deg,rgba(20,23,31,.76),rgba(9,11,16,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.settings-card{box-shadow:0 18px 48px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.03)}
.setting-toggle,.setting-row,.settings-block{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.027)}
.admin-shell{position:relative}.admin-heading{display:flex;align-items:center;gap:14px;margin:12px 0 20px}.admin-heading__icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:16px;color:#fff;background:linear-gradient(135deg,#f43f5e,#be123c);box-shadow:0 14px 30px rgba(190,18,60,.25)}.admin-heading p{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#8f97a7}.admin-heading h1{margin-top:2px;letter-spacing:-.04em}
.admin-nav{padding:7px;border:1px solid var(--cv-border);border-radius:18px;background:rgba(14,16,22,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
#adminContent > .glass,#adminContent section.glass,#adminContent article.glass{border-color:var(--cv-border);box-shadow:0 16px 42px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.03)}

/* Footer and mobile navigation */
.site-footer{position:relative;border-top:1px solid rgba(255,255,255,.065);background:linear-gradient(180deg,rgba(8,9,13,.3),rgba(5,6,9,.94));}
.site-footer::before{content:'';position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(244,63,94,.45),rgba(99,102,241,.24),transparent)}
.site-footer__grid > div{min-width:0}.site-footer h4{color:#e8ebf1}.site-footer a{transition:color .18s ease,transform .18s ease}.site-footer a:hover{transform:translateX(2px)}
.site-bottom-nav{background:rgba(8,9,13,.94);border-top:1px solid rgba(255,255,255,.09);box-shadow:0 -14px 38px rgba(0,0,0,.34);backdrop-filter:blur(20px) saturate(1.2)}
.bnav-item{position:relative;transition:color .2s ease,transform .2s var(--cv-ease-premium)}.bnav-item[aria-current="page"]::before{content:'';position:absolute;top:-7px;left:50%;width:22px;height:3px;border-radius:99px;background:linear-gradient(90deg,#fb7185,#e11d48);transform:translateX(-50%);box-shadow:0 0 15px rgba(244,63,94,.58)}

/* Viewport-aware reveal */
.content-grid .card{animation:none!important}
.cv-reveal{opacity:0;filter:blur(4px);transition:opacity .58s var(--cv-ease-premium),filter .58s var(--cv-ease-premium),transform .58s var(--cv-ease-premium),translate .58s var(--cv-ease-premium);transition-delay:var(--cv-reveal-delay,0ms)}
.cv-reveal-pending:not(.card){transform:translateY(18px)}
.card.cv-reveal-pending{translate:0 16px}
.cv-reveal-visible{opacity:1;filter:blur(0)}
.cv-reveal-visible:not(.card){transform:translateY(0)}
.card.cv-reveal-visible{translate:0 0}

@supports(view-transition-name:none){
  main{view-transition-name:page-content}
  .site-footer{view-transition-name:site-footer}
  ::view-transition-old(site-navigation),::view-transition-new(site-navigation){animation-duration:.22s}
  ::view-transition-old(page-content){animation:cvPageOut .18s ease both}
  ::view-transition-new(page-content){animation:cvPageIn .42s var(--cv-ease-premium) both}
  ::view-transition-old(site-footer){animation:fadeInPlain .14s ease reverse both}
  ::view-transition-new(site-footer){animation:fadeInPlain .28s ease both}
}
@keyframes cvPageOut{to{opacity:0;transform:translateY(7px);filter:blur(3px)}}
@keyframes cvPageIn{from{opacity:0;transform:translateY(13px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}

@media(max-width:767.98px){
  .site-nav{min-height:58px;padding:7px 9px!important}.site-nav__inner{gap:8px}.site-brand__mark{width:32px!important;height:32px!important}.site-search__input{height:42px;font-size:13px!important}.site-nav__login{padding-inline:12px!important;min-width:42px}
  .hero-bg{height:390px!important;min-height:390px}.hero-bg::before{background:linear-gradient(90deg,rgba(5,6,9,.93),rgba(5,6,9,.35) 76%),linear-gradient(180deg,rgba(5,6,9,.1),rgba(5,6,9,.15) 52%,#06070a 100%)}.hero-media{background-position:center top;filter:brightness(.55) saturate(1.05)!important}.hero-title{font-size:clamp(32px,10vw,46px)!important;max-width:96%}.hero-description{font-size:13px!important;line-height:1.55;margin-bottom:16px!important}.hero-genre{display:none!important}.hero-action-note{display:none}.hero-progress{margin-top:17px}.hero-progress__dot{width:12px}.hero-progress__dot.is-active{width:30px}
  .home-tabs-shell{padding-inline:12px!important}.home-tabs{width:100%;padding:5px}.home-tabs .pill{min-height:36px;padding:7px 13px}.catalog-heading{margin-top:10px;margin-bottom:14px}.catalog-heading__eyebrow{font-size:9px}.catalog-heading h2{font-size:21px!important}.catalog-heading__line{display:none}
  .card{border-radius:13px}.card .p-2,.card .p-2\.5{min-height:58px}.card:hover{transform:none!important}
  body.watch-page #playerSection{width:calc(100% + 24px);max-width:none;margin-inline:-12px;padding:5px;border-left:0;border-right:0;border-radius:0}.watch-player-frame{border-radius:15px!important}.watch-season-section{padding:13px;border-radius:20px}.watch-overview{padding:14px;border-radius:22px}.watch-comments-section{margin-top:24px;padding:15px;border-radius:20px}.watch-meta-title{font-size:28px}
  .auth-shell{align-items:flex-start;padding-top:82px!important}.auth-card{min-height:0;display:block;border-radius:24px}.auth-story{display:none}.auth-panel{padding:26px 20px 24px}.auth-panel__head{gap:12px;margin-bottom:22px}.auth-panel__icon{width:42px;height:42px;border-radius:14px}.auth-panel__head h1{font-size:25px}.auth-field .input{height:48px}.auth-submit{min-height:49px}
  .party-layout{gap:14px}.party-player-frame{border-radius:17px}.admin-heading{margin-top:4px}.admin-heading__icon{width:42px;height:42px;border-radius:14px}.admin-nav{margin-inline:-4px;padding:5px;border-radius:15px}
  .site-footer{padding-bottom:82px}.site-footer__grid{gap:24px 18px!important}
}

@media(max-width:374px){
  .hero-bg{height:370px!important;min-height:370px}.hero-title{font-size:31px!important}.hero-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-kicker{font-size:9px;padding:6px 10px}.hero-meta{font-size:12px}.hero-cta{min-height:46px;padding-inline:17px;font-size:14px}.home-tabs .pill{padding-inline:11px}.auth-panel{padding-inline:16px}
}

@media(hover:none),(pointer:coarse){
  .btn:hover,.pill:hover,.card:hover,.site-brand:hover{transform:none}
  .btn:hover::before{transform:translateX(-135%)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.hero-kicker::before,.auth-story__glow,#partyConnectionStatus::before{animation:none!important}.cv-reveal,.cv-reveal-pending,.cv-reveal-visible{opacity:1!important;filter:none!important;transform:none!important;translate:none!important;transition:none!important}.hero-visual-enter,.hero-panel-enter{animation:none!important}
}
body.reduce-motion .cv-reveal,body.reduce-motion .cv-reveal-pending,body.reduce-motion .cv-reveal-visible{opacity:1!important;filter:none!important;transform:none!important;translate:none!important;transition:none!important}


/* Unified watch rating and compact report modal */
.watch-overview .rating-strip,
body.cinema .watch-overview .rating-strip{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  margin:0;
  padding:0;
  overflow:visible;
}
.watch-overview .watch-user-rating,
body.cinema .watch-overview .watch-user-rating{
  margin-top:8px!important;
  padding-top:18px;
  border:0;
  border-top:1px solid rgba(255,255,255,.07);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Every catalogue poster uses one predictable 2:3 viewport. Positioning the
   image removes percentage-height ambiguity when the parent uses aspect-ratio. */
.card-poster{
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:2 / 3;
  overflow:hidden;
  line-height:0;
  background:#0d0f14;
}
.card-poster > img{
  position:absolute;
  inset:0;
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none;
  object-fit:cover!important;
  object-position:50% 50%;
}

/* Search results can be explicitly collapsed on touch devices. */
.search-results-toolbar{
  display:none;
}

@media(max-width:767.98px){
  html,
  body,
  #root{
    max-width:100%;
    overflow-x:clip;
  }
  .site-search{
    min-width:0;
    max-width:none;
  }
  #searchResults.search-dropdown{
    position:fixed!important;
    z-index:220;
    top:calc(64px + env(safe-area-inset-top));
    left:10px;
    right:10px;
    width:auto!important;
    max-width:calc(100vw - 20px);
    max-height:min(68dvh,520px)!important;
    margin-top:0!important;
    overscroll-behavior:contain;
    border-radius:18px;
  }
  .search-results-toolbar{
    position:sticky;
    z-index:3;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:46px;
    padding:8px 10px 8px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(12,12,15,.97);
    color:#9ca3af;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    backdrop-filter:blur(18px);
  }
  .search-results-collapse{
    min-height:32px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:rgba(255,255,255,.055);
    color:#e5e7eb;
    font-size:11px;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;
  }
  .search-results-panel,
  .search-result-item,
  .search-result-item > div{
    min-width:0;
    max-width:100%;
  }
  .search-result-item{
    width:100%;
    overflow:hidden;
  }
  .search-result-item img{
    flex:0 0 40px;
  }
  .search-result-item .badge{
    max-width:52px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .content-grid,
  .continue-rail,
  .similar-grid-inner{
    width:100%;
    min-width:0;
    max-width:100%;
  }
  .content-grid > *,
  .continue-rail > *,
  .similar-grid-inner > *,
  .card{
    min-width:0!important;
    max-width:100%!important;
  }
}

/* Type labels need a stable tap/reading height on every card size. This
   dedicated class intentionally wins over the older generic badge scaling. */
.card .card-type-badge{
  box-sizing:border-box;
  min-height:24px;
  max-width:calc(100% - 16px);
  padding:4px 9px!important;
  border-radius:7px;
  font-size:clamp(10px,1vw,13px)!important;
  line-height:1.15!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  justify-content:center;
}
@media(max-width:479.98px){
  .card .card-type-badge{
    min-height:22px;
    padding:3px 7px!important;
    font-size:9.5px!important;
  }
}
@media(min-width:1920px){
  .card .card-type-badge{
    min-height:28px;
    padding:5px 11px!important;
  }
}
html.is-tv .card .card-type-badge{
  min-height:30px;
  padding:6px 12px!important;
}

/* Final viewport guard: structural UI may shrink, but it may never make the
   document wider than the physical screen. Scrollable rails keep their own
   overflow and therefore continue to work inside this boundary. */
html,
body,
#root{
  inline-size:100%;
  min-inline-size:0;
  max-inline-size:100%;
  overflow-x:hidden!important;
}
body{
  position:relative;
}
#root > *,
.site-nav,
.site-nav__inner,
.site-search,
main,
section,
footer{
  min-inline-size:0;
  max-inline-size:100%;
}
img,
video,
iframe,
canvas,
svg{
  max-inline-size:100%;
}
body > #searchResults.search-dropdown{
  box-sizing:border-box;
  contain:layout paint;
  min-inline-size:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 22px 70px rgba(0,0,0,.72),0 0 0 1px rgba(0,0,0,.55);
}
body > #searchResults.search-dropdown *,
body > #searchResults.search-dropdown *::before,
body > #searchResults.search-dropdown *::after{
  box-sizing:border-box;
  min-inline-size:0;
}

@supports(width:100dvw){
  html,
  body,
  #root{
    max-inline-size:100dvw;
  }
  body > #searchResults.search-dropdown{
    max-inline-size:calc(100dvw - 20px)!important;
  }
}

/* Compact search is a viewport-bound sheet, not a child-sized dropdown. */
@media(max-width:1024px){
  #searchResults.search-dropdown{
    box-sizing:border-box;
    min-width:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
  }
  #searchResults .search-results-panel{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
  }
  #searchResults .search-result-item{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) minmax(0,56px);
    align-items:center;
    gap:10px!important;
    width:100%;
    min-width:0;
    max-width:100%;
    padding:10px 12px!important;
    overflow:hidden;
  }
  #searchResults .search-result-item > img{
    display:block;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:56px!important;
  }
  #searchResults .search-result-copy{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }
  #searchResults .search-result-copy > p{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #searchResults .search-result-rating{
    min-width:0;
    max-width:56px;
    overflow:hidden;
    justify-self:end;
  }
  #searchResults .search-result-rating .badge{
    max-width:56px;
  }
}

@media(max-width:420px){
  #searchResults .search-result-item{
    grid-template-columns:38px minmax(0,1fr) minmax(0,48px);
    gap:8px!important;
    padding:9px 10px!important;
  }
  #searchResults .search-result-item > img{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:54px!important;
  }
  #searchResults .search-result-rating,
  #searchResults .search-result-rating .badge{
    max-width:48px;
  }
}

@media(max-width:479.98px){
  .content-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
.report-modal-panel,
.report-modal-panel-leave{
  width:60vw!important;
  max-width:32rem!important;
  margin-inline:auto;
}
@media(max-width:640px){
  .report-modal-panel,
  .report-modal-panel-leave{
    width:68vw!important;
    padding:18px!important;
  }
  .report-modal-panel form > .grid,
  .report-modal-panel-leave form > .grid{
    grid-template-columns:1fr;
  }
}

/* Curated collections stay horizontally scrollable on every viewport. The
   generic mobile rail layout above turns other shelves into a wrapping grid. */
#curatedCollections .curated-rail{
  display:flex!important;
  grid-template-columns:none!important;
  grid-auto-flow:initial!important;
  width:100%;
  min-width:0;
  max-width:100%;
  gap:clamp(10px,1.35vw,18px)!important;
  padding:2px 2px 10px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity!important;
  scroll-padding-inline:2px;
  touch-action:pan-x!important;
  cursor:grab!important;
}
#curatedCollections .curated-rail:active{
  cursor:grabbing!important;
}
#curatedCollections .curated-rail:focus-visible{
  outline:2px solid rgba(233,69,96,.75);
  outline-offset:4px;
  border-radius:12px;
}
#curatedCollections .curated-rail > .curated-rail-item{
  display:block;
  flex:0 0 clamp(132px,14vw,190px)!important;
  width:clamp(132px,14vw,190px)!important;
  min-width:clamp(132px,14vw,190px)!important;
  max-width:none!important;
  scroll-snap-align:start;
}
#curatedCollections .curated-rail-item > .card,
#curatedCollections .curated-rail-item > a.card,
#curatedCollections .curated-rail .card{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
#curatedCollections .curated-rail-wrap .rail-arrow{
  display:flex;
  opacity:.92;
}
#curatedCollections .curated-rail-wrap .rail-arrow[hidden]{
  display:none!important;
}
#curatedCollections .curated-rail-wrap .rail-arrow:disabled{
  opacity:.22;
  cursor:default;
  pointer-events:none;
}
@media(max-width:767.98px){
  #curatedCollections .curated-collection{
    padding:16px!important;
  }
  #curatedCollections .curated-rail > .curated-rail-item{
    flex-basis:clamp(126px,39vw,156px)!important;
    width:clamp(126px,39vw,156px)!important;
    min-width:clamp(126px,39vw,156px)!important;
  }
  #curatedCollections .curated-rail-wrap .rail-arrow{
    width:36px;
    height:36px;
  }
}