:root {
  --bg: #0d0d0d; --card: #1a1a1a; --text: #ffffff; --muted:#b3b3b3; --accent:#ff0048; --accent-2:#ffd700; --border:#2a2a2a;
}
[data-theme="light"] { --bg:#ffffff; --card:#f5f5f5; --text:#1a1a1a; --muted:#666666; --accent:#e60038; --accent-2:#e6b800; --border:#e6e6e6; }
* { box-sizing:border-box }
html,body { height:100% }
body { margin:0; background:var(--bg); color:var(--text); font:400 16px/1.6 'PT Sans',system-ui; }
.app { min-height:100%; display:flex; flex-direction:column }
.container { width:min(1200px, 100% - 32px); margin-inline:auto }
.skip-link { position:absolute; left:-9999px; top:auto; }
.skip-link:focus { left:16px; top:16px; background:#000; color:#fff; padding:8px 12px; z-index:1000 }

/* Header */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px); background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.3) 70%, transparent); }
.header__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text) }
.logo__mark { font-family:'Russo One',sans-serif; background:var(--accent); color:#fff; padding:6px 8px; border-radius:6px }
.logo__text { font-weight:700; letter-spacing:.5px }
.theme-toggle { border:1px solid var(--border); background:transparent; color:var(--text); border-radius:8px; width:44px; height:44px; display:grid; place-items:center }

/* Matryoshka menu */
.matryoshka-toggle { width:44px; height:44px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); display:grid; place-items:center; cursor:pointer }
.matryoshka-icon { display:grid; grid-template-rows:repeat(3,6px); gap:6px; transform-origin:center; transition:transform .3s ease }
.matryoshka-icon .dot { width:6px; height:6px; border-radius:50%; background:var(--text); margin-inline:auto; transition:all .3s ease }
.matryoshka-toggle[aria-expanded="true"] .matryoshka-icon { transform:scale(1.2) }
.matryoshka-toggle[aria-expanded="true"] .dot:nth-child(1) { transform:translateY(6px) scaleX(1.8); border-radius:12px 12px 6px 6px }
.matryoshka-toggle[aria-expanded="true"] .dot:nth-child(2) { transform:scale(2); opacity:.9 }
.matryoshka-toggle[aria-expanded="true"] .dot:nth-child(3) { transform:translateY(-6px) scaleX(1.4); border-radius:6px 6px 12px 12px }
.matryoshka-menu { position:fixed; inset:0; display:grid; grid-template-columns:1fr; pointer-events:none }
.matryoshka__backdrop { background:radial-gradient(ellipse at top left, rgba(255,0,72,.15), transparent 60%), url('../images/patterns/khokhloma.svg') center/300px repeat; opacity:.1 }
.matryoshka__panel { place-self:stretch; display:flex; align-items:flex-start; padding:24px; gap:16px }
.matryoshka__level { list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; min-width:260px; transform:translateX(-20px); opacity:0; transition:transform .3s ease, opacity .3s ease }
.matryoshka-menu[hidden] { display:none }
.matryoshka-menu[hidden=false] { display:grid }
.matryoshka-menu[aria-hidden="false"], .matryoshka-menu:not([hidden]) { pointer-events:auto }
.matryoshka__level--root { transform:none; opacity:1 }
.matryoshka__level .has-children > .matryoshka__expander { background:none; border:none; color:var(--text); font-weight:700; cursor:pointer }
.matryoshka__level .has-children > ul { margin-top:8px }

/* Search */
.search { position:relative; display:flex; gap:8px; align-items:center }
.search__input { flex:1; height:44px; background:var(--card); border:1px solid var(--border); border-radius:10px; color:var(--text); padding:0 12px }
.search__clear, .search__submit { height:44px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text) }
.search-suggest { position:absolute; top:110%; left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px; max-height:320px; overflow:auto; }

/* Hero */
.hero { position:relative; height:85vh }
@media (max-width:767px){ .hero{ height:60vh } }
.hero__slider { height:100%; position:relative; overflow:hidden }
.hero__slide { position:absolute; inset:0; background:var(--bg) center/cover no-repeat; background-image:var(--bg); display:grid; align-items:end }
.hero__overlay { position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,0) 60%); }
.hero__content { position:relative; padding-bottom:8vh }
.hero__title { font-family:'Russo One',sans-serif; font-size:clamp(2rem, 3vw + 1rem, 4rem); margin:0 0 8px }
.hero__descr { max-width:800px; color:var(--muted) }
.hero__meta { display:flex; gap:12px; margin-top:12px }
.hero__actions { margin-top:16px; display:flex; gap:12px }
.hero__nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); border:none; color:#fff; width:44px; height:44px; border-radius:50% }
.hero__nav--prev { left:16px } .hero__nav--next { right:16px }
.hero__dots { position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px }
.hero__dots button { width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.4) }
.hero__dots button[aria-current="true"]{ background:var(--accent) }
.hero__progress { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.15) }
.hero__progress span { display:block; height:100%; width:0%; background:var(--accent); transition:width .2s linear }

/* Filters */
.filters { position:relative; z-index:1; background:linear-gradient(180deg, rgba(255,0,72,.08), transparent); padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.filters__form { display:grid; gap:16px }
.filters__row { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px }
@media (max-width:1200px){ .filters__row{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:767px){ .filters__row{ grid-template-columns:1fr } }
.filter { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px }
.filter__label { display:block; font-weight:700; margin-bottom:8px }
.select-multi__toggle { width:100%; height:40px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text) }
.select-multi { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; padding-top:8px }
.check { display:flex; gap:8px; align-items:center }
.range-double { position:relative }
.range__values { margin-top:6px; color:var(--muted) }
.filters__active { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0 }
.filters__active .badge { background:var(--accent); color:#fff; border-radius:999px; padding:6px 10px; display:inline-flex; gap:6px; align-items:center }
.filters__counter { margin-left:auto }

/* Catalog */
.catalog__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; padding:24px 0 }
@media (max-width:1365px){ .catalog__grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:767px){ .catalog__grid{ grid-template-columns:repeat(2,1fr) } }
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease }
.card:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.35) }
.card__poster { position:relative; display:block; aspect-ratio:2/3; overflow:hidden }
.poster { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; filter:saturate(1.05) }
.card:hover .poster { transform:scale(1.06) }
.card__rating { position:absolute; top:8px; left:8px; background:var(--accent-2); color:#000; font-weight:700; border-radius:8px; padding:4px 6px }
.card__quality { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); border-radius:8px; padding:4px 6px }
.card__new { position:absolute; left:8px; bottom:8px; background:var(--accent); color:#fff; border-radius:8px; padding:4px 8px }
.card__watched { position:absolute; right:8px; bottom:8px; background:rgba(255,255,255,.15); border-radius:8px; padding:4px 8px }
.card__body { padding:12px; display:flex; flex-direction:column; gap:8px }
.card__title { margin:0; font-size:clamp(1rem, 1vw + .6rem, 1.25rem) }
.card__meta { color:var(--muted); display:flex; gap:10px; flex-wrap:wrap }
.card__actions { display:flex; gap:8px }
.card__visited { color:var(--muted) }

/* Series */
.series__backdrop { position:relative; height:40vh; background:var(--bg) center/cover no-repeat; background-image:var(--bg); filter:blur(0); }
.series__wrap { display:grid; grid-template-columns:260px 1fr; gap:24px; margin-top:-80px }
@media (max-width:767px){ .series__wrap{ grid-template-columns:1fr; margin-top:-40px } }
.series__poster { width:100%; border-radius:16px; border:1px solid var(--border) }
.series__title { font-family:'Russo One',sans-serif; font-size:clamp(1.8rem, 1.6vw + 1rem, 2.6rem); margin:0 0 8px }
.series__meta { display:flex; gap:12px; flex-wrap:wrap; color:var(--muted) }
.series__actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.notice { background:rgba(255,255,255,.08); border:1px solid var(--border); border-radius:10px; padding:10px; margin:10px 0 }
.player-wrap { position:relative; aspect-ratio:16/9; background:#000; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:24px 0 }
.player-wrap iframe, .player-wrap video { width:100%; height:100% }

/* Tabs */
.tabs__nav { display:flex; gap:8px; border-bottom:1px solid var(--border); margin-bottom:12px }
.tab { background:transparent; border:none; color:var(--muted); padding:10px 12px; border-bottom:2px solid transparent; cursor:pointer }
.tab.is-active { color:var(--text); border-color:var(--accent) }
.tabs__panel { display:none }
.tabs__panel.is-active { display:block }

/* Footer */
.site-footer { margin-top:auto; padding:24px 0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.4)); border-top:1px solid var(--border) }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px }
@media (max-width:767px){ .footer__grid{ grid-template-columns:1fr } }
.social { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); color:var(--text); text-decoration:none }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); color:var(--text); background:var(--card); text-decoration:none; cursor:pointer; transition:filter .2s ease, transform .2s ease }
.btn:hover { filter:brightness(1.1) }
.btn--primary { background:var(--accent); border-color:var(--accent); color:#fff }
.btn--ghost { background:transparent }

/* Pagination */
.pager { display:flex; justify-content:center; padding:16px; gap:8px }

/* To top */
.to-top { position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text); opacity:0; pointer-events:none; transition:opacity .2s ease }
.to-top.is-visible { opacity:1; pointer-events:auto }

/* SEO block */
.seo { position:relative; background:linear-gradient(180deg, rgba(255,215,0,.06), transparent); padding:24px 0; border-top:1px dashed var(--border) }
.seo__ornament { height:8px; background:repeating-linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,.1) 16px 24px), url('../images/patterns/film.svg') center/contain repeat-x; animation:film 20s linear infinite }
@keyframes film { from{ background-position:0 0, 0 0 } to { background-position:0 0, 100% 0 } }
.seo__benefits { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0; list-style:none }
@media (max-width:767px){ .seo__benefits{ grid-template-columns:1fr } }
.seo__faq dt { font-weight:700; margin-top:10px }
.seo__faq dd { margin:6px 0 10px 0; color:var(--muted) }
.seo__tags { display:flex; flex-wrap:wrap; gap:8px }
.seo__tags span { border:1px solid var(--border); border-radius:999px; padding:6px 10px; color:var(--muted) }

/* Animations */
[data-animate] { opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease }
[data-animate].is-inview { opacity:1; transform:none }

/* Print */
@media print {
  .site-header, .site-footer, .matryoshka-menu, .filters, .hero, .to-top, .search-suggest { display:none !important }
  body { color:#000; background:#fff }
  a { color:#000; text-decoration:none }
}