/* ============================================================
   KinoDron — styles.css (копия Lumen + ваши цвета)
   ============================================================ */

/* ---------- Шрифты ---------- */
@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../fonts/manrope-cyrillic.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../fonts/manrope-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url(../fonts/playfair-cyrillic.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url(../fonts/playfair-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

/* ---------- Переменные ---------- */
:root {
    --bg: #0A0A0C;
    --surface: #141418;
    --card: #1a1a20;
    --text: #F4F1EC;
    --muted: #A29E97;
    --soft: #CFCAC2;
    --dim: #D9D5CE;
    --accent: #a000ff;
    --accent2: #ce5eff;
    --accent3: #e4a8ff;
    --gold: #E8C27A;
    --line: rgba(244,241,236,.08);
    --line2: rgba(244,241,236,.16);
    --pad: clamp(16px,4vw,56px);
    --serif: "Playfair Display",Georgia,serif;
    --sans: "Manrope",system-ui,sans-serif;
    --top: 92px;
    --app-em: 16px;
    --surface-soft: #1a1a20;
    --surface-sunk: #101013;
    --accent-strong: #ce5eff;
    --accent-soft: rgba(160,0,255,.14);
    --accent-ink: #0A0A0C;
    --positive: #7cc494;
    --negative: #e4a8ff;
    --warn: #E8C27A;
    --news-text: #CFCAC2;
    --star: #E8C27A;
    --star-off: #3a3834;
    --dot: #55524D;
    --shadow: 0 24px 48px -12px rgba(0,0,0,.7);
    --shadow-soft: 0 12px 28px -10px rgba(0,0,0,.6);
    --shadow-tiny: 0 4px 14px rgba(0,0,0,.35);
    --shadow-menu: 0 24px 48px -12px rgba(0,0,0,.7),0 0 0 1px rgba(244,241,236,.08);
    --shadow-modal: 0 40px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(244,241,236,.1);
    --radius: 16px;
    --container: 1440px;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
    --sp-10: 40px; --sp-12: 48px;
    --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
    --r-xl: 24px; --r-pill: 999px;
    --hair: 1px;
    --control-h: 46px;
    --fs-meta: 14px; --fs-sm: 15px; --fs-ui: 15px;
    --fs-body: 16px; --fs-lead: 17px;
    --fs-h4: 20px; --fs-h3: 22px; --fs-h2: 28px; --fs-h1: 36px;
    color-scheme: dark
}

@media (max-width: 819px) {
}

/* ---------- Reset ---------- */
*,*:before,*:after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 150px }
html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased
}
body {
    overflow-x: clip;
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh
}
a { color: var(--text); text-decoration: none }
a:hover { color: var(--accent2) }
button { font: inherit; color: inherit; cursor: pointer }
input, select, textarea { font: inherit }
img { display: block; max-width: 100% }
h1,h2,h3,h4,h5,h6,p { margin: 0 }

::selection { background: var(--accent); color: var(--bg) }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px }

.sr-only {
    position: absolute!important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0
}

.skip-link {
    position: fixed;
    left: 16px; top: -60px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    font-weight: 800
}
.skip-link:focus { top: 16px; color: var(--bg) }

.spacer { flex: 1 }
.gap3 { gap: 3px!important }

/* ============================================================
   ШАПКА
   ============================================================ */
.header {
    position: fixed;
    z-index: 60;
    top: clamp(10px,1.4vw,18px);
    left: clamp(12px,3vw,40px);
    right: clamp(12px,3vw,40px);
    display: flex;
    align-items: center;
    gap: clamp(10px,2vw,28px);
    padding: 10px 12px 10px clamp(14px,1.6vw,22px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 22%, transparent);
    border: 1px solid var(--line);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    transition: background .4s,border-color .4s
}
.header.is-scrolled {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-color: var(--line2)
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text)
}
.logo:hover { color: var(--text) }
.logo-mark {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--accent);
    display: grid;
    place-items: center
}
.logo-mark i {
    font-size: .8em;
    margin-left: 1px;
    width: auto
}
.logo-text {
    font-family: var(--serif);
    font-weight: 900;
    font-size: 21px;
    letter-spacing: .06em
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px
}
.nav a {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dim);
    transition: background .25s,color .25s
}
.nav a:hover {
    background: #ffffff14;
    color: var(--text)
}
.nav a.active {
    background: var(--text);
    color: var(--bg)
}
@media (max-width: 1180px) {
    .nav a { padding: 9px 10px }
}

.search-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: #ffffff0a;
    color: var(--muted);
    font-size: 14px
}
.search-btn:hover {
    border-color: #ffffff4d;
    color: var(--text)
}
.search-text {
    display: flex;
    gap: 18px;
    align-items: center
}
.search-text kbd {
    font: inherit;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.14)
}
@media (max-width: 1279px) {
    .search-text { display: none }
}

.icon-btn {
    position: relative;
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: #ffffff0a;
    color: var(--text);
    display: grid;
    place-items: center
}
.icon-btn:hover {
    border-color: #ffffff4d;
    color: var(--text)
}

.count-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1
}
.count-badge:empty,
.count-badge[data-n="0"] { display: none }

.umenu { position: relative; flex: 0 0 auto }
.avatar-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 4px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--text)
}
.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg,var(--gold),var(--accent));
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--bg);
    flex: 0 0 auto
}
.avatar--lg { width: 48px; height: 48px }

.umenu-panel {
    position: absolute;
    right: -4px;
    top: 54px;
    width: min(320px,calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(244,241,236,.1);
    box-shadow: 0 30px 60px -15px #000c;
    animation: fadeUp .25s ease both
}
.umenu-panel[hidden] { display: none }
.umenu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 14px;
    border-bottom: 1px solid var(--line)
}
.umenu-head > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}
.umenu-name {
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis
}
.umenu-group { font-size: 12px; color: var(--muted) }
.umenu-list {
    display: flex;
    flex-direction: column;
    gap: 2px
}
.umenu-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dim)
}
.umenu-list a:hover {
    background: #f4f1ec0f;
    color: var(--text)
}
.umenu-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted)
}
.umenu-count b { color: var(--accent2) }
.umenu-out { height: 46px }

/* Кнопки общие */
.s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s,background .2s,border-color .2s,color .2s
}
.btn-accent {
    background: var(--accent);
    color: var(--bg);
    height: 52px;
    padding: 0 24px
}
.btn-accent:hover {
    background: var(--text);
    color: var(--bg)
}
.btn-outline {
    border-color: #f4f1ec4d;
    color: var(--text);
    height: 52px;
    font-weight: 700
}
.btn-outline:hover {
    background: var(--text);
    color: var(--bg)
}
.btn-glass {
    border-color: #f4f1ec4d;
    background: #0a0a0c59;
    backdrop-filter: blur(12px);
    color: var(--text);
    font-weight: 700
}
.btn-glass:hover {
    border-color: var(--text);
    color: var(--text)
}
.btn-light {
    background: var(--text);
    color: var(--bg);
    padding: 0 26px 0 20px
}
.btn-light:hover {
    background: var(--accent);
    color: var(--bg);
    transform: scale(1.03)
}
.btn-light .play-dot {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bg);
    display: grid;
    place-items: center
}
.play-dot i {
    color: var(--text);
    font-size: 11px;
    margin-left: 2px
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    height: 96vh;
    min-height: 560px;
    overflow: hidden;
    background: #111
}
@media (max-width: 819px) {
    .hero {
        height: 100svh;
        min-height: 600px
    }
}

.hero-slides {
    position: relative;
    width: 100%;
    height: 100%
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s ease,visibility 1.1s
}
.hero-slide.active {
    opacity: 1;
    visibility: visible
}

.hero-slide .bg {
    position: absolute;
    inset: -2%;
    background: #16161b center/cover no-repeat;
    transform: scale(1);
    transition: transform 9s linear
}
.hero-slide.active .bg {
    transform: scale(1.08)
}

.hero-slide .hero-copy {
    display: none
}

.shade-l {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#0a0a0ceb,#0a0a0c8c 38%,#0a0a0c00 70%);
    pointer-events: none
}
.shade-b {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#0a0a0c,#0a0a0c99 22%,#0a0a0c00 50%,#0a0a0c80);
    pointer-events: none
}

.hero-num {
    position: absolute;
    right: var(--pad);
    top: 120px;
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(120px,16vw,240px);
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(244,241,236,.22);
    letter-spacing: -.04em;
    pointer-events: none
}

.hero-content {
    position: absolute;
    inset: 96px 0 0;
    padding: 0 var(--pad) clamp(28px,5vw,64px);
    display: flex;
    align-items: flex-end;
    gap: 40px
}
@media (max-width: 819px) {
    .hero-content { padding-bottom: 104px }
}

.hero-main {
    flex: 1 1 520px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: clamp(14px,1.6vw,22px);
    min-width: 0
}

.hero-text,
.hero-text .hero-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(14px,1.6vw,22px)
}

.hero-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(42px,7.2vw,112px);
    line-height: .96;
    letter-spacing: -.02em;
    text-wrap: balance
}
.hero-title a { color: var(--text) }

.hero-title--logo { line-height: 0 }
.hero-title--logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(560px,78vw);
    max-height: clamp(84px,15vw,210px);
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 8px 28px rgba(0,0,0,.55))
}

.meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    color: var(--dim)
}
.meta a { color: var(--dim) }
.meta a:hover { color: var(--accent2) }
.meta .star {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    font-weight: 800
}
.meta .box {
    padding: 2px 7px;
    border: 1px solid rgba(244,241,236,.35);
    border-radius: 5px;
    font-size: 12px
}
.meta .box.fill {
    border: none;
    background: #f4f1ec24;
    font-weight: 700
}

.lead {
    margin: 0;
    max-width: 520px;
    font-size: clamp(15px,1.15vw,17px);
    line-height: 1.6;
    color: var(--soft);
    text-wrap: pretty
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
    align-items: center
}

.hero-dots {
    display: flex;
    gap: 6px;
    margin-top: 8px
}
.hero-dots button {
    position: relative;
    width: 8px; height: 4px;
    border-radius: 2px;
    border: none;
    padding: 0;
    background: #f4f1ec40;
    overflow: hidden;
    transition: width .4s
}
.hero-dots button.active { width: 32px }
@media (min-width: 1200px) {
    .hero-dots { display: none }
}

.bar-fill {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(0)
}
.active > .bar-fill,
.active .bar-fill {
    animation: prog var(--dur,7s) linear forwards
}
@keyframes prog {
    0% { transform: scaleX(0) }
    100% { transform: scaleX(1) }
}

.hero-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-left: auto
}
@media (max-width: 1199px) {
    .hero-rail { display: none }
}
.hero-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}
.hero-rail-head > span {
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--muted);
    font-weight: 700
}
.hero-rail .arrow-btn {
    width: 38px; height: 38px;
    border-color: #f4f1ec38;
    background: #0a0a0c4d
}
.thumbs {
    display: flex;
    gap: 10px
}
.thumb {
    width: clamp(96px,8.5vw,138px);
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    opacity: .5;
    transition: opacity .4s,transform .4s;
    display: flex;
    flex-direction: column;
    gap: 8px
}
.thumb.active {
    opacity: 1;
    transform: translateY(-4px)
}
.thumb .poster {
    aspect-ratio: 16/10;
    border-radius: 10px;
    border: 1px solid rgba(244,241,236,.1);
    background: var(--card) center/cover no-repeat
}
.thumb.active .poster {
    border-color: #f4f1eccc
}
.thumb .track {
    position: relative;
    height: 2px;
    background: #f4f1ec2e;
    border-radius: 1px;
    overflow: hidden
}
.thumb span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.arrow-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.18);
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    transition: all .2s;
    cursor: pointer;
    font-size: 13px
}
.arrow-btn:hover {
    background: var(--text);
    color: var(--bg)
}
.arrow-btn[disabled] {
    opacity: .3;
    pointer-events: none
}
.arrows {
    display: flex;
    gap: 8px;
    align-items: center
}

.tag {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap
}
.tag.accent {
    background: var(--accent);
    color: var(--bg);
    font-weight: 800;
    letter-spacing: .08em
}
.tag.outline {
    border: 1px solid rgba(244,241,236,.28);
    backdrop-filter: blur(8px)
}
.tag.soft { background: #f4f1ec24 }
.tag-links a { color: inherit }
.tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(18px) }
    100% { opacity: 1; transform: none }
}
.anim-in {
    animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) both
}
@media (prefers-reduced-motion: reduce) {
    *,*:before,*:after {
        animation-duration: .01ms!important;
        transition-duration: .01ms!important
    }
}

/* ============================================================
   MAIN / SECTIONS / CARDS
   ============================================================ */
.main {
    display: flex;
    flex-direction: column;
    gap: clamp(20px,2.4vw,32px);
    /* padding: clamp(20px,3vw,36px) 0 0; */
}
.px {
    padding-left: var(--pad);
    padding-right: var(--pad)
}
.section {
    display: flex;
    flex-direction: column;
    gap: 20px
}
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}
.eyebrow {
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--accent2);
    font-weight: 800
}
.h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(24px,2.6vw,36px);
    letter-spacing: -.01em;
    line-height: 1.15
}
.h2 small {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 10px
}
.stack6 {
    display: flex;
    flex-direction: column;
    gap: 6px
}
.link-muted {
    font-size: 14px;
    color: var(--muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px
}
.link-muted i { font-size: .85em; margin-left: 0 }

.row {
    display: flex;
    gap: clamp(12px,1.4vw,20px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 20px var(--pad) 16px;
    scroll-padding: 0 var(--pad)
}
.row::-webkit-scrollbar { display: none }
.row > * {
    scroll-snap-align: start;
    flex: 0 0 auto
}

/* ---- pcard (постер-карточка) ---- */
.pcard {
    width: clamp(148px,14.5vw,212px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0
}
.pcard-img {
    position: relative;
    display: block;
    aspect-ratio: 2/3;
    border-radius: 14px;
    overflow: hidden;
    background: var(--card) center/cover no-repeat;
    transition: transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s
}
.pcard-img:hover {
    box-shadow: 0 24px 40px -16px #a000ff73;
    transform: none;
}
.pcard-img:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#0a0a0cb3,#0a0a0c00 45%)
}
.pcard-img > span {
    position: absolute;
    z-index: 1
}
.b-rate {
    top: 10px; left: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #0a0a0cb3;
    backdrop-filter: blur(6px);
    font-size: 12px;
    font-weight: 800;
    color: var(--gold)
}
.b-dur {
    bottom: 10px; left: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    background: #f4f1ec29;
    backdrop-filter: blur(6px);
    color: var(--text)
}
.b-new {
    top: 10px; right: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    max-width: calc(100% - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.pcard-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px
}
.pcard-info > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}
.pcard-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--text)
}
.pcard-info small {
    font-size: 13px;
    color: var(--muted)
}
.pcard-info small a { color: var(--muted) }
.pcard-info small a:hover { color: var(--accent2) }

.add-btn {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.22);
    background: transparent;
    color: var(--text);
    font-size: 13px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .25s
}
.add-btn:hover { border-color: var(--text) }
.add-btn.on {
    background: #a000ff29;
    border-color: #a000ff8c;
    color: var(--accent)
}


/* ---- ccard (продолжить просмотр) ---- */
.ccard {
    width: clamp(260px,26vw,380px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--text)
}
.ccard:hover { color: var(--text) }
.ccard-img {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    background: var(--card) center/cover no-repeat;
    transition: transform .35s
}
.ccard-img:hover { transform: scale(1.02) }
.ccard-img:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#0a0a0cd9,#0a0a0c00 55%)
}
.ccard-play {
    position: absolute;
    left: 14px; bottom: 18px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #f4f1eceb;
    display: grid;
    place-items: center
}
.ccard-left {
    position: absolute;
    right: 14px; bottom: 22px;
    font-size: 12px;
    color: var(--dim)
}
.ccard b { font-weight: 700; font-size: 15px }
.ccard small { font-size: 13px; color: var(--muted) }

/* ---- wcard (популярное) ---- */
.wcard {
    width: clamp(250px,24vw,360px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--text)
}
.wcard:hover { color: var(--text) }
.wcard-img {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    border-radius: 18px;
    overflow: hidden;
    background-color: var(--card);
    background-size: cover;
    background-position: center 25%;
    box-shadow: 0 0 0 1px #f4f1ec14;
    transition: transform .35s,box-shadow .35s
}
.wcard-img:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,#0a0a0c00 40%,#0a0a0ccc)
}
.wcard:hover .wcard-img {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -18px #000000e6,0 0 0 1px #a000ff80
}
.wcard-num {
    position: absolute;
    left: 14px; bottom: 8px;
    z-index: 1;
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(34px,3.4vw,52px);
    line-height: 1;
    color: var(--text);
    opacity: .92
}
.wcard-play {
    position: absolute;
    right: 14px; bottom: 14px;
    z-index: 1;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--text);
    color: var(--bg);
    font-size: 13px;
    opacity: 0;
    transform: scale(.8);
    transition: all .3s
}
.wcard:hover .wcard-play {
    opacity: 1;
    transform: none
}
.wcard-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}
.wcard-body b {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
.wcard-body small {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted)
}

/* ---- feature (широкий баннер) ---- */
.feature {
    position: relative;
    border-radius: clamp(20px,2.4vw,32px);
    overflow: hidden;
    min-height: clamp(420px,42vw,560px);
    display: flex;
    align-items: flex-end;
    background: var(--card) center/cover no-repeat
}
.feature:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#0a0a0cf2,#0a0a0c4d 55%,#0a0a0c1a)
}
.feature-body {
    position: relative;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding: clamp(22px,3.4vw,52px)
}
.feature-body > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px
}
.feature h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(36px,5vw,76px);
    line-height: 1;
    letter-spacing: -.02em
}
.feature p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--soft)
}
.eyebrow.gold { color: var(--gold) }

/* Утилиты */
.dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--muted);
    flex: 0 0 auto
}
.px { padding-left: var(--pad); padding-right: var(--pad) }
@media (max-width: 819px) {
    .hide-mobile { display: none!important }
}
@media (min-width: 820px) {
    .show-mobile { display: none!important }
}

/* ============================================================
   ТОП-10 — ТОЧНО КАК В LUMEN
   ============================================================ */
.row.top {
    gap: clamp(4px,1vw,14px);
    padding-top: 0;
    counter-reset: top
}

.top-item {
    display: flex;
    align-items: flex-end;
    counter-increment: top
}

.top-num {
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(120px,13vw,190px);
    line-height: .78;
    letter-spacing: -.06em;
    color: var(--bg);
    -webkit-text-stroke: 2px rgba(244,241,236,.4);
    margin-right: clamp(-28px,-2vw,-18px)
}

.top-num:before {
    content: counter(top)
}

.top-poster {
    position: relative;
    width: clamp(120px,11vw,160px);
    aspect-ratio: 2/3;
    border-radius: 12px;
    box-shadow: -12px 0 24px -8px #000000b3;
    transition: transform .35s
}

.top-poster:hover {
    transform: scale(1.04)
}

/* ============================================================
   ЧИПСЫ ЖАНРОВ
   ============================================================ */
.chips-sec {
    position: relative;
    display: block;
    padding: 0 var(--pad)
}
.chips-sec .chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 2px 0
}
.chips-sec .chips::-webkit-scrollbar { display: none }

.chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: transparent;
    color: var(--dim);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .25s
}
.chip:hover { border-color: #f4f1ec80; color: var(--text) }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text) }
.chip small { font-size: 12px; opacity: .55 }

.chips-nav { display: contents }
.chips-nav[hidden] { display: none!important }
.chips-arrow {
    position: absolute;
    top: 1px;
    z-index: 2;
    width: 44px; height: 44px;
    background: var(--bg);
    border-color: var(--line2);
    box-shadow: 0 0 0 10px var(--bg),28px 0 26px 6px var(--bg)
}
.chips-arrow--l { left: var(--pad) }
.chips-arrow--r {
    right: var(--pad);
    box-shadow: 0 0 0 10px var(--bg),-28px 0 26px 6px var(--bg)
}
.chips-arrow[disabled] { opacity: 0; visibility: hidden }
.chips-arrow:hover { background: var(--text); color: var(--bg) }

@media (max-width: 819px) {
    .chips-nav { display: none }
    .chips-sec { padding: 0 }
    .chips-sec .chips { padding: 2px var(--pad) }
}

/* ============================================================
   СЕТКА ПОСТУПЛЕНИЙ (grid-cards--even)
   ============================================================ */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
    gap: clamp(18px,2vw,28px) clamp(12px,1.4vw,20px)
}
.grid-cards--even,
.grid-cards--even > #dle-content {
    grid-template-columns: repeat(7,minmax(0,1fr))
}
@media (max-width: 1199px) {
    .grid-cards--even,
    .grid-cards--even > #dle-content { grid-template-columns: repeat(5,minmax(0,1fr)) }
}
@media (max-width: 899px) {
    .grid-cards--even,
    .grid-cards--even > #dle-content { grid-template-columns: repeat(4,minmax(0,1fr)) }
}
@media (max-width: 639px) {
    .grid-cards--even,
    .grid-cards--even > #dle-content { grid-template-columns: repeat(3,minmax(0,1fr)) }
}
@media (max-width: 479px) {
    .grid-cards--even,
    .grid-cards--even > #dle-content { grid-template-columns: repeat(2,minmax(0,1fr)) }
}
.grid-cards .more,
.grid-cards .empty,
.grid-cards .notice { grid-column: 1/-1 }

/* ============================================================
   ПАГИНАЦИЯ + MORE
   ============================================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    grid-column: 1/-1
}
.pagination__pages {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center
}
.pagination__pages > a,
.pagination__pages > span,
.pagination__arrow {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.16);
    font-weight: 700;
    font-size: 14px;
    color: var(--dim);
    transition: all .2s
}
.pagination__pages > a:hover,
.pagination__edge > a:hover .pagination__arrow {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}
.pagination__pages > span {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}
.pagination__pages > span.nav_ext {
    background: transparent;
    border-color: transparent;
    color: var(--muted)
}
.pagination__edge:empty { display: none }
.pagination__edge > span .pagination__arrow { opacity: .35 }

.more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    grid-column: 1/-1
}
.more-track {
    width: min(260px,70%);
    height: 3px;
    border-radius: 2px;
    background: #f4f1ec1f;
    overflow: hidden
}
.more-track i {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width .4s
}
.more span { font-size: 13px; color: var(--muted) }
.more button {
    height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.25);
    background: transparent;
    font-weight: 800;
    font-size: 15px;
    transition: all .25s
}
.more button:hover { background: var(--text); color: var(--bg) }
.more button[disabled] { opacity: .5; cursor: progress }

/* ============================================================
   ПОДБОРКИ (mi-coll-*)
   ============================================================ */
.coll-sec:not(:has(.mi-coll-card)) { display: none }
.coll-row .col-tile {
    width: clamp(300px,30vw,440px);
    aspect-ratio: 16/9;
    padding: 0;
    flex: 0 0 auto;
    scroll-snap-align: start
}
.row.coll-row:empty { display: none }

.col-tile--mi {
    position: relative;
    display: block;
    border-radius: 22px;
    background: linear-gradient(120deg,#1b1b21,#15151a 55%,#241a18);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .35s,border-color .35s
}
.col-tile--mi:hover {
    transform: translateY(-4px);
    border-color: #a000ff73
}
.mi-coll-collage {
    position: absolute;
    inset: 50% 20px auto auto;
    height: 76%;
    width: auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0;
    overflow: visible;
    transform: translateY(-50%);
    z-index: 0
}
.mi-coll-collage img {
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 14px 30px -10px #000000e6,0 0 0 1px #f4f1ec1a;
    transform-origin: right center;
    transition: transform .4s,margin .4s
}
.mi-coll-collage img:nth-child(1) { z-index: 4 }
.mi-coll-collage img:nth-child(2) { z-index: 3; margin-right: -13%; transform: scale(.9); filter: brightness(.8) }
.mi-coll-collage img:nth-child(3) { z-index: 2; margin-right: -14%; transform: scale(.8); filter: brightness(.62) }
.mi-coll-collage img:nth-child(4) { z-index: 1; margin-right: -15%; transform: scale(.7); filter: brightness(.45) }
.mi-coll-collage img:nth-child(n+5) { display: none }
.mi-coll-collage:empty { display: none }

.col-tile--mi .col-body {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(16px,1.6vw,24px);
    padding-right: 50%;
    background: linear-gradient(90deg,#141418f5,#141418cc 40%,#14141800 62%);
    border-radius: inherit
}
.col-tile--mi .col-count {
    align-self: flex-start;
    margin-bottom: auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f4f1ec1a;
    font-size: 12px;
    font-weight: 700;
    color: var(--soft);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px
}
.col-count i { font-size: 11px; color: var(--accent2) }
.col-name {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(19px,1.7vw,25px);
    line-height: 1.15;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}
.col-go {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    transition: color .25s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px
}
.col-tile--mi:hover .col-go { color: var(--accent3) }

.mi-coll-grid.mi-coll-cards { display: contents }

/* ============================================================
   ПОИСК (overlay)
   ============================================================ */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: #0a0a0ce6;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow-y: auto;
    display: none
}
.search-overlay.open {
    display: block;
    animation: fadeUp .35s ease both
}
.search-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(20px,4vw,48px) clamp(16px,4vw,40px) 120px;
    display: flex;
    flex-direction: column;
    gap: 28px
}
.search-field {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(244,241,236,.18);
    padding-bottom: 14px;
    margin: 0
}
.search-field input[type=search] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: var(--text);
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(24px,4vw,48px)
}
.search-field input[type=search]:focus { background: transparent; box-shadow: none }
.search-close {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.2);
    background: transparent;
    font-size: 20px
}
.search-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}
.search-label { font-size: 13px; color: var(--muted) }
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(130px,1fr));
    gap: 16px
}
.search-results[hidden] { display: none }
.s-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}
.s-item .poster {
    aspect-ratio: 2/3;
    border-radius: 12px;
    background: var(--card) center/cover no-repeat;
    display: block
}
.s-title { font-size: 14px; font-weight: 700; line-height: 1.3 }
.s-item small { font-size: 12px; color: var(--muted) }
.s-item small a { color: var(--muted) }
.s-empty {
    grid-column: 1/-1;
    color: var(--muted);
    font-size: 15px;
    padding: 24px 0
}

/* ============================================================
   ТАББАР (мобильный)
   ============================================================ */
/* [удалён старый .tabbar] */
/* [удалён старый .tabbar a, button] */
/* [удалён старый .tabbar .active] */
/* [удалён старый .tabbar i] */

/* ============================================================
   U-MENU (юзер-панель)
   ============================================================ */
.umenu { position: relative; flex: 0 0 auto }
.avatar-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 4px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--text)
}
.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg,var(--gold),var(--accent));
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--bg);
    flex: 0 0 auto
}
.avatar--lg { width: 48px; height: 48px }
.umenu-panel {
    position: absolute;
    right: -4px;
    top: 54px;
    width: min(320px,calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(244,241,236,.1);
    box-shadow: 0 30px 60px -15px #000c;
    animation: fadeUp .25s ease both
}
.umenu-panel[hidden] { display: none }
.umenu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 14px;
    border-bottom: 1px solid var(--line)
}
.umenu-head > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}
.umenu-name {
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis
}
.umenu-group { font-size: 12px; color: var(--muted) }
.umenu-list {
    display: flex;
    flex-direction: column;
    gap: 2px
}
.umenu-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dim)
}
.umenu-list a:hover { background: #f4f1ec0f; color: var(--text) }
.umenu-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted)
}
.umenu-count b { color: var(--accent2) }
.umenu-out { height: 46px }

/* ============================================================
   EXTRAS (опрос, теги, архив)
   ============================================================ */
.extras {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr));
    gap: clamp(14px,1.6vw,22px);
    align-items: start
}
.extras-item { gap: 16px }
.extras-off { display: none!important }
.panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(20px,2vw,28px);
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    min-width: 0
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap
}
.cap {
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 700
}
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}
.tag-cloud a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .2s
}
.tag-cloud a:hover { border-color: var(--text); color: var(--text) }

/* ============================================================
   FEATURE (широкий баннер)
   ============================================================ */
.feature {
    position: relative;
    border-radius: clamp(20px,2.4vw,32px);
    overflow: hidden;
    min-height: clamp(420px,42vw,560px);
    display: flex;
    align-items: flex-end;
    background: var(--card) center/cover no-repeat
}
.feature:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#0a0a0cf2,#0a0a0c4d 55%,#0a0a0c1a)
}
.feature-body {
    position: relative;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding: clamp(22px,3.4vw,52px)
}
.feature-body > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px
}
.feature h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(36px,5vw,76px);
    line-height: 1;
    letter-spacing: -.02em
}
.feature p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--soft)
}
.eyebrow.gold { color: var(--gold) }

/* ============================================================
   ПОПУЛЯРНОЕ (wcard)
   ============================================================ */
.wcard {
    width: clamp(250px,24vw,360px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--text)
}
.wcard:hover { color: var(--text) }
.wcard-img {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    border-radius: 18px;
    overflow: hidden;
    background-color: var(--card);
    background-size: cover;
    background-position: center 25%;
    box-shadow: 0 0 0 1px #f4f1ec14;
    transition: transform .35s,box-shadow .35s
}
.wcard-img:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,#0a0a0c00 40%,#0a0a0ccc)
}
.wcard:hover .wcard-img {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -18px #000000e6,0 0 0 1px #a000ff80
}
.wcard-num {
    position: absolute;
    left: 14px; bottom: 8px;
    z-index: 1;
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(34px,3.4vw,52px);
    line-height: 1;
    color: var(--text);
    opacity: .92
}
.wcard-play {
    position: absolute;
    right: 14px; bottom: 14px;
    z-index: 1;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--text);
    color: var(--bg);
    font-size: 13px;
    opacity: 0;
    transform: scale(.8);
    transition: all .3s
}
.wcard:hover .wcard-play { opacity: 1; transform: none }
.wcard-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}
.wcard-body b {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
.wcard-body small {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted)
}

/* ============================================================
   ОТЗЫВЫ (review)
   ============================================================ */
.reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap: clamp(14px,1.6vw,22px)
}
.review-av--initial:before {
    content: attr(data-letter);
    color: var(--bg);
    font-weight: 800
}
.review-head > div {
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 2px; */
    /* flex: 1; */
    /* min-width: 0; */
}
.review-head b { font-size: 15px }
.review-head small {
    font-size: 12px;
    color: var(--muted)
}
.review p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--soft)
}
.review .review-link {
    align-self: flex-start;
    margin-top: auto;
    color: var(--dim);
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.22);
    font-size: 13px;
    font-weight: 700
}
.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.22);
    color: var(--dim);
    font-size: 13px;
    font-weight: 700;
    transition: all .25s
}
.pill-btn:hover { border-color: var(--text); color: var(--text) }

/* ============================================================
   FOOTER-CTA (нижний баннер перед футером)
   ============================================================ */
.footer-cta {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) auto auto;
    align-items: center;
    gap: clamp(20px,3vw,48px);
    padding: clamp(24px,3.2vw,44px);
    border-radius: 28px;
    background: radial-gradient(ellipse 60% 120% at 100% 0%,rgba(160,0,255,.22),transparent 65%),radial-gradient(ellipse 50% 100% at 0% 100%,rgba(232,194,122,.1),transparent 60%),var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
    margin-bottom: 20px
}
.footer-cta__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0
}
.footer-cta__text b {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(24px,2.8vw,40px);
    line-height: 1.1;
    text-wrap: balance
}
.footer-cta__text p {
    margin: 0;
    max-width: 520px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--soft)
}
.footer-devices {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}
.footer-devices li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 84px;
    padding: 14px 6px;
    border-radius: 16px;
    background: #f4f1ec0d;
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    color: var(--dim)
}
.footer-devices i {
    font-size: 20px;
    color: var(--accent2);
    width: auto
}
.footer-cta__btns {
    display: flex;
    flex-direction: column;
    gap: 10px
}
.footer-cta__btns .s-btn {
    height: 50px;
    padding: 0 22px;
    font-size: 14px
}
@media (max-width: 1199px) {
    .footer-cta { grid-template-columns: 1fr auto }
    .footer-devices { display: none }
}
@media (max-width: 719px) {
    .footer-cta { grid-template-columns: 1fr }
    .footer-cta__btns {
        flex-direction: row;
        flex-wrap: wrap

/* ============================================================
   ФИНАЛЬНЫЙ ФИКС ШАПКИ — один блок, без дублей
   ============================================================ */
.header {
    position: fixed;
    z-index: 60;
    top: clamp(10px, 1.4vw, 18px);
    left: clamp(12px, 3vw, 40px);
    right: clamp(12px, 3vw, 40px);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(10px, 2vw, 28px);
    padding: 10px 12px 10px clamp(14px, 1.6vw, 22px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 22%, transparent);
    border: 1px solid var(--line);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    transition: background .4s, border-color .4s;
    box-sizing: border-box;
    max-width: 100%;
}

.header.is-scrolled {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-color: var(--line2);
}

.header .logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
}

.header .logo:hover { color: var(--text); }

.header .logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.header .logo-mark i {
    color: var(--bg);
    font-size: .8em;
}

.header .logo-text {
    font-family: var(--serif);
    font-weight: 900;
    font-size: 21px;
    letter-spacing: .06em;
    white-space: nowrap;
}

.header .nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.header .nav::-webkit-scrollbar { display: none; }

.header .nav a {
    flex: 0 0 auto;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dim);
    transition: background .25s, color .25s;
    text-decoration: none;
}

.header .nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.header .nav a.active {
    background: var(--text);
    color: var(--bg);
}

@media (max-width: 1180px) {
    .header .nav a { padding: 9px 10px; }
}

.header .spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.header .search-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-size: 14px;
}

.header .search-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text);
}

.header .search-text {
    display: flex;
    gap: 18px;
    align-items: center;
}

.header .search-text kbd {
    font: inherit;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 1279px) {
    .header .search-text { display: none; }
}

.header .icon-btn {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    display: grid;
    place-items: center;
    text-decoration: none;
}

.header .icon-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text);
}

.header .s-btn.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    background: var(--accent);
    color: var(--bg);
    font-weight: 800;
    font-size: 14px;
    white-space: nowrap;
    line-height: 1;
}

.header .s-btn.btn-accent:hover {
    background: var(--text);
    color: var(--bg);
}

.header .umenu {
    position: relative;
    flex: 0 0 auto;
}

.header .avatar-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 4px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--text);
}

.header .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--gold), var(--accent));
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--bg);
    flex: 0 0 auto;
}

.header .umenu-panel {
    position: absolute;
    right: -4px;
    top: 54px;
    z-index: 75;
    width: min(320px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(20, 20, 24, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(244, 241, 236, 0.1);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8);
}

.header .umenu-panel[hidden] { display: none; }

}
}

/* ============================================================
   ФИКС ФУТЕРА — чистый блок, без дублей
   ============================================================ */
.footer {
    padding: 0 var(--pad) 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: none;
    margin-top: clamp(48px, 6vw, 88px)
}
.footer-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto auto;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    padding: clamp(24px, 3.2vw, 44px);
    border-radius: 28px;
    background:
        radial-gradient(ellipse 60% 120% at 100% 0%, rgba(160,0,255, .22), transparent 65%),
        radial-gradient(ellipse 50% 100% at 0% 100%, rgba(232, 194, 122, .1), transparent 60%),
        var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
    margin-bottom: 20px
}
.footer-cta__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0
}
.footer-cta__text b {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(24px, 2.8vw, 40px);
    line-height: 1.1;
    text-wrap: balance
}
.footer-cta__text p {
    margin: 0;
    max-width: 520px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--soft)
}
.footer-devices {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}
.footer-devices li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 84px;
    padding: 14px 6px;
    border-radius: 16px;
    background: rgba(244, 241, 236, .05);
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    color: var(--dim)
}
.footer-devices i {
    font-size: 20px;
    color: var(--accent2);
    width: auto
}
.footer-cta__btns {
    display: flex;
    flex-direction: column;
    gap: 10px
}
.footer-cta__btns .s-btn {
    height: 50px;
    padding: 0 22px;
    font-size: 14px
}
.footer-cta__btns .btn-accent {
    color: #fff
}
@media (max-width: 1199px) {
    .footer-cta { grid-template-columns: 1fr auto }
    .footer-devices { display: none }
}
@media (max-width: 719px) {
    .footer-cta { grid-template-columns: 1fr }
    .footer-cta__btns { flex-direction: row; flex-wrap: wrap }
    .footer-cta__btns .s-btn { flex: 1 1 160px }
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    padding: clamp(36px, 4.5vw, 64px) 0 clamp(28px, 3vw, 44px)
}
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 340px;
    min-width: 0
}
.footer-brand .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text)
}
.footer-brand .logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent);
    display: grid;
    place-items: center;
    flex: 0 0 auto
}
.footer-brand .logo-mark i {
    color: var(--bg);
    font-size: .8em
}
.footer-brand .logo-text {
    font-family: var(--serif);
    font-weight: 900;
    font-size: 26px;
    letter-spacing: .06em
}
.footer-brand p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6
}
.footer-social {
    display: flex;
    gap: 8px
}
.footer-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-size: 16px;
    transition: all .25s;
    text-decoration: none
}
.footer-social a:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}
.footer-social i { width: auto }

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 14px;
    min-width: 0
}
.footer-col > span {
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--accent2);
    font-weight: 700;
    margin-bottom: 4px
}
.footer-col a {
    color: var(--soft);
    transition: color .2s
}
.footer-col a:hover { color: var(--text) }
.footer-genres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 18px
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
    padding-top: 22px;
    border-top: 1px solid var(--line)
}
.footer-bottom div { display: flex; gap: 20px }
.footer-bottom a { color: var(--muted) }
.footer-age {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px
}
.footer-age b {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-size: 11px
}
.footer-up {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text) !important
}

@media (max-width: 1099px) {
    .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    .footer-brand {
        grid-column: 1 / -1;
        max-width: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between
    }
    .footer-brand p { flex: 1 1 300px; max-width: 520px }
}
@media (max-width: 719px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px
    }
    .footer-genres { grid-template-columns: 1fr }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }
}
@media (max-width: 819px) {
    .footer { padding-bottom: 110px }
}

/* ============================================================
   СТИЛИЗАЦИЯ DLE-МОДАЛКИ ЛОГИНА (скрыта по умолчанию)
   ============================================================ */

/* Заголовок */
.loginbox h2,
#login-modal h2,
.login-modal__title,
.ui-dialog.loginbox .ui-dialog-title {
    font-family: var(--serif, "Playfair Display", Georgia, serif) !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    margin: 0 0 20px !important;
    color: var(--text, #F4F1EC) !important;
    text-align: left !important;
}



/* jQuery UI обёртка */
.ui-widget-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    background: rgba(10, 10, 12, 0.85) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ui-dialog.loginbox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(440px, calc(100vw - 40px)) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 9999 !important;
}

.ui-dialog.loginbox .ui-dialog-titlebar {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    z-index: 10 !important;
}

.ui-dialog.loginbox .ui-dialog-title {
    display: none !important;
}

.ui-dialog.loginbox .ui-dialog-content {
    padding: clamp(24px, 3vw, 40px) !important;
    background: var(--surface, #141418) !important;
    border-radius: 28px !important;
    border: 1px solid var(--line, rgba(244,241,236,.1)) !important;
    color: var(--text, #F4F1EC) !important;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.85) !important;
}

/* ============================================================
   СВЕТЛАЯ ТЕМА
   ============================================================ */

/* Фон сайта в светлой теме */
[data-theme="light"] body {
    background: var(--bg);
    color: var(--text);
}

/* Шапка в светлой теме */
[data-theme="light"] .header {
    background: rgba(255, 255, 255, .7);
    border-color: rgba(26, 26, 28, .08);
}
[data-theme="light"] .header.is-scrolled {
    background: rgba(255, 255, 255, .95);
    border-color: rgba(26, 26, 28, .12);
}
[data-theme="light"] .header .nav a {
    color: var(--dim);
}
[data-theme="light"] .header .nav a:hover {
    background: rgba(26, 26, 28, .06);
    color: var(--text);
}
[data-theme="light"] .header .nav a.active {
    background: var(--text);
    color: var(--bg);
}
[data-theme="light"] .header .search-btn {
    background: rgba(26, 26, 28, .04);
    border-color: rgba(26, 26, 28, .12);
    color: var(--muted);
}
[data-theme="light"] .header .search-btn:hover {
    border-color: rgba(26, 26, 28, .3);
    color: var(--text);
}
[data-theme="light"] .header .icon-btn {
    background: rgba(26, 26, 28, .04);
    border-color: rgba(26, 26, 28, .12);
    color: var(--text);
}

/* Hero затемнения — светлее для светлой темы */
[data-theme="light"] .shade-l {
    background: linear-gradient(90deg, rgba(247, 244, 239, .95), rgba(247, 244, 239, .7) 38%, transparent 70%);
}
[data-theme="light"] .shade-b {
    background: linear-gradient(0deg, rgba(247, 244, 239, .98), rgba(247, 244, 239, .6) 22%, transparent 50%, rgba(247, 244, 239, .7));
}
[data-theme="light"] .hero-slide .bg {
    filter: brightness(1.05);
}

/* Карточки — светлее тени */
[data-theme="light"] .pcard-img:hover {
    box-shadow: 0 24px 40px -16px rgba(122,40,168, .25);
}
[data-theme="light"] .b-rate {
    background: rgba(255, 255, 255, .85);
    color: var(--gold);
    backdrop-filter: blur(8px);
}
[data-theme="light"] .b-dur {
    background: rgba(26, 26, 28, .55);
    color: #FFF;
}

/* Топ-10 цифры */
[data-theme="light"] .top-num {
    -webkit-text-stroke-color: rgba(26, 26, 28, .35);
}
[data-theme="light"] .top-poster {
    box-shadow: -12px 0 24px -8px rgba(0, 0, 0, .18);
}

/* wcard популярное */
[data-theme="light"] .wcard-img {
    box-shadow: 0 0 0 1px rgba(26, 26, 28, .08);
}
[data-theme="light"] .wcard-img:after {
    background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 12, .55));
}
[data-theme="light"] .wcard-play {
    background: #FFF;
    color: #0A0A0C;
}
[data-theme="light"] .wcard-num {
    color: #FFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* Кнопки */
[data-theme="light"] .btn-accent {
    background: var(--accent);
    color: #FFF;
}
[data-theme="light"] .btn-accent:hover {
    background: var(--text);
    color: var(--bg);
}
[data-theme="light"] .btn-glass {
    background: rgba(26, 26, 28, .05);
    border-color: rgba(26, 26, 28, .2);
    color: var(--text);
}
[data-theme="light"] .btn-light {
    background: var(--text);
    color: #FFF;
}
[data-theme="light"] .btn-light .play-dot {
    background: #FFF;
}
[data-theme="light"] .btn-light .play-dot i {
    color: var(--text);
}
[data-theme="light"] .s-btn.btn-accent {
    color: #FFF;
}

/* Hero meta */
[data-theme="light"] .meta {
    color: var(--soft);
}
[data-theme="light"] .meta a {
    color: var(--soft);
}
[data-theme="light"] .meta .box {
    border-color: rgba(26, 26, 28, .25);
}
[data-theme="light"] .meta .box.fill {
    background: rgba(26, 26, 28, .08);
}

/* Теги */
[data-theme="light"] .tag.soft {
    background: rgba(26, 26, 28, .08);
}
[data-theme="light"] .tag.outline {
    border-color: rgba(26, 26, 28, .2);
}

/* Чипсы */
[data-theme="light"] .chip {
    border-color: rgba(26, 26, 28, .16);
    color: var(--dim);
}
[data-theme="light"] .chip:hover {
    border-color: rgba(26, 26, 28, .4);
    color: var(--text);
}
[data-theme="light"] .chip.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

/* Стрелки */
[data-theme="light"] .arrow-btn {
    border-color: rgba(26, 26, 28, .18);
    color: var(--text);
}
[data-theme="light"] .arrow-btn:hover {
    background: var(--text);
    color: var(--bg);
}

/* Футер CTA */
[data-theme="light"] .footer-cta {
    background:
        radial-gradient(ellipse 60% 120% at 100% 0%, rgba(122,40,168, .08), transparent 65%),
        radial-gradient(ellipse 50% 100% at 0% 100%, rgba(184, 137, 46, .08), transparent 60%),
        var(--surface);
    border-color: var(--line);
}
[data-theme="light"] .footer-devices li {
    background: rgba(26, 26, 28, .04);
}
[data-theme="light"] .footer-social a {
    border-color: rgba(26, 26, 28, .16);
}
[data-theme="light"] .footer-social a:hover {
    background: var(--text);
    color: var(--bg);
}

/* Поиск overlay */
[data-theme="light"] .search-overlay {
    background: rgba(247, 244, 239, .96);
}
[data-theme="light"] .search-field {
    border-bottom-color: rgba(26, 26, 28, .2);
}
[data-theme="light"] .search-close {
    border-color: rgba(26, 26, 28, .2);
    color: var(--text);
}

/* Кнопка переключения темы */
.theme-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}

.theme-toggle:hover {
    border-color: rgba(255, 255, 255, .3);
    color: var(--accent2);
}

[data-theme="light"] .theme-toggle {
    border-color: rgba(26, 26, 28, .16);
    background: rgba(26, 26, 28, .04);
    color: var(--text);
}
[data-theme="light"] .theme-toggle:hover {
    border-color: rgba(26, 26, 28, .3);
    color: var(--accent);
}

/* Иконки внутри — показываем ту, что соответствует теме */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: opacity .3s, transform .3s;
}

/* В тёмной теме показываем солнце (переключает на светлую) */
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(180deg) scale(.5); }

/* В светлой теме показываем луну (переключает на тёмную) */
[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(-180deg) scale(.5); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* ============================================================
   ПЛЕЕРЫ — табы и слайды
   ============================================================ */
.player-wrap {
    position: relative;
    border-radius: clamp(16px, 2vw, 24px);
    overflow: hidden;
    background: #000;
    margin-top: 8px;
}
.player-slide {
    display: none;
}
.player-slide.active {
    display: block;
}
.player-slide .player {
    aspect-ratio: 16/9;
    border-radius: 0;
    box-shadow: none;
}
.player-slide iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../fonts/manrope-cyrillic.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../fonts/manrope-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}


@media(max-width: 819px) {
}

*,*:before,*:after {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 150px
}

html,body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased
}

body {
    overflow-x: clip;
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh
}

a {
    color: var(--text);
    text-decoration: none
}

a:hover {
    color: var(--accent2)
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer
}

input,select,textarea {
    font: inherit
}

img {
    display: block;
    max-width: 100%
}

h1,h2,h3,h4,h5,h6,p {
    margin: 0
}

.text p {
    margin: 0 0 1em
}

::selection {
    background: var(--accent);
    color: var(--bg)
}

:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 3px
}

.i {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle
}

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -.2em
}

.sr-only {
    position: absolute!important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    font-weight: 800
}

.skip-link:focus {
    top: 16px;
    color: var(--bg)
}

.spacer {
    flex: 1
}

.gap3 {
    gap: 3px!important
}

.icon {
    width: calc(var(--app-em)*1.25);
    height: calc(var(--app-em)*1.25);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}

.sr-only {
    position: absolute;
    width: var(--hair);
    height: var(--hair);
    padding: 0;
    margin: calc(var(--hair)*-1);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: absolute;
    z-index: 100;
    left: var(--sp-4);
    top: calc(var(--app-em)*-6);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--accent-strong);
    color: var(--accent-ink);
    font-size: var(--fs-ui);
    font-weight: 600;
    transition: top .2s ease
}

.skip-link:focus {
    top: var(--sp-3)
}

.icon-button,.soft-button,.primary-button {
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--app-em)*.5625);
    text-align: left;
    letter-spacing: .02em;
    transition: transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease
}

.icon-button {
    width: calc(var(--app-em)*2.75);
    height: calc(var(--app-em)*2.75);
    border-radius: var(--r-lg);
    background: var(--surface-soft);
    color: var(--muted);
    position: relative
}

.icon-button:hover {
    color: var(--accent-strong);
    background: var(--accent-soft)
}

.soft-button {
    min-height: var(--control-h);
    padding: 0 calc(var(--app-em)*1.125);
    border-radius: var(--r-lg);
    background: var(--surface-soft);
    color: var(--text);
    font-size: var(--fs-ui);
    font-weight: 600
}

.soft-button:hover {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.soft-button--danger:hover {
    background: var(--negative-soft);
    color: var(--negative)
}

.primary-button {
    min-height: var(--control-h);
    padding: 0 calc(var(--app-em)*1.25);
    border-radius: var(--r-lg);
    color: var(--accent-ink);
    background: var(--accent-strong);
    font-size: var(--fs-ui);
    font-weight: 600;
    box-shadow: 0 var(--sp-2) var(--sp-5) #496c8b2e
}

.primary-button:hover,.soft-button:hover {
    transform: translateY(calc(var(--app-em)*-.0625))
}

.primary-button:hover {
    background: var(--accent)
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.375);
    color: var(--muted);
    font-size: var(--fs-meta);
    white-space: nowrap
}

.meta-item .icon {
    width: var(--sp-4);
    height: var(--sp-4)
}

.meta-item--author {
    font-weight: 600;
    color: var(--text)
}

.meta-item--author a {
    color: inherit
}

.meta-item--author a:hover {
    color: var(--accent-strong)
}

.meta-dot {
    width: calc(var(--app-em)*.1875);
    height: calc(var(--app-em)*.1875);
    border-radius: 50%;
    background: var(--dot);
    flex: none
}

.counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--app-em)*1.75);
    height: calc(var(--app-em)*1.75);
    margin-left: var(--sp-2);
    padding: 0 var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--fs-meta);
    font-weight: 600
}

.icon-button .icon-close,.icon-button[aria-expanded=true] .icon-search,.icon-button[aria-expanded=true] .icon-menu {
    display: none
}

.icon-button[aria-expanded=true] .icon-close {
    display: block
}

.icon-button[aria-expanded=true] {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.icon--brand {
    width: calc(var(--app-em)*1.125);
    height: calc(var(--app-em)*1.125);
    fill: currentColor;
    stroke: none
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-5);
    margin: var(--sp-2) 0 var(--sp-5)
}

.section-heading h1,.section-heading h2 {
    font-size: var(--fs-h2);
    line-height: 1.15
}

.section-heading p {
    margin-top: calc(var(--app-em)*.4375);
    color: var(--muted);
    font-size: var(--fs-sm)
}

.speedbar {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.speedbar__inner {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1)
}

.speedbar a:hover {
    color: var(--accent-strong)
}

.story-text {
    color: var(--news-text);
    font-size: var(--fs-sm);
    line-height: 1.55
}

.story-text :last-child {
    margin-bottom: 0
}

.edit-note {
    margin-top: var(--sp-3);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.poll-list {
    display: grid;
    gap: var(--sp-2)
}

.poll-total {
    margin-top: var(--sp-3);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.poll-total--closed {
    color: var(--warn)
}

.poll-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: calc(var(--app-em)*.5625);
    margin-top: calc(var(--app-em)*.9375)
}

.poll-actions>.primary-button {
    min-width: 0;
    flex-shrink: 1
}

.poll-actions__results {
    flex: none;
    margin-inline-start:auto}

.poll-actions>.primary-button:focus-visible,.poll-actions__results:focus-visible {
    outline: calc(var(--hair)*2) solid var(--accent-strong);
    outline-offset: calc(var(--hair)*2)
}

.poll-card {
    padding: calc(var(--app-em)*1.375);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft)
}

.poll-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2)
}

.poll-card__title {
    font-size: var(--fs-h4)
}

.tab-panel[hidden] {
    display: none
}

.archive-list {
    display: grid;
    gap: var(--sp-2);
    font-size: var(--fs-sm)
}

.partners {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none
}

.partner {
    min-width: 0;
    padding-right: var(--sp-4);
    border-right: var(--hair) solid var(--line)
}

.partner:last-child {
    border-right: 0;
    padding-right: 0
}

.partner__link {
    display: grid;
    gap: var(--sp-2)
}

.partner__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.4
}

.partner__link:hover .partner__title {
    color: var(--accent-strong)
}

.partner__text {
    color: var(--muted);
    font-size: var(--fs-meta);
    line-height: 1.5
}

.partner__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--muted);
    font-size: var(--fs-meta);
    opacity: .8
}

.partner__meta .icon {
    width: calc(var(--app-em)*.875);
    height: calc(var(--app-em)*.875)
}

.partners__promo {
    margin-top: var(--sp-5)
}

.dle-ad {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: calc(var(--app-em)*15.625);
    padding: var(--sp-6);
    border-radius: var(--radius);
    background: var(--surface-sunk);
    box-shadow: var(--shadow-soft);
    color: var(--text)
}

.dle-ad:before {
    content: "";
    position: absolute;
    width: calc(var(--app-em)*15);
    height: calc(var(--app-em)*15);
    right: calc(var(--app-em)*-4.625);
    top: calc(var(--app-em)*-5.1875);
    border-radius: 50%;
    background: #c7d4dd;
    box-shadow: calc(var(--app-em)*-6.25) calc(var(--app-em)*11.875) 0 #d5dfe5
}

.dle-ad__label {
    position: absolute;
    z-index: 3;
    top: var(--sp-4);
    right: var(--sp-4);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600
}

.dle-ad__title {
    position: relative;
    z-index: 2;
    display: block;
    max-width: calc(var(--app-em)*12.5);
    margin-top: var(--sp-8);
    font-size: var(--fs-h3);
    line-height: 1.16;
    letter-spacing: -.028em
}

.dle-ad__text {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: var(--sp-3);
    max-width: calc(var(--app-em)*15);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.dle-ad:hover .dle-ad__title {
    color: var(--accent-strong)
}

.dle-ad--wide {
    min-height: calc(var(--app-em)*9)
}

.dle-ad--wide .dle-ad__title {
    max-width: calc(var(--app-em)*25);
    margin-top: 0
}

.dle-ad--wide .dle-ad__text {
    max-width: calc(var(--app-em)*30)
}

[data-theme=dark] .dle-ad:before {
    background: #2b3743;
    box-shadow: calc(var(--app-em)*-6.25) calc(var(--app-em)*11.875) 0 #242e39
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.4375);
    margin: var(--sp-6) 0 var(--sp-2)
}

.pagination__pages {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.4375)
}

.pagination__pages>a,.pagination__pages>span,.pagination__arrow {
    min-width: calc(var(--app-em)*2.75);
    height: calc(var(--app-em)*2.75);
    padding: 0 calc(var(--app-em)*.8125);
    border-radius: var(--r-md);
    background: var(--surface);
    display: inline-grid;
    place-items: center;
    color: var(--muted);
    font-size: var(--fs-ui);
    font-weight: 600;
    box-shadow: var(--shadow-tiny)
}

.pagination__pages>a:hover,.pagination__edge>a:hover .pagination__arrow {
    color: var(--accent-strong);
    background: var(--accent-soft)
}

.pagination__pages>span {
    color: var(--accent-ink);
    background: var(--accent-strong);
    box-shadow: none
}

.pagination__pages>span.nav_ext {
    color: var(--muted);
    background: transparent;
    border-color: transparent;
    box-shadow: none
}

.pagination__edge>a,.pagination__edge>span {
    display: inline-flex;
    border-radius: var(--r-md)
}

.pagination__arrow {
    width: calc(var(--app-em)*2.75);
    padding-inline:0;cursor: default
}

.pagination__edge>a .pagination__arrow {
    cursor: pointer
}

.pagination__label {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.pagination--split {
    justify-content: flex-start
}

.thread {
    display: grid;
    gap: calc(var(--app-em)*.875)
}

.thread__item {
    padding: calc(var(--app-em)*1.375) var(--sp-6);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft)
}

.thread__item--reply,.thread__item--own {
    background: var(--surface-soft);
    box-shadow: none
}

.thread__top {
    display: flex;
    align-items: center;
    gap: var(--sp-3)
}

.thread__avatar {
    position: relative;
    flex: none
}

.thread__online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(var(--app-em)*.75);
    height: calc(var(--app-em)*.75);
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 0 calc(var(--app-em)*.125) var(--surface)
}

.thread__ident {
    min-width: 0
}

.thread__who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-ui);
    font-weight: 600
}

.thread__who img {
    width: calc(var(--app-em)*1);
    height: auto
}

.thread__author {
    min-width: 0
}

.thread__badge {
    padding: 0 var(--sp-2);
    border-radius: var(--r-xs);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--fs-meta);
    font-weight: 600
}

.thread__when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.thread__when a:hover {
    color: var(--accent-strong)
}

.thread__mass {
    margin-left: auto
}

.thread__text {
    margin-top: calc(var(--app-em)*.875);
    color: var(--news-text);
    font-size: var(--fs-sm);
    line-height: 1.6
}

.thread__images {
    margin-top: var(--sp-3)
}

.thread__signature {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: var(--hair) solid var(--line);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.thread__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.375);
    margin-top: calc(var(--app-em)*.875)
}

.thread__btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.4375);
    min-height: calc(var(--app-em)*2.125);
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    color: var(--muted);
    cursor: pointer;
    font-size: var(--fs-meta);
    font-weight: 600;
    transition: background .18s ease,color .18s ease
}

.thread__btn:hover {
    background: var(--surface-soft);
    color: var(--accent-strong)
}

.thread__btn--danger:hover {
    background: var(--negative-soft);
    color: var(--negative)
}

.thread__btn .icon {
    width: var(--sp-4);
    height: var(--sp-4)
}

.thread__replies {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.thread__replies .icon {
    width: var(--sp-4);
    height: var(--sp-4)
}

.thread__rate {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1)
}

.thread__actions .thread__rate {
    margin-left: auto
}

.thread__stars {
    display: inline-flex;
    align-items: center
}

.vote-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.4375);
    min-height: calc(var(--app-em)*2.125);
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease,color .18s ease
}

.vote-pill .icon {
    width: var(--sp-4);
    height: var(--sp-4)
}

.vote-pill--up {
    color: var(--positive)
}

.vote-pill--down {
    color: var(--negative)
}

.vote-pill--up:hover {
    background: var(--positive-soft)
}

.vote-pill--down:hover {
    background: var(--negative-soft)
}

.vote-score {
    min-width: calc(var(--app-em)*1.5);
    text-align: center;
    color: var(--text);
    font-size: var(--fs-meta);
    font-weight: 600
}

.thread__rate.is-positive .vote-score {
    color: var(--positive)
}

.thread__rate.is-negative .vote-score {
    color: var(--negative)
}

.form-body {
    display: grid;
    gap: var(--sp-4)
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--sp-4)
}

.form-grid--three {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.form-row {
    display: grid;
    gap: var(--sp-2);
    min-width: 0;
    margin-top: var(--sp-4)
}

.form-row--inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3)
}

.form-row--check {
    display: flex;
    align-items: center;
    gap: var(--sp-2)
}

.form-label {
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600
}

.form-req {
    color: var(--negative);
    margin-left: var(--sp-1)
}

.form-hint,.form-actions__hint {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.form-inline {
    display: flex;
    gap: var(--sp-2)
}

.form-inline .form-input {
    flex: 1 1 auto;
    min-width: 0
}

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5)
}

.form-sep {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: var(--hair) solid var(--line);
    font-size: var(--fs-ui)
}

.auth-form {
    display: grid;
    gap: var(--sp-4)
}

.auth-form__title {
    font-size: var(--fs-h2);
    overflow-wrap: anywhere
}

.auth-form__lead {
    color: var(--muted);
    font-size: var(--fs-sm)
}

.auth-form__lead a {
    color: var(--accent-strong)
}

.addvote {
    margin-top: var(--sp-4)
}

.addvote>summary {
    display: inline-flex;
    list-style: none;
    cursor: pointer
}

.addvote__body {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    background: var(--surface-soft)
}

.profile-settings {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: var(--hair) solid var(--line)
}

.profile-settings>summary {
    display: inline-flex;
    list-style: none;
    cursor: pointer
}

.profile-settings>.form-body {
    margin-top: var(--sp-5)
}

.search-simple {
    display: grid;
    gap: var(--sp-4)
}

.search-advanced {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--sp-4)
}

.search-fieldset {
    min-width: 0;
    margin: 0;
    padding: var(--sp-4);
    border: var(--hair) solid var(--line);
    border-radius: var(--r-lg)
}

.search-fieldset legend {
    padding: 0 var(--sp-2);
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600
}

.search-fieldset--wide,.search-actions {
    grid-column: 1 / -1
}

.search-result-msg {
    margin-top: var(--sp-4);
    color: var(--muted);
    font-size: var(--fs-sm)
}

.result-card {
    padding: var(--sp-5);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft)
}

.result-card+.result-card {
    margin-top: var(--sp-3)
}

.result-card__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2)
}

.result-card__title {
    margin: var(--sp-2) 0;
    font-size: var(--fs-h4)
}

.result-card__title a:hover {
    color: var(--accent-strong)
}

.result-card__text {
    color: var(--news-text);
    font-size: var(--fs-sm)
}

.result-card__tools {
    margin-top: var(--sp-3)
}

.profile__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-5)
}

.profile__name {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-h2)
}

.profile__name img {
    width: calc(var(--app-em)*1.25);
    height: auto
}

.profile__status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-1);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.is-online {
    color: var(--positive);
    font-weight: 600
}

.profile__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3)
}

.profile__actions>a {
    min-height: var(--control-h);
    padding: 0 calc(var(--app-em)*1.125);
    border-radius: var(--r-lg);
    background: var(--surface-soft);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--app-em)*.5625);
    font-size: var(--fs-ui);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    text-align: left;
    transition: transform .2s ease,background .2s ease,color .2s ease
}

.profile__actions>a:hover {
    background: var(--accent-soft);
    color: var(--accent-strong);
    transform: translateY(calc(var(--app-em)*-.0625))
}

.profile__action-content {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.5625)
}

.profile__grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: start;
    gap: var(--sp-4);
    margin-top: var(--sp-6)
}

.profile__facts {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm)
}

.profile__facts dt {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.profile__facts dd {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-2)
}

.profile__link {
    color: var(--accent-strong);
    font-size: var(--fs-meta)
}

.profile__about {
    margin-top: var(--sp-6)
}

.profile__about h2 {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-h4)
}

.profile__name,.profile__status,.profile__actions>a,.profile__facts,.profile__facts dt,.profile__link,.profile__about h2,.profile__about .text,.profile .notice--warn {
    font-size: var(--fs-ui)
}

.pm-menu {
    display: flex;
    gap: var(--sp-2)
}

.pm-menu span {
    cursor: pointer
}

.pm-status {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-5);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.pm-status__bar {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0
}

.pm-status__text {
    grid-column: 2;
    grid-row: 1;
    text-align: end;
    font-variant-numeric: tabular-nums
}

.pm-dialog {
    margin-top: var(--sp-4)
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--sp-4)
}

.stats-card {
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--surface-soft)
}

.stats-card__label {
    display: block;
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600
}

.stats-card__value {
    display: block;
    margin: var(--sp-1) 0;
    font-size: calc(var(--app-em)*2.25);
    line-height: 1;
    letter-spacing: -.03em
}

.stats-card__hint {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.stats-groups {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-5)
}

.stats-group h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-h4)
}

.stats-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-2);
    font-size: var(--fs-sm)
}

.stats-group li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: var(--hair) solid var(--line)
}

.stats-group a {
    color: var(--accent-strong)
}

.stats-db {
    margin-top: var(--sp-5);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.stats-top-title {
    margin: var(--sp-6) 0 var(--sp-3);
    font-size: var(--fs-h4)
}

.table-scroll {
    overflow-x: auto
}

.staticpage .static-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2)
}

.static-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2)
}

.static-tools .soft-button {
    cursor: pointer
}

.notice {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius);
    background: var(--warn-soft);
    color: var(--warn)
}

.notice__icon {
    flex: none
}

.notice__title {
    display: block;
    font-size: var(--fs-ui)
}

.notice__text {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm)
}

.notice__text a {
    color: var(--accent-strong);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: var(--hair);
    text-underline-offset: calc(var(--app-em)*.1875)
}

.notice__text a:hover {
    color: var(--text)
}

.notice--warn {
    margin-top: var(--sp-3);
    font-size: var(--fs-meta)
}

.profile-popup {
    display: grid;
    gap: var(--sp-5)
}

.profile-popup__summary {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4)
}

.profile-popup__avatar {
    position: relative;
    flex: none
}

.profile-popup__identity {
    flex: 1;
    min-width: 0
}

.profile-popup__name {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-ui);
    overflow-wrap: anywhere
}

.profile-popup__details {
    display: grid;
    grid-template-columns: max-content minmax(0,1fr);
    gap: var(--sp-2) var(--sp-3);
    margin: 0
}

.profile-popup__details>div {
    display: contents
}

.profile-popup dt {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.profile-popup dd {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-size: var(--fs-meta);
    font-weight: 600;
    overflow-wrap: anywhere
}

.profile-popup__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-top: var(--sp-1);
    font-size: var(--fs-meta)
}

.profile-popup__link {
    color: var(--accent-strong)
}

.profile-popup__link a:hover {
    color: var(--accent)
}

.profile-popup__link--rss {
    margin-inline-start:auto;padding-inline-start:var(--sp-3);border-inline-start: var(--hair) solid var(--line)
}

@media(max-width: 30em) {
    .profile-popup__details {
        grid-template-columns:1fr
    }

    .profile-popup__details>div {
        display: grid;
        gap: var(--sp-1)
    }
}

.offline {
    width: min(calc(var(--app-em)*32),calc(100% - var(--sp-6)));
    padding-block:var(--sp-6);display: grid;
    justify-items: center;
    gap: var(--sp-4);
    text-align: center
}

.offline__art {
    width: calc(var(--app-em)*20);
    height: auto
}

.offline__title {
    font-size: var(--fs-h2)
}

.offline__reason {
    color: var(--muted);
    font-size: var(--fs-sm)
}

.offline__foot {
    color: var(--muted);
    font-size: var(--fs-meta)
}

@media(max-width: 66.25em) {
    .search-advanced,.profile__grid {
        grid-template-columns:1fr
    }
}

@media(max-width: 47.5em) {
    .partner {
        border-right:0;
        border-bottom: var(--hair) solid var(--line);
        padding: 0 0 var(--sp-3)
    }

    .partner:last-child {
        border-bottom: 0;
        padding-bottom: 0
    }

    .thread__item {
        padding: var(--sp-4)
    }

    .pmlist {
        overflow-x: auto
    }

    table.pm {
        min-width: calc(var(--app-em)*34)
    }

    .pm th.pm_last_user,.pm td.pm_last_user {
        width: calc(var(--app-em)*9)
    }

    .pm_navigation,.pm_navigation tbody,.pm_navigation tr,.pm_navigation td {
        display: block;
        width: 100%
    }

    .pm_navigation td:first-child:not(:has(.navigation)) {
        display: none
    }

    .pm_navigation td:last-child {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        white-space: normal
    }

    .pm_navigation .bbcodes {
        flex: none
    }
}

@keyframes prog {
    0% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 #a000ffcc
    }

    to {
        box-shadow: 0 0 0 18px #a000ff00
    }
}

.anim-in {
    animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) both
}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation-duration: .01ms!important;
        transition-duration: .01ms!important
    }
}

@media(max-width: 819px) {
    .hide-mobile {
        display:none!important
    }
}

@media(min-width: 820px) {
    .show-mobile {
        display:none!important
    }
}

.header {
    position: fixed;
    z-index: 60;
    top: clamp(10px,1.4vw,18px);
    left: clamp(12px,3vw,40px);
    right: clamp(12px,3vw,40px);
    display: flex;
    align-items: center;
    gap: clamp(10px,2vw,28px);
    padding: 10px 12px 10px clamp(14px,1.6vw,22px);
    border-radius: 999px;
    background: #0e0e1138;
    border: 1px solid rgba(244,241,236,.06);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    transition: background .4s,border-color .4s
}

.header.is-scrolled,.page-plain .header,.page-list .header {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-color: var(--line2);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text)
}

.logo:hover {
    color: var(--text)
}

.logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent);
    display: grid;
    place-items: center
}

.logo-text {
    font-family: var(--serif);
    font-weight: 900;
    font-size: 21px;
    letter-spacing: .06em
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px
}

.nav a {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dim);
    transition: background .25s,color .25s
}

.nav a:hover {
    background: #ffffff14;
    color: var(--text)
}

.nav a.active {
    background: var(--text);
    color: var(--bg)
}

@media(max-width: 1180px) {
    .nav a {
        padding:9px 10px
    }
}

.search-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: #ffffff0a;
    color: var(--muted);
    font-size: 14px
}

.search-btn:hover {
    border-color: #ffffff4d;
    color: var(--text)
}

.search-text {
    display: flex;
    gap: 18px;
    align-items: center
}

.search-text kbd {
    font: inherit;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.14)
}

@media(max-width: 1279px) {
    .search-text {
        display:none
    }
}

.icon-btn {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: #ffffff0a;
    color: var(--text);
    display: grid;
    place-items: center
}

.icon-btn:hover {
    border-color: #ffffff4d;
    color: var(--text)
}

.count-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1
}

.count-badge:empty,.count-badge[data-n="0"] {
    display: none
}

.avatar-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 4px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--text)
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg,var(--gold),var(--accent));
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--bg);
    flex: 0 0 auto
}

.avatar--lg {
    width: 48px;
    height: 48px
}

.avatar--xl {
    width: 96px;
    height: 96px
}

.avatar--guest {
    background: #ffffff0f;
    border: 1px solid rgba(255,255,255,.14);
    color: var(--text)
}

.guest-label {
    font-size: 14px;
    font-weight: 700;
    padding-right: 8px
}

.umenu {
    position: relative;
    flex: 0 0 auto
}

.umenu-panel {
    position: absolute;
    right: -4px;
    top: 54px;
    width: min(320px,calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(244,241,236,.1);
    box-shadow: 0 30px 60px -15px #000c;
    animation: fadeUp .25s ease both
}

.umenu-panel[hidden] {
    display: none
}

.umenu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 14px;
    border-bottom: 1px solid var(--line)
}

.umenu-head>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.umenu-name {
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis
}

.umenu-group {
    font-size: 12px;
    color: var(--muted)
}

.umenu-group * {
    display: inline
}

.umenu-list {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.umenu-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dim)
}

.umenu-list a:hover {
    background: #f4f1ec0f;
    color: var(--text)
}

.umenu-list .i {
    color: var(--muted)
}

.umenu-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted)
}

.umenu-count b {
    color: var(--accent2)
}

.umenu-out {
    height: 46px
}

.umenu-form {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.umenu-title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 24px
}

.umenu-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px
}

.umenu-links a {
    color: var(--muted)
}

@media(max-width: 819px) {
    .umenu-panel {
        position:fixed;
        inset: auto 12px 90px;
        width: auto
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.field>span,.form-label {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700
}

.field--check>span {
    text-transform: none;
    letter-spacing: 0
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap: 16px
}

.form-note {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5
}

.form-note a {
    color: var(--dim);
    text-decoration: underline
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap
}

.soc-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.soc-links:empty {
    display: none
}

.soc-links__item {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244,241,236,.16);
    color: var(--dim)
}

.soc-links__item:hover {
    border-color: var(--text);
    color: var(--text)
}

/* [удалён старый .tabbar] */

/* [удалён старый .tabbar a, button] */

/* [удалён старый .tabbar .active] */

.page-film /* [удалён старый .tabbar] */

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: #0a0a0ce6;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow-y: auto;
    display: none
}

.search-overlay.open {
    display: block;
    animation: fadeUp .35s ease both
}

.search-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(20px,4vw,48px) clamp(16px,4vw,40px) 120px;
    display: flex;
    flex-direction: column;
    gap: 28px
}

.search-field {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(244,241,236,.18);
    padding-bottom: 14px;
    margin: 0
}

.search-field input[type=search] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: var(--text);
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(24px,4vw,48px)
}

.search-field input[type=search]:focus {
    background: transparent;
    box-shadow: none
}

.search-field input::-webkit-search-cancel-button {
    display: none
}

.search-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.2);
    background: transparent;
    font-size: 20px
}

.search-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.search-label {
    font-size: 13px;
    color: var(--muted)
}

.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(130px,1fr));
    gap: 16px
}

.search-results[hidden] {
    display: none
}

.s-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.s-item .poster {
    aspect-ratio: 2/3;
    border-radius: 12px
}

.s-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3
}

.s-item small {
    font-size: 12px;
    color: var(--muted)
}

.s-item small a {
    color: var(--muted)
}

.s-empty {
    grid-column: 1/-1;
    color: var(--muted);
    font-size: 15px;
    padding: 24px 0
}

.search-overlay #searchsuggestions,#searchsuggestions {
    display: none!important
}

.footer {
    border-top: 1px solid var(--line);
    padding: clamp(36px,5vw,64px) var(--pad) 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: clamp(40px,5vw,72px)
}

@media(max-width: 819px) {
    .footer {
        padding-bottom:120px
    }
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 320px
}

.footer-brand .logo-text {
    font-size: 30px
}

.footer-brand p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    gap: 28px;
    flex: 1 1 min(100%,420px);
    max-width: 640px;
    min-width: 0
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px
}

.footer-col span {
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 700
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted);
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.footer-bottom div {
    display: flex;
    gap: 20px
}

.footer-bottom a {
    color: var(--muted)
}

.poster {
    background: var(--card) center/cover no-repeat
}

.poster--empty,.poster:not([style]) {
    background-image: radial-gradient(circle at 30% 20%,rgba(160,0,255,.25),transparent 60%),linear-gradient(135deg,#221c1a,#141418 60%)
}

.main {
    display: flex;
    flex-direction: column;
    gap: clamp(20px,2.4vw,32px);
    /* padding: clamp(20px,3vw,36px) 0 0; */
}

.top-gap {
    height: 110px
}

.px {
    padding-left: var(--pad);
    padding-right: var(--pad)
}

.section {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.eyebrow {
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--accent2);
    font-weight: 800
}

.eyebrow.gold {
    color: var(--gold)
}

.h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(24px,2.6vw,36px);
    letter-spacing: -.01em;
    line-height: 1.15
}

.h2 small {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 10px
}

.stack6 {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.link-muted {
    font-size: 14px;
    color: var(--muted);
    white-space: nowrap
}

.row {
    display: flex;
    gap: clamp(12px,1.4vw,20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 8px var(--pad) 4px;
    scroll-padding: 0 var(--pad)
}

.row::-webkit-scrollbar {
    display: none
}

.row>* {
    scroll-snap-align: start;
    flex: 0 0 auto
}

.arrows {
    display: flex;
    gap: 8px;
    align-items: center
}

.arrows .link-muted {
    margin-right: 8px
}

.arrow-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.18);
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    transition: all .2s
}

.arrow-btn:hover {
    background: var(--text);
    color: var(--bg)
}

.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none
}

.chips::-webkit-scrollbar {
    display: none
}

.chip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: transparent;
    color: var(--dim);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .25s
}

.chip:hover {
    border-color: #f4f1ec80;
    color: var(--text)
}

.chip.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text)
}

.chip small {
    font-size: 12px;
    opacity: .55
}

.chip--sub {
    height: 36px;
    font-size: 13px
}

.chip-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px
}

.dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted);
    flex: 0 0 auto
}

.tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center
}

.tag {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap
}

.tag.accent {
    background: var(--accent);
    color: var(--bg);
    font-weight: 800;
    letter-spacing: .08em
}

.tag.outline {
    border: 1px solid rgba(244,241,236,.28);
    backdrop-filter: blur(8px)
}

.tag.soft {
    background: #f4f1ec24
}

.tag.gold {
    background: #e8c27a24;
    color: var(--gold);
    font-weight: 800
}

.tag-links a {
    color: inherit
}

.s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s,background .2s,border-color .2s,color .2s
}

.btn-light {
    background: var(--text);
    color: var(--bg);
    padding: 0 26px 0 20px
}

.btn-light:hover {
    background: var(--accent);
    color: var(--bg);
    transform: scale(1.03)
}

.btn-light .play-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg);
    display: grid;
    place-items: center
}

.btn-glass {
    border-color: #f4f1ec4d;
    background: #0a0a0c59;
    backdrop-filter: blur(12px);
    color: var(--text);
    font-weight: 700
}

.btn-glass:hover {
    border-color: var(--text);
    color: var(--text)
}

.btn-accent {
    background: var(--accent);
    color: var(--bg);
    height: 52px;
    padding: 0 24px
}

.btn-accent:hover {
    background: var(--text);
    color: var(--bg)
}

.btn-outline {
    border-color: #f4f1ec4d;
    color: var(--text);
    height: 52px;
    font-weight: 700
}

.btn-outline:hover {
    background: var(--text);
    color: var(--bg)
}

.btn-block {
    width: 100%
}

.btn-round {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.3);
    background: #0a0a0c59;
    backdrop-filter: blur(12px);
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .25s
}

.btn-round:hover {
    border-color: var(--text);
    color: var(--text)
}

.btn-round.on,.btn-round[aria-pressed=true] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg)
}

.btn-round[data-seen][aria-pressed=true] {
    background: var(--text);
    border-color: var(--text)
}

.actions a:has(>.btn-round),.actions a:has(>.s-btn),.film-bar a:has(>.btn-round) {
    display: contents
}

.pcard {
    width: clamp(148px,14.5vw,212px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0
}

.grid-cards .pcard {
    width: auto;
    animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) both
}

.pcard-img {
    position: relative;
    display: block;
    aspect-ratio: 2/3;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s
}

.pcard-img:hover {
    box-shadow: 0 24px 40px -16px #a000ff73;
    transform: none;
}

.pcard-img:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#0a0a0cb3,#0a0a0c00 45%)
}

.pcard-img>span {
    position: absolute;
    z-index: 1
}

.b-rate {
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #0a0a0cb3;
    backdrop-filter: blur(6px);
    font-size: 12px;
    font-weight: 800;
    color: var(--gold)
}

.b-rate.plain {
    color: var(--dim)
}

.b-dur {
    bottom: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    background: #f4f1ec29;
    backdrop-filter: blur(6px);
    color: var(--text)
}

.b-new {
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    max-width: calc(100% - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.b-new--soft {
    background: #f4f1ece6
}

.b-pin {
    top: 40px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #0a0a0cb3;
    display: grid;
    place-items: center;
    color: var(--gold)
}

.b-num {
    right: 10px;
    bottom: 8px;
    font-family: var(--serif);
    font-weight: 900;
    font-size: 44px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(244,241,236,.7)
}

.similar {
    counter-reset: sim
}

.similar .pcard--num {
    counter-increment: sim
}

.similar .b-num:before {
    content: counter(sim,decimal-leading-zero)
}

.pcard-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px
}

.pcard-info>div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.pcard-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--text)
}

.pcard-info small {
    font-size: 13px;
    color: var(--muted);
    overflow-wrap: anywhere
}

.pcard-info small a {
    color: var(--muted)
}

.pcard-info small a:hover {
    color: var(--accent2)
}

.add-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.22);
    background: transparent;
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .25s
}

.add-btn:hover {
    border-color: var(--text)
}

.add-btn.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg)
}

a:has(>.add-btn) {
    flex: 0 0 auto;
    color: inherit
}

.pcard.lucky .pcard-img {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    animation: pulse 1s ease-out 3
}

.list-only {
    display: none
}

.hero {
    position: relative;
    height: 96vh;
    min-height: 560px;
    overflow: hidden;
    background: #111
}

@media(max-width: 819px) {
    .hero {
        height:100svh;
        min-height: 600px
    }
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s ease,visibility 1.1s
}

.hero-slide.active {
    opacity: 1;
    visibility: visible
}

.hero-slide .bg {
    position: absolute;
    inset: -2%;
    background: #16161b center/cover no-repeat;
    transform: scale(1);
    transition: transform 9s linear
}

.hero-slide.active .bg {
    transform: scale(1.08)
}

.hero-slide .hero-copy {
    display: none
}

.shade-l {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#0a0a0ceb,#0a0a0c8c 38%,#0a0a0c00 70%);
    pointer-events: none
}

.shade-b {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#0a0a0c,#0a0a0c99 22%,#0a0a0c00 50%,#0a0a0c80);
    pointer-events: none
}

.hero-num {
    position: absolute;
    right: var(--pad);
    top: 120px;
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(120px,16vw,240px);
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(244,241,236,.22);
    letter-spacing: -.04em;
    pointer-events: none
}

.hero-content {
    position: absolute;
    inset: 96px 0 0;
    padding: 0 var(--pad) clamp(28px,5vw,64px);
    display: flex;
    align-items: flex-end;
    gap: 40px
}

@media(max-width: 819px) {
    .hero-content {
        padding-bottom:104px
    }
}

.hero-main {
    flex: 1 1 520px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: clamp(14px,1.6vw,22px);
    min-width: 0
}

.hero-text,.hero-text .hero-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(14px,1.6vw,22px)
}

.hero-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(14px,3.2vw,80px);
    line-height: .96;
    letter-spacing: -.02em;
    text-wrap: balance
}

.hero-title a {
    color: var(--text)
}

.meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    color: var(--dim)
}

.meta a {
    color: var(--dim)
}

.meta a:hover {
    color: var(--accent2)
}

.meta .star {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    font-weight: 800
}

.meta .box {
    padding: 2px 7px;
    border: 1px solid rgba(244,241,236,.35);
    border-radius: 5px;
    font-size: 12px
}

.meta .box.fill {
    border: none;
    background: #f4f1ec24;
    font-weight: 700
}

.lead {
    margin: 0;
    max-width: 520px;
    font-size: clamp(15px,1.15vw,17px);
    line-height: 1.6;
    color: var(--soft);
    text-wrap: pretty
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
    align-items: center
}

.hero-dots {
    display: flex;
    gap: 6px;
    margin-top: 8px
}

.hero-dots button {
    position: relative;
    width: 8px;
    height: 4px;
    border-radius: 2px;
    border: none;
    padding: 0;
    background: #f4f1ec40;
    overflow: hidden;
    transition: width .4s
}

.hero-dots button.active {
    width: 32px
}

@media(min-width: 1200px) {
    .hero-dots {
        display:none
    }
}

.bar-fill {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(0)
}

.active>.bar-fill,.active .bar-fill {
    animation: prog var(--dur,7s) linear forwards
}

.hero-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-left: auto
}

@media(max-width: 1199px) {
    .hero-rail {
        display:none
    }
}

.hero-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.hero-rail-head>span {
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--muted);
    font-weight: 700
}

.hero-rail .arrow-btn {
    width: 38px;
    height: 38px;
    border-color: #f4f1ec38;
    background: #0a0a0c4d
}

.thumbs {
    display: flex;
    gap: 10px
}

.thumb {
    width: clamp(96px,8.5vw,138px);
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    opacity: .5;
    transition: opacity .4s,transform .4s;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.thumb.active {
    opacity: 1;
    transform: translateY(-4px)
}

.thumb .poster {
    aspect-ratio: 16/10;
    border-radius: 10px;
    border: 1px solid rgba(244,241,236,.1)
}

.thumb.active .poster {
    border-color: #f4f1eccc
}

.thumb .track {
    position: relative;
    height: 2px;
    background: #f4f1ec2e;
    border-radius: 1px;
    overflow: hidden
}

.thumb span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ccard {
    width: clamp(260px,26vw,380px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--text)
}

.ccard:hover {
    color: var(--text)
}

.ccard-img {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .35s
}

.ccard-img:hover {
    transform: scale(1.02)
}

.ccard-img:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#0a0a0cd9,#0a0a0c00 55%)
}

.ccard-play {
    position: absolute;
    left: 14px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f4f1eceb;
    display: grid;
    place-items: center
}

.ccard-left {
    position: absolute;
    right: 14px;
    bottom: 22px;
    font-size: 12px;
    color: var(--dim)
}

.ccard b {
    font-weight: 700;
    font-size: 15px
}

.ccard small {
    font-size: 13px;
    color: var(--muted)
}

.row.top {
    gap: clamp(4px,1vw,14px);
    padding-top: 0;
    counter-reset: top
}

.top-item {
    display: flex;
    align-items: flex-end;
    counter-increment: top
}

.top-num {
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(120px,13vw,190px);
    line-height: .78;
    letter-spacing: -.06em;
    color: var(--bg);
    -webkit-text-stroke: 2px rgba(244,241,236,.4);
    margin-right: clamp(-28px,-2vw,-18px)
}

.top-num:before {
    content: counter(top)
}

.top-poster {
    position: relative;
    width: clamp(120px,11vw,160px);
    aspect-ratio: 2/3;
    border-radius: 12px;
    box-shadow: -12px 0 24px -8px #000000b3;
    transition: transform .35s
}

.top-poster:hover {
    transform: scale(1.04)
}

.feature {
    position: relative;
    border-radius: clamp(20px,2.4vw,32px);
    overflow: hidden;
    min-height: clamp(420px,42vw,560px);
    display: flex;
    align-items: flex-end
}

.feature:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#0a0a0cf2,#0a0a0c4d 55%,#0a0a0c1a)
}

.feature-body {
    position: relative;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding: clamp(22px,3.4vw,52px)
}

.feature-body>div:first-child {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px
}

.feature h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(36px,5vw,76px);
    line-height: 1;
    letter-spacing: -.02em
}

.feature p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--soft)
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr));
    gap: clamp(14px,1.6vw,22px)
}

.soon {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.soon-img {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    border-radius: 16px;
    overflow: hidden
}

.soon-date {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 66px;
    border-radius: 12px;
    background: #0a0a0cb8;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(244,241,236,.12);
    color: var(--text)
}

.soon-date b {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 26px;
    line-height: 1
}

.soon-date small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--accent2);
    margin-top: 4px;
    text-transform: uppercase
}

.soon-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.soon-info>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.soon-title {
    font-size: 16px;
    font-weight: 700
}

.soon-info small {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5
}

.soon-info small a {
    color: var(--muted)
}

.pill-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.22);
    background: transparent;
    color: var(--dim);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s
}

.pill-btn:hover {
    border-color: var(--text);
    color: var(--text)
}

.pill-btn.on {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}

.pill-btn--static {
    cursor: default
}

a:has(>.pill-btn) {
    display: inline-flex;
    color: inherit
}

.cols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap: clamp(12px,1.4vw,18px)
}

.col-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 4/5;
    padding: 22px;
    border-radius: 20px;
    overflow: hidden;
    transition: transform .4s;
    color: var(--text)
}

.col-tile:hover {
    transform: translateY(-4px);
    color: var(--text)
}

.col-tile:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,#0a0a0c1a,#0a0a0ce0)
}

.col-tile>* {
    position: relative
}

.col-count {
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f4f1ec24;
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 700
}

.col-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px
}

.col-foot b {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(22px,2vw,28px);
    line-height: 1.1;
    text-wrap: balance
}

.col-foot i {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--text);
    color: var(--bg);
    display: grid;
    place-items: center
}

.film-hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden
}

@media(max-width: 819px) {
    .film-hero {
        min-height:88svh
    }
}

.film-hero .bg {
    position: absolute;
    inset: 0;
    background: #16161b center/cover no-repeat
}

.film-hero .shade-l {
    background: linear-gradient(90deg,#0a0a0cf2,#0a0a0c99 45%,#0a0a0c26 80%)
}

.film-hero .shade-b {
    background: linear-gradient(0deg,#0a0a0c,#0a0a0c66,#0a0a0c00 60%,#0a0a0c8c)
}

.film-hero-body {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: clamp(24px,3.5vw,56px);
    padding: 130px var(--pad) clamp(32px,4vw,56px)
}

.film-poster {
    flex: 0 0 auto;
    width: clamp(200px,19vw,290px);
    aspect-ratio: 2/3;
    border-radius: 18px;
    box-shadow: 0 40px 80px -30px #000000e6,0 0 0 1px #f4f1ec1a
}

.film-hero-main {
    flex: 1;
    min-width: 0;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: clamp(14px,1.6vw,20px)
}

.film-hero .hero-title {
    font-size: clamp(44px,7vw,108px);
    overflow-wrap: anywhere
}

.film-hero .meta {
    font-size: 15px;
    gap: 12px
}

.film-hero .lead {
    max-width: 560px
}

.tabs-wrap {
    position: sticky;
    top: var(--top);
    z-index: 50;
    padding: 0 var(--pad)
}

.tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    width: max-content;
    max-width: 100%
}

.tabs:empty {
    display: none
}

.tabs::-webkit-scrollbar {
    display: none
}

.tabs button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--dim);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .25s
}

.tabs button.active {
    background: var(--text);
    color: var(--bg)
}

.tabs button small {
    font-size: 12px;
    opacity: .6
}

.film-main {
    display: flex;
    flex-direction: column;
    gap: clamp(56px,6.5vw,96px);
    padding: clamp(32px,4vw,56px) var(--pad) 0
}

.film-main .h2 {
    font-size: clamp(26px,2.8vw,40px)
}

.watch-grid {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    gap: clamp(16px,2vw,28px);
    align-items: start
}

@media(max-width: 959px) {
    .watch-grid {
        grid-template-columns:1fr
    }
}

.player {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: clamp(16px,2vw,24px);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--line)
}

.player:before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0a0a0c59;
    transition: background .4s;
    pointer-events: none
}

.player.playing:before {
    display: none
}

.player-cta {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    width: 100%
}

.player-cta i {
    width: clamp(64px,7vw,92px);
    height: clamp(64px,7vw,92px);
    border-radius: 50%;
    background: #f4f1ecf2;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 12px #f4f1ec1f;
    transition: transform .3s
}

.player:hover .player-cta i {
    transform: scale(1.08)
}

.player-hint {
    position: absolute;
    left: 20px;
    bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dim);
    pointer-events: none
}

.player iframe,.player video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000
}

.player.playing .player-cta,.player.playing .player-hint {
    display: none
}

.player-toast {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%);
    padding: 12px 18px;
    border-radius: 14px;
    background: #0a0a0cd9;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    white-space: nowrap
}

.panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(20px,2vw,28px);
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    min-width: 0
}

.cap {
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 700
}

.opt-group {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.opt-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.opt-chip {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.2);
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .25s
}

.opt-chip.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text)
}

.opt-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.opt-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(244,241,236,.12);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    transition: all .25s
}

.opt-radio i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(244,241,236,.3);
    flex: 0 0 auto
}

.opt-radio.active {
    background: #a000ff1a;
    border-color: var(--accent)
}

.opt-radio.active i {
    border-color: var(--accent);
    background: radial-gradient(circle,var(--accent) 45%,transparent 50%)
}

.panel-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5
}

.panel-note a {
    color: var(--dim)
}

.gold-i {
    color: var(--gold)
}

.film-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.film-tools:not(:has(*)) {
    display: none
}

.about-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));
    gap: clamp(16px,2vw,28px)
}

.about-3>div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 18px;
    border-top: 2px solid rgba(244,241,236,.18);
    min-width: 0
}

.about-3>div:first-child {
    border-top-color: var(--accent)
}

.about-3 h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 22px
}

.about-3 p,.about-3 .text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--soft);
    text-wrap: pretty
}

.about-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
    gap: clamp(16px,2vw,28px);
    align-items: stretch
}

.score {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap
}

.ring {
    position: relative;
    width: 112px;
    height: 112px;
    flex: 0 0 auto
}

.ring svg {
    transform: rotate(-90deg)
}

.ring-bar {
    transition: stroke-dasharray 1s cubic-bezier(.2,.7,.2,1)
}

.ring b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 34px
}

.score-info {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.score-info>b {
    font-weight: 800;
    font-size: 17px
}

.score-info>span {
    font-size: 14px;
    color: var(--muted)
}

.score-ext {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    font-size: 14px
}

.score-ext b {
    color: var(--gold)
}

.score-ext span {
    color: var(--muted)
}

.my-rate {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

.my-rate[hidden] {
    display: none
}

.my-rate-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px
}

.my-rate-head b {
    font-size: 15px
}

.my-rate-head span {
    font-size: 14px;
    color: var(--muted);
    font-weight: 700
}

.my-rate-head span.set {
    color: var(--accent2)
}

.rates {
    display: grid;
    grid-template-columns: repeat(10,minmax(0,1fr));
    gap: 6px
}

.rates button {
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(244,241,236,.15);
    background: transparent;
    font-size: 14px;
    font-weight: 800;
    padding: 0;
    transition: all .2s
}

.rates button:hover {
    border-color: var(--accent)
}

.rates button.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg)
}

@media(max-width: 420px) {
    .rates {
        gap:4px
    }

    .rates button {
        height: 38px;
        border-radius: 10px;
        font-size: 13px
    }
}

.rate-scale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted)
}

.crew {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 14px
}

.crew span {
    color: var(--muted)
}

.crew b {
    font-weight: 700
}

.crew b a {
    color: var(--text)
}

.bleed {
    margin: 0 calc(-1 * var(--pad))
}

.people {
    font-size: 15px;
    color: var(--soft)
}

.person {
    width: clamp(130px,12vw,170px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    align-items: center;
    color: var(--text)
}

.person:hover {
    color: var(--text)
}

.person-av {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(36px,4vw,54px);
    color: #f4f1ece6;
    background: radial-gradient(circle at 30% 25%,#e4a8ff73,#1a1a20 70%);
    box-shadow: 0 0 0 1px #f4f1ec1a;
    transition: transform .35s
}

.person:nth-child(3n+2) .person-av {
    background: radial-gradient(circle at 30% 25%,#e8c27a73,#1a1a20 70%)
}

.person:nth-child(3n) .person-av {
    background: radial-gradient(circle at 30% 25%,#b8d4c866,#1a1a20 70%)
}

.person:hover .person-av {
    transform: scale(1.04)
}

.person b {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3
}

.frames {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr));
    grid-auto-rows: clamp(140px,13vw,190px);
    grid-auto-flow: dense;
    gap: clamp(10px,1.2vw,16px)
}

.frames>* {
    display: block;
    border: none;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--card) center/cover no-repeat;
    transition: transform .35s,filter .35s;
    min-width: 0
}

.frames>*:hover {
    transform: scale(1.015);
    filter: brightness(1.1)
}

.frames img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.frames .w2 {
    grid-column: span 2
}

.frames .h2x {
    grid-row: span 2
}

@media(max-width: 819px) {
    .frames .w2 {
        grid-column:span 1
    }

    .frames .h2x {
        grid-row: span 1
    }
}

.reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap: clamp(14px,1.6vw,22px)
}

.review-av-wrap a {
    display: block
}

.review-online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #58c47f;
    box-shadow: 0 0 0 2px var(--surface)
}

.review-head>div {
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 2px; */
    /* flex: 1; */
    /* min-width: 0; */
}

.review-head b {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.review-head b a {
    color: var(--text)
}

.review-head small {
    font-size: 12px;
    color: var(--muted)
}

.review-head small * {
    display: inline;
    color: var(--muted)
}

.review-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: #a000ff24;
    color: var(--accent3);
    font-size: 11px;
    font-weight: 800
}

.review p,.review-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--soft);
    overflow-wrap: anywhere
}

.review .review-link {
    align-self: flex-start;
    margin-top: auto;
    color: var(--dim);
    max-width: 100%
}

.review .review-link span {
    overflow: hidden;
    text-overflow: ellipsis
}

.s-btn-sm {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    font-weight: 800;
    font-size: 14px;
    white-space: nowrap
}

.s-btn-sm:hover {
    background: var(--accent);
    color: var(--bg)
}

.share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: clamp(22px,2.6vw,36px);
    border-radius: 28px;
    background: linear-gradient(120deg,#1a1512,#141418 60%);
    border: 1px solid var(--line)
}

.share b {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(22px,2.2vw,30px)
}

.share p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--muted)
}

.share-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center
}

.share-links>a,.share-links .share-more {
    display: grid;
    place-items: center;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.2);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer
}

.share-links>a:hover,.share-links .share-more:hover {
    border-color: var(--text);
    color: var(--text)
}

.share-links>a:has(.share-more) {
    display: contents
}

.share-links button {
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    background: var(--text);
    color: var(--bg);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    transition: background .25s
}

.share-links button.done {
    background: var(--gold)
}

.film-bar {
    position: fixed;
    z-index: 60;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 66px;
    padding: 0 8px 0 14px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(244,241,236,.1);
    box-shadow: 0 20px 40px -10px #0009
}

.film-bar .poster {
    width: 34px;
    height: 50px;
    border-radius: 8px;
    flex: 0 0 auto
}

.film-bar>div:not(.poster) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0
}

.film-bar b {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.film-bar small {
    font-size: 12px;
    color: var(--muted)
}

.film-bar .btn-round {
    width: 48px;
    height: 48px
}

.film-bar .go {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    background: var(--accent);
    color: var(--bg);
    font-weight: 800;
    font-size: 14px;
    white-space: nowrap;
    flex: 0 0 auto
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: #0a0a0cf0;
    backdrop-filter: blur(16px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: var(--pad)
}

.lightbox.open {
    display: flex;
    animation: fadeUp .3s ease both
}

.lightbox-img {
    width: min(100%,1280px);
    aspect-ratio: 16/9;
    max-height: 78vh;
    border-radius: 18px;
    background: #16161b center/contain no-repeat
}

.lightbox-nav {
    display: flex;
    align-items: center;
    gap: 16px
}

.lightbox-nav button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.25);
    background: transparent;
    display: grid;
    place-items: center
}

.lightbox-nav span {
    font-size: 14px;
    font-weight: 700;
    color: var(--dim);
    min-width: 60px;
    text-align: center
}

.cat-head {
    position: relative;
    padding: clamp(110px,11vw,150px) var(--pad) clamp(24px,3vw,36px);
    overflow: hidden
}

.cat-head:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 85% 0%,#a000ff29,#0a0a0c00 70%);
    pointer-events: none
}

.cat-head-row {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap
}

.cat-head-row>div {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0
}

.crumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
    flex-wrap: wrap
}

.crumbs a {
    color: var(--muted)
}

.crumbs b {
    color: var(--text);
    font-weight: 500
}

.crumbs .speedbar {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font-size: 13px
}

.cat-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(48px,8vw,120px);
    line-height: .92;
    letter-spacing: -.03em;
    overflow-wrap: anywhere
}

.cat-title--page {
    font-size: clamp(40px,6vw,88px)
}

.cat-title:first-letter {
    text-transform: uppercase
}

.cat-head--page {
    padding-bottom: 0
}

.cat-head--page .cat-head-row>div:not(:has(h1)) {
    gap: 0
}

.lucky-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 24px 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.2);
    background: #f4f1ec0a;
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
    transition: all .25s
}

.lucky-btn:hover {
    border-color: var(--accent);
    background: #a000ff14
}

.lucky-btn i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    display: grid;
    place-items: center
}

.cat-genres {
    padding: 0 var(--pad) 18px
}

.fbar-wrap {
    position: sticky;
    top: var(--top);
    z-index: 50;
    padding: 0 var(--pad)
}

.fbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line)
}

.fbar-left {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0
}

.dd {
    position: relative
}

.dd-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(244,241,236,.12);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap
}

.dd-btn span {
    color: var(--muted)
}

.dd-btn b {
    font-weight: 600
}

.dd-btn svg {
    transition: transform .25s
}

.dd.open .dd-btn svg {
    transform: rotate(180deg)
}

.dd.set .dd-btn,.dd.open .dd-btn {
    border-color: #a000ff80
}

.dd.set .dd-btn {
    background: #a000ff1a
}

.dd.plain .dd-btn {
    border: none;
    background: transparent
}

.dd-menu {
    position: absolute;
    top: 50px;
    left: 0;
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid rgba(244,241,236,.1);
    box-shadow: 0 24px 48px -12px #000000b3;
    z-index: 5
}

.dd.right .dd-menu {
    left: auto;
    right: 0;
    min-width: 200px
}

.dd.open .dd-menu {
    display: flex;
    animation: fadeUp .2s ease both
}

.dd-menu a,.dd-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-align: left
}

.dd-menu a:hover,.dd-menu button:hover {
    background: #f4f1ec0f;
    color: var(--text)
}

.dd-menu a.active {
    background: #a000ff1a;
    color: var(--accent3)
}

.dd-sort form,.dd-sort ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.dd-sort li {
    display: block
}

.dd-sort li.asc a,.dd-sort li.desc a {
    background: #a000ff1a;
    color: var(--accent3)
}

.seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 14px;
    border: 1px solid rgba(244,241,236,.1)
}

.seg button {
    height: 34px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--dim);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s;
    display: grid;
    place-items: center
}

.seg button.active {
    background: var(--text);
    color: var(--bg)
}

.seg.icons button {
    width: 36px;
    padding: 0;
    color: var(--muted)
}

.seg.icons button.active {
    color: var(--bg)
}

@media(max-width: 480px) {
    .fbar .dd-btn span {
        display:none
    }

    .fbar .dd-btn {
        padding: 0 10px
    }
}

.cat-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 22px var(--pad) clamp(40px,5vw,72px)
}

.grid-cards,.grid-cards>#dle-content {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
    gap: clamp(18px,2vw,28px) clamp(12px,1.4vw,20px)
}

.grid-cards:has(>#dle-content) {
    display: block
}

@media(max-width: 819px) {
    .grid-cards,.grid-cards>#dle-content {
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr))
    }
}

#dle-content>:not(.pcard),.grid-cards>:not(.pcard):not(#dle-content) {
    grid-column: 1/-1
}

.list-extras {
    padding-bottom: 0
}

.more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 20px
}

.more-track {
    width: min(260px,70%);
    height: 3px;
    border-radius: 2px;
    background: #f4f1ec1f;
    overflow: hidden
}

.more-track i {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width .4s
}

.more span {
    font-size: 13px;
    color: var(--muted)
}

.more button {
    height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.25);
    background: transparent;
    font-weight: 800;
    font-size: 15px;
    transition: all .25s
}

.more button:hover {
    background: var(--text);
    color: var(--bg)
}

.more button[disabled] {
    opacity: .5;
    cursor: progress
}

.is-list #dle-content,.is-list.grid-cards {
    grid-template-columns: 1fr!important;
    gap: 10px!important
}

.is-list .pcard {
    flex-direction: row;
    align-items: center;
    gap: clamp(12px,2vw,24px);
    padding: 10px clamp(12px,2vw,24px) 10px 10px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid rgba(244,241,236,.06);
    transition: background .25s
}

.is-list .pcard:hover {
    background: var(--card)
}

.is-list .pcard.lucky {
    border-color: var(--accent)
}

.is-list .pcard-img {
    flex: 0 0 auto;
    width: clamp(56px,6vw,76px);
    border-radius: 10px
}

.is-list .pcard-img:hover {
    transform: none;
    box-shadow: none
}

.is-list .pcard-img>span {
    display: none
}

.is-list .pcard-info {
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: clamp(12px,2vw,24px)
}

.is-list .pcard-info>div {
    flex: 1;
    gap: 6px
}

.is-list .pcard-title {
    font-weight: 800;
    font-size: clamp(15px,1.3vw,18px)
}

.is-list .list-only {
    display: initial
}

.is-list .pcard-text {
    display: -webkit-box;
    font-size: 14px;
    color: var(--soft);
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.is-list .pcard-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted)
}

.is-list .pcard-meta a {
    color: var(--muted)
}

.is-list .pcard-meta>span {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.is-list .edit-note {
    display: block;
    font-size: 12px
}

.lrow-rate {
    flex: 0 0 auto;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(20px,2vw,28px);
    color: var(--dim)
}

.lrow-rate.hi {
    color: var(--gold)
}

.is-list .add-btn {
    width: 40px;
    height: 40px;
    font-size: 18px
}

@media(max-width: 640px) {
    .is-list .pcard-text,.is-list .pcard-meta {
        display:none!important
    }
}

.pcard-tools {
    display: inline-flex;
    gap: 4px
}

.tool {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    transition: all .2s
}

.tool:hover {
    background: #f4f1ec14;
    color: var(--text)
}

.tool--danger:hover {
    color: var(--accent2)
}

a:has(>.tool) {
    display: inline-flex;
    color: inherit
}

.page-main {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(20px,3vw,36px) var(--pad) 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0
}

.page-main>#dle-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0
}

.page-plain .cat-head {
    padding-bottom: 0
}

.page-plain .cat-head-row>div:empty {
    display: none
}

.panel h1,.section-heading h1,.auth-form__title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(30px,3.6vw,48px);
    line-height: 1.05;
    letter-spacing: -.02em
}

.section-heading h2,.panel h2,.profile__about h2,.stats-group h2 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(22px,2.2vw,28px);
    line-height: 1.2
}

.section-heading p,.auth-form__lead {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.section-heading>div {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.auth-form {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(22px,3vw,40px);
    border-radius: 28px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.auth-form__title {
    font-size: clamp(32px,4vw,52px)
}

.auth-form__lead a {
    color: var(--dim);
    text-decoration: underline
}

.primary-button,.soft-button,.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s,color .2s,border-color .2s,transform .2s;
    text-decoration: none
}

.primary-button {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent)
}

.primary-button:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}

.soft-button {
    background: transparent;
    border-color: #f4f1ec40;
    color: var(--text);
    font-weight: 700
}

.soft-button:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}

.soft-button--danger:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg)
}

.icon-button {
    width: 48px;
    padding: 0;
    background: transparent;
    border-color: #f4f1ec40;
    color: var(--text)
}

.icon-button:hover {
    background: var(--text);
    color: var(--bg)
}

a:has(>.soft-button),a:has(>.primary-button) {
    display: inline-flex;
    text-decoration: none
}

.form-body {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.form-row--inline {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap
}

.form-row--check,.form-check {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--soft)
}

.form-req {
    color: var(--accent2);
    margin-left: 3px
}

.form-hint,.form-actions__hint {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5
}

.form-actions__hint a,.form-hint a {
    color: var(--dim);
    text-decoration: underline
}

.form-inline {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.form-inline .form-input {
    flex: 1 1 220px
}

.form-sep {
    border: none;
    border-top: 1px solid var(--line);
    margin: 8px 0
}

.form-grid--three {
    grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr))
}

input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],select,textarea,.form-control,.form-input {
    min-height: 48px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(244,241,236,.14);
    background: #f4f1ec0a;
    color: var(--text);
    font-size: 15px
}

textarea,textarea.form-input {
    border-radius: 16px;
    min-height: 140px
}

input:focus,select:focus,textarea:focus,.form-control:focus,.form-input:focus {
    border-color: var(--accent);
    background: #f4f1ec0f;
    box-shadow: 0 0 0 4px #a000ff24
}

select option {
    background: var(--card);
    color: var(--text)
}

.c-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.c-captcha img,.c-captcha a img {
    height: 48px;
    border-radius: 12px
}

.c-captcha input {
    flex: 1 1 180px
}

.notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    background: #a000ff14;
    border: 1px solid rgba(160,0,255,.3);
    color: var(--soft)
}

.notice__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    display: grid;
    place-items: center
}

.notice__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.notice__title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 20px;
    color: var(--text)
}

.notice__text {
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere
}

.notice__text a {
    color: var(--accent3);
    text-decoration: underline
}

.notice--warn {
    background: #e8c27a14;
    border-color: #e8c27a4d
}

.notice--warn .notice__icon {
    background: var(--gold)
}

.main>.notice,.cat-main>.notice {
    margin: 0 var(--pad)
}

.cat-main>.notice {
    margin: 0
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    grid-column: 1/-1
}

.pagination__pages {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center
}

.pagination__pages>a,.pagination__pages>span,.pagination__arrow {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.16);
    font-weight: 700;
    font-size: 14px;
    color: var(--dim);
    transition: all .2s
}

.pagination__pages>a:hover,.pagination__edge>a:hover .pagination__arrow {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}

.pagination__pages>span {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}

.pagination__pages>span.nav_ext {
    background: transparent;
    border-color: transparent;
    color: var(--muted)
}

.pagination__edge:empty {
    display: none
}

.pagination__edge>span .pagination__arrow {
    opacity: .35
}

.pagination__label {
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase
}

.pagination--split {
    justify-content: flex-start;
    padding-top: 0
}

.split-pages {
    margin-top: 8px
}

.has-more .pagination {
    display: none
}

.speedbar {
    font-size: 13px;
    color: var(--muted)
}

.speedbar a {
    color: var(--muted)
}

.speedbar a:hover {
    color: var(--accent2)
}

.extras {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr));
    gap: clamp(14px,1.6vw,22px);
    align-items: start
}

.extras-item {
    gap: 16px
}

.extras-item:empty {
    display: none
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap
}

.extras-item .seg button {
    height: 30px;
    font-size: 12px
}

.mini-list,.top-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: mini
}

.mini-item {
    counter-increment: mini
}

.mini-item__link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text)
}

.mini-item__poster {
    flex: 0 0 auto;
    width: 46px;
    aspect-ratio: 2/3;
    border-radius: 8px
}

.mini-item__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.mini-item__body b {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3
}

.mini-item__body small {
    font-size: 12px;
    color: var(--muted)
}

.mini-item__link:hover b {
    color: var(--accent2)
}

.top-list__item a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text)
}

.top-list__item:last-child a {
    border-bottom: none
}

.top-list__item b {
    font-size: 14px;
    font-weight: 700
}

.top-list__item small {
    font-size: 12px;
    color: var(--muted)
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.tag-cloud a,.chips--tags a,.chips--cloud a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .2s
}

.tag-cloud a:hover,.chips--tags a:hover,.chips--cloud a:hover {
    border-color: var(--text);
    color: var(--text)
}

.tag-cloud>span,.chips--tags>span,.chips--cloud>span {
    display: contents
}

.chips--tags,.chips--cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.chips--cloud .clouds_large a,.chips--cloud .clouds_xlarge a {
    height: 42px;
    font-size: 16px;
    color: var(--text)
}

.chips--cloud .clouds_xlarge a {
    background: #a000ff1f;
    border-color: #a000ff66
}

.film-tags {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.edit-note {
    font-size: 13px;
    color: var(--muted)
}

.archive-list a {
    display: inline-flex;
    margin: 0 6px 8px 0;
    height: 32px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    font-size: 13px;
    color: var(--dim)
}

.archive-list a:hover {
    border-color: var(--text);
    color: var(--text)
}

.skin-select select {
    width: 100%
}

.extras-item--ad:empty {
    display: none
}

.poll-question,.poll-card__title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--text)
}

.widget--poll {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px,2vw,28px);
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.widget--poll .widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.widget--poll .widget__head h2 {
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 700;
    font-family: var(--sans);
    text-transform: uppercase
}

.widget__link {
    font-size: 13px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.poll-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--soft)
}

.poll-list label,.poll-list .vote {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(244,241,236,.12);
    cursor: pointer
}

.poll-list label:has(input:checked) {
    background: #a000ff1a;
    border-color: var(--accent)
}

.poll-list input[type=radio],.poll-list input[type=checkbox] {
    accent-color: var(--accent)
}

.poll-list br {
    display: none
}

.poll-total {
    font-size: 13px;
    color: var(--muted)
}

.poll-total b {
    color: var(--text)
}

.poll-actions {
    display: flex;
    gap: 10px
}

.poll-card {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.poll-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap
}

.voteprogress,.pollprogress {
    height: 8px;
    border-radius: 4px;
    background: #f4f1ec1a;
    overflow: hidden;
    margin: 6px 0 12px
}

.voteprogress span,.pollprogress span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--accent)
}

.vote-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.18);
    color: var(--dim);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    background: transparent
}

.vote-pill:hover {
    border-color: var(--accent);
    color: var(--accent3)
}

.vote-pill--big {
    height: 44px;
    padding: 0 18px;
    font-size: 14px
}

.vote-score {
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
    min-width: 24px;
    text-align: center
}

.rate-dle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.rate-dle a {
    color: inherit;
    display: inline-flex
}

.rate-dle--mini .vote-pill {
    height: 28px;
    padding: 0 10px;
    font-size: 12px
}

.rate-dle--mini .unit-rating {
    transform: scale(.8);
    transform-origin: left center
}

.is-positive .vote-score {
    color: var(--positive)
}

.is-negative .vote-score {
    color: var(--negative)
}

.rate-stars .unit-rating {
    --star: var(--gold)
}

.review-mass {
    flex: 0 0 auto
}

.reviews-list {
    min-width: 0
}

.reviews-list #dle-comments-list,.reviews-list>div:not([id]) {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.reviews-list .comments-tree-list {
    display: grid;
    gap: 16px
}

.reviews-list .comments-tree-list .comments-tree-list {
    border-left: 2px solid rgba(160,0,255,.25);
    padding-left: clamp(12px,2vw,24px);
    margin-top: 16px
}

.reviews-list>#dle-comments-list>div[id^=comment-id] {
    display: block
}

.review--reply {
    background: var(--card)
}

.review--author {
    border-color: #a000ff59
}

.review-film {
    font-size: 13px;
    color: var(--muted)
}

.review-film a {
    color: var(--accent3)
}

.review-images img {
    max-width: 220px;
    border-radius: 12px
}

.review-sign {
    font-size: 13px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 10px
}

.review-text blockquote,.review-text .quote {
    border-left: 3px solid var(--accent)
}

.review-form {
    margin-top: 24px;
    gap: 18px;
    scroll-margin-top: 150px
}

.review-form__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap
}

.review-form__title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(24px,2.4vw,32px)
}

.review-form .bb-editor textarea,.review-form textarea {
    min-height: 160px
}

.field--check {
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    color: var(--soft)
}

#dle-ajax-comments {
    display: contents
}

.page-plain #dle-comments-list,.page-plain #dle-content>.review {
    max-width: 100%
}

.page-plain #dle-content:has(>.review) {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,340px),1fr));
    gap: 16px
}

.film-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));
    gap: 14px
}

.film-nav:empty {
    display: none
}

.film-nav__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    transition: border-color .2s
}

.film-nav__item:hover {
    border-color: #f4f1ec59;
    color: var(--text)
}

.film-nav__item .cap {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.film-nav__item b {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 20px
}

.film-nav__item--next {
    text-align: right;
    align-items: flex-end
}

.poll-panel .poll-card__title {
    font-size: 26px
}

.staticpage {
    gap: 20px
}

.static-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted)
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted)
}

.meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted)
}

.static-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.story-text,.text {
    color: var(--soft);
    font-size: 16px;
    line-height: 1.75
}

.text h2,.text h3 {
    font-family: var(--serif);
    color: var(--text);
    margin: 1.2em 0 .5em
}

.text a {
    color: var(--accent3);
    text-decoration: underline;
    text-underline-offset: 3px
}

.text img {
    border-radius: 16px
}

.text blockquote,.text .quote {
    border-left: 3px solid var(--accent);
    background: #f4f1ec0a;
    border-radius: 0 14px 14px 0
}

.result-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(18px,2vw,24px);
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.result-card+.result-card {
    margin-top: 0
}

.result-card__top {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted)
}

.result-card__top .chips--plain {
    display: inline-flex;
    height: 28px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #a000ff1f;
    color: var(--accent3);
    font-size: 12px;
    font-weight: 700
}

.result-card__title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25
}

.result-card__title a {
    color: var(--text)
}

.result-card__text {
    font-size: 15px;
    color: var(--soft);
    line-height: 1.6
}

.searchpage {
    gap: 20px
}

.search-fieldset {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0
}

.search-fieldset legend {
    padding: 0 8px;
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase
}

.search-advanced {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));
    gap: 14px
}

.search-fieldset--wide,.search-actions {
    grid-column: 1/-1
}

.search-result-msg {
    font-size: 15px;
    color: var(--muted)
}

.search-simple {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end
}

.search-simple .form-row {
    flex: 1 1 260px
}

.page-plain #dle-content:has(>.pcard) {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    gap: 24px 16px
}

.page-plain #dle-content>.pcard {
    width: auto
}

.page-plain #dle-content:has(>.pcard)>:not(.pcard) {
    grid-column: 1/-1
}

.profile {
    gap: 24px
}

.profile__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px
}

.profile__ident {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1
}

.profile__name {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(30px,4vw,48px);
    line-height: 1.05;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.profile__status {
    font-size: 14px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center
}

.is-online {
    color: var(--positive)
}

.profile__group {
    font-size: 14px
}

.profile__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.profile__actions>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.22);
    font-size: 14px;
    font-weight: 700;
    color: var(--dim)
}

.profile__actions>a:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}

.profile__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
    gap: 16px
}

.profile__facts {
    display: grid;
    grid-template-columns: minmax(110px,max-content) minmax(0,1fr);
    gap: 0;
    margin: 0;
    padding: 6px 22px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    align-items: baseline
}

.profile__facts dt,.profile__facts dd {
    padding: 13px 0;
    border-bottom: 1px solid rgba(244,241,236,.06)
}

.profile__facts dt {
    padding-right: 18px
}

.profile__facts dt:nth-last-of-type(1),.profile__facts dd:last-of-type {
    border-bottom: none
}

.profile__facts dd {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px
}

.profile__facts dt {
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase
}

.profile__facts dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere
}

.profile__link a,.profile__facts dd a {
    color: var(--accent3)
}

.profile__about {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line)
}

.profile-settings {
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 0
}

.profile-settings>summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.profile-settings>summary:after {
    content: "+";
    font-size: 22px;
    color: var(--accent2)
}

.profile-settings[open]>summary:after {
    content: "\2212"
}

.profile-settings>summary::-webkit-details-marker {
    display: none
}

.profile-settings>.form-body {
    padding: 0 22px 22px
}

.addvote {
    border-radius: 18px;
    border: 1px solid var(--line);
    padding: 0
}

.addvote>summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 700
}

.addvote>summary::-webkit-details-marker {
    display: none
}

.addvote__body {
    padding: 0 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.pm-menu {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.pm-menu a,.pm-menu span {
    display: inline-flex
}

.pm-status {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px 16px;
    align-items: center;
    font-size: 13px;
    color: var(--muted)
}

.pm-status__bar {
    grid-column: 1/-1;
    grid-row: 2
}

.pm_progress_bar {
    height: 8px;
    border-radius: 4px;
    background: #f4f1ec1a;
    overflow: hidden
}

.pm_progress_bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 4px
}

.pmlist table,.userstop,table.pm,.table-scroll table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px
}

.pmlist th,.pmlist td,.userstop th,.userstop td,.table-scroll th,.table-scroll td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left
}

.pmlist th,.userstop th,.table-scroll th {
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 700
}

.pmlist tr:hover td {
    background: #f4f1ec08
}

.table-scroll {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--line)
}

.thread {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.thread__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line)
}

.thread__item--own {
    background: #a000ff0f;
    border-color: #a000ff40
}

.thread__top {
    display: flex;
    align-items: center;
    gap: 12px
}

.thread__avatar {
    position: relative;
    flex: 0 0 auto
}

.thread__avatar img,.thread__avatar .avatar {
    width: 44px;
    height: 44px
}

.thread__online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #58c47f;
    box-shadow: 0 0 0 2px var(--card)
}

.thread__ident {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1
}

.thread__who {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 800
}

.thread__when {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted)
}

.thread__text {
    font-size: 15px;
    color: var(--soft);
    line-height: 1.65
}

.thread__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.thread__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.18);
    font-size: 13px;
    font-weight: 700;
    color: var(--dim);
    cursor: pointer
}

.thread__btn:hover {
    border-color: var(--text);
    color: var(--text)
}

.thread__btn--danger:hover {
    border-color: var(--accent);
    color: var(--accent3)
}

.thread__signature {
    font-size: 13px;
    color: var(--muted)
}

.stats {
    gap: 24px
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
    gap: 14px
}

.stats-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line)
}

.stats-card__label {
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase
}

.stats-card__value {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    color: var(--text)
}

.stats-card__hint {
    font-size: 13px;
    color: var(--muted)
}

.stats-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap: 14px
}

.stats-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line)
}

.stats-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--soft)
}

.stats-group li {
    display: flex;
    justify-content: space-between;
    gap: 12px
}

.stats-db,.stats-top-title {
    font-size: 14px;
    color: var(--muted)
}

.profile-popup {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--text)
}

.profile-popup__summary {
    display: flex;
    gap: 16px;
    align-items: flex-start
}

.profile-popup__avatar {
    position: relative;
    flex: 0 0 auto
}

.profile-popup__avatar .avatar--lg {
    width: 72px;
    height: 72px
}

.profile-popup__identity {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.profile-popup__name {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 22px
}

.profile-popup__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin: 0
}

.profile-popup__details>div {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.profile-popup dt {
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase
}

.profile-popup dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600
}

.profile-popup__links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.profile-popup__links:not(:has(a)) {
    display: none
}

.profile-popup__link a {
    display: inline-flex;
    height: 34px;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    font-size: 13px;
    font-weight: 700;
    color: var(--dim)
}

.profile-popup__link--rss:empty {
    display: none
}

.attachment {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    max-width: 100%
}

.attachment__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #a000ff24;
    color: var(--accent3);
    display: grid;
    place-items: center;
    flex: 0 0 auto
}

.attachment__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 14px
}

.attachment__name {
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere
}

.attachment__meta,.attachment__online {
    font-size: 12px;
    color: var(--muted)
}

.cat-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,240px),1fr));
    gap: 10px
}

.cat-list--nested {
    grid-column: 1/-1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px
}

.cat-list__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 700
}

.cat-list__link:hover,.cat-list__link.is-active {
    border-color: var(--accent);
    color: var(--text)
}

.cat-list__count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted)
}

.cat-list__descr {
    display: block;
    padding: 6px 18px 0;
    font-size: 13px;
    color: var(--muted)
}

.partners-wrap:not(:has(li)):not(:has(.partners__promo)) {
    display: none
}

.partners {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr));
    gap: 14px
}

.partner__link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text)
}

.partner__title {
    font-weight: 800
}

.partner__text {
    font-size: 14px;
    color: var(--soft)
}

.partner__meta {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px
}

.dle-ad {
    display: block;
    border-radius: 20px;
    overflow: hidden
}

.to-top {
    position: fixed;
    right: clamp(12px,3vw,40px);
    bottom: clamp(90px,6vw,40px);
    z-index: 55;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.2);
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(12px);
    color: var(--text);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .3s
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none
}

.to-top:hover {
    background: var(--text);
    color: var(--bg)
}

@media(max-width: 819px) {
    .page-film .to-top {
        bottom:92px
    }
}

.dd-sort .sort {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.dd-sort .sort>li a {
    display: flex;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    justify-content: space-between
}

.offline-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(ellipse 60% 60% at 80% 0%,#a000ff2e,#0a0a0c00 70%),var(--bg)
}

.offline {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center
}

.offline__title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(40px,6vw,72px);
    line-height: 1
}

.offline__reason {
    font-size: 17px;
    line-height: 1.6;
    color: var(--soft)
}

.offline__foot {
    font-size: 13px;
    color: var(--muted)
}

#dlepopup,.ui-dialog {
    border-radius: 24px!important
}

.dle-popup-userprofile .ui-dialog-content {
    padding: 22px!important
}

.cat-link:not(:last-child):after {
    content: ",";
    margin-right: .3em
}

.review-av--initial:before {
    content: attr(data-letter);
    color: var(--bg);
    font-weight: 800
}

.chip-group {
    display: contents
}

.cat-link:not(:last-child):after {
    content: none
}

.cat-link:has(+.cat-link):after {
    content: ",";
    margin-right: .3em
}

#DLEPush.top-right {
    top: calc(var(--top) + 8px)!important;
    z-index: 70
}

.staticpage #registration {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px
}

.staticpage #registration .bbcodes {
    height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.25);
    background: transparent;
    color: var(--text);
    font-weight: 800;
    font-size: 15px
}

.staticpage #registration .bbcodes[type=submit] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg)
}

.staticpage #registration .bbcodes:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}

.mi-page {
    display: flex;
    flex-direction: column;
    gap: clamp(22px,3vw,36px);
    min-width: 0
}

.mi-head {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.chips--wrap {
    flex-wrap: wrap;
    overflow: visible
}

.seg-link {
    display: grid;
    place-items: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--dim);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap
}

.seg-link.active,.seg-link.is-active,.seg-link.current {
    background: var(--text);
    color: var(--bg)
}

.fpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px 0 14px;
    border-radius: 999px;
    background: #a000ff24;
    color: var(--accent3);
    font-size: 13px;
    font-weight: 700
}

.cat-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 34px
}

.cat-status>span {
    font-size: 14px;
    color: var(--muted)
}

.cat-status>span b {
    color: var(--text)
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 70px 20px;
    text-align: center
}

.empty b {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(26px,3vw,38px)
}

.empty span {
    font-size: 15px;
    color: var(--muted);
    max-width: 440px
}

.coll-sec:not(:has(.mi-coll-card)) {
    display: none
}

.pers-filter {
    display: grid;
    grid-template-columns: minmax(0,2fr) repeat(3,minmax(0,1fr)) auto;
    gap: 14px;
    align-items: end
}

.pers-filter .pers-filter__btn {
    height: 48px
}

@media(max-width: 959px) {
    .pers-filter {
        grid-template-columns:1fr 1fr
    }

    .pers-filter__q,.pers-filter__btn {
        grid-column: 1/-1
    }
}

.pers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr));
    gap: clamp(14px,1.6vw,22px)
}

.pers-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    transition: transform .35s,border-color .35s
}

.pers-card:hover {
    transform: translateY(-4px);
    border-color: #a000ff66;
    color: var(--text)
}

.pers-card__photo {
    display: grid;
    place-items: center;
    aspect-ratio: 4/5;
    border-radius: 16px;
    background: var(--card) center/cover no-repeat;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 56px;
    color: #f4f1ecd9
}

.pers-card__photo--empty {
    background: radial-gradient(circle at 30% 25%,#e4a8ff73,#1a1a20 70%)
}

.pers-card__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}

.pers-card__name {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2
}

.pers-card__body small {
    font-size: 13px;
    color: var(--muted)
}

.pers-card__aka {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pers-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px
}

.pers-card__meta span,.pers-card__roles>* {
    padding: 4px 10px;
    border-radius: 999px;
    background: #f4f1ec14;
    font-size: 11px;
    font-weight: 700;
    color: var(--dim)
}

.pers-card__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.pers-card__films {
    font-size: 12px;
    color: var(--gold);
    font-weight: 700;
    margin-top: 2px
}

.mi-pages {
    padding-top: 8px
}

.mi-pages a,.mi-pages span {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.16);
    font-weight: 700;
    font-size: 14px;
    color: var(--dim)
}

.mi-pages .pagination__pages {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    border: none;
    padding: 0;
    height: auto
}

.mi-pages .pagination__pages>span:not(:has(*)),.mi-pages span.current,.mi-pages b {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text)
}

.person-back {
    align-self: flex-start
}

.person-hero {
    display: flex;
    align-items: flex-end;
    gap: clamp(22px,3.5vw,56px);
    flex-wrap: wrap;
    padding: clamp(20px,3vw,40px);
    border-radius: 32px;
    background: radial-gradient(ellipse 70% 90% at 90% 0%,rgba(160,0,255,.16),transparent 70%),var(--surface);
    border: 1px solid var(--line)
}

.person-hero__photo {
    flex: 0 0 auto;
    width: clamp(180px,18vw,260px);
    aspect-ratio: 3/4;
    border-radius: 22px;
    background: var(--card) center/cover no-repeat;
    box-shadow: 0 40px 80px -30px #000000e6,0 0 0 1px #f4f1ec1a;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 80px;
    color: #f4f1ecd9
}

.person-hero__photo--empty {
    background: radial-gradient(circle at 30% 25%,#e4a8ff73,#1a1a20 70%)
}

.person-hero__main {
    flex: 1 1 360px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.person-hero__name {
    font-size: clamp(40px,6vw,88px)
}

.person-aka {
    font-size: 14px;
    color: var(--muted)
}

.person-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px
}

.person-stats>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 104px;
    padding: 12px 16px;
    border-radius: 16px;
    background: #f4f1ec0d;
    border: 1px solid var(--line)
}

.person-stats b {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 28px;
    line-height: 1
}

.person-stats span {
    font-size: 12px;
    color: var(--muted)
}

.person-about {
    align-items: start
}

.person-bio .text {
    font-size: 15px
}

.mi-facts,.mi-awards,.mi-families {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,320px),1fr));
    gap: 14px
}

.mi-fact,.mi-award,.mi-family {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.6;
    color: var(--soft)
}

.mi-family {
    flex-direction: column;
    gap: 6px
}

.mi-family b {
    color: var(--text);
    font-size: 15px
}

.mi-family small,.mi-award small {
    color: var(--muted);
    font-size: 13px
}

.mi-family a {
    color: var(--accent3);
    font-size: 13px
}

.mi-award__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8c27a24;
    color: var(--gold);
    display: grid;
    place-items: center
}

.mi-award__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.mi-award__info b {
    color: var(--text)
}

.mi-award__year {
    font-family: var(--serif);
    font-weight: 800;
    color: var(--gold)
}

.mi-cast {
    display: flex;
    flex-direction: column;
    gap: 26px
}

.mi-cast-group {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.mi-cast-n {
    margin-left: 6px;
    color: var(--accent2)
}

.person-av--photo {
    background-size: cover;
    background-position: center;
    font-size: 0
}

.person small {
    font-size: 13px;
    color: var(--muted)
}

.person .person-en {
    font-size: 12px;
    opacity: .8
}

.people--sm .person {
    width: clamp(110px,9vw,136px)
}

.people--sm .person-av {
    font-size: 30px
}

.sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,340px),1fr));
    gap: 14px
}

.sub-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px 12px 12px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: opacity .3s,transform .3s
}

.sub-card.is-removing {
    opacity: 0;
    transform: scale(.97)
}

.sub-card__poster {
    flex: 0 0 auto;
    width: 64px;
    aspect-ratio: 2/3;
    border-radius: 10px
}

.sub-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.sub-card__info small {
    font-size: 13px;
    color: var(--muted)
}

.sub-card__ep {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent3)
}

.sub-card .tool {
    border: none;
    background: none
}

.sub-tabs {
    margin-top: 6px
}

.col-tile--mi {
    background: var(--card)
}

.col-tile--mi .mi-coll-collage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-auto-rows: 1fr;
    gap: 2px;
    overflow: hidden;
    z-index: 0
}

.col-tile--mi .mi-coll-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.col-tile--mi .mi-coll-collage:empty {
    background: radial-gradient(circle at 70% 20%,rgba(160,0,255,.3),transparent 60%),linear-gradient(135deg,#221c1a,#141418)
}

.col-tile--mi:before {
    z-index: 1
}

.col-tile--mi>.col-count,.col-tile--mi>.col-foot {
    z-index: 2
}

.mi-coll-tabs[hidden] {
    display: none
}

.mi-coll-tabs .mi-coll-tab {
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--dim);
    font-size: 13px;
    font-weight: 700
}

.mi-coll-tabs .mi-coll-tab.is-active {
    background: var(--text);
    color: var(--bg)
}

.mi-coll-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.mi-coll-sort .sort {
    display: flex;
    gap: 6px;
    flex-direction: row
}

.mi-watch {
    min-width: 0;
    border-radius: clamp(16px,2vw,24px);
    overflow: hidden
}

.trailer-box .trailer-frame {
    width: min(100%,1180px);
    aspect-ratio: 16/9;
    border-radius: 18px;
    overflow: hidden;
    background: #000
}

.trailer-box iframe {
    width: 100%;
    height: 100%;
    border: 0
}

.mi-franchise {
    min-width: 0
}

.extras-off {
    display: none!important
}

.page-main:has(>.pcard) {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
    gap: clamp(18px,2vw,28px) clamp(12px,1.4vw,20px);
    max-width: none;
    padding-left: var(--pad);
    padding-right: var(--pad)
}

.page-main:has(>.pcard)>:not(.pcard) {
    grid-column: 1/-1
}

.page-main>.pcard {
    width: auto
}

@media(max-width: 819px) {
    .page-main:has(>.pcard) {
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr))
    }
}

.watch-main {
    min-width: 0;
    max-width: 100%
}

.watch-grid>* {
    min-width: 0
}

.fa-solid,.fa-regular,.fa-brands {
    flex: 0 0 auto;
    line-height: 1
}

.dd-btn i {
    font-size: 11px;
    color: var(--muted);
    transition: transform .25s
}

.dd.open .dd-btn i {
    transform: rotate(180deg)
}

.dd-menu a.active:after,.dd-menu button.active:after {
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--accent)
}

.dd-menu button.active {
    background: #a000ff1a;
    color: var(--accent3)
}

.dd-menu button {
    width: 100%;
    cursor: pointer
}

.fpill {
    border: none;
    cursor: pointer
}

.fpill:after {
    content: "\f00d";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 11px
}

.link-muted i {
    font-size: .85em;
    margin-left: 4px
}

.tag i {
    margin-right: 4px
}

.arrow-btn {
    cursor: pointer;
    font-size: 13px
}

.arrow-btn[disabled] {
    opacity: .3;
    pointer-events: none
}

.arrows[hidden],[data-arrows][hidden] {
    display: none!important
}

span.arrows {
    display: inline-flex
}

.row {
    overflow-y: hidden
}

.row.top {
    padding-top: 16px;
    padding-bottom: 16px
}

.row.bleed {
    padding-top: 10px;
    padding-bottom: 10px
}

.add-btn {
    font-size: 13px
}

.add-btn.on {
    background: #a000ff29;
    border-color: #a000ff8c;
    color: var(--accent)
}

.add-btn.on:hover {
    background: var(--accent);
    color: var(--bg)
}

.is-list .add-btn {
    font-size: 15px
}

.btn-round.on {
    color: var(--accent)
}

.b-pin {
    display: none
}

.b-new.b-pick {
    inset: auto auto 10px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 20px);
    padding: 5px 9px;
    border-radius: 999px;
    background: #0a0a0cc7;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(232,194,122,.5);
    color: var(--gold);
    font-size: 10px;
    letter-spacing: .08em
}

.b-pick i {
    font-size: 11px
}

.pcard-img:has(.b-pick) .b-dur {
    display: none
}

.hero-title--logo {
    line-height: 0
}

.hero-title--logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(560px,78vw);
    max-height: clamp(84px,15vw,210px);
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 8px 28px rgba(0,0,0,.55))
}

.film-hero .hero-title--logo img {
    max-height: clamp(84px,13vw,180px)
}

.film-hero .hero-title:not(.hero-title--logo) {
    font-size: clamp(3px,2.3vw,78px);
    overflow-wrap: anywhere
}

.film-hero-main {
    min-width: 0
}

.lead--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    max-width: 640px;
    overflow-wrap: anywhere
}

.lead--clamp br {
    display: none
}

.lead--clamp * {
    display: inline;
    margin: 0;
    font: inherit;
    color: inherit
}

.grid-cards--even,.grid-cards--even>#dle-content {
    grid-template-columns: repeat(7,minmax(0,1fr))
}

@media(max-width: 1199px) {
    .grid-cards--even,.grid-cards--even>#dle-content {
        grid-template-columns:repeat(5,minmax(0,1fr))
    }
}

@media(max-width: 899px) {
    .grid-cards--even,.grid-cards--even>#dle-content {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
}

@media(max-width: 639px) {
    .grid-cards--even,.grid-cards--even>#dle-content {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

@media(max-width: 479px) {
    .grid-cards--even,.grid-cards--even>#dle-content {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(min-width: 640px)and (max-width:1199px),(max-width:479px) {
    .page-home .grid-cards--even .pcard:nth-of-type(n+21) {
        display:none
    }
}

.grid-cards--even>*,.grid-cards--even>#dle-content>* {
    min-width: 0
}

.grid-cards .more,.grid-cards .empty,.grid-cards .notice {
    grid-column: 1/-1
}

.grid-cards.is-loading,#dle-content.is-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s
}

.page-home #dle-feed .pagination {
    display: none
}

.wcard {
    width: clamp(250px,24vw,360px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--text)
}

.wcard:hover {
    color: var(--text)
}

.wcard-img {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    border-radius: 18px;
    overflow: hidden;
    background-color: var(--card);
    background-size: cover;
    background-position: center 25%;
    box-shadow: 0 0 0 1px #f4f1ec14;
    transition: transform .35s,box-shadow .35s
}

.wcard-img:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,#0a0a0c00 40%,#0a0a0ccc)
}

.wcard:hover .wcard-img {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -18px #000000e6,0 0 0 1px #a000ff80
}

.wcard-num {
    position: absolute;
    left: 14px;
    bottom: 8px;
    z-index: 1;
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(34px,3.4vw,52px);
    line-height: 1;
    color: var(--text);
    opacity: .92
}

.wcard-play {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--text);
    color: var(--bg);
    font-size: 13px;
    opacity: 0;
    transform: scale(.8);
    transition: all .3s
}

.wcard:hover .wcard-play {
    opacity: 1;
    transform: none
}

.wcard-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}

.wcard-body b {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.wcard-body small {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted)
}

.coll-row .col-tile {
    width: clamp(280px,28vw,420px);
    aspect-ratio: 16/10;
    padding: 18px
}

.coll-row .col-tile--mi .mi-coll-collage {
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 1fr
}

.coll-row .col-tile--mi .mi-coll-collage img:nth-child(n+5) {
    display: none
}

.coll-row .col-foot b {
    font-size: clamp(17px,1.5vw,21px)
}

.coll-row:empty {
    display: none
}

.coll-sec:has(.coll-row:empty) {
    display: none
}

.about-story {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 920px;
    min-width: 0
}

.about-text {
    font-size: clamp(15px,1.15vw,17px);
    line-height: 1.75;
    color: var(--soft);
    overflow-wrap: anywhere;
    min-width: 0
}

.about-text>*:last-child {
    margin-bottom: 0
}

.about-text img,.about-text iframe,.about-text video,.about-text table {
    max-width: 100%;
    height: auto
}

.about-text pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.about-text.is-clamped:not(.is-open) {
    max-height: 300px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg,#000 60%,transparent);
    mask-image: linear-gradient(180deg,#000 60%,transparent)
}

.more-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s
}

.more-link:hover {
    border-color: var(--text)
}

.more-link i {
    font-size: 11px;
    transition: transform .25s
}

.more-link.open i {
    transform: rotate(180deg)
}

.about-side {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
    gap: clamp(14px,1.6vw,22px)
}

.about-side:empty {
    display: none
}

.about-hook {
    position: relative;
    margin: 0;
    padding: 22px 24px 22px 58px;
    border-radius: 20px;
    background: #a000ff14;
    border: 1px solid rgba(160,0,255,.22)
}

.about-hook i {
    position: absolute;
    left: 22px;
    top: 24px;
    color: var(--accent);
    font-size: 20px
}

.about-hook p {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(17px,1.5vw,21px);
    line-height: 1.45;
    color: var(--text);
    overflow-wrap: anywhere
}

.about-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.about-note p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--soft);
    overflow-wrap: anywhere
}

#about {
    display: flex;
    flex-direction: column;
    gap: clamp(18px,2vw,28px)
}

.watch-main {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto
}

.share .tool {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line2);
    color: var(--dim)
}

.share .tool a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: inherit
}

.share .tool:hover {
    border-color: var(--text);
    color: var(--text)
}

img.person-av--photo {
    display: block;
    object-fit: cover;
    object-position: center 20%;
    font-size: 0;
    background: var(--card)
}

.mi-cast-group .section-head {
    align-items: center
}

.mi-cast-group.section {
    gap: 12px
}

.pers-grid {
    grid-template-columns: repeat(auto-fill,minmax(min(46%,190px),1fr))
}

.pers-card {
    position: relative;
    display: block;
    padding: 0;
    aspect-ratio: 3/4;
    border-radius: 22px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line)
}

.pers-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: transform .5s
}

.pers-card:hover .pers-card__img {
    transform: scale(1.05)
}

.pers-card__img--empty {
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 72px;
    color: #f4f1ecd9;
    background: radial-gradient(circle at 30% 25%,#e4a8ff73,#1a1a20 70%)
}

.pers-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,#0a0a0c00 45%,#0a0a0ceb)
}

.pers-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px
}

.pers-card__name {
    font-weight: 800;
    font-size: 16px;
    line-height: 1.25
}

.pers-card__body small {
    font-size: 12px;
    color: var(--soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pers-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11px;
    color: var(--muted)
}

.pers-card__films {
    color: var(--accent3)
}

.sub-btn-wrap {
    display: contents
}

.ep-sub-scope .ep-sub-btn.s-btn,.s-btn.sub-btn {
    height: 54px;
    padding: 0 22px;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.3);
    background: #0a0a0c59;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    box-shadow: none
}

.ep-sub-scope .ep-sub-btn.s-btn:hover,.s-btn.sub-btn:hover {
    border-color: var(--text);
    transform: none
}

.sub-btn .ep-sub-icon {
    display: inline-grid;
    width: auto;
    height: auto;
    font-size: 16px
}

.sub-btn .ep-bell-on,.sub-btn .ep-sub-text-hover {
    display: none
}

.ep-sub-scope .ep-sub-btn.s-btn.active,.ep-sub-scope .ep-sub-btn.s-btn[aria-pressed=true] {
    background: #a000ff29;
    border-color: #a000ff99;
    color: var(--text)
}

.sub-btn.active .ep-bell-on,.sub-btn[aria-pressed=true] .ep-bell-on {
    display: block;
    color: var(--accent)
}

.sub-btn.active .ep-bell-off,.sub-btn[aria-pressed=true] .ep-bell-off,.sub-btn.active:hover .ep-sub-text-idle,.sub-btn[aria-pressed=true]:hover .ep-sub-text-idle {
    display: none
}

.sub-btn.active:hover .ep-sub-text-hover,.sub-btn[aria-pressed=true]:hover .ep-sub-text-hover {
    display: inline
}

.sub-btn.ep-loading {
    opacity: .6;
    pointer-events: none
}

@media(max-width: 819px) {
    .ep-sub-scope .ep-sub-btn.s-btn,.s-btn.sub-btn {
        height:48px;
        padding: 0 18px;
        font-size: 14px
    }
}

.fbar {
    flex-wrap: wrap
}

.fbar [hidden] {
    display: none!important
}

.seg--rating button {
    cursor: pointer
}

.cat-reset {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px
}

.cat-status[hidden] {
    display: none
}

.empty>i {
    font-size: 34px;
    color: var(--muted)
}

@media(max-width: 719px) {
    .fbar-left {
        flex-wrap:wrap
    }

    .seg--rating button {
        padding: 0 9px
    }
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr));
    gap: clamp(16px,2vw,28px)
}

.bcard {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform .35s,border-color .35s;
    min-width: 0
}

.bcard:hover {
    transform: translateY(-4px);
    border-color: #a000ff66
}

.bcard-img {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    background-color: var(--card);
    background-size: cover;
    background-position: center 25%
}

.bcard-img .tag {
    position: absolute;
    left: 14px;
    top: 14px
}

.bcard-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 20px;
    flex: 1;
    min-width: 0
}

.bcard-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--muted)
}

.bcard-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(18px,1.5vw,22px);
    line-height: 1.25;
    text-wrap: balance
}

.bcard-title a {
    color: var(--text)
}

.bcard-title a:hover {
    color: var(--accent3)
}

.bcard-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bcard-more {
    margin-top: auto;
    font-weight: 700
}

@media(min-width: 960px) {
    .blog-grid--lead {
        grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
        grid-auto-rows: 1fr
    }

    .blog-grid--lead .bcard:first-child {
        grid-row: 1/span 3
    }

    .blog-grid--lead .bcard:first-child .bcard-img {
        aspect-ratio: auto;
        flex: 1;
        min-height: 300px
    }

    .blog-grid--lead .bcard:first-child .bcard-body {
        flex: 0 0 auto
    }

    .blog-grid--lead .bcard:first-child .bcard-title {
        font-size: clamp(24px,2.4vw,34px)
    }

    .blog-grid--lead .bcard:not(:first-child) {
        flex-direction: row
    }

    .blog-grid--lead .bcard:not(:first-child) .bcard-img {
        flex: 0 0 38%;
        aspect-ratio: auto
    }

    .blog-grid--lead .bcard:not(:first-child) .bcard-text,.blog-grid--lead .bcard:not(:first-child) .bcard-more {
        display: none
    }

    .blog-grid--lead .bcard:not(:first-child) .bcard-body {
        justify-content: center
    }
}

.is-blog .film-only {
    display: none!important
}

.is-blog #dle-feed,.is-blog #dle-feed>#dle-content {
    grid-template-columns: repeat(auto-fill,minmax(min(100%,320px),1fr))!important;
    gap: clamp(16px,2vw,28px)!important
}

.is-blog #dle-feed:has(>#dle-content) {
    display: block
}

.post-hero {
    position: relative;
    min-height: min(62vh,560px);
    display: flex;
    align-items: flex-end;
    overflow: hidden
}

.post-hero .bg {
    position: absolute;
    inset: 0;
    background: var(--card) center 25%/cover no-repeat
}

.post-hero .shade-b {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(10,10,12,.55) 0%,rgba(10,10,12,.35) 35%,var(--bg) 100%)
}

.post-hero-body {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 130px var(--pad) clamp(24px,3vw,40px)
}

.post-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(32px,4.6vw,64px);
    line-height: 1.05;
    letter-spacing: -.01em;
    text-wrap: balance;
    overflow-wrap: anywhere
}

.post-hero .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--soft)
}

.post-main {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(28px,3vw,44px);
    padding: clamp(20px,3vw,40px) var(--pad) 0
}

.post-text {
    font-size: clamp(16px,1.2vw,18px);
    line-height: 1.8;
    color: var(--soft);
    overflow-wrap: anywhere
}

.post-text h2,.post-text h3 {
    font-size: clamp(22px,2vw,30px);
    line-height: 1.2
}

.post-text img {
    max-width: 100%;
    height: auto
}

.post-text ul,.post-text ol {
    padding-left: 1.3em;
    margin: 0 0 1em
}

.post-text li {
    margin: .35em 0
}

.post-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.play-dot i {
    color: var(--text);
    font-size: 11px;
    margin-left: 2px
}

.meta>* {
    min-width: 0
}

.meta-links {
    white-space: normal;
    overflow-wrap: anywhere
}

.sub-btn .ep-sub-icon {
    position: static;
    flex: 0 0 auto;
    width: 18px!important;
    height: 18px!important;
    place-items: center;
    background: none!important;
    transform: none!important;
    animation: none!important;
    border-radius: 0
}

.sub-btn .ep-sub-label {
    display: inline-flex;
    min-width: 0
}

.fa-solid,.fa-regular,.fa-brands {
    display: inline-block;
    width: 1.2em;
    text-align: center;
    vertical-align: -.1em
}

.link-muted,.tag,.s-btn-sm,.cap,.bcard-meta>*,.wcard-body small,.post-hero .meta>span,.col-count,.col-go,.share-links a,.share-links button,.tool,.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.s-btn-sm {
    gap: 8px
}

.link-muted i {
    margin-left: 0
}

.tag i {
    margin-right: 0
}

.btn-round i,.arrow-btn i,.add-btn i,.seg.icons i,.search-btn i,.logo-mark i,.play-dot i,.player-cta i,.wcard-play i,.to-top i {
    width: auto;
    vertical-align: 0
}

.btn-round {
    font-size: 17px
}

.play-dot i {
    margin-left: 1px
}

.logo-mark i {
    font-size: .8em;
    margin-left: 1px
}

/* [удалён старый .tabbar i] */

.b-rate i,.meta .star i {
    width: auto
}

.btn-trailer i,.film-hero .s-btn .fa-youtube {
    font-size: 18px;
    color: #ff4d4d
}

.lucky-btn>i {
    display: grid;
    place-items: center
}

.lucky-btn>i i {
    width: auto
}

.chips-sec {
    position: relative;
    display: block;
    padding: 0 var(--pad)
}

.chips-sec.cat-genres {
    padding: 0 var(--pad) 18px
}

.chips-sec .chips {
    scroll-behavior: smooth;
    padding: 2px 0
}

.chips-nav {
    display: contents
}

.chips-nav[hidden] {
    display: none!important
}

.chips-arrow {
    position: absolute;
    top: 1px;
    z-index: 2;
    width: 44px;
    height: 44px;
    background: var(--bg);
    border-color: var(--line2);
    box-shadow: 0 0 0 10px var(--bg),28px 0 26px 6px var(--bg)
}

.chips-arrow--l {
    left: var(--pad)
}

.chips-arrow--r {
    right: var(--pad);
    box-shadow: 0 0 0 10px var(--bg),-28px 0 26px 6px var(--bg)
}

.chips-arrow[disabled] {
    opacity: 0;
    visibility: hidden
}

.chips-arrow:hover {
    background: var(--text);
    color: var(--bg)
}

@media(max-width: 819px) {
    .chips-nav {
        display:none
    }

    .chips-sec {
        padding: 0
    }

    .chips-sec .chips {
        padding: 2px var(--pad)
    }

    .chips-sec.cat-genres {
        padding: 0 0 18px
    }
}

.cols-grid {
    grid-template-columns: repeat(auto-fill,minmax(min(100%,340px),1fr));
    gap: clamp(14px,1.6vw,22px)
}

.col-tile.col-tile--mi {
    display: block;
    aspect-ratio: 16/9;
    padding: 0;
    border-radius: 22px;
    background: linear-gradient(120deg,#1b1b21,#15151a 55%,#241a18);
    border: 1px solid var(--line);
    transition: transform .35s,border-color .35s
}

.col-tile--mi:hover {
    transform: translateY(-4px);
    border-color: #a000ff73
}

.col-tile--mi:before {
    display: none
}

.col-tile--mi .mi-coll-collage {
    position: absolute;
    inset: 50% 20px auto auto;
    height: 76%;
    width: auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0;
    overflow: visible;
    transform: translateY(-50%);
    z-index: 0
}

.col-tile--mi .mi-coll-collage img {
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 14px 30px -10px #000000e6,0 0 0 1px #f4f1ec1a;
    transform-origin: right center;
    transition: transform .4s,margin .4s
}

.col-tile--mi .mi-coll-collage img:nth-child(1) {
    z-index: 4
}

.col-tile--mi .mi-coll-collage img:nth-child(2) {
    z-index: 3;
    margin-right: -13%;
    transform: scale(.9);
    filter: brightness(.8)
}

.col-tile--mi .mi-coll-collage img:nth-child(3) {
    z-index: 2;
    margin-right: -14%;
    transform: scale(.8);
    filter: brightness(.62)
}

.col-tile--mi .mi-coll-collage img:nth-child(4) {
    z-index: 1;
    margin-right: -15%;
    transform: scale(.7);
    filter: brightness(.45)
}

.col-tile--mi .mi-coll-collage img:nth-child(n+5) {
    display: none
}

.col-tile--mi .mi-coll-collage:empty {
    display: none
}

.col-tile--mi .col-body {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(16px,1.6vw,24px);
    padding-right: 46%;
    background: linear-gradient(90deg,#141418f5,#141418cc 40%,#14141800 62%);
    border-radius: inherit
}

.col-tile--mi .col-count {
    align-self: flex-start;
    margin-bottom: auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f4f1ec1a;
    backdrop-filter: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--soft);
    white-space: nowrap
}

.col-count i {
    font-size: 11px;
    color: var(--accent2)
}

.col-name {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(19px,1.7vw,25px);
    line-height: 1.15;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.col-go {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    transition: color .25s;
    white-space: nowrap
}

.col-tile--mi:hover .col-go {
    color: var(--accent3)
}

.coll-row .col-tile.col-tile--mi {
    width: clamp(300px,30vw,440px);
    aspect-ratio: 16/9;
    padding: 0
}

.coll-row .col-tile--mi .mi-coll-collage {
    display: flex;
    grid-template-columns: none
}

.mi-coll-tabs {
    align-self: flex-start;
    width: max-content;
    max-width: 100%
}

.mi-coll-tabs .mi-coll-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

.mi-coll-tabs .mi-coll-tab small {
    font-size: 11px;
    opacity: .6
}

.pers-grid {
    grid-template-columns: repeat(6,minmax(0,1fr))
}

@media(max-width: 1199px) {
    .pers-grid {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
}

@media(max-width: 819px) {
    .pers-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

@media(max-width: 539px) {
    .pers-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

.pers-card {
    aspect-ratio: 2/3
}

.pers-card__img {
    object-position: center top
}

.pers-card:after {
    background: linear-gradient(180deg,#0a0a0c00 52%,#0a0a0cf0)
}

.pers-card__body {
    padding: 14px
}

.pers-card__name {
    font-size: 15px
}

img.person-av--photo {
    aspect-ratio: 1;
    height: auto;
    object-position: center 12%
}

img.person-hero__photo {
    display: block;
    aspect-ratio: 2/3;
    height: auto;
    object-fit: cover;
    object-position: center top;
    background: var(--card)
}

.mi-facts {
    display: block;
    columns: 2;
    column-gap: clamp(28px,4vw,64px);
    counter-reset: fact
}

@media(max-width: 819px) {
    .mi-facts {
        columns:1
    }
}

.mi-fact {
    break-inside: avoid;
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 4px 14px;
    align-items: start;
    padding: 18px 0;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    counter-increment: fact;
    font-size: 15px;
    line-height: 1.65;
    color: var(--soft)
}

.mi-fact:before {
    content: counter(fact,decimal-leading-zero);
    font-family: var(--serif);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.15;
    color: var(--accent2)
}

.mi-fact p {
    margin: 0;
    overflow-wrap: anywhere
}

.mi-fact a {
    color: var(--accent3)
}

[data-more].is-clamped:not(.is-open) {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg,#000 62%,transparent);
    mask-image: linear-gradient(180deg,#000 62%,transparent)
}

.mi-facts.is-clamped:not(.is-open) {
    max-height: 460px
}

.facts-sec .more-link {
    align-self: center
}

.is-blog #dle-feed,.is-blog #dle-feed>#dle-content {
    display: grid!important;
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: clamp(18px,2vw,30px)!important
}

.is-blog #dle-feed:has(>#dle-content) {
    display: block!important
}

@media(max-width: 1099px) {
    .is-blog #dle-feed,.is-blog #dle-feed>#dle-content {
        grid-template-columns:repeat(2,minmax(0,1fr))!important
    }
}

@media(max-width: 639px) {
    .is-blog #dle-feed,.is-blog #dle-feed>#dle-content {
        grid-template-columns:1fr!important
    }
}

.is-blog .cat-main {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%
}

.bcard {
    border-radius: 20px;
    background: var(--surface)
}

.bcard-img {
    aspect-ratio: 16/10;
    overflow: hidden
}

.bcard-img:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,#0a0a0c00 55%,#1414188c)
}

.bcard-img .tag {
    z-index: 1;
    font-size: 11px;
    padding: 5px 10px
}

.bcard-body {
    gap: 12px;
    padding: 20px 22px 22px
}

.bcard-meta {
    gap: 6px 16px;
    font-size: 12px
}

.bcard-meta i {
    font-size: 12px
}

.bcard-title {
    font-size: clamp(19px,1.5vw,23px);
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bcard-text {
    color: var(--dim)
}

.bcard-more {
    color: var(--accent3);
    font-size: 13px
}

.bcard-more i {
    transition: transform .25s
}

.bcard:hover .bcard-more i {
    transform: translate(4px)
}

.pcard-info small {
    overflow-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.is-list .pcard-info small {
    white-space: normal
}

.pers-card__meta span {
    padding: 0;
    background: none;
    border-radius: 0;
    font-weight: 600;
    font-size: 11px;
    color: var(--muted)
}

.pers-card__meta .pers-card__films {
    color: var(--accent3);
    margin-top: 0
}

.pers-card__name {
    font-family: inherit
}

.pers-card__meta {
    gap: 2px 10px;
    margin-top: 2px
}

#dle-content>.bcard,.grid-cards>.bcard {
    grid-column: auto!important
}

.col-tile--mi .col-body {
    padding-right: 50%
}

.coll-row .mi-coll-grid,.coll-row .mi-coll-cards {
    display: contents
}

.coll-row .col-tile {
    flex: 0 0 auto;
    scroll-snap-align: start
}

.coll-row>link {
    display: none
}

.actions--film {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}

.btn-watch {
    height: 58px;
    padding: 0 30px 0 26px;
    gap: 12px;
    font-size: 16px;
    font-weight: 800;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 14px 34px -12px #a000ffb3
}

.btn-watch i {
    font-size: 15px;
    width: auto
}

.btn-watch:hover {
    background: #b833ff;
    color: #fff;
    transform: translateY(-1px)
}

.actions--film .btn-round {
    width: 54px;
    height: 54px;
    background: #f4f1ec14;
    border-color: #f4f1ec42;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.actions--film .btn-round:hover {
    background: #f4f1ec2e;
    border-color: #f4f1ec99;
    color: var(--text)
}

.actions--film .btn-round.on,.actions--film .btn-round[aria-pressed=true] {
    background: #a000ff2e;
    border-color: #a000ffb3;
    color: var(--accent)
}

.actions--film a:has(>.btn-round) {
    display: inline-flex;
    border-radius: 50%
}

.actions--film .ep-sub-scope .ep-sub-btn.s-btn,.actions--film .s-btn.sub-btn {
    width: 54px;
    height: 54px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    background: #f4f1ec14;
    border-color: #f4f1ec42
}

.actions--film .sub-btn .ep-sub-label,.actions--film .sub-btn>span:not(.ep-sub-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0)
}

.actions--film .sub-btn .ep-sub-icon {
    font-size: 17px
}

.actions--film .ep-sub-scope .ep-sub-btn.s-btn.active,.actions--film .ep-sub-scope .ep-sub-btn.s-btn[aria-pressed=true] {
    background: #a000ff2e;
    border-color: #a000ffb3
}

.more-dd .dd-menu {
    top: 62px;
    left: 50%;
    transform: translate(-50%);
    min-width: 240px;
    z-index: 30
}

.dd.open.more-dd .dd-menu {
    animation: none
}

.more-dd .dd-menu a,.more-dd .dd-item,.more-dd .dd-item>a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer
}

.more-dd .dd-menu a>span {
    display: flex;
    align-items: center;
    gap: 10px
}

.more-dd .dd-item:hover,.more-dd .dd-menu a:hover {
    background: #f4f1ec0f
}

.more-dd .dd-menu>a:has(.dd-item),.more-dd .dd-menu>a:has(.dd-item):hover {
    padding: 0;
    background: none
}

.more-dd .dd-menu i {
    color: var(--muted);
    font-size: 14px
}

.film-hero {
    overflow: visible
}

.film-hero>.bg,.film-hero>.shade-l,.film-hero>.shade-b {
    overflow: hidden
}

@media(max-width: 819px) {
    .actions--film {
        gap:10px
    }

    .btn-watch {
        flex: 1 1 100%;
        height: 54px
    }

    .actions--film .btn-round,.actions--film .s-btn.sub-btn,.actions--film .ep-sub-scope .ep-sub-btn.s-btn {
        width: 48px;
        height: 48px
    }

    .more-dd .dd-menu {
        left: 0;
        transform: none
    }
}

.watch-page {
    display: flex;
    flex-direction: column;
    gap: clamp(16px,2vw,26px);
}

.watch-top {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 var(--pad)
}

.watch-back {
    align-self: flex-start
}

.watch-head {
    display: flex;
    align-items: center;
    gap: clamp(16px,2vw,28px);
    flex-wrap: wrap
}

.watch-logo {
    max-height: 64px;
    max-width: min(260px,50vw);
    width: auto;
    object-fit: contain
}

.watch-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(22px,2.4vw,34px);
    line-height: 1.15;
    overflow-wrap: anywhere
}

.watch-stage {
    padding: 0 var(--pad);
    width: 100%;
    max-width: calc(1360px + 2 * var(--pad));
    margin: 0 auto;
    min-width: 0
}

.watch-stage .player {
    border-radius: 22px
}

.watch-under {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 var(--pad);
    width: 100%;
    max-width: calc(1360px + 2 * var(--pad));
    margin: 0 auto
}

.watch-under .s-btn.btn-glass {
    height: 54px
}

.watch-lead {
    max-width: 860px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.watch-main-secs {
    padding-top: clamp(20px,3vw,40px)
}

.umenu-count[hidden] {
    display: none
}

@media(max-width: 819px) {
    .film-hero .actions--film {
        justify-content:center
    }

    .film-hero .actions--film .btn-watch {
        flex: 1 1 100%
    }
}

.footer {
    padding: 0 var(--pad) 28px;
    gap: 0;
    border-top: none;
    margin-top: clamp(48px,6vw,88px)
}

.footer-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.2fr) auto auto;
    align-items: center;
    gap: clamp(20px,3vw,48px);
    padding: clamp(24px,3.2vw,44px);
    border-radius: 28px;
    background: radial-gradient(ellipse 60% 120% at 100% 0%,rgba(160,0,255,.22),transparent 65%),radial-gradient(ellipse 50% 100% at 0% 100%,rgba(232,194,122,.1),transparent 60%),var(--surface);
    border: 1px solid var(--line);
    overflow: hidden
}

.footer-cta__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0
}

.footer-cta__text b {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(24px,2.8vw,40px);
    line-height: 1.1;
    text-wrap: balance
}

.footer-cta__text p {
    margin: 0;
    max-width: 520px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--soft)
}

.footer-devices {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.footer-devices li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 84px;
    padding: 14px 6px;
    border-radius: 16px;
    background: #f4f1ec0d;
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    color: var(--dim)
}

.footer-devices i {
    font-size: 20px;
    color: var(--accent2);
    width: auto
}

.footer-cta__btns {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer-cta__btns .s-btn {
    height: 50px;
    padding: 0 22px;
    font-size: 14px
}

.footer-cta__btns .btn-accent {
    color: #fff
}

@media(max-width: 1199px) {
    .footer-cta {
        grid-template-columns:1fr auto
    }

    .footer-devices {
        display: none
    }
}

@media(max-width: 719px) {
    .footer-cta {
        grid-template-columns:1fr
    }

    .footer-cta__btns {
        flex-direction: row;
        flex-wrap: wrap
    }

    .footer-cta__btns .s-btn {
        flex: 1 1 160px
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(240px,1.5fr) repeat(4,minmax(0,1fr));
    gap: clamp(24px,3vw,48px);
    padding: clamp(36px,4.5vw,64px) 0 clamp(28px,3vw,44px)
}

.footer-col--wide {
    grid-column: span 1
}

.footer-brand {
    gap: 16px;
    max-width: 340px
}

.footer-brand .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text)
}

.footer-brand .logo-text {
    font-size: 26px
}

.footer-social {
    display: flex;
    gap: 8px
}

.footer-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-size: 16px;
    transition: all .25s
}

.footer-social a:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg)
}

.footer-social i {
    width: auto
}

.footer-col {
    gap: 11px
}

.footer-col>span {
    margin-bottom: 4px;
    color: var(--accent2)
}

.footer-col a {
    color: var(--soft);
    transition: color .2s
}

.footer-col a:hover {
    color: var(--text)
}

.footer-genres {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px 18px
}

@media(max-width: 1099px) {
    .footer-grid {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }

    .footer-brand {
        grid-column: 1/-1;
        max-width: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between
    }

    .footer-brand p {
        flex: 1 1 300px;
        max-width: 520px
    }
}

@media(max-width: 719px) {
    .footer-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap: 28px 20px
    }

    .footer-genres {
        grid-template-columns: 1fr
    }
}

.footer-bottom {
    align-items: center;
    padding-top: 22px
}

.footer-age {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px
}

.footer-age b {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-size: 11px
}

.footer-up {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text)!important
}

@media(max-width: 819px) {
    .footer {
        padding-bottom:110px
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }
}

.footer-cta__btns .btn-accent:hover {
    background: #b833ff;
    color: #fff;
    border-color: #b833ff
}

@media(max-width: 819px) {
    .header:has(#userPanel:not([hidden])) {
        backdrop-filter:none;
        -webkit-backdrop-filter: none;
        transform: none;
        filter: none;
        background: #0a0a0cf5
    }
}

/* ===== СВЕТЛАЯ ТЕМА (в конце, чтобы перебивала :root) ===== */
[data-theme="light"] {
    --bg: #F7F4EF;
    --surface: #FFFFFF;
    --card: #F0EBE3;
    --text: #1A1A1C;
    --muted: #6B6660;
    --soft: #3D3833;
    --dim: #2A2622;
    --accent: #7a28a8;
    --accent2: #8b33c5;
    --accent3: #6b2296;
    --gold: #B8892E;

    --line: rgba(26, 26, 28, .08);
    --line2: rgba(26, 26, 28, .16);

    --surface-soft: #F0EBE3;
    --surface-sunk: #E8E2D8;
    --accent-strong: #7a28a8;
    --accent-soft: rgba(122,40,168, .12);
    --accent-ink: #FFFFFF;
    --positive: #2E9B5C;
    --negative: #8b33c5;
    --warn: #B8892E;
    --news-text: #3D3833;

    --shadow: 0 24px 48px -12px rgba(0, 0, 0, .12);
    --shadow-soft: 0 12px 28px -10px rgba(0, 0, 0, .1);
    --shadow-tiny: 0 4px 14px rgba(0, 0, 0, .08);
    --shadow-modal: 0 40px 80px -20px rgba(0, 0, 0, .2);

    color-scheme: light;
}

/* ============================================================
   СВЕТЛАЯ ТЕМА — доп. правила для компонентов Lumen
   Применяется только при <html data-theme="light">
   ============================================================ */

/* ---- HERO на странице фильма / главной ---- */
[data-theme="light"] .film-hero .bg {
    filter: brightness(1.05) saturate(1.05);
}

[data-theme="light"] .film-hero .shade-l {
    background: linear-gradient(90deg,
        rgba(247, 244, 239, .98) 0%,
        rgba(247, 244, 239, .88) 35%,
        rgba(247, 244, 239, .35) 60%,
        transparent 80%);
}

[data-theme="light"] .film-hero .shade-b {
    background: linear-gradient(0deg,
        rgba(247, 244, 239, 1) 0%,
        rgba(247, 244, 239, .85) 25%,
        rgba(247, 244, 239, .15) 55%,
        transparent 75%,
        rgba(247, 244, 239, .55) 100%);
}

[data-theme="light"] .film-hero .hero-title,
[data-theme="light"] .film-hero .hero-title a {
    color: var(--text);
}

[data-theme="light"] .film-hero .lead {
    color: var(--soft);
}

[data-theme="light"] .film-hero .meta,
[data-theme="light"] .film-hero .meta a {
    color: var(--dim);
}

/* ---- Hero на главной ---- */
[data-theme="light"] .hero {
    background: #EDE7DD;
}

[data-theme="light"] .hero .shade-l {
    background: linear-gradient(90deg,
        rgba(247, 244, 239, .98),
        rgba(247, 244, 239, .75) 40%,
        rgba(247, 244, 239, .15) 70%,
        transparent);
}

[data-theme="light"] .hero .shade-b {
    background: linear-gradient(0deg,
        rgba(247, 244, 239, 1),
        rgba(247, 244, 239, .75) 22%,
        transparent 50%,
        rgba(247, 244, 239, .55));
}

[data-theme="light"] .hero-slide .bg {
    filter: brightness(1.08) saturate(1.02);
}

[data-theme="light"] .hero-num {
    -webkit-text-stroke-color: rgba(26, 26, 28, .18);
}

/* ---- Feature (широкий баннер) ---- */
[data-theme="light"] .feature:before {
    background: linear-gradient(0deg,
        rgba(247, 244, 239, .98) 0%,
        rgba(247, 244, 239, .55) 45%,
        rgba(247, 244, 239, .1) 75%);
}

[data-theme="light"] .feature h2,
[data-theme="light"] .feature p {
    color: var(--text);
}

/* ---- Ccard (продолжить просмотр) ---- */
[data-theme="light"] .ccard,
[data-theme="light"] .ccard:hover {
    color: var(--text);
}

[data-theme="light"] .ccard-img:before {
    background: linear-gradient(0deg,
        rgba(247, 244, 239, .85) 0%,
        rgba(247, 244, 239, 0) 55%);
}

[data-theme="light"] .ccard-play {
    background: var(--surface);
    color: var(--text);
}

[data-theme="light"] .ccard-left {
    color: var(--muted);
}

/* ---- Wcard (популярное) ---- */
[data-theme="light"] .wcard,
[data-theme="light"] .wcard:hover {
    color: var(--text);
}

[data-theme="light"] .wcard-play {
    background: var(--text);
    color: var(--surface);
}

/* ---- Топ-10 ---- */
[data-theme="light"] .top-num {
    -webkit-text-stroke-color: rgba(26, 26, 28, .35);
    color: var(--bg);
}

[data-theme="light"] .top-poster {
    box-shadow: -12px 0 24px -8px rgba(0, 0, 0, .18);
}

/* ---- Плеер и плеер-панель ---- */
[data-theme="light"] .player {
    background: #000;
    box-shadow: 0 0 0 1px rgba(26, 26, 28, .08);
}

[data-theme="light"] .player:before {
    background: rgba(255, 255, 255, .06);
}

[data-theme="light"] .player-cta i {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 0 0 12px rgba(26, 26, 28, .08);
}

[data-theme="light"] .player-hint {
    color: var(--muted);
}

[data-theme="light"] .panel-note {
    color: var(--muted);
}

[data-theme="light"] .panel-note a {
    color: var(--accent);
}

/* ---- Факты о фильме ---- */
/* ---- Рейтинг-кольцо ---- */
[data-theme="light"] .ring svg circle {
    stroke: rgba(26, 26, 28, .12);
}

[data-theme="light"] .ring b {
    color: var(--text);
}

/* ---- Оценка зрителей ---- */
[data-theme="light"] .vote-pill {
    color: var(--soft);
    border-color: rgba(26, 26, 28, .18);
}

[data-theme="light"] .vote-pill:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* ---- Кадры ---- */
[data-theme="light"] .frames > * {
    background-color: var(--card);
}

/* ---- Рецензии ---- */
[data-theme="light"] [data-theme="light"] [data-theme="light"] .review p,
[data-theme="light"] [data-theme="light"] .review .review-link {
    color: var(--dim);
    border-color: rgba(26, 26, 28, .18);
}

[data-theme="light"] .review .review-link:hover {
    border-color: var(--text);
    color: var(--text);
}

/* ---- Актёры ---- */
[data-theme="light"] .person,
[data-theme="light"] .person:hover {
    color: var(--text);
}

[data-theme="light"] .person small {
    color: var(--muted);
}

/* ---- Обложки и постеры - не подсвечиваем лишним ---- */
[data-theme="light"] .poster {
    background-color: var(--card);
}

/* ---- Карточки "продолжить просмотр" и подобные ---- */
[data-theme="light"] .pcard-title {
    color: var(--text);
}

[data-theme="light"] .pcard-info small,
[data-theme="light"] .pcard-info small a {
    color: var(--muted);
}

[data-theme="light"] .add-btn {
    color: var(--text);
    border-color: rgba(26, 26, 28, .22);
}

[data-theme="light"] .add-btn:hover {
    border-color: var(--text);
}

/* ---- Заголовки разделов ---- */
[data-theme="light"] .h2 {
    color: var(--text);
}

[data-theme="light"] .eyebrow {
    color: var(--accent);
}

/* ---- Кнопки-кружки (трейлер, в список, уже смотрел, поделиться) ---- */
[data-theme="light"] .btn-round {
    background: rgba(255, 255, 255, .7);
    border-color: rgba(26, 26, 28, .22);
    color: var(--text);
}

[data-theme="light"] .btn-round:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
}

[data-theme="light"] .actions--film .btn-round {
    background: rgba(255, 255, 255, .75);
    border-color: rgba(26, 26, 28, .22);
}

[data-theme="light"] .actions--film .btn-round:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
}

/* ---- Кнопка "Смотреть онлайн" ---- */
[data-theme="light"] .btn-watch {
    background: var(--accent);
    color: #fff;
}

[data-theme="light"] .btn-watch:hover {
    background: #b833ff;
    color: #fff;
}

/* ---- Мобильный таббар ---- */
[data-theme="light"] /* [удалён старый .tabbar] */

/* [удалён light tabbar a] */

[data-theme="light"] /* [удалён старый .tabbar .active] */

/* ---- Поиск оверлей ---- */
[data-theme="light"] .search-overlay {
    background: rgba(247, 244, 239, .96);
}

[data-theme="light"] .search-field input[type=search] {
    color: var(--text);
}

[data-theme="light"] .search-field {
    border-bottom-color: rgba(26, 26, 28, .2);
}

[data-theme="light"] .search-close {
    color: var(--text);
    border-color: rgba(26, 26, 28, .2);
}

/* ---- U-menu панель ---- */
[data-theme="light"] .umenu-panel {
    background: rgba(255, 255, 255, .98);
    border-color: rgba(26, 26, 28, .1);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, .15);
}

[data-theme="light"] .umenu-list a {
    color: var(--dim);
}

[data-theme="light"] .umenu-list a:hover {
    background: rgba(26, 26, 28, .04);
    color: var(--text);
}

/* ---- Чипсы плееров ---- */
[data-theme="light"] .opt-chip {
    background: transparent;
    border-color: rgba(26, 26, 28, .18);
    color: var(--text);
}

[data-theme="light"] .opt-chip.active {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

/* ---- Табы навигации ---- */
[data-theme="light"] .tabs {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(26, 26, 28, .08);
}

[data-theme="light"] .tabs button {
    color: var(--muted);
}

[data-theme="light"] .tabs button.active {
    background: var(--text);
    color: var(--surface);
}

/* ---- Футер-CTA и футер ---- */
[data-theme="light"] .footer-cta {
    background:
        radial-gradient(ellipse 60% 120% at 100% 0%, rgba(122,40,168, .08), transparent 65%),
        radial-gradient(ellipse 50% 100% at 0% 100%, rgba(184, 137, 46, .06), transparent 60%),
        var(--surface);
    border-color: var(--line);
}

[data-theme="light"] .footer-devices li {
    background: rgba(26, 26, 28, .04);
    border-color: var(--line);
}

[data-theme="light"] .footer-social a {
    border-color: rgba(26, 26, 28, .16);
    color: var(--dim);
}

[data-theme="light"] .footer-social a:hover {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

[data-theme="light"] .footer-brand .logo,
[data-theme="light"] .footer-brand .logo-text {
    color: var(--text);
}

[data-theme="light"] .footer-col > span {
    color: var(--accent);
}

[data-theme="light"] .footer-col a {
    color: var(--soft);
}

[data-theme="light"] .footer-col a:hover {
    color: var(--text);
}

[data-theme="light"] .footer-bottom,
[data-theme="light"] .footer-bottom a {
    color: var(--muted);
    border-color: var(--line);
}

/* ---- Кнопка "Наверх" ---- */
[data-theme="light"] .to-top {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(26, 26, 28, .18);
    color: var(--text);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .15);
}

[data-theme="light"] .to-top:hover {
    background: var(--text);
    color: var(--surface);
}

/* ---- Формы и инпуты ---- */
[data-theme="light"] input[type=text],
[data-theme="light"] input[type=password],
[data-theme="light"] input[type=email],
[data-theme="light"] input[type=search],
[data-theme="light"] input[type=url],
[data-theme="light"] input[type=tel],
[data-theme="light"] input[type=number],
[data-theme="light"] input[type=date],
[data-theme="light"] input[type=datetime-local],
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .form-control,
[data-theme="light"] .form-input {
    background: rgba(26, 26, 28, .03);
    border-color: rgba(26, 26, 28, .14);
    color: var(--text);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-input:focus {
    background: rgba(26, 26, 28, .05);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(122,40,168, .12);
}

[data-theme="light"] select option {
    background: var(--surface);
    color: var(--text);
}

/* ---- Плавающие элементы (дропдауны) ---- */
[data-theme="light"] .dd-menu {
    background: var(--surface);
    border-color: rgba(26, 26, 28, .1);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .15);
}

[data-theme="light"] .dd-menu a,
[data-theme="light"] .dd-menu button {
    color: var(--text);
}

[data-theme="light"] .dd-menu a:hover,
[data-theme="light"] .dd-menu button:hover {
    background: rgba(26, 26, 28, .05);
}

/* ---- Секция "продолжить просмотр" ---- */
[data-theme="light"] .section-head .h2 {
    color: var(--text);
}

[data-theme="light"] .link-muted {
    color: var(--muted);
}

[data-theme="light"] .link-muted:hover {
    color: var(--accent);
}

/* ============================================================
   ФИКС: ряд актёров (people) — не уезжает за границу
   ============================================================ */

/* Ряд с актёрами — горизонтальный скролл, карточки фиксированной ширины */
.row.bleed.people {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 8px var(--pad) 12px;
    margin: 0 calc(-1 * var(--pad));
    max-width: 100vw;   /* не вылезает за вьюпорт */
    box-sizing: border-box;
}

.row.bleed.people::-webkit-scrollbar {
    height: 6px;
}
.row.bleed.people::-webkit-scrollbar-thumb {
    background: rgba(244, 241, 236, .12);
    border-radius: 3px;
}

.row.bleed.people > .person {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: clamp(110px, 11vw, 150px);   /* фиксируем ширину */
    max-width: 150px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
}

.row.bleed.people > .person:hover {
    color: var(--text);
}

.row.bleed.people .person-av {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(28px, 3vw, 44px);
    color: #f4f1ece6;
    background: radial-gradient(circle at 30% 25%, #e4a8ff73, #1a1a20 70%);
    box-shadow: 0 0 0 1px #f4f1ec1a;
    overflow: hidden;
}

.row.bleed.people .person-av--photo {
    object-fit: cover;
    object-position: center 20%;
    font-size: 0;
    background: var(--card);
}

.row.bleed.people .person b {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

.row.bleed.people .person small {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Убираем display:contents у span.stack6.gap3 — иначе верстка ломается */
.row.bleed.people .stack6.gap3 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    min-width: 0;
}

/* На мобилке — по 3–4 актёра в ряд */
@media (max-width: 640px) {
    .row.bleed.people > .person {
        width: clamp(90px, 22vw, 120px);
    }
    .row.bleed.people .person-av {
        font-size: 26px;
    }
}

/* Ограничиваем секцию актёров по ширине */
#cast {
    max-width: 100%;
    overflow: hidden;
}
#cast .row {
    max-width: 100%;
}

/* ============================================================
   АКТЁРЫ — простой слайд-ряд из ФИО (без фото)
   ============================================================ */

.cast-row-plain {
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cast-row-plain .cast-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-size: 14px;
    color: var(--soft);
    line-height: 1.6;
}

.cast-row-plain .cast-list a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(244, 241, 236, .06);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
    white-space: nowrap;
}

.cast-row-plain .cast-list a:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Мобильный — горизонтальный скролл */
@media (max-width: 640px) {
    .cast-row-plain .cast-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px !important;
        margin: 0 calc(-1 * var(--pad)) !important;
        padding-left: var(--pad) !important;
        padding-right: var(--pad) !important;
    }
    .cast-row-plain .cast-list::-webkit-scrollbar {
        height: 4px;
    }
    .cast-row-plain .cast-list::-webkit-scrollbar-thumb {
        background: rgba(244, 241, 236, .2);
        border-radius: 2px;
    }
    .cast-row-plain .cast-list a {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

/* Светлая тема */
[data-theme="light"] .cast-row-plain .cast-list a {
    background: rgba(26, 26, 28, .04);
    border-color: rgba(26, 26, 28, .1);
}
[data-theme="light"] .cast-row-plain .cast-list a:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* ============================================================
   HERO — АВТОВОСПРОИЗВЕДЕНИЕ ТРЕЙЛЕРА ПОВЕРХ ПОСТЕРА
   ============================================================ */

.film-hero-trailer {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
    overflow: hidden;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .6s ease, transform .6s ease;
}
.film-hero-trailer[hidden] { display: none; }
.film-hero-trailer.is-playing {
    opacity: 1;
    transform: scale(1);
}
.film-hero-trailer iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.film-hero-trailer-close {
    position: absolute;
    top: clamp(14px, 2vw, 26px);
    right: clamp(14px, 2vw, 26px);
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(244, 241, 236, .3);
    background: rgba(10, 10, 12, .6);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s, border-color .2s, color .2s;
}
.film-hero-trailer-close:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Когда играет трейлер — притеняем подписи, чтобы не мешали видео */
.film-hero.is-playing-trailer .film-hero-body {
    opacity: .08;
    pointer-events: none;
    transition: opacity .5s ease;
}
.film-hero.is-playing-trailer .shade-l,
.film-hero.is-playing-trailer .shade-b {
    opacity: 0;
    transition: opacity .5s ease;
}

/* Кнопка "Трейлер" в actions — всегда видна поверх */
.film-hero.is-playing-trailer .film-hero-trailer-close {
    pointer-events: auto;
}


/* ============================================================
   HERO: видео-фон поверх постера (эффект PREMIER)
   iframe-трейлер растянут на весь .bg, скрыт до готовности.
   ============================================================ */

.bg.bg--video {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    overflow: hidden;
    pointer-events: auto;
}

.bg.bg--video.is-ready {
    opacity: 1;
    pointer-events: auto;
}

.bg.bg--video iframe,
.bg.bg--video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: cover;
}

/* Поверх видео — затемнения и контент */
.film-hero {
    position: relative;
    overflow: hidden;
}
.film-hero > .bg:not(.bg--video) { z-index: 0; }
.film-hero > .bg.bg--video       { z-index: 1; }
.film-hero > .shade-l,
.film-hero > .shade-b             { z-index: 2; }
.film-hero > .film-hero-body      { z-index: 3; position: relative; }

/* Мобильный — автоплей часто блокируется, поэтому не рискуем */
@media (max-width: 819px) {
    .bg.bg--video { display: none !important; }
}

/* ============================================================
   HERO: видео-фон поверх постера (эффект PREMIER)
   ============================================================ */

.bg.bg--video {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: 0;
    transition: opacity 1.2s ease;
    overflow: hidden;
    pointer-events: none;
}
.bg.bg--video.is-ready {
    opacity: 1;
    pointer-events: auto;
}
.bg.bg--video iframe,
.bg.bg--video video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: cover;
}

.film-hero { position: relative; overflow: hidden; }
.film-hero > .bg:not(.bg--video) { z-index: 0; }
.film-hero > .bg.bg--video       { z-index: 1; }
.film-hero > .shade-l,
.film-hero > .shade-b             { z-index: 2; }
.film-hero > .film-hero-body      { z-index: 3; position: relative; }

@media (max-width: 819px) {
    .bg.bg--video { display: none !important; }
}

/* ============================================================
   HERO-ВИДЕО — дополнение (не перезаписывает существующее)
   YouTube-embed на фоне баннера, постер/текст поверх.
   ============================================================ */

/* Слой видео поверх постера-картинки */
.bg.bg--video {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
    z-index: 1;
}

/* iframe растянут на весь блок с сохранением 16:9 (обрезка) */
.bg.bg--video iframe,
.bg.bg--video video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    border: 0;
    background: #000;
}

/* Мобильный — не показываем (автоплей заблокирован) */
@media (max-width: 819px) {
    .bg.bg--video { display: none !important; }
}

/* ============================================================
   HERO — ЖЁСТКИЙ ПОРЯДОК СЛОЁВ (z-index)
   Постер → Видео → Затемнения → Текст
   ============================================================ */

.film-hero {
    position: relative !important;
    overflow: hidden !important;
}

/* 1. Постер-картинка — на самом дне */
.film-hero > .bg:not(.bg--video) {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

/* 2. Видео-слой — поверх постера */
.film-hero > .bg.bg--video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: #000 !important;
    overflow: hidden !important;
}

.film-hero > .bg.bg--video iframe,
.film-hero > .bg.bg--video video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    height: 56.25vw !important;
    min-width: 177.78vh !important;
    min-height: 100vh !important;
    transform: translate(-50%, -50%) !important;
    border: 0 !important;
    background: #000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. Затемнения — над видео */
.film-hero > .shade-l,
.film-hero > .shade-b {
    z-index: 3 !important;
}

/* 4. Контент (постер, текст, кнопки) — на самом верху */
.film-hero > .film-hero-body {
    position: relative !important;
    z-index: 4 !important;
}

/* ============================================================
   HERO-ВИДЕО — ФОРС-ФИКС
   Явно перекрываем всё, что могло спрятать видео.
   ============================================================ */

html body .film-hero > div.bg.bg--video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: #000 !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
}

html body .film-hero > div.bg.bg--video > iframe,
html body .film-hero > div.bg.bg--video > video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    height: 56.25vw !important;
    min-width: 177.78vh !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%) !important;
    border: 0 !important;
    background: #000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Постер-фон снизу */
html body .film-hero > div.bg:not(.bg--video) {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

/* Затемнения и текст — поверх видео */
html body .film-hero > .shade-l,
html body .film-hero > .shade-b {
    z-index: 3 !important;
}
html body .film-hero > .film-hero-body {
    position: relative !important;
    z-index: 4 !important;
}

/* ============================================================
   HERO-ВИДЕО — плавное появление + возврат постера
   ============================================================ */

/* Изначально видео прозрачное — виден постер */
html body .film-hero > div.bg.bg--video {
    opacity: 0 !important;
    transition: opacity 1.2s ease !important;
}

/* Когда скрипт добавит класс is-ready — плавно проявляем */
html body .film-hero > div.bg.bg--video.is-ready {
    opacity: 1 !important;
}

/* Когда трейлер закончился — снова прячем (класс is-done) */
html body .film-hero > div.bg.bg--video.is-done {
    opacity: 0 !important;
}

/* Скрываем iframe до готовности, чтобы не мелькал */
html body .film-hero > div.bg.bg--video > iframe {
    pointer-events: none !important;
}
html body .film-hero > div.bg.bg--video.is-ready > iframe {
    pointer-events: auto !important;
}

/* ============================================================
   PLAYER SHELL v2 — современный блок плееров
   Слева — список источников, справа — плеер в карточке
   ============================================================ */

.player-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(16px, 2vw, 28px);
    align-items: start;
}

@media (max-width: 899px) {
    .player-shell {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ЛЕВЫЙ СТОЛБЕЦ — список плееров
   ============================================================ */

.player-sources {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    position: sticky;
    top: calc(var(--top) + 20px);
}

@media (max-width: 899px) {
    .player-sources {
        position: relative;
        top: 0;
        padding: 12px;
    }
}

.player-sources__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 10px;
    border-bottom: 1px solid var(--line);
}

.player-sources__count {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
}

.player-sources__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 899px) {
    .player-sources__list {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .player-sources__list::-webkit-scrollbar { height: 4px; }
    .player-sources__list::-webkit-scrollbar-thumb {
        background: rgba(244,241,236,.15);
        border-radius: 2px;
    }
}

/* Карточка источника */
.source-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background .2s, border-color .2s, transform .15s;
    min-width: 0;
}

@media (max-width: 899px) {
    .source-card {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-width: 160px;
        padding: 8px 12px;
    }
}

.source-card:hover {
    background: rgba(244,241,236,.04);
    transform: translateX(2px);
}

.source-card.active {
    background: linear-gradient(135deg, rgba(160,0,255,.14), rgba(160,0,255,.04));
    border-color: rgba(160,0,255,.35);
    box-shadow: 0 6px 20px -8px rgba(160,0,255,.5);
}

.source-card.active:hover {
    transform: none;
}

/* Иконка */
.source-card__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(244,241,236,.06);
    color: var(--muted);
    font-size: 15px;
    transition: background .2s, color .2s, transform .2s;
}

.source-card.active .source-card__icon {
    background: var(--accent);
    color: var(--bg);
    transform: scale(1.05);
    box-shadow: 0 4px 12px -4px rgba(160,0,255,.6);
}

.source-card:hover .source-card__icon {
    color: var(--text);
}

/* Тело */
.source-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.source-card__body b {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-card__body small {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-card.active .source-card__body small {
    color: var(--accent3);
}

/* Пульсирующая точка на активном */
.source-card__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    transition: opacity .2s;
}

.source-card.active .source-card__dot {
    background: var(--accent);
    opacity: 1;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(160,0,255,.7); }
    50% { box-shadow: 0 0 0 6px rgba(160,0,255,0); }
}

/* ============================================================
   ПРАВАЯ ЧАСТЬ — плеер
   ============================================================ */

.player-stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.player-frame {
    position: relative;
    padding: 8px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(160,0,255,.22), rgba(244,241,236,.04) 45%, transparent);
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(244,241,236,.04) inset;
    overflow: hidden;
}

.player-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 60% 100% at 0% 0%, rgba(160,0,255,.08), transparent 60%);
    pointer-events: none;
}

.player-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    min-height: clamp(180px, 45vw, 620px);
}

.player-slide {
    display: none;
}
.player-slide.active {
    display: block;
    animation: playerFade .4s ease both;
}

@keyframes playerFade {
    0% { opacity: 0; transform: scale(.98); }
    100% { opacity: 1; transform: none; }
}

.player-slide .player {
    aspect-ratio: 16/9;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    background: #000;
}

.player-slide iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================================
   Панель под плеером
   ============================================================ */

.player-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(244,241,236,.03);
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 640px) {
    .player-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

.player-meta__info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
}

.player-meta__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 14px -4px rgba(160,0,255,.7);
}

.player-meta__hint {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.player-meta__actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.player-meta__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.14);
    color: var(--dim);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
}

.player-meta__btn:hover {
    background: rgba(160,0,255,.12);
    border-color: rgba(160,0,255,.4);
    color: var(--accent);
}

/* ============================================================
   Светлая тема
   ============================================================ */

[data-theme="light"] .player-sources {
    background: rgba(255,255,255,.7);
    border-color: rgba(26,26,28,.06);
}

[data-theme="light"] .source-card {
    color: var(--text);
}

[data-theme="light"] .source-card:hover {
    background: rgba(26,26,28,.04);
}

[data-theme="light"] .source-card.active {
    background: linear-gradient(135deg, rgba(122,40,168,.12), rgba(122,40,168,.02));
    border-color: rgba(122,40,168,.3);
}

[data-theme="light"] .source-card__icon {
    background: rgba(26,26,28,.05);
}

[data-theme="light"] .player-frame {
    background: linear-gradient(135deg, rgba(122,40,168,.12), rgba(26,26,28,.02) 45%, transparent);
    border-color: rgba(26,26,28,.06);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.15);
}

[data-theme="light"] .player-meta {
    background: rgba(26,26,28,.03);
    border-color: rgba(26,26,28,.06);
}

[data-theme="light"] .player-meta__hint {
    color: var(--muted);
}

[data-theme="light"] .player-meta__btn {
    border-color: rgba(26,26,28,.14);
    color: var(--dim);
}

[data-theme="light"] .player-meta__btn:hover {
    background: rgba(122,40,168,.1);
    border-color: rgba(122,40,168,.4);
    color: var(--accent);
}

/* ============================================================
   PLAYER v2 — ПОЛНАЯ АДАПТАЦИЯ (планшет, мобильный)
   ============================================================ */

/* ===== Планшет (600–899px) ===== */
@media (max-width: 899px) and (min-width: 600px) {
    .player-shell {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .player-sources {
        position: relative;
        top: 0;
        padding: 10px;
        border-radius: 20px;
    }

    .player-sources__head {
        padding: 2px 6px 10px;
    }

    .player-sources__list {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 2px 0 6px;
        scrollbar-width: none;
    }
    .player-sources__list::-webkit-scrollbar { display: none; }

    .source-card {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-width: 170px;
        padding: 10px 12px;
        border-radius: 14px;
        gap: 10px;
    }

    .source-card__icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 13px;
    }

    .source-card__body b { font-size: 13px; }
    .source-card__body small { font-size: 11px; }

    .player-frame {
        padding: 6px;
        border-radius: 22px;
    }

    .player-wrap {
        border-radius: 17px;
        min-height: auto;
    }
}

/* ===== Мобильный (до 600px) ===== */
@media (max-width: 599px) {
    .player-shell {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Список источников — «пилюли» в скролле */
    .player-sources {
        position: relative;
        top: 0;
        padding: 8px;
        border-radius: 18px;
        background: rgba(244,241,236,.03);
        border-color: rgba(244,241,236,.06);
    }

    .player-sources__head {
        display: none; /* не нужен на мобиле — экономим место */
    }

    .player-sources__list {
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 2px 0 4px;
        scrollbar-width: none;
        margin: 0 -4px; /* компенсируем внутренний padding */
    }
    .player-sources__list::-webkit-scrollbar { display: none; }

    /* Карточка-пилюля */
    .source-card {
        flex: 0 0 auto;
        scroll-snap-align: start;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px 6px 8px;
        border-radius: 999px;
        background: rgba(244,241,236,.04);
        border: 1px solid rgba(244,241,236,.08);
        min-width: auto;
        transition: background .2s, border-color .2s;
    }

    .source-card:hover,
    .source-card:active {
        transform: none;
        background: rgba(244,241,236,.07);
    }

    .source-card.active {
        background: linear-gradient(135deg, rgba(160,0,255,.2), rgba(160,0,255,.05));
        border-color: rgba(160,0,255,.5);
        box-shadow: 0 4px 14px -4px rgba(160,0,255,.5);
    }

    .source-card__icon {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        font-size: 11px;
    }

    .source-card__body {
        display: inline-flex;
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
    }

    .source-card__body b {
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .source-card__body small {
        display: none; /* скрываем подпись на мобиле */
    }

    .source-card__dot {
        display: none; /* убираем пульсирующую точку — экономим место */
    }

    /* Плеер — edge-to-edge, без внутреннего padding */
    .player-frame {
        padding: 0;
        border-radius: 16px;
        background: transparent;
        box-shadow: 0 14px 40px -16px rgba(0,0,0,.6);
        border: 1px solid rgba(244,241,236,.06);
    }

    .player-frame::before {
        display: none;
    }

    .player-wrap {
        border-radius: 16px;
        min-height: auto;
    }

    /* Панель под плеером — компактная */
    .player-meta {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(244,241,236,.03);
    }

    .player-meta__info {
        gap: 8px;
        align-items: center;
    }

    .player-meta__badge {
        font-size: 10px;
        padding: 3px 9px;
    }

    .player-meta__hint {
        font-size: 11px;
        white-space: normal;
        line-height: 1.3;
        color: var(--muted);
    }

    .player-meta__actions {
        width: 100%;
    }

    .player-meta__btn {
        flex: 1;
        justify-content: center;
        height: 32px;
        font-size: 12px;
    }
}

/* ===== Очень узкие экраны (до 380px) ===== */
@media (max-width: 380px) {
    .source-card {
        padding: 5px 10px 5px 6px;
        gap: 5px;
    }

    .source-card__icon {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .source-card__body b {
        font-size: 11px;
    }

    .player-meta__badge {
        font-size: 9px;
        padding: 2px 8px;
    }

    .player-meta__hint {
        font-size: 10px;
    }
}

/* ============================================================
   Светлая тема — мобильная адаптация
   ============================================================ */
[data-theme="light"] .player-sources {
    background: rgba(255,255,255,.7);
}

@media (max-width: 599px) {
    [data-theme="light"] .player-sources {
        background: rgba(26,26,28,.03);
    }

    [data-theme="light"] .source-card {
        background: rgba(26,26,28,.03);
        border-color: rgba(26,26,28,.06);
    }

    [data-theme="light"] .source-card.active {
        background: linear-gradient(135deg, rgba(122,40,168,.14), rgba(122,40,168,.02));
        border-color: rgba(122,40,168,.4);
    }

    [data-theme="light"] .player-frame {
        background: transparent;
        border-color: rgba(26,26,28,.06);
        box-shadow: 0 14px 40px -16px rgba(0,0,0,.15);
    }

    [data-theme="light"] .player-meta {
        background: rgba(26,26,28,.03);
    }
}

/* ============================================================
   PLAYER — ЖЁСТКИЙ ФИКС ПЕРЕПОЛНЕНИЯ ПО ШИРИНЕ
   Работает на любой ширине экрана.
   ============================================================ */

/* 1. Ничего не выходит за пределы окна */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* 2. Все секции и блоки плеера — max-width 100% */
.watch-page,
.player-shell,
.player-sources,
.player-sources__list,
.player-stage,
.player-frame,
.player-wrap,
.player-slide,
.player-slide .player,
.player-meta {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* 3. Iframe всегда вписан в контейнер */
.player-slide iframe,
.player iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
}

/* 4. player-wrap — соотношение 16:9 без overflow */
.player-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.player-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.player-slide.active {
    position: relative !important;
}

/* 5. Мобильная адаптация — ещё жёстче */
@media (max-width: 899px) {
    .player-frame {
        padding: 0 !important;
        border-radius: 16px !important;
    }

    .player-wrap {
        border-radius: 16px !important;
    }

    .player-shell {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .player-sources__list {
        margin: 0 !important;
        padding: 2px 0 4px !important;
    }
}

/* 6. Если где-то ещё grid-flex вылезает — общее правило */
@media (max-width: 899px) {
    .film-main,
    .section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }
}

/* ============================================================
   Мобильная полировка — аккуратные отступы, читаемость
   ============================================================ */

@media (max-width: 599px) {
    /* Секция плееров — компактные внешние отступы */
    .watch-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 12px !important;
    }

    /* Заголовок "Смотреть онлайн" — компактнее */
    .watch-page .section-head .h2 {
        font-size: 20px !important;
    }

    .watch-page .eyebrow {
        font-size: 10px !important;
        letter-spacing: .15em !important;
    }

    /* Плеер — без лишних отступов */
    .player-frame {
        padding: 0 !important;
        border-radius: 14px !important;
        border-width: 1px !important;
        box-shadow: 0 10px 30px -14px rgba(0,0,0,.6) !important;
    }

    .player-wrap {
        border-radius: 14px !important;
    }

    /* Список плееров — с "дышащим" отступом от краёв */
    .player-sources {
        padding: 6px 8px !important;
        border-radius: 16px !important;
    }

    .player-sources__list {
        gap: 6px !important;
        padding: 2px 0 2px !important;
    }

    /* Пилюли плееров — аккуратные */
    .source-card {
        padding: 5px 11px 5px 6px !important;
        gap: 6px !important;
    }

    .source-card__icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .source-card__body b {
        font-size: 12px !important;
        letter-spacing: .01em !important;
    }

    /* Панель под плеером — минимализм */
    .player-meta {
        padding: 9px 11px !important;
        border-radius: 12px !important;
        gap: 7px !important;
    }

    .player-meta__badge {
        font-size: 10px !important;
        padding: 3px 9px !important;
        letter-spacing: .03em !important;
    }

    .player-meta__hint {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .player-meta__btn {
        height: 30px !important;
        font-size: 11.5px !important;
        padding: 0 12px !important;
    }
}

/* Тонкие экраны (iPhone SE, старые андроиды) */
@media (max-width: 380px) {
    .watch-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .player-sources {
        padding: 5px 6px !important;
    }

    .source-card {
        padding: 4px 9px 4px 5px !important;
        gap: 5px !important;
    }

    .source-card__icon {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
    }

    .source-card__body b {
        font-size: 11px !important;
    }

    .player-meta__hint {
        font-size: 10.5px !important;
    }
}

/* Отключаем "левитацию" тапов на тач-экранах (уберет двойной tap-zoom) */
.source-card,
.player-meta__btn {
    touch-action: manipulation;
}

/* ============================================================
   ФИКС: горизонтальные скролл-ряды не выходят за пределы main
   ============================================================ */

/* Родитель main обрезает всё по горизонтали */
.main {
    overflow-x: clip !important;
    max-width: 100vw !important;
}

/* Ряды (похожие, актёры, etc.) выходят за пределы только внутри своей полосы */
.row {
    max-width: 100vw !important;
    overflow-x: auto !important;
}

/* На мобиле bleed-ряды — с компенсацией padding */
@media (max-width: 899px) {
    .row.bleed {
        margin-left: -12px !important;
        margin-right: -12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100vw !important;
    }
}

/* ============================================================
   ГАЛЕРЕЯ КАДРОВ (frames-gallery) + МОДАЛКА (lightbox-v2)
   Современно, красиво, свайпы, клавиатура
   ============================================================ */

/* Сетка превью */
.frames-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}

/* Карточка кадра */
.frame-card {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    background-color: var(--card);
    background-size: cover;
    background-position: center;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, filter .35s;
    isolation: isolate;
}

.frame-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(10,10,12,.55));
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}

.frame-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 24px 50px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(160,0,255,.35);
    filter: brightness(1.05);
}

.frame-card:hover::after {
    opacity: 1;
}

/* Блик */
.frame-card__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.15) 45%, transparent 60%);
    transform: translateX(-100%);
    transition: transform .8s ease;
    pointer-events: none;
}
.frame-card:hover .frame-card__shine {
    transform: translateX(100%);
}

/* Иконка zoom в углу */
.frame-card__zoom {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(10,10,12,.55);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.frame-card:hover .frame-card__zoom {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   LIGHTBOX-V2 (модалка)
   ============================================================ */

.lightbox-v2 {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .35s ease;
    padding: 40px 40px 90px;
    box-sizing: border-box;
}

.lightbox-v2.is-open {
    opacity: 1;
}

.lightbox-v2[hidden] { display: none; }

/* Фон затемнённый */
.lightbox-v2__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 8, .88);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    cursor: zoom-out;
}

/* Слой картинки */
.lightbox-v2__stage {
    position: relative;
    width: min(100%, 1400px);
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.lightbox-v2__image {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 14px;
    background: #000 center/contain no-repeat;
    box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(244,241,236,.08);
    transform: scale(.96);
    opacity: 0;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s;
    will-change: transform, opacity;
}
.lightbox-v2__image.is-active {
    transform: scale(1);
    opacity: 1;
}

/* Кнопки */
.lightbox-v2__close,
.lightbox-v2__nav {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.18);
    background: rgba(20,20,24,.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
    font-size: 18px;
}
.lightbox-v2__close:hover,
.lightbox-v2__nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

.lightbox-v2__close {
    top: 24px;
    right: 24px;
}

.lightbox-v2__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-v2__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }

.lightbox-v2__nav--prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-v2__nav--next:hover { transform: translateY(-50%) scale(1.05); }

/* Подпись внизу */
.lightbox-v2__caption {
    position: absolute;
    bottom: 110px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    color: #fff;
}

.lightbox-v2__counter {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(20,20,24,.6);
    backdrop-filter: blur(12px);
}

.lightbox-v2__hint {
    font-size: 11px;
    color: rgba(244,241,236,.5);
    letter-spacing: .04em;
}

/* Превьюшки внизу */
.lightbox-v2__thumbs {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
    max-width: calc(100% - 48px);
    overflow-x: auto;
    padding: 8px;
    border-radius: 16px;
    background: rgba(20,20,24,.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    scrollbar-width: none;
}
.lightbox-v2__thumbs::-webkit-scrollbar { display: none; }

.lightbox-v2__thumb {
    flex: 0 0 auto;
    width: 68px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid rgba(244,241,236,.15);
    background: #000 center/cover no-repeat;
    cursor: pointer;
    padding: 0;
    opacity: .55;
    transition: opacity .2s, transform .2s, border-color .2s;
}
.lightbox-v2__thumb:hover {
    opacity: .9;
    transform: translateY(-2px);
}
.lightbox-v2__thumb.is-active {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 6px 16px -6px rgba(160,0,255,.7);
}

/* Блокировка скролла при открытой модалке */
body.no-scroll {
    overflow: hidden;
}

/* ============================================================
   Мобильная адаптация
   ============================================================ */

@media (max-width: 819px) {
    .frames-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .lightbox-v2 {
        padding: 20px 14px 100px;
    }
    .lightbox-v2__close { top: 12px; right: 12px; width: 42px; height: 42px; }
    .lightbox-v2__nav--prev { left: 8px; }
    .lightbox-v2__nav--next { right: 8px; }
    .lightbox-v2__nav { width: 42px; height: 42px; }

    .lightbox-v2__caption { bottom: 96px; }
    .lightbox-v2__thumbs { bottom: 14px; padding: 6px; gap: 6px; }
    .lightbox-v2__thumb { width: 56px; height: 38px; border-radius: 8px; }
}

@media (max-width: 480px) {
    .lightbox-v2__nav--prev { left: 6px; }
    .lightbox-v2__nav--next { right: 6px; }
    .lightbox-v2__nav { width: 38px; height: 38px; font-size: 15px; }
    .lightbox-v2__close { width: 38px; height: 38px; }

    .lightbox-v2__hint { display: none; }
    .lightbox-v2__thumb { width: 48px; height: 32px; }
}

/* Светлая тема */
[data-theme="light"] .frame-card:hover {
    box-shadow: 0 24px 50px -20px rgba(0,0,0,.25), 0 0 0 1px rgba(122,40,168,.35);
}
[data-theme="light"] .lightbox-v2__backdrop {
    background: rgba(247,244,239,.92);
}
[data-theme="light"] .lightbox-v2__close,
[data-theme="light"] .lightbox-v2__nav {
    background: rgba(255,255,255,.85);
    border-color: rgba(26,26,28,.15);
    color: var(--text);
}
[data-theme="light"] .lightbox-v2__close:hover,
[data-theme="light"] .lightbox-v2__nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
[data-theme="light"] .lightbox-v2__counter {
    background: rgba(255,255,255,.85);
    color: var(--text);
}
[data-theme="light"] .lightbox-v2__thumbs {
    background: rgba(255,255,255,.85);
}
[data-theme="light"] .lightbox-v2__thumb {
    border-color: rgba(26,26,28,.12);
}

/* ============================================================
   ФИКС STICKY ДЛЯ ТАБОВ (Обзор / Кадры / Смотреть...)
   overflow-x: hidden ломает sticky у потомков.
   Меняем на overflow-x: clip — он не ломает sticky.
   ============================================================ */

html {
    overflow-x: clip !important;   /* было hidden — ломало sticky */
}

body {
    overflow-x: clip !important;   /* было hidden — ломало sticky */
}

.main {
    overflow-x: clip !important;   /* было clip — оставляем */
}

/* Секция табов — вернуть sticky */
.tabs-wrap {
    position: sticky !important;
    top: var(--top, 92px) !important;
    z-index: 50 !important;
    padding: 0 var(--pad) !important;
    background: transparent;
}

/* Внутри .tabs — стилизуем как раньше */
.tabs-wrap .tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px;
    border-radius: 999px;
    background: rgba(20,20,24,.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    width: max-content;
    max-width: 100%;
}

.tabs-wrap .tabs::-webkit-scrollbar {
    display: none;
}

/* На мобиле — фиксируем сверху под шапку с учётом --top */
@media (max-width: 819px) {
    .tabs-wrap {
        top: var(--top, 76px) !important;
    }
}

/* Светлая тема */
[data-theme="light"] .tabs-wrap .tabs {
    background: rgba(255,255,255,.85);
}

/* ============================================================
   ФИНАЛЬНАЯ ПАЛИТРА ФИОЛЕТОВОГО (по мотивам Sinemagic)
   Поверх всего, на всякий случай.
   ============================================================ */

:root {
    --accent: #A000FF;
    --accent2: #CE5EFF;
    --accent3: #E4A8FF;
    --accent-strong: #CE5EFF;
    --accent-soft: rgba(160, 0, 255, .14);
    --accent-hover-soft: rgba(160, 0, 255, .22);
    --accent-ink: #0A0A0C;
    --rose-soft: rgba(160, 0, 255, .12);
    --rose-ink: #E4A8FF;
    --rose-hover: rgba(160, 0, 255, .2);
    --negative: #E4A8FF;
    --negative-soft: rgba(160, 0, 255, .14);
}

[data-theme="light"] {
    --accent: #7A28A8;
    --accent2: #8B33C5;
    --accent3: #6B2296;
    --accent-strong: #7A28A8;
    --accent-soft: rgba(122, 40, 168, .12);
    --accent-ink: #FFFFFF;
    --rose-soft: rgba(122, 40, 168, .1);
    --rose-ink: #8B33C5;
    --rose-hover: rgba(122, 40, 168, .18);
    --negative: #8B33C5;
    --negative-soft: rgba(122, 40, 168, .12);
}

/* Кнопка «Смотреть онлайн» */
.btn-watch {
    background: #A000FF !important;
    color: #fff !important;
    box-shadow: 0 14px 34px -12px rgba(160, 0, 255, .7) !important;
}
.btn-watch:hover {
    background: #CE5EFF !important;
    color: #fff !important;
}

/* Логотип */
.logo-mark {
    background: #A000FF !important;
}

/* Тег «Выбор редакции» */
.tag.accent {
    background: #A000FF !important;
    color: #fff !important;
}

/* Активный таб плеера */
.opt-chip.active,
.tabs button.active {
    background: #A000FF !important;
    color: #fff !important;
    border-color: #A000FF !important;
}

/* Активный source-card */
.source-card.active {
    background: linear-gradient(135deg, rgba(160, 0, 255, .16), rgba(160, 0, 255, .03)) !important;
    border-color: rgba(160, 0, 255, .45) !important;
    box-shadow: 0 6px 20px -8px rgba(160, 0, 255, .55) !important;
}
.source-card.active .source-card__icon {
    background: #A000FF !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -4px rgba(160, 0, 255, .6) !important;
}
.source-card.active .source-card__dot {
    background: #A000FF !important;
    animation: pulse-dot-purple 2s ease-in-out infinite !important;
}
@keyframes pulse-dot-purple {
    0%, 100% { box-shadow: 0 0 0 0 rgba(160, 0, 255, .7); }
    50% { box-shadow: 0 0 0 6px rgba(160, 0, 255, 0); }
}

/* Бейдж «Плеер №1» */
.player-meta__badge {
    background: #A000FF !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px rgba(160, 0, 255, .7) !important;
}

/* Eyebrow */
.eyebrow {
    color: #CE5EFF !important;
}

/* Ссылки hover */
a:hover {
    color: #CE5EFF;
}

/* Кнопки-кружки ON */
.btn-round.on,
.btn-round[aria-pressed="true"],
.add-btn.on {
    background: rgba(160, 0, 255, .18) !important;
    border-color: rgba(160, 0, 255, .6) !important;
    color: #CE5EFF !important;
}

/* Фокус */
:focus-visible {
    outline: 2px solid #CE5EFF !important;
}

/* Переключатель темы */
.theme-toggle:hover {
    color: #CE5EFF !important;
}

/* Светлая тема — светлый фон лого-марки */
[data-theme="light"] .logo-mark,
[data-theme="light"] .btn-watch,
[data-theme="light"] .tag.accent,
[data-theme="light"] .opt-chip.active,
[data-theme="light"] .tabs button.active,
[data-theme="light"] .player-meta__badge {
    background: #7A28A8 !important;
    color: #fff !important;
}

/* ============================================================
   РЕЦЕНЗИИ — разделение списка и формы
   ============================================================ */

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reviews-list:empty {
    display: none;
}

/* Форма комментариев — с отступом сверху, отдельная карточка */
.review-form-wrap {
    margin-top: 24px;
}

.review-form {
    margin: 0;
}

/* Аватар-ссылка на профиль */
/* Пустой блок — красивее */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 24px;
    margin-top: 12px;
    border-radius: 24px;
    background: var(--surface);
    border: 1px dashed var(--line2);
    text-align: center;
}

.empty i {
    font-size: 36px;
    color: var(--muted);
}

.empty b {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--text);
}

.empty span {
    font-size: 15px;
    color: var(--muted);
    max-width: 420px;
    line-height: 1.5;
}

/* Светлая тема */
[data-theme="light"] .empty {
    background: rgba(26,26,28,.02);
    border-color: rgba(26,26,28,.1);
}

/* ============================================================
   РЕЦЕНЗИИ — правильный порядок и аватар
   ============================================================ */

/* Обёртка аватара — всегда 42x42 */
/* Действия в шапке — справа, в одну строку */
.review-head > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

/* Компактные кнопки действий */
.review-actions .pill-btn {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    gap: 5px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.14);
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    transition: all .18s;
}

.review-actions .pill-btn:hover {
    background: rgba(160,0,255,.12);
    border-color: rgba(160,0,255,.4);
    color: var(--accent2);
}

.review-actions .pill-btn i {
    font-size: 11px;
    width: auto;
}

/* На мобильном — переносим кнопки вниз */
@media (max-width: 719px) {
        }

/* Рейтинг-число */
.review-score__btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.14);
    color: var(--muted);
    transition: all .18s;
}

.review-score__btn:hover {
    background: rgba(160,0,255,.12);
    border-color: rgba(160,0,255,.4);
    color: var(--accent2);
}

/* Текст комментария */
.review-text > p {
    margin: 0 0 10px;
}

.review-text > p:last-child {
    margin-bottom: 0;
}

/* Карточка комментария */
.review:hover {
    border-color: rgba(160,0,255,.25);
}

/* Светлая тема */
[data-theme="light"] [data-theme="light"] .review-actions .pill-btn:hover,
[data-theme="light"] .review-score__btn:hover {
    background: rgba(122,40,168,.1);
    border-color: rgba(122,40,168,.35);
    color: var(--accent);
}

/* ============================================================
   РЕЦЕНЗИИ — ТОЧНАЯ РАСКЛАДКА: 3 КОЛОНКИ
   Аватар | Имя+дата | Кнопки
   ============================================================ */

.review:hover {
    border-color: rgba(160,0,255,.25);
}

/* 1. Аватар — фиксирован */
.review-av-wrap > a {
    display: block;
    width: 42px;
    height: 42px;
    text-decoration: none;
}

/* 2. Имя + дата — растягивается */
.review-head > div:nth-child(2) {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}

.review-head > div:nth-child(2) > b {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-head > div:nth-child(2) > b a {
    color: var(--text);
    text-decoration: none;
}

.review-head > div:nth-child(2) > b a:hover {
    color: var(--accent2);
}

.review-head > div:nth-child(2) > small {
    font-size: 12px;
    color: var(--muted);
    line-height: 1;
}

/* 3. Кнопки — фиксированы, в одну строку */
/* Кнопки-пилюли — компактные */
.review-actions .pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.12);
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
}

.review-actions .pill-btn:hover {
    background: rgba(160,0,255,.12);
    border-color: rgba(160,0,255,.4);
    color: var(--accent2);
}

.review-actions .pill-btn i {
    font-size: 11px;
    width: auto;
}

/* Рейтинг-чип */
.review-score__btn {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    transition: all .18s;
}

.review-score__btn:hover {
    color: var(--accent);
    background: rgba(160,0,255,.12);
}

/* Прячем пустой wrapper-хвост от DLE */
.review-actions > a:empty {
    display: none;
}

/* Текст коммента */
@media (max-width: 640px) {
    }

.review-text > p {
    margin: 0 0 10px;
}
.review-text > p:last-child {
    margin-bottom: 0;
}

/* Служебные пустые ссылки от DLE — скрыть */
.review-actions > a[onmouseover]:empty,
.review-actions > a[onclick*="dle_copy_quote"]:empty {
    display: none;
}

.review-head > div:nth-child(2) > b > a + a {
    display: none;   /* второй `<a>` для not-profile — скрыть */
}

/* Мобильная раскладка — кнопки переносятся вниз */
@media (max-width: 719px) {
            .review-head > div:nth-child(2) {
        max-width: calc(100% - 54px);
    }
}

@media (max-width: 480px) {
    }

/* Светлая тема */
[data-theme="light"] [data-theme="light"] .review-actions .pill-btn:hover {
    background: rgba(122,40,168,.1);
    border-color: rgba(122,40,168,.35);
    color: var(--accent);
}
[data-theme="light"] /* ============================================================
   РЕЦЕНЗИИ — ФИКС (правильная раскладка без вложенных <a>)
   ============================================================ */

/* DLE вставляет <a> вокруг кнопок — делаем их невидимыми обёртками */
.review-actions > a:has(> .pill-btn),
.review-actions > a:has(> .review-score__btn),
.review-head > b > a + a {
    display: contents !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Пустые ссылки от DLE (без контента) — скрыть */
.review-actions > a:empty {
    display: none !important;
}

/* Карточка отзыва */
.review:hover {
    border-color: rgba(160,0,255,.25) !important;
}

/* Шапка: аватар | имя+дата | кнопки */
/* Аватар — фиксирован */
/* Имя + дата — растягиваются */
.review-meta,
.review-head > div:nth-child(2) {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding-top: 3px !important;
}

.review-meta > b,
.review-head > div:nth-child(2) > b {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.review-meta > b a,
.review-head > div:nth-child(2) > b a {
    color: var(--text) !important;
    text-decoration: none !important;
}

.review-meta > small,
.review-head > div:nth-child(2) > small {
    font-size: 12px !important;
    color: var(--muted) !important;
    line-height: 1 !important;
}

/* Кнопки — справа, в строку */
/* Пилюли кнопок */
.review-actions .pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(244,241,236,.12) !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all .18s !important;
}

.review-actions .pill-btn:hover {
    background: rgba(160,0,255,.12) !important;
    border-color: rgba(160,0,255,.4) !important;
    color: var(--accent2) !important;
}

.review-actions .pill-btn i {
    font-size: 11px !important;
    width: auto !important;
}

/* Рейтинг */
.review-score__btn {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--muted) !important;
    transition: all .18s !important;
}

.review-score__btn:hover {
    color: var(--accent) !important;
    background: rgba(160,0,255,.12) !important;
}

/* Текст комментария */
.review-text > p { margin: 0 0 10px !important; }
.review-text > p:last-child { margin-bottom: 0 !important; }

@media (max-width: 640px) {
                .review-meta,
    .review-head > div:nth-child(2) {
        max-width: calc(100% - 54px) !important;
    }
}

@media (max-width: 480px) {
    }

/* Светлая тема */
[data-theme="light"] [data-theme="light"] .review-actions .pill-btn:hover {
    background: rgba(122,40,168,.1) !important;
    border-color: rgba(122,40,168,.35) !important;
    color: var(--accent) !important;
}
[data-theme="light"]
/* ============================================================
   РЕЦЕНЗИИ — ФИНАЛЬНАЯ РАСКЛАДКА (чистые правила)
   ============================================================ */

/* DLE сам оборачивает [fast]/[com-edit]/[com-del]/[rating-plus] в <a>.
   Мы скрываем эти <a> из потока — рендерим только .pill-btn. */
.review-actions > a:has(> .pill-btn),
.review-actions > a:has(> .review-score__btn),
.review-actions a:has(> span.pill-btn) {
    display: contents !important;
    color: inherit !important;
    text-decoration: none !important;
}

.review-actions > a:empty {
    display: none !important;
}

/* --- Карточка --- */
.review {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: clamp(16px, 2vw, 22px) !important;
    border-radius: 20px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    transition: border-color .25s !important;
    min-width: 0;
}

.review:hover {
    border-color: rgba(160,0,255,.25) !important;
}

/* --- Шапка: аватар | имя+дата | кнопки --- */
.review-head {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: flex-start !important;
    gap: 14px !important;
    /* min-width: 0; */ 0; */
}

/* --- 1. Аватар --- */
.review-av-wrap {
    grid-column: 1;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
}

.review-av-wrap > a {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
}

.review-av {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--card) center/cover no-repeat !important;
    background-position: center 20% !important;
    box-shadow: 0 0 0 1px rgba(160,0,255,.15);
}

/* --- 2. Имя + дата --- */
.review-meta,
.review-head > div:nth-child(2) {
    grid-column: 2;
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding-top: 4px;
}

.review-meta > b,
.review-head > div:nth-child(2) > b {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.review-meta > b a,
.review-head > div:nth-child(2) > b a {
    color: var(--text) !important;
    text-decoration: none !important;
}

.review-meta > b a:hover {
    color: var(--accent2) !important;
}

.review-meta > small,
.review-head > div:nth-child(2) > small {
    font-size: 12px !important;
    color: var(--muted) !important;
    line-height: 1.2;
}

/* --- 3. Кнопки — справа, по ВЕРХУ шапки --- */
.review-actions {
    grid-column: 3;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    align-self: flex-start !important;
    margin: 0 !important;
    max-width: 100%;
}

/* Компактные чипы */
.review-actions .pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(244,241,236,.12) !important;
    background: rgba(244,241,236,.03) !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all .18s !important;
}

.review-actions .pill-btn:hover {
    background: rgba(160,0,255,.12) !important;
    border-color: rgba(160,0,255,.4) !important;
    color: var(--accent2) !important;
}

.review-actions .pill-btn i {
    font-size: 11px !important;
    width: auto !important;
}

/* Рейтинг-сердечко */
.review-score {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(244,241,236,.03) !important;
    border: 1px solid rgba(244,241,236,.12) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--dim) !important;
}

.review-score__btn {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    transition: all .18s !important;
}

.review-score__btn:hover {
    color: var(--accent) !important;
    background: rgba(160,0,255,.14) !important;
}

/* Чекбокс для массовых действий */
.review-actions .form-check-label,
.review-actions label.form-check-label {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.12);
    margin-left: 4px;
    cursor: pointer;
    transition: all .18s;
}

.review-actions input[type=checkbox] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    margin: 0;
}

/* --- Текст комментария --- */
.review-text {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--soft) !important;
    overflow-wrap: anywhere !important;
    padding-left: 62px !important;   /* аватар + gap */
    margin-top: -4px;
}

.review-text > p {
    margin: 0 0 10px !important;
}
.review-text > p:last-child { margin-bottom: 0 !important; }

.review-film {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.review-film a { color: var(--accent3); text-decoration: none; }
.review-film a:hover { color: var(--accent2); }

/* --- Мобильная раскладка --- */
@media (max-width: 719px) {
    .review-head {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        grid-template-rows: auto auto;
        gap: 10px !important;
    }

    .review-av-wrap { width: 44px; height: 44px; }
    .review-av, .review-av-wrap > a { width: 44px !important; height: 44px !important; }

    .review-actions {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-content: flex-start !important;
        margin-top: 4px !important;
    }

    .review-text {
        padding-left: 0 !important;
    }
}

@media (max-width: 480px) {
    .review-actions .pill-btn span:not(.fa-solid):not(.fa-regular):not(.fa-brands),
    .review-actions .pill-btn span {
        display: none !important;   /* только иконки на мелких экранах */
    }
    .review-actions .pill-btn {
        width: 34px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
}

/* --- Светлая тема --- */
[data-theme="light"] .review {
    background: rgba(255,255,255,.7) !important;
    border-color: rgba(26,26,28,.06) !important;
}
[data-theme="light"] .review-actions .pill-btn,
[data-theme="light"] .review-score {
    background: rgba(26,26,28,.03) !important;
    border-color: rgba(26,26,28,.1) !important;
    color: var(--dim) !important;
}
[data-theme="light"] .review-actions .pill-btn:hover {
    background: rgba(122,40,168,.1) !important;
    border-color: rgba(122,40,168,.35) !important;
    color: var(--accent) !important;
}

/* ============================================================
   СТАТИЧЕСКИЕ СТРАНИЦЫ (static.tpl)
   ============================================================ */

.staticpage {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding-top: clamp(110px, 11vw, 150px) !important;
    padding-bottom: clamp(40px, 5vw, 72px) !important;
}

.static-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.static-header .crumbs {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.static-header .crumbs a {
    color: var(--muted);
    text-decoration: none;
}

.static-header .crumbs a:hover {
    color: var(--accent2);
}

.static-header .crumbs b {
    color: var(--text);
    font-weight: 600;
}

.static-header .crumb-sep {
    color: var(--muted);
    opacity: .5;
}

.static-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Мета */
.static-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
}

.static-meta i {
    width: auto;
    font-size: 12px;
    margin-right: 4px;
}

/* Инструменты */
.static-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.static-tools .soft-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(244,241,236,.16);
    background: transparent;
    color: var(--dim);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
}

.static-tools .soft-button:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.static-tools .soft-button i {
    width: auto;
    font-size: 12px;
}

/* Контент */
.static-content {
    max-width: 920px;
    color: var(--soft);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.75;
    overflow-wrap: anywhere;
    min-width: 0;
}

.static-content h1,
.static-content h2,
.static-content h3,
.static-content h4 {
    font-family: var(--serif);
    color: var(--text);
    margin: 1.4em 0 .6em;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.static-content h2 { font-size: clamp(22px, 2vw, 28px); }
.static-content h3 { font-size: clamp(19px, 1.6vw, 22px); }

.static-content p { margin: 0 0 1em; }

.static-content a {
    color: var(--accent3);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.static-content a:hover {
    color: var(--accent2);
}

.static-content img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 1em 0;
}

.static-content ul,
.static-content ol {
    padding-left: 1.4em;
    margin: 0 0 1em;
}

.static-content li {
    margin: .35em 0;
}

.static-content blockquote {
    margin: 1.2em 0;
    padding: 16px 22px;
    border-left: 3px solid var(--accent);
    background: rgba(244,241,236,.03);
    border-radius: 0 14px 14px 0;
    color: var(--soft);
}

.static-content code {
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(244,241,236,.06);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .92em;
    color: var(--accent3);
}

.static-content pre {
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(244,241,236,.04);
    border: 1px solid var(--line);
    overflow-x: auto;
    font-size: .92em;
}

.static-content pre code {
    background: transparent;
    padding: 0;
    color: var(--text);
}

.static-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 1em 0;
}

.static-content th,
.static-content td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.static-content th {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}

/* Пагинация внутри статики */
.staticpage .pagination,
.staticpage .navigation {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 32px;
}

/* Светлая тема */
[data-theme="light"] .static-tools .soft-button {
    border-color: rgba(26,26,28,.14);
    color: var(--dim);
}
[data-theme="light"] .static-tools .soft-button:hover {
    background: rgba(122,40,168,.1);
    border-color: rgba(122,40,168,.35);
    color: var(--accent);
}
[data-theme="light"] .static-content blockquote {
    background: rgba(26,26,28,.03);
}
[data-theme="light"] .static-content code {
    background: rgba(26,26,28,.05);
}
[data-theme="light"] .static-content pre {
    background: rgba(26,26,28,.03);
    border-color: rgba(26,26,28,.08);
}

/* ============================================================
   FASTSEARCH — выпадающие подсказки под строкой поиска
   ============================================================ */

#searchsuggestions,
.fastsearch-suggestions,
div[id^="searchsuggestions"] {
    position: absolute;
    z-index: 90;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--line2);
    border-radius: 16px;
    box-shadow: var(--shadow-menu);
    padding: 6px;
}

#searchsuggestions a,
.fastsearch-suggestions a,
div[id^="searchsuggestions"] a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: background .15s;
    min-width: 0;
}

#searchsuggestions a:hover,
.fastsearch-suggestions a:hover,
div[id^="searchsuggestions"] a:hover {
    background: var(--accent-soft);
    color: var(--text);
}

.searchheading {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.searchsnippet {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Светлая тема */
[data-theme="light"] #searchsuggestions,
[data-theme="light"] .fastsearch-suggestions,
[data-theme="light"] div[id^="searchsuggestions"] {
    background: var(--surface);
    border-color: rgba(26,26,28,.1);
}
[data-theme="light"] #searchsuggestions a:hover,
[data-theme="light"] .fastsearch-suggestions a:hover,
[data-theme="light"] div[id^="searchsuggestions"] a:hover {
    background: rgba(122,40,168,.08);
}

/* ============================================================
   КАРТОЧКА — дополнительные badge (качество, эпизод)
   ============================================================ */

/* Качество видео — рядом с b-new (справа сверху) */
.pcard-img .b-qual {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(10,10,12,.7);
    backdrop-filter: blur(6px);
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Если есть и age и qual — qual уезжает ниже */
.pcard-img .b-new + .b-qual {
    top: 40px;
}

/* Серия/сезон — снизу справа */
/* [удалён старый .b-episode блок] */

/* Если есть b-dur (слева) — b-episode не мешает */
.pcard-img .b-episode + .b-dur,
/* [удалён] */

/* ============================================================
   КАРТОЧКА — кнопка "В список" (add-btn)
   ============================================================ */

.pcard-info .add-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,236,.22);
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .25s;
}

.pcard-info .add-btn:hover {
    border-color: var(--text);
    background: rgba(244,241,236,.05);
}

.pcard-info .add-btn.on {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.pcard-info .add-btn.on:hover {
    background: var(--accent);
    color: #fff;
}

/* Группировка с "спейсером" — чтобы кнопка ушла вправо */
.pcard-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pcard-info > div:first-child {
    flex: 1;
    min-width: 0;
}

/* Светлая тема */
[data-theme="light"] .b-qual {
    background: rgba(255,255,255,.7);
    color: var(--text);
}

[data-theme="light"] .pcard-info .add-btn {
    border-color: rgba(26,26,28,.22);
    color: var(--text);
}

[data-theme="light"] .pcard-info .add-btn:hover {
    border-color: var(--text);
    background: rgba(26,26,28,.04);
}

[data-theme="light"] .pcard-info .add-btn.on {
    background: rgba(122,40,168,.1);
    border-color: var(--accent);
    color: var(--accent);
}


/* ============================================================
   NAV SUBMENU (dropdown) — KinoStyle
   ============================================================ */
.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-item > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-item > a i {
    font-size: 10px;
    opacity: .55;
    transition: transform .25s, opacity .25s;
}
.nav-item.has-sub:hover > a i,
.nav-item.has-sub:focus-within > a i {
    transform: rotate(180deg);
    opacity: 1;
}
.nav-sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding: 8px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(244,241,236,.1);
    box-shadow: 0 24px 48px -12px rgba(0,0,0,.7);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
    z-index: 80;
}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.nav-sub a {
    padding: 9px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--dim);
    white-space: nowrap;
    background: transparent;
    transition: background .18s, color .18s;
}
.nav-sub a:hover {
    background: rgba(244,241,236,.06) !important;
    color: var(--text) !important;
}
.nav-sub a.active {
    background: rgba(255,90,54,.16) !important;
    color: var(--accent2) !important;
}


/* ============================================================
   PATCH #2 — пагинация, крошки, облако тегов, тема выпадашки
   ============================================================ */

/* --- Пагинация DLE (.navigation) → стиль Lumen .pagination --- */
.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px 0 8px;
    margin: 0;
}
.navigation a,
.navigation > span:not(.nav_ext),
.navigation .nav_ext {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: transparent;
    color: var(--dim);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.navigation a:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
.navigation > span:not(.nav_ext) {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
.navigation .nav_ext {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
    cursor: default;
}

/* --- Хлебные крошки / speedbar --- */
.crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}
.crumbs a,
.crumbs .speedbar a {
    color: var(--muted);
    transition: color .2s;
}
.crumbs a:hover,
.crumbs .speedbar a:hover {
    color: var(--accent2);
}
.crumbs .speedbar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font-size: 13px;
    color: var(--muted);
}
.crumbs .speedbar > * {
    display: inline-flex;
    align-items: center;
}
.crumbs .speedbar > *:not(:last-child):after {
    content: "/";
    margin-left: 6px;
    color: var(--dot, var(--muted));
    opacity: .6;
}
.crumbs b,
.crumbs strong {
    color: var(--text);
    font-weight: 500;
}

/* --- Облако тегов --- */
.tag-cloud--page {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.tag-cloud--page a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .2s, color .2s, background .2s;
}
.tag-cloud--page a:hover {
    border-color: var(--text);
    color: var(--text);
    background: rgba(244,241,236,.06);
}
/* DLE-тег {tags} выводит <a class="clouds_xsmall">...</a> — размеры */
.tag-cloud--page .clouds_xlarge a { font-size: 16px; height: 42px; color: var(--text); }
.tag-cloud--page .clouds_large  a { font-size: 15px; height: 38px; }
.tag-cloud--page .clouds_medium a { font-size: 14px; }
.tag-cloud--page .clouds_small  a { font-size: 13px; }
.tag-cloud--page .clouds_xsmall a { font-size: 12px; opacity: .85; }

/* --- ФИКС темы: выпадашка (убираем хардкод #141418f5) --- */
.nav-sub {
    background: color-mix(in srgb, var(--card) 92%, transparent) !important;
    border-color: var(--line2) !important;
}
[data-theme="light"] .nav-sub {
    background: color-mix(in srgb, var(--card) 96%, transparent) !important;
    box-shadow: 0 24px 48px -12px rgba(20,20,20,.18) !important;
}

/* --- Мобильная адаптация пагинации --- */
@media (max-width: 640px) {
    .navigation a,
    .navigation > span:not(.nav_ext) {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 13px;
    }
}


/* ============================================================
   PATCH #3 — теги / xfsearch / облако / крошки
   ============================================================ */

/* Заголовок с количеством на тегах/xfsearch */
.cat-title small,
.cat-title .news-num {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 10px;
}

/* Крошки — стрелки между элементами */
.crumbs .speedbar > *:not(:last-child):after {
    content: "›";
    margin-left: 8px;
    margin-right: -2px;
    color: var(--muted);
    opacity: .5;
    font-size: 15px;
    line-height: 1;
}
.crumbs .speedbar > * {
    display: inline-flex;
    align-items: center;
}
.crumbs .speedbar b,
.crumbs .speedbar strong {
    color: var(--text);
    font-weight: 600;
}

/* Облако тегов (страница /tags/) */
.tag-cloud--page {
    padding: 8px 0 24px;
    line-height: 2.4;
}
.tag-cloud--page a {
    margin: 4px 6px 4px 0;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}
.tag-cloud--page a:hover {
    border-color: var(--text);
    color: var(--text);
    background: rgba(244,241,236,.06);
}
.tag-cloud--page .clouds_xlarge a { font-size: 18px; height: 46px; padding: 0 20px; color: var(--text); }
.tag-cloud--page .clouds_large  a { font-size: 16px; height: 42px; padding: 0 18px; }
.tag-cloud--page .clouds_medium a { font-size: 14px; }
.tag-cloud--page .clouds_small  a { font-size: 13px; }
.tag-cloud--page .clouds_xsmall a { font-size: 12px; opacity: .8; }

/* На /tags/ — убираем двойной padding у cat-main */
.cat-main .tag-cloud--page:only-child {
    padding-top: 0;
}






/* Бейдж-счётчик в .umenu-count */
.umenu-count b { color: var(--accent2); font-weight: 700; }


/* ============================================================
   PATCH #5d — AJAX «Показать ещё»
   ============================================================ */

/* Если на странице есть .more — скрываем цифровую пагинацию */
.cat-main:has(.more) .pagination,
.cat-main:has(.more) .navigation {
    display: none;
}

/* Сам блок .more */
.more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 0 8px;
}
.more[hidden] { display: none; }
.more-track {
    width: min(260px, 70%);
    height: 3px;
    border-radius: 2px;
    background: rgba(244,241,236,.12);
    overflow: hidden;
}
.more-track > i {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width .35s ease;
}
.more > span {
    font-size: 13px;
    color: var(--muted);
}
.more > button {
    height: 52px;
    padding: 0 32px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all .25s;
}
.more > button:hover:not(:disabled) {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
.more > button:disabled {
    opacity: .5;
    cursor: progress;
}


/* ============================================================
   PATCH #5f — фикс переключения сетка/список
   ============================================================ */

/* Список: один столбец, карточки-строки */
#dle-feed.is-list,
.grid-cards.is-list,
.is-list.grid-cards--even,
.is-list #dle-content,
.is-list.grid-cards > #dle-content,
.is-list.grid-cards--even > #dle-content {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    display: grid !important;
}

#dle-feed.is-list > .pcard,
.grid-cards.is-list > .pcard {
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
}


/* ============================================================
   PATCH #5g — правильный вид списка (жёсткие правила)
   ============================================================ */

/* ═══ PATCH #5g (переписан) — список на ПК и мобильном ═══ */

/* ВСЕ list-only в списке — видимы ТОЛЬКО на ПК (>= 641px) */
@media (min-width: 641px) {
    .is-list .pcard .list-only {
        display: revert !important;
    }
    .is-list .pcard p.list-only,
    .is-list .pcard-text {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .is-list .pcard div.list-only,
    .is-list .pcard-meta {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    .is-list .pcard span.list-only,
    .is-list .pcard .lrow-rate {
        display: inline-flex !important;
        align-items: center;
        margin-left: auto;
        margin-right: 12px;
    }
}

/* Карточка — строка (везде) */
.is-list .pcard {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: var(--surface);
    border: 1px solid rgba(244,241,236,.06);
}

/* Постер — маленький слева */
.is-list .pcard .pcard-img {
    flex: 0 0 auto !important;
    width: 64px !important;
    height: 96px !important;
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Инфо — растягивается */
.is-list .pcard .pcard-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 16px !important;
}
.is-list .pcard .pcard-info > div {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Заголовок крупный */
.is-list .pcard .pcard-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

/* Скрываем бейджи на постере (они не нужны в списке) */
.is-list .pcard .pcard-img > span {
    display: none !important;
}

/* Мобильный fallback — скрываем описание и мету */
@media (max-width: 640px) {
    .is-list .pcard {
        flex-direction: row !important;
    }
    .is-list .pcard .pcard-info {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .is-list .pcard .pcard-text,
    .is-list .pcard .pcard-meta {
        display: none !important;
    }
}


/* ============================================================
   PATCH #15 — стилизация DLE-формы поиска (.searchpage)
   ============================================================ */

.searchpage {
    padding: 24px 0;
}
.searchpage .section-heading {
    margin-bottom: 20px;
}
.searchpage .section-heading h1 {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(26px, 2.8vw, 38px);
    line-height: 1.15;
    color: var(--text);
}
.searchpage .section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

/* Убираем старые таблицы DLE — превращаем в блоки */
.searchpage table,
.searchpage table td.search,
.searchpage table td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.searchpage fieldset {
    display: block;
    margin: 0 0 20px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}
.searchpage fieldset legend {
    padding: 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.searchpage fieldset > table,
.searchpage fieldset > table > tbody,
.searchpage fieldset > table > tbody > tr,
.searchpage fieldset > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
}

.searchpage label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--soft);
    cursor: pointer;
}

.searchpage input[type="text"],
.searchpage input[type="search"],
.searchpage select {
    width: 100% !important;
    min-height: 48px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(244,241,236,.14);
    background: rgba(244,241,236,.04);
    color: var(--text);
    font-size: 15px;
}
.searchpage input[type="text"]:focus,
.searchpage select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(160,0,255,.18);
    outline: none;
}
.searchpage select option {
    background: var(--card);
    color: var(--text);
}

.searchpage .textin {
    width: 100% !important;
}

.searchpage input[type="checkbox"],
.searchpage input[type="radio"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    margin: 0;
}

/* DLE-кнопки (.bbcodes) — стиль Lumen */
.searchpage input.bbcodes,
.searchpage button.bbcodes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 26px;
    margin: 6px 6px 0 0 !important;
    border-radius: 999px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.searchpage input.bbcodes:hover,
.searchpage button.bbcodes:hover {
    background: #ce5eff;
    transform: translateY(-1px);
}
.searchpage input.bbcodes[name="dofullsearch"],
.searchpage input.bbcodes[name="doclear"],
.searchpage input.bbcodes[name="doreset"],
.searchpage input[type="reset"].bbcodes {
    background: transparent;
    border: 1px solid var(--line2);
    color: var(--text);
}
.searchpage input.bbcodes[name="dofullsearch"]:hover,
.searchpage input.bbcodes[name="doclear"]:hover,
.searchpage input.bbcodes[name="doreset"]:hover,
.searchpage input[type="reset"].bbcodes:hover {
    background: rgba(244,241,236,.06);
    color: var(--text);
}

/* Текст-результат */
.searchpage .search-result-msg {
    margin: 14px 0 22px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(244,241,236,.04);
    border: 1px solid var(--line);
    color: var(--soft);
    font-size: 14px;
}
.searchpage .search_result_num,
.searchpage .message-info {
    margin: 14px 0 22px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(255,90,54,.1);
    border: 1px solid rgba(160,0,255,.25);
    color: var(--text);
    font-size: 14px;
}

/* Сетка результатов */
.searchpage .grid-cards {
    margin-top: 24px;
}

/* Скрываем полностью пустые div-обёртки */
.searchpage table td.search > div[align="center"],
.searchpage div[align="center"] {
    margin: 0 !important;
}


/* ============================================================
   PATCH #18 — КРАСИВАЯ ФОРМА ПОИСКА НА ВСЮ ШИРИНУ
   ============================================================ */

/* Расширяем контейнер на всю ширину, как footer-cta */
.page-main:has(.searchpage) {
    max-width: none !important;
    padding-left: var(--pad) !important;
    padding-right: var(--pad) !important;
}

/* Панель поиска — широкий блок */
.searchpage {
    width: 100%;
    padding: clamp(24px, 3vw, 44px) !important;
    border-radius: 28px !important;
    background: radial-gradient(ellipse 60% 120% at 100% 0%, rgba(160,0,255,.10), transparent 65%),
                radial-gradient(ellipse 50% 100% at 0% 100%, rgba(232,194,122,.06), transparent 60%),
                var(--surface) !important;
    border: 1px solid var(--line) !important;
}

/* Заголовок */
.searchpage .section-heading {
    margin: 0 0 24px !important;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.searchpage .section-heading p {
    margin: 0 !important;
    color: var(--muted);
    font-size: 15px;
}

/* Внутренний контейнер */
.searchpage #searchtable,
.searchpage .searchtable {
    width: 100%;
    display: block;
}

/* ПРОСТАЯ ФОРМА — большой инпут + кнопки в ряд */
.searchpage .search-simple {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 12px;
    align-items: end;
    width: 100%;
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--line2);
}
.searchpage .search-simple .form-row {
    grid-column: 1;
    margin: 0 !important;
}
.searchpage .search-simple .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}
.searchpage .search-simple input[type="text"] {
    width: 100% !important;
    height: 56px !important;
    padding: 0 20px !important;
    font-size: 16px !important;
    border-radius: 16px !important;
    background: rgba(244,241,236,.04) !important;
    border: 1px solid var(--line2) !important;
    color: var(--text) !important;
}
.searchpage .search-simple input[type="text"]:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(160,0,255,.15) !important;
    outline: none;
}
.searchpage .search-simple .form-actions {
    grid-column: 2 / -1;
    display: flex !important;
    gap: 10px;
    margin: 0 !important;
    flex-wrap: nowrap;
}

/* РАСШИРЕННАЯ ФОРМА — grid 2 колонки */
.searchpage .search-advanced {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 16px !important;
    width: 100%;
}
.searchpage .search-fieldset {
    padding: 22px 24px !important;
    border-radius: 20px !important;
    background: var(--card) !important;
    border: 1px solid var(--line2) !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.searchpage .search-fieldset legend {
    padding: 0 10px !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--accent2) !important;
    font-weight: 700 !important;
}
.searchpage .search-fieldset .form-row {
    margin: 0 !important;
    gap: 8px;
    display: flex;
    flex-direction: column;
}
.searchpage .search-fieldset .form-label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}
.searchpage .search-fieldset--wide {
    grid-column: 1 / -1;
}
.searchpage .search-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    margin: 8px 0 0 !important;
    padding: 20px 0 0;
    border-top: 1px solid var(--line);
    justify-content: flex-end;
}

/* Все инпуты и select красивые */
.searchpage input[type="text"],
.searchpage input[type="search"],
.searchpage select {
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 16px !important;
    border-radius: 14px !important;
    background: rgba(244,241,236,.04) !important;
    border: 1px solid var(--line2) !important;
    color: var(--text) !important;
    font-size: 15px !important;
    transition: border-color .2s, box-shadow .2s;
}
.searchpage input[type="text"]:focus,
.searchpage select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(160,0,255,.15) !important;
    outline: none;
}
.searchpage select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A29E97'%3E%3Cpath d='M8 11l-4-4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px !important;
}
.searchpage select option {
    background: var(--card);
    color: var(--text);
}

/* Чекбоксы и радио */
.searchpage .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(244,241,236,.03);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--soft);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.searchpage .form-check-label:hover {
    border-color: var(--line2);
}
.searchpage .form-check-label:has(input:checked) {
    background: rgba(160,0,255,.10);
    border-color: rgba(255,90,54,.4);
    color: var(--text);
}
.searchpage input[type="checkbox"],
.searchpage input[type="radio"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
}

/* Кнопки */
.searchpage .primary-button,
.searchpage .soft-button {
    height: 56px !important;
    padding: 0 26px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    white-space: nowrap;
}
.searchpage .primary-button {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}
.searchpage .primary-button:hover {
    background: #ce5eff !important;
    border-color: #ce5eff !important;
    transform: translateY(-1px);
}
.searchpage .soft-button {
    background: transparent !important;
    border: 1px solid var(--line2) !important;
    color: var(--text) !important;
}
.searchpage .soft-button:hover {
    background: rgba(244,241,236,.06) !important;
}

/* DLE-таблица — если появится */
.searchpage table,
.searchpage table td.search {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}
.searchpage fieldset {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

/* Результат поиска */
.searchpage .search-result-msg {
    margin: 22px 0 0 !important;
    padding: 16px 22px !important;
    border-radius: 16px !important;
    background: rgba(244,241,236,.04) !important;
    border: 1px solid var(--line) !important;
    color: var(--soft) !important;
    font-size: 14px !important;
}

/* Сетка результатов на всю ширину */
.searchpage .grid-cards {
    margin-top: 24px;
}

/* Мобильная адаптация */
@media (max-width: 819px) {
    .searchpage .search-simple {
        grid-template-columns: 1fr;
        padding: 18px;
    }
    .searchpage .search-simple .form-actions {
        grid-column: 1;
        flex-direction: column;
    }
    .searchpage .primary-button,
    .searchpage .soft-button {
        width: 100%;
    }
}


/* ============================================================
   PATCH #19 — ПРОФИЛЬ (Lumen style)
   ============================================================ */

.profile-page {
    display: flex;
    flex-direction: column;
    gap: clamp(20px,3vw,32px);
    max-width: none;
    margin: 0;
    padding: clamp(20px,3vw,40px) var(--pad) 0;
}

/* ============ HERO С ПАРАЛЛАКСОМ ============ */
.profile-hero {
    position: relative;
    min-height: 320px;
    border-radius: 28px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
}
.profile-hero__bg {
    position: absolute;
    inset: -20% 0;
    background-size: cover;
    background-position: center;
    filter: blur(48px) saturate(1.6) brightness(.5);
    transform: scale(1.2);
    will-change: transform;
}
.profile-hero__shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 15% 50%, rgba(160,0,255,.35), transparent 60%),
        linear-gradient(180deg, transparent 40%, rgba(10,10,12,.85) 100%);
}
.profile-hero__body {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: clamp(20px,3vw,40px);
    padding: clamp(24px,3vw,44px);
    min-height: 320px;
    flex-wrap: wrap;
}
.profile-hero__avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    will-change: transform;
}
.profile-hero__avatar {
    width: clamp(110px,14vw,160px);
    height: clamp(110px,14vw,160px);
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(244,241,236,.16);
    box-shadow: 0 20px 48px -12px rgba(0,0,0,.75);
    background: var(--card);
}
.profile-hero__status {
    position: absolute;
    right: 8%;
    bottom: 8%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 4px solid var(--surface);
    background: var(--muted);
    box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}
.profile-hero__status.on {
    background: #58c47f;
    box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 12px rgba(88,196,127,.65);
    animation: profile-pulse 2s ease-in-out infinite;
}
.profile-hero__status.off { background: var(--dot); }
@keyframes profile-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 6px rgba(88,196,127,.4); }
    50% { box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 18px rgba(88,196,127,.8); }
}
.profile-hero__info {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 8px;
}
.profile-hero__name {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(28px,4vw,48px);
    line-height: 1.05;
    color: var(--text);
    text-shadow: 0 4px 24px rgba(0,0,0,.5);
    overflow-wrap: anywhere;
}
.profile-hero__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.profile-hero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-self: flex-end;
    padding-bottom: 8px;
}

/* ============ ANIMATED-СТАТА ============ */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 12px;
}
.profile-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    transition: transform .3s, border-color .3s;
    overflow: hidden;
}
.profile-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(160,0,255,.35);
}
.profile-stat:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(160,0,255,.12), transparent 60%);
    pointer-events: none;
}
.profile-stat__icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(160,0,255,.14);
    color: var(--accent2);
    font-size: 18px;
}
.profile-stat__value {
    position: relative;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(28px,3vw,38px);
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.profile-stat small {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

/* ============ TABS ============ */
.profile-tabs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profile-tabs__nav {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line);
    align-self: flex-start;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.profile-tabs__nav::-webkit-scrollbar { display: none; }
.profile-tabs__btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--dim);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color .3s;
}
.profile-tabs__btn:hover { color: var(--text); }
.profile-tabs__btn.active { color: var(--bg); }
.profile-tabs__btn i { font-size: 14px; }
.profile-tabs__slide {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: var(--text);
    z-index: 1;
    transition: left .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}
.profile-tabs__panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeUp .4s ease both;
}
.profile-tabs__panel[hidden] { display: none; }

/* ============ КАРТОЧКИ ============ */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 16px;
}
.profile-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(20px,2.4vw,30px);
    border-radius: 24px;
    background: var(--card);
    border: 1px solid var(--line);
}
.profile-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 20px;
    color: var(--text);
}
.profile-card__title i { color: var(--accent2); font-size: 16px; }
.profile-card__subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}

.profile-facts {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.profile-facts li {
    display: grid;
    grid-template-columns: 140px minmax(0,1fr);
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.profile-facts li:last-child { border-bottom: none; }
.profile-facts span {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}
.profile-facts b {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.profile-about {
    font-size: 15px;
    line-height: 1.7;
    color: var(--soft);
    overflow-wrap: anywhere;
}
.profile-sign {
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(244,241,236,.04);
    border: 1px dashed var(--line2);
    font-size: 14px;
    color: var(--dim);
}

/* ============ ФОРМА РЕДАКТИРОВАНИЯ ============ */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============ SKELETON ============ */
.skeleton {
    background: linear-gradient(90deg, rgba(244,241,236,.04) 25%, rgba(244,241,236,.1) 50%, rgba(244,241,236,.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-shine 1.6s infinite;
    border-radius: 12px;
}
@keyframes skeleton-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============ RIPPLE ============ */
.s-btn, .primary-button, .soft-button, .profile-tabs__btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    transform: scale(0);
    animation: ripple .6s linear;
    pointer-events: none;
}
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* ============ POPUP ПРОФИЛЯ ============ */
.profile-popup { padding: 4px; }
.profile-popup__avatar .avatar--lg { width: 72px; height: 72px; }

/* Мобильная адаптация */
@media (max-width: 640px) {
    .profile-hero__body { padding: 20px; }
    .profile-facts li { grid-template-columns: 1fr; gap: 4px; }
}


/* ============================================================
   PATCH #20 — ЛИЧНЫЕ СООБЩЕНИЯ (Lumen style)
   ============================================================ */

.pm-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(20px,3vw,40px) var(--pad) 0;
    width: 100%;
}

/* Верхняя панель */
.pm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
}
.pm-top__menu {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pm-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: transparent;
    color: var(--dim);
    font-size: 14px;
    font-weight: 700;
    transition: background .25s, color .25s;
}
.pm-tab:hover { background: rgba(244,241,236,.06); color: var(--text); }
.pm-tab.active {
    background: var(--text);
    color: var(--bg);
}
.pm-top__stats {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 240px;
}
.pm-stat { display: flex; flex-direction: column; gap: 2px; }
.pm-stat__label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}
.pm-stat__value {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 22px;
    color: var(--accent2);
}
.pm-stat__hint { font-size: 12px; color: var(--muted); }

.pm-progress { min-width: 160px; flex: 1; }
.pm-progress-bar,
.pm-progress > div,
.pm-progress .progress {
    height: 8px;
    border-radius: 4px;
    background: rgba(244,241,236,.1);
    overflow: hidden;
    position: relative;
}
.pm-progress-bar > span,
.pm-progress > div > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: 4px;
    transition: width .6s ease;
}

/* Заголовок секции */
.pm-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 22px;
    color: var(--text);
}
.pm-section__title i { color: var(--accent2); font-size: 16px; }

/* СПИСОК ДИАЛОГОВ */
.pm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pm-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--text);
    transition: transform .25s, border-color .25s, background .25s;
}
.pm-item:hover {
    transform: translateX(4px);
    border-color: rgba(160,0,255,.35);
    background: var(--surface);
    color: var(--text);
}
.pm-item__avatar {
    position: relative;
    flex: 0 0 auto;
}
.pm-item__avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--line2);
    background: var(--surface-sunk);
}
.pm-item__icon {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    border: 2px solid var(--card);
}
.pm-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-item__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}
.pm-item__author { font-weight: 800; font-size: 15px; color: var(--text); }
.pm-item__date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pm-item__subject {
    font-weight: 700;
    font-size: 14px;
    color: var(--soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-item__preview {
    font-size: 13px;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ПУСТО */
.pm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 70px 20px;
    text-align: center;
    color: var(--muted);
}
.pm-empty i { font-size: 40px; color: var(--dot); }
.pm-empty b { font-family: var(--serif); font-size: 20px; color: var(--text); }
.pm-empty span { font-size: 14px; }

/* ПРОСМОТР */
.pm-read__head { margin-bottom: 12px; }
.pm-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-size: 13px;
    font-weight: 700;
}
.pm-back:hover { border-color: var(--text); color: var(--text); }

.pm-message {
    display: flex;
    gap: 16px;
    padding: clamp(18px,2vw,26px);
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
}
.pm-message__avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--line2);
}
.pm-message__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pm-message__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.pm-message__author { font-weight: 800; font-size: 16px; color: var(--text); }
.pm-message__group {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(160,0,255,.14);
    color: var(--accent3);
    font-size: 11px;
    font-weight: 700;
}
.pm-message__date { margin-left: auto; font-size: 12px; color: var(--muted); }
.pm-message__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--soft);
    overflow-wrap: anywhere;
}
.pm-message__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-btn--danger { border-color: rgba(255,90,54,.4); color: var(--accent3); }
.pill-btn--danger:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ФОРМА */
.pm-compose .pm-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(20px,2.4vw,30px);
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
}
.pm-form .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}
.pm-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}
.pm-form .form-label {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}
.pm-form .form-input,
.pm-form input[type="text"],
.pm-form textarea {
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--line2);
    background: rgba(244,241,236,.04);
    color: var(--text);
    font-size: 15px;
}
.pm-form .form-input:focus,
.pm-form input:focus,
.pm-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(160,0,255,.15);
    outline: none;
}
.pm-form .form-row--check { flex-direction: row; }
.pm-form .form-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(244,241,236,.03);
    font-size: 13px;
    color: var(--soft);
    cursor: pointer;
}
.pm-form .form-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.pm-form .form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pm-form .c-captcha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Мобильная адаптация */
@media (max-width: 640px) {
    .pm-top { flex-direction: column; align-items: stretch; }
    .pm-top__stats { min-width: 0; }
    .pm-message { flex-direction: column; }
    .pm-item__preview { -webkit-line-clamp: 2; }
}


/* ============================================================
   PATCH #22 — ХАБ ЛК + расширение профиля как footer
   ============================================================ */

/* Профиль — на всю ширину, как footer-cta */
.profile-page {
    max-width: none !important;
    width: 100%;
}

/* ХАБ — сетка карточек */
.profile-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

.profile-hub__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
    transition: transform .25s, border-color .25s, background .25s;
    overflow: hidden;
}
.profile-hub__item:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(160,0,255,.10), transparent 60%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.profile-hub__item:hover {
    transform: translateY(-3px);
    border-color: rgba(255,90,54,.4);
    color: var(--text);
}
.profile-hub__item:hover:before { opacity: 1; }

.profile-hub__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(160,0,255,.20), rgba(232,194,122,.10));
    color: var(--accent2);
    font-size: 22px;
    transition: transform .3s;
}
.profile-hub__item:hover .profile-hub__icon {
    transform: scale(1.06) rotate(-4deg);
    color: var(--accent);
}

.profile-hub__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.profile-hub__body b {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}
.profile-hub__body small {
    font-size: 12px;
    color: var(--muted);
}

.profile-hub__arrow {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--muted);
    transition: transform .25s, color .25s;
}
.profile-hub__item:hover .profile-hub__arrow {
    color: var(--accent2);
    transform: translateX(3px);
}

/* Мобильная адаптация */
@media (max-width: 640px) {
    .profile-hub {
        grid-template-columns: 1fr;
    }
    .profile-hub__item {
        padding: 16px 18px;
    }
    .profile-hub__icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}


/* ============================================================
   PATCH #23 — ПРОФИЛЬ: светлая тема, отступ от меню, ширина
   ============================================================ */

/* Профиль — отступ от фиксированного меню + ширина как footer */
.profile-page {
    max-width: none !important;
    margin: 0 !important;
    padding: calc(var(--top) + 24px) var(--pad) 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}
@media (max-width: 819px) {
    .profile-page {
        padding-top: calc(var(--top) + 16px) !important;
    }
}

/* Тёмная тема — профиль с нашим фиолетовым */
.profile-hero {
    background: var(--card);
    border: 1px solid var(--line);
}
.profile-hero__bg {
    filter: blur(48px) saturate(1.6) brightness(.45);
}
.profile-hero__shade {
    background:
        radial-gradient(ellipse 60% 80% at 15% 50%, rgba(160,0,255,.35), transparent 60%),
        linear-gradient(180deg, transparent 40%, rgba(10,10,12,.85) 100%);
}
.profile-hero__avatar {
    border: 4px solid rgba(244,241,236,.16);
}
.profile-hero__status.on {
    background: #58c47f;
    box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 12px rgba(88,196,127,.65);
}
.profile-hero__name {
    text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.profile-stat:before {
    background: radial-gradient(circle at 100% 0%, rgba(160,0,255,.12), transparent 60%);
}
.profile-stat__icon {
    background: rgba(160,0,255,.14);
    color: var(--accent2);
}
.profile-stat:hover {
    border-color: rgba(160,0,255,.35);
}
.profile-stat[data-counter] [data-counter-value] {
    color: var(--text);
}
.profile-hub__icon {
    background: linear-gradient(135deg, rgba(160,0,255,.20), rgba(232,194,122,.10));
    color: var(--accent2);
}
.profile-hub__item:hover {
    border-color: rgba(160,0,255,.4);
}
.profile-hub__item:before {
    background: radial-gradient(circle at 100% 0%, rgba(160,0,255,.10), transparent 60%);
}
.profile-hub__item:hover .profile-hub__arrow {
    color: var(--accent2);
}

/* ============================================================
   СВЕТЛАЯ ТЕМА — профиль
   ============================================================ */
[data-theme="light"] .profile-hero {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="light"] .profile-hero__bg {
    filter: blur(48px) saturate(1.8) brightness(1.65);
}
[data-theme="light"] .profile-hero__shade {
    background:
        radial-gradient(ellipse 60% 80% at 15% 50%, rgba(122,40,168,.22), transparent 60%),
        linear-gradient(180deg, transparent 40%, rgba(247,244,239,.9) 100%);
}
[data-theme="light"] .profile-hero__avatar {
    border-color: rgba(26,26,28,.12);
    box-shadow: 0 20px 48px -12px rgba(0,0,0,.18);
}
[data-theme="light"] .profile-hero__status {
    border-color: var(--surface);
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}
[data-theme="light"] .profile-hero__name {
    text-shadow: 0 4px 24px rgba(255,255,255,.5);
    color: var(--text);
}
[data-theme="light"] .profile-hero .tag.soft {
    background: rgba(26,26,28,.08);
    color: var(--text);
}
[data-theme="light"] .profile-hero .tag.accent {
    background: var(--accent);
    color: #fff;
}
[data-theme="light"] .profile-hero .tag.outline {
    border-color: rgba(26,26,28,.2);
    color: var(--text);
}
[data-theme="light"] .profile-hero .btn-glass {
    background: rgba(255,255,255,.65);
    border-color: rgba(26,26,28,.15);
    color: var(--text);
    backdrop-filter: blur(12px);
}
[data-theme="light"] .profile-hero .btn-glass:hover {
    background: rgba(255,255,255,.9);
    border-color: rgba(26,26,28,.3);
    color: var(--text);
}

[data-theme="light"] .profile-stat {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="light"] .profile-stat:before {
    background: radial-gradient(circle at 100% 0%, rgba(122,40,168,.10), transparent 60%);
}
[data-theme="light"] .profile-stat:hover {
    border-color: rgba(122,40,168,.4);
}
[data-theme="light"] .profile-stat__icon {
    background: rgba(122,40,168,.12);
    color: var(--accent);
}
[data-theme="light"] .profile-stat__value {
    color: var(--text);
}
[data-theme="light"] .profile-stat small {
    color: var(--muted);
}

[data-theme="light"] .profile-hub__item {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="light"] .profile-hub__item:hover {
    border-color: rgba(122,40,168,.4);
}
[data-theme="light"] .profile-hub__item:before {
    background: radial-gradient(circle at 100% 0%, rgba(122,40,168,.08), transparent 60%);
}
[data-theme="light"] .profile-hub__icon {
    background: linear-gradient(135deg, rgba(122,40,168,.14), rgba(184,137,46,.10));
    color: var(--accent);
}
[data-theme="light"] .profile-hub__body b {
    color: var(--text);
}
[data-theme="light"] .profile-hub__body small {
    color: var(--muted);
}

[data-theme="light"] .profile-tabs__nav {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="light"] .profile-tabs__btn {
    color: var(--dim);
}
[data-theme="light"] .profile-tabs__btn:hover {
    color: var(--text);
}
[data-theme="light"] .profile-tabs__btn.active {
    color: #fff;
}
[data-theme="light"] .profile-tabs__slide {
    background: var(--accent);
}

[data-theme="light"] .profile-card {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="light"] .profile-card__title {
    color: var(--text);
}
[data-theme="light"] .profile-card__title i {
    color: var(--accent);
}
[data-theme="light"] .profile-facts li {
    border-bottom-color: var(--line);
}
[data-theme="light"] .profile-facts span {
    color: var(--muted);
}
[data-theme="light"] .profile-facts b {
    color: var(--text);
}
[data-theme="light"] .profile-about {
    color: var(--soft);
}
[data-theme="light"] .profile-sign {
    background: rgba(26,26,28,.03);
    border-color: var(--line2);
    color: var(--dim);
}


/* ============================================================
   PATCH #25 — ХАБ: сетка плиток + панель снизу
   ============================================================ */

/* Сетка плиток 3 колонки */
.profile-hub {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 12px;
}

/* Ряд (плитка + панель если раскрыта) */
.profile-hub__row {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color .25s;
    min-height: 84px;
}
.profile-hub__row.is-open {
    grid-column: 1 / -1;
    border-color: rgba(160,0,255,.4);
}

/* Плитка (голова) */
.profile-hub__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background .25s;
    min-height: 84px;
}
.profile-hub__head:hover {
    background: rgba(244,241,236,.03);
}
.profile-hub__head:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(160,0,255,.10), transparent 60%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.profile-hub__row.is-open .profile-hub__head:before,
.profile-hub__head:hover:before {
    opacity: 1;
}

.profile-hub__icon {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(160,0,255,.20), rgba(232,194,122,.10));
    color: var(--accent2);
    font-size: 20px;
    transition: transform .3s, color .25s;
}
.profile-hub__row.is-open .profile-hub__icon {
    color: var(--accent);
    transform: scale(1.05);
}

.profile-hub__body {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.profile-hub__body b {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-hub__body small {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-hub__arrow {
    position: relative;
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--muted);
    transition: transform .3s, color .25s;
}
.profile-hub__row.is-open .profile-hub__arrow {
    transform: rotate(180deg);
    color: var(--accent2);
}

/* Панель — на всю ширину ряда (grid-column: 1/-1) */
.profile-hub__panel {
    display: block;
    padding: 0 20px 20px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    animation: hubSlide .35s ease both;
    width: 100%;
}
.profile-hub__panel[hidden] { display: none; }

@keyframes hubSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Skeleton */
.profile-hub__skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.skeleton {
    background: linear-gradient(90deg, rgba(244,241,236,.04) 25%, rgba(244,241,236,.10) 50%, rgba(244,241,236,.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-shine 1.6s infinite;
    border-radius: 12px;
}
.skeleton-card {
    aspect-ratio: 2/3;
    border-radius: 14px;
}
.skeleton-line {
    height: 40px;
    border-radius: 10px;
}
@keyframes skeleton-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Контент — сетка постеров как .pcard */
.profile-hub__content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}
.profile-hub__content .pcard {
    width: auto;
}

/* Пусто */
.profile-hub__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
}
.profile-hub__empty i {
    font-size: 36px;
    color: var(--dot);
}
.profile-hub__empty b {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--text);
}
.profile-hub__empty a {
    color: var(--accent2);
    text-decoration: underline;
}

/* Комментарии */
.profile-hub__comments {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-hub__comment {
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(244,241,236,.03);
    border: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.5;
    color: var(--soft);
}

/* Мобильная адаптация */
@media (max-width: 640px) {
    .profile-hub { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .profile-hub__head { padding: 14px 16px; gap: 12px; min-height: 76px; }
    .profile-hub__icon { width: 42px; height: 42px; font-size: 18px; border-radius: 12px; }
    .profile-hub__body b { font-size: 14px; }
    .profile-hub__body small { font-size: 11px; }
    .profile-hub__panel { padding: 16px; }
    .profile-hub__skeleton,
    .profile-hub__content { grid-template-columns: repeat(2, 1fr); }
}

/* СВЕТЛАЯ ТЕМА */
[data-theme="light"] .profile-hub__row {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="light"] .profile-hub__row.is-open {
    border-color: rgba(122,40,168,.4);
}
[data-theme="light"] .profile-hub__head:hover {
    background: rgba(26,26,28,.03);
}
[data-theme="light"] .profile-hub__head:before {
    background: radial-gradient(circle at 100% 0%, rgba(122,40,168,.08), transparent 60%);
}
[data-theme="light"] .profile-hub__icon {
    background: linear-gradient(135deg, rgba(122,40,168,.14), rgba(184,137,46,.10));
    color: var(--accent);
}
[data-theme="light"] .profile-hub__comment {
    background: rgba(26,26,28,.03);
    border-color: var(--line);
    color: var(--soft);
}
[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, rgba(26,26,28,.05) 25%, rgba(26,26,28,.10) 50%, rgba(26,26,28,.05) 75%);
    background-size: 200% 100%;
}


/* ============================================================
   PATCH #26 — СКРОЛЛ ВНУТРИ ПАНЕЛИ ХАБА
   ============================================================ */

/* Панель — со скроллом */
.profile-hub__panel {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--line2) transparent;
    padding-right: 8px; /* чтобы контент не прилипал к скроллбару */
}

/* Красивый скроллбар */
.profile-hub__panel::-webkit-scrollbar {
    width: 8px;
}
.profile-hub__panel::-webkit-scrollbar-track {
    background: transparent;
}
.profile-hub__panel::-webkit-scrollbar-thumb {
    background: var(--line2);
    border-radius: 4px;
}
.profile-hub__panel::-webkit-scrollbar-thumb:hover {
    background: var(--accent2);
}

/* Светлая тема */
[data-theme="light"] .profile-hub__panel {
    scrollbar-color: rgba(26,26,28,.16) transparent;
}
[data-theme="light"] .profile-hub__panel::-webkit-scrollbar-thumb {
    background: rgba(26,26,28,.16);
}
[data-theme="light"] .profile-hub__panel::-webkit-scrollbar-thumb:hover {
    background: rgba(122,40,168,.5);
}

/* Мобильный скролл — повыше */
@media (max-width: 640px) {
    .profile-hub__panel {
        max-height: 380px;
    }
}


/* ============================================================
   PATCH #28 — Красивые комментарии в хабе
   ============================================================ */

.profile-hub__comments {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-hub__comment {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(244,241,236,.03);
    border: 1px solid var(--line);
    transition: border-color .25s, background .25s;
}
.profile-hub__comment:hover {
    border-color: rgba(160,0,255,.35);
    background: rgba(244,241,236,.05);
}

.profile-hub__comment-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.profile-hub__comment-author {
    font-weight: 800;
    font-size: 14px;
    color: var(--text);
}
.profile-hub__comment-date {
    font-size: 12px;
    color: var(--muted);
}

.profile-hub__comment-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--soft);
    overflow-wrap: anywhere;
}

.profile-hub__comment-film {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(160,0,255,.10);
    color: var(--accent2);
    font-size: 12px;
    font-weight: 700;
    transition: background .25s, color .25s;
}
.profile-hub__comment-film:hover {
    background: rgba(160,0,255,.2);
    color: var(--accent);
}
.profile-hub__comment-film i {
    font-size: 11px;
}

/* Светлая тема */
[data-theme="light"] .profile-hub__comment {
    background: rgba(26,26,28,.03);
    border-color: var(--line);
}
[data-theme="light"] .profile-hub__comment:hover {
    border-color: rgba(122,40,168,.35);
    background: rgba(26,26,28,.05);
}
[data-theme="light"] .profile-hub__comment-author {
    color: var(--text);
}
[data-theme="light"] .profile-hub__comment-text {
    color: var(--soft);
}
[data-theme="light"] .profile-hub__comment-film {
    background: rgba(122,40,168,.10);
    color: var(--accent);
}
[data-theme="light"] .profile-hub__comment-film:hover {
    background: rgba(122,40,168,.18);
}

/* ==========================================================================
   ЛИЧНЫЕ СООБЩЕНИЯ (PM) — интеграция в KinoStyle
   ========================================================================== */

/* -------- Заголовок страницы PM -------- */
.cat-head--pm {
    margin-bottom: var(--sp-5, 20px);
}
.cat-head--pm .cat-head-row {
    align-items: flex-end;
    gap: var(--sp-5, 20px);
}
.cat-head--pm .cat-title {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.1;
    margin: 0 0 6px;
}
.cat-head--pm .lead {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-lead, 17px);
}
.cat-head--pm .pm-menu {
    display: flex;
    gap: var(--sp-2, 8px);
}

/* -------- Обёртка панели чата -------- */
.panel--pm {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.pm-page-wrap {
    width: 100%;
    max-width: var(--container, 1440px);
    margin: 0 auto;
    padding: 0 var(--pad, 32px) var(--sp-7, 28px);
}

/* -------- Основной контейнер DialogPM -------- */
.pm-page-wrap .dpm-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow-soft);
    color: var(--text);
    overflow: hidden;
    font: 400 14px/1.55 var(--sans, system-ui, sans-serif);
}

.pm-page-wrap .dpm-wrapper *,
.pm-page-wrap .dpm-wrapper *::before,
.pm-page-wrap .dpm-wrapper *::after { box-sizing: border-box; }

.pm-page-wrap .dpm-container {
    position: relative;
    padding-left: 320px;
    min-height: 640px;
}

/* -------- Сайдбар со списком диалогов -------- */
.pm-page-wrap .dpm-sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 320px;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-right: 1px solid var(--line);
    overflow: hidden;
}

.pm-page-wrap .dpm-sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    min-height: 58px;
}

.pm-page-wrap .dpm-search {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 8px);
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color .15s, background .15s;
}
.pm-page-wrap .dpm-search::placeholder { color: var(--muted); }
.pm-page-wrap .dpm-search:focus {
    border-color: var(--accent);
    background: var(--surface);
}

.pm-page-wrap .dpm-users {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    flex: 1;
}

.pm-page-wrap .dpm-users li { margin: 0; }

.pm-page-wrap .dpm-users-profile {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "foto title date"
        "foto message status";
    gap: 3px 14px;
    align-items: center;
    padding: 12px 16px;
    color: var(--text) !important;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}

.pm-page-wrap .dpm-users-profile:hover {
    background: var(--accent-soft);
    border-left-color: var(--accent2);
}
.pm-page-wrap .dpm-users li.current .dpm-users-profile {
    background: var(--accent-soft);
    border-left-color: var(--accent);
}

.pm-page-wrap .dpm-userlist-foto {
    grid-area: foto;
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-sunk);
    border: 1px solid var(--line2);
}

.pm-page-wrap .dpm-users-title {
    grid-area: title;
    font-weight: 600;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-page-wrap .dpm-users-date {
    grid-area: date;
    font-size: 11px;
    color: var(--muted);
    align-self: center;
    white-space: nowrap;
}
.pm-page-wrap .dpm-users-message {
    grid-area: message;
    font-size: 12.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-page-wrap .dpm-users-online,
.pm-page-wrap .dpm-users-offline {
    grid-area: status;
    width: 10px; height: 10px;
    border-radius: 50%;
    align-self: center;
    justify-self: end;
    box-shadow: 0 0 0 3px var(--card);
}
.pm-page-wrap .dpm-users-online { background: var(--positive, #7cc494); }
.pm-page-wrap .dpm-users-offline { background: var(--dot, #55524D); }

.pm-page-wrap .dpm-dialog-menu-count {
    position: absolute;
    top: 6px; right: 8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-ink, #0A0A0C);
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
}

/* -------- Прогресс ящика -------- */
.pm-page-wrap .dpm-maxpm-wrapper {
    position: absolute;
    top: 0; right: 0;
    width: 320px;
    padding: 14px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.pm-page-wrap .dpm-maxpm-wrapper-stats {
    position: relative;
    height: 32px;
    padding: 0 0 12px;
    font-size: 11px;
    color: var(--muted);
}
.pm-page-wrap .dpm-maxpm-wrapper-stats-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--surface-sunk);
    border-radius: 2px;
    overflow: hidden;
}
.pm-page-wrap .dpm-maxpm-wrapper-stats-current {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 2px;
}

/* -------- Заглушка -------- */
.pm-page-wrap .dpm-container-empty {
    position: absolute;
    top: 50%; left: 320px; right: 0;
    margin-top: -14px;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
    pointer-events: none;
}
.pm-page-wrap .dpm-container-empty > span {
    display: inline-block;
    padding: 10px 22px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-pill, 999px);
    color: var(--soft);
}

/* -------- Меню диалога (иконки сверху) -------- */
.pm-page-wrap .dpm-dialog-menu {
    list-style: none;
    margin: 0;
    padding: 0 var(--sp-3, 12px);
    display: flex;
    align-items: center;
    gap: 4px;
    height: 58px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.pm-page-wrap .dpm-dialog-menu li { display: flex; }
.pm-page-wrap .dpm-dialog-menu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--r-sm, 8px);
    color: var(--muted);
    transition: background .15s, color .15s;
}
.pm-page-wrap .dpm-dialog-menu a:hover {
    background: var(--accent-soft);
    color: var(--accent2);
}
.pm-page-wrap .dpm-dialog-menu a::before {
    content: "";
    display: block;
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain;    mask-size: contain;
}

/* Иконки — те же data-URI, что в pm/assets/style.css */

/* -------- Шапка диалога -------- */
.pm-page-wrap .dpm-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    min-height: 76px;
}
.pm-page-wrap .dpm-header-shift { padding-left: 68px; }
.pm-page-wrap .dpm-header-icon {
    position: absolute;
    left: 22px; top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    background: var(--accent-soft);
    border-radius: 50%;
    display: none;
    align-items: center; justify-content: center;
}
.pm-page-wrap .dpm-header-shift .dpm-header-icon { display: flex; }
.pm-page-wrap .dpm-header-icon::before {
    content: "";
    width: 16px; height: 16px;
    background: var(--accent2);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><polyline points='21 8 21 21 3 21 3 8'/><rect x='1' y='3' width='22' height='5'/><line x1='10' y1='12' x2='14' y2='12'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><polyline points='21 8 21 21 3 21 3 8'/><rect x='1' y='3' width='22' height='5'/><line x1='10' y1='12' x2='14' y2='12'/></svg>") center/contain no-repeat;
}
.pm-page-wrap .dpm-header-profile {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: center;
    color: var(--text) !important;
    width: 100%;
}
.pm-page-wrap .dpm-header-profile img {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line2);
    background: var(--surface-sunk);
}
.pm-page-wrap .dpm-header-profile-status {
    grid-column: 2;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.pm-page-wrap .dpm-header-profile-status i {
    font-style: normal;
    color: var(--accent2);
    font-weight: 500;
}
.pm-page-wrap .dpm-header-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px; height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent2);
    font-size: 11.5px;
    font-weight: 700;
}

/* -------- Лента сообщений -------- */
.pm-page-wrap .dpm-dialog {
    display: flex;
    flex-direction: column;
}
.pm-page-wrap .dpm-dialog-list {
    list-style: none;
    margin: 0;
    padding: 22px 26px;
    height: 540px;
    overflow-y: auto;
    background: var(--bg);
    transition: height .3s;
}
.pm-page-wrap .dpm-dialog-list-expand { height: 960px; }

.pm-page-wrap .dpm-dialog-daterow {
    text-align: center;
    margin: 18px 0 14px;
    color: var(--muted);
    font-size: 12px;
    list-style: none;
}
.pm-page-wrap .dpm-dialog-daterow span {
    display: inline-block;
    padding: 5px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill, 999px);
}

.pm-page-wrap .dpm-dialog-list > li:not(.dpm-dialog-daterow) {
    position: relative;
    margin-bottom: 14px;
    padding: 0 48px;
    list-style: none;
}

.pm-page-wrap .dpm-dialog-message-foto {
    position: absolute;
    left: 0; top: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line2);
    background: var(--surface-sunk);
}

.pm-page-wrap .dpm-dialog-message {
    position: relative;
    display: inline-block;
    max-width: min(620px, 78%);
    padding: 11px 16px 24px;
    border-radius: 14px;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.pm-page-wrap .dpm-dialog-message-inbox  { margin-right: auto; }
.pm-page-wrap .dpm-dialog-message-outbox {
    margin-left: auto;
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}
.pm-page-wrap .dpm-dialog-message-first.dpm-dialog-message-inbox {
    border-top-left-radius: 4px;
}
.pm-page-wrap .dpm-dialog-message-first.dpm-dialog-message-outbox {
    border-top-right-radius: 4px;
}
.pm-page-wrap .dpm-dialog-message-new {
    box-shadow: 0 0 0 2px var(--accent);
}

.pm-page-wrap .dpm-dialog-message-text {
    font-size: 14px;
    line-height: 1.55;
}
.pm-page-wrap .dpm-dialog-message-text p { margin: 0 0 6px; }
.pm-page-wrap .dpm-dialog-message-text p:last-child { margin-bottom: 0; }
.pm-page-wrap .dpm-dialog-message-text a { color: var(--accent2); word-break: break-word; }

.pm-page-wrap .dpm-dialog-message-time {
    position: absolute;
    right: 14px; bottom: 6px;
    font-size: 11px;
    color: var(--muted);
    opacity: .85;
}

.pm-page-wrap .dpm-dialog-message-menu-trigger {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    opacity: 0;
    background: currentColor;
    color: var(--muted);
    transition: opacity .15s, color .15s;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='5' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='12' cy='19' r='1.8'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='5' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='12' cy='19' r='1.8'/></svg>") center/contain no-repeat;
}
.pm-page-wrap .dpm-dialog-message:hover .dpm-dialog-message-menu-trigger { opacity: 1; }
.pm-page-wrap .dpm-dialog-message-menu-trigger:hover { color: var(--accent2); }

.pm-page-wrap .dpm-dialog-item-select {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--surface-sunk);
    border: 1px solid var(--line2);
    cursor: pointer;
    opacity: 0;
    transition: background .15s, border-color .15s, opacity .15s;
}
.pm-page-wrap .dpm-dialog-message-inbox  ~ .dpm-dialog-item-select { left: 0; }
.pm-page-wrap .dpm-dialog-message-outbox ~ .dpm-dialog-item-select { right: 0; }
.pm-page-wrap .dpm-dialog-list > li:hover .dpm-dialog-item-select { opacity: 1; }
.pm-page-wrap .dpm-dialog-item-select:hover { border-color: var(--accent); background: var(--accent-soft); }
.pm-page-wrap .dpm-dialog-item-select.checked { background: var(--accent); border-color: var(--accent); }

/* -------- Редактор -------- */
.pm-page-wrap .dpm-editor-wrapper {
    position: relative;
    padding: 14px 22px 18px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.pm-page-wrap .dpm-editor { position: relative; }
.pm-page-wrap .dpm-editor form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pm-page-wrap .dpm-editor .wseditor,
.pm-page-wrap .dpm-editor .dleaddcomments-editor {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-sunk);
    transition: border-color .15s;
}
.pm-page-wrap .dpm-editor .wseditor:focus-within,
.pm-page-wrap .dpm-editor .dleaddcomments-editor:focus-within {
    border-color: var(--accent);
}
.pm-page-wrap .dpm-editor .tox-tinymce { border: 0 !important; border-radius: 0 !important; }

.pm-page-wrap .dpm-editor textarea#comments,
.pm-page-wrap .dpm-editor textarea {
    width: 100% !important;
    min-height: 100px;
    max-height: 340px;
    resize: vertical;
    padding: 14px;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text);
    font: 400 14px/1.55 var(--sans, system-ui, sans-serif);
}

.pm-page-wrap .dpm-editor-send {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--r-sm, 8px);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: var(--accent-ink, #0A0A0C);
    font: 600 14px var(--sans, system-ui, sans-serif);
    cursor: pointer;
    transition: filter .15s, transform .1s;
    box-shadow: 0 6px 18px -6px var(--accent);
}
.pm-page-wrap .dpm-editor-send:hover { filter: brightness(1.08); }
.pm-page-wrap .dpm-editor-send:active { transform: translateY(1px); }

.pm-page-wrap .dpm-editor-timer {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    overflow: hidden;
}
.pm-page-wrap .dpm-editor-timer-bar {
    height: 100%; width: 0;
    background: var(--accent2);
    transition: width .3s linear;
}
.pm-page-wrap .dpm-editor-ignore {
    display: none;
    padding: 12px;
    background: var(--surface-sunk);
    border: 1px dashed var(--line2);
    border-radius: var(--r-sm, 8px);
    color: var(--muted);
    font-size: 13px;
}
.pm-page-wrap .dpm-editor-ignoring .dpm-editor-ignore { display: block; }
.pm-page-wrap .dpm-editor-ignoring .dpm-editor { display: none; }
.pm-page-wrap .dpm-editor-offline {
    display: none;
    padding: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.pm-page-wrap .dpm-editor-offline-text a {
    margin-left: 8px;
    color: var(--accent2);
    font-weight: 600;
}

/* -------- 404 / ignore -------- */
.pm-page-wrap .dpm-ignore-content {
    padding: 20px 24px;
    background: var(--bg);
    min-height: 320px;
}
.pm-page-wrap .dpm-ignore-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.pm-page-wrap .dpm-ignore-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.pm-page-wrap .dpm-ignore-list .dpm-users-profile {
    display: flex; align-items: center; gap: 12px;
    padding: 0; background: transparent !important; border: 0 !important; flex: 1;
}
.pm-page-wrap .dpm-ignore-list .dpm-userlist-foto { width: 42px; height: 42px; }
.pm-page-wrap .dpm-ignore-list .dpm-users-title { font-weight: 600; color: var(--text); font-size: 14px; }
.pm-page-wrap .dpm-ignore-list .dpm-users-message { font-size: 12px; color: var(--muted); }

.pm-page-wrap .dpm-404 {
    padding: 70px 20px;
    text-align: center;
    background: var(--bg);
    color: var(--muted);
    min-height: 320px;
}
.pm-page-wrap .dpm-404-title {
    font: 700 34px var(--serif, Georgia, serif);
    color: var(--text);
    margin-bottom: 12px;
}
.pm-page-wrap .dpm-404 a { color: var(--accent2); font-weight: 600; }

/* -------- Адаптив -------- */
@media (max-width: 1100px) {
    .pm-page-wrap .dpm-container { padding-left: 260px; }
    .pm-page-wrap .dpm-sidebar { width: 260px; }
    .pm-page-wrap .dpm-maxpm-wrapper { width: 260px; }
    .pm-page-wrap .dpm-container-empty { left: 260px; }
}
@media (max-width: 900px) {
    .pm-page-wrap .dpm-container { padding-left: 0; min-height: auto; }
    .pm-page-wrap .dpm-sidebar {
        position: relative; width: 100%;
        max-height: 45vh;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .pm-page-wrap .dpm-maxpm-wrapper {
        position: relative; width: 100%;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }
    .pm-page-wrap .dpm-container-empty {
        position: relative; left: auto;
        margin: 40px auto;
    }
    .pm-page-wrap .dpm-dialog-list { height: auto; max-height: 60vh; }
    .pm-page-wrap .dpm-dialog-list-expand { height: auto; }
    .pm-page-wrap .dpm-dialog-list > li:not(.dpm-dialog-daterow) { padding: 0 0 0 40px; }
    .pm-page-wrap .dpm-dialog-message { max-width: 100%; }
    .pm-page-wrap .dpm-dialog-message-foto { width: 32px; height: 32px; }
    .pm-page-wrap .dpm-dialog-menu { overflow-x: auto; }
}
@media (max-width: 560px) {
    .pm-page-wrap { padding-left: 12px; padding-right: 12px; }
    .pm-page-wrap .dpm-header { padding: 12px; }
    .pm-page-wrap .dpm-header-profile { grid-template-columns: 42px 1fr; }
    .pm-page-wrap .dpm-header-profile img { width: 42px; height: 42px; }
    .pm-page-wrap .dpm-editor-wrapper { padding: 12px; }
}

/* ==========================================================================
   PM — правки ширины и отступов (совпадает с футером)
   ========================================================================== */

/* .pm-page-wrap — как футер: без max-width, только padding по бокам */
.pm-page-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--pad, 32px) var(--sp-7, 28px);
}

/* Заголовок PM — как у cat-head на других страницах (паддинг по бокам) */
.cat-head--pm {
    /* padding и gradient наследуются от .cat-head */
    margin-bottom: var(--sp-4, 16px);
}
.cat-head--pm .cat-head-row {
    align-items: flex-end;
    gap: var(--sp-5, 20px);
    flex-wrap: wrap;
}
.cat-head--pm .cat-title {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.1;
    margin: 0 0 6px;
}
.cat-head--pm .lead {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-lead, 17px);
}
.cat-head--pm .crumbs {
    margin-bottom: 8px;
}
.cat-head--pm .pm-menu {
    display: flex;
    gap: var(--sp-2, 8px);
}

/* Отступ сверху уже даёт .cat-head через padding-top */

/* Панель PM — убираем двойной padding */
.panel--pm { padding: 0; background: transparent; border: 0; box-shadow: none; }

/* ==========================================================================
   PM — SVG-иконки меню диалога
   ========================================================================== */

.pm-page-wrap .dpm-dialog-menu a::before {
    content: "";
    display: block;
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain;    mask-size: contain;
}

.pm-page-wrap .dpm-icon-return::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='12' x2='5' y2='12'/><polyline points='12 19 5 12 12 5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='12' x2='5' y2='12'/><polyline points='12 19 5 12 12 5'/></svg>");
}
.pm-page-wrap .dpm-icon-userlist::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}
.pm-page-wrap .dpm-icon-archive::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='21 8 21 21 3 21 3 8'/><rect x='1' y='3' width='22' height='5'/><line x1='10' y1='12' x2='14' y2='12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='21 8 21 21 3 21 3 8'/><rect x='1' y='3' width='22' height='5'/><line x1='10' y1='12' x2='14' y2='12'/></svg>");
}
.pm-page-wrap .dpm-icon-delete::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6M14 11v6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6M14 11v6'/></svg>");
}
.pm-page-wrap .dpm-icon-clear::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>");
}
.pm-page-wrap .dpm-icon-ignore::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='4.93' y1='4.93' x2='19.07' y2='19.07'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='4.93' y1='4.93' x2='19.07' y2='19.07'/></svg>");
}
.pm-page-wrap .dpm-icon-ignored::before { opacity: .5; }
.pm-page-wrap .dpm-icon-pause::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='6' y='4' width='4' height='16' rx='1'/><rect x='14' y='4' width='4' height='16' rx='1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='6' y='4' width='4' height='16' rx='1'/><rect x='14' y='4' width='4' height='16' rx='1'/></svg>");
}
.pm-page-wrap .dpm-icon-reload::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><polyline points='1 20 1 14 7 14'/><path d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><polyline points='1 20 1 14 7 14'/><path d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/></svg>");
}
.pm-page-wrap .dpm-icon-sound::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/><path d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/><path d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/></svg>");
}
.pm-page-wrap .dpm-icon-expand::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 3 21 3 21 9'/><polyline points='9 21 3 21 3 15'/><line x1='21' y1='3' x2='14' y2='10'/><line x1='3' y1='21' x2='10' y2='14'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 3 21 3 21 9'/><polyline points='9 21 3 21 3 15'/><line x1='21' y1='3' x2='14' y2='10'/><line x1='3' y1='21' x2='10' y2='14'/></svg>");
}

/* Активные (current) иконки — акцентный цвет */
.pm-page-wrap .dpm-dialog-menu a.current {
    background: var(--accent-soft);
    color: var(--accent2);
}

/* ==========================================================================
   ПРОФИЛЬ / РЕДАКТИРОВАНИЕ — современный стиль KinoStyle
   ========================================================================== */

/* Обёртка карточки профиля — внутри .profile-page, без лишних margin */
/* (исходный стиль .profile-card уже определён выше — здесь только уточнения) */

/* Заголовки секций внутри профиля */
.profile-card .form-sep {
    border: 0;
    margin: 0;
    padding-top: var(--sp-5, 20px);
    border-top: 1px solid var(--line);
    font-family: var(--serif, Georgia, serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .01em;
}
.profile-card > .form-grid:first-of-type ~ .form-sep,
.profile-card .form-sep + .form-grid {
    margin-top: calc(-1 * var(--sp-3, 12px));
}

/* Сетка полей */
.profile-card .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4, 16px) var(--sp-5, 20px);
}

.profile-card .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.profile-card .form-row--inline {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3, 12px);
}

.profile-card .form-row--check,
.profile-card .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--soft);
    line-height: 1.5;
}

.profile-card .form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.profile-card .form-req {
    color: var(--negative, #e4a8ff);
    margin-left: 4px;
}

/* ------------------------- Поля ввода ------------------------- */
.profile-card input[type="text"],
.profile-card input[type="email"],
.profile-card input[type="password"],
.profile-card input[type="search"],
.profile-card input[type="url"],
.profile-card input[type="tel"],
.profile-card input[type="number"],
.profile-card input[type="date"],
.profile-card input[type="datetime-local"],
.profile-card select,
.profile-card textarea,
.profile-card .form-input,
.profile-card .form-control {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--r-md, 12px);
    color: var(--text);
    font: 400 14px/1.5 var(--sans, system-ui, sans-serif);
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.profile-card textarea.form-input,
.profile-card textarea {
    min-height: 110px;
    padding: 14px 16px;
    resize: vertical;
    line-height: 1.55;
}

.profile-card input::placeholder,
.profile-card textarea::placeholder {
    color: var(--muted);
    opacity: .8;
}

.profile-card input:hover,
.profile-card select:hover,
.profile-card textarea:hover {
    border-color: var(--line2);
}

.profile-card input:focus,
.profile-card select:focus,
.profile-card textarea:focus,
.profile-card .form-input:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.profile-card input:disabled,
.profile-card select:disabled,
.profile-card textarea:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ------------------------- Select со стрелкой ------------------------- */
.profile-card select,
.profile-card select.timezoneselect {
    padding-right: 44px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A29E97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    cursor: pointer;
}
[data-theme="light"] .profile-card select,
[data-theme="light"] .profile-card select.timezoneselect {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Опции внутри select */
.profile-card select option {
    background: var(--surface);
    color: var(--text);
    padding: 8px;
}

/* ------------------------- File input ------------------------- */
.profile-card input[type="file"] {
    padding: 10px 14px;
    cursor: pointer;
}
.profile-card input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 8px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 8px);
    background: var(--card);
    color: var(--text);
    font: 600 13px var(--sans, system-ui, sans-serif);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.profile-card input[type="file"]::file-selector-button:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent2);
}

/* ------------------------- Чекбоксы ------------------------- */
.profile-card .form-check,
.profile-card .form-check-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    color: var(--soft);
    font-size: 14px;
    line-height: 1.5;
    padding: 6px 0;
    min-width: 0;
}

.profile-card .form-check-input,
.profile-card input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 6px;
    border: 2px solid var(--line2);
    background: var(--surface-sunk);
    cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s;
    top: 2px;
}

.profile-card .form-check-input:hover,
.profile-card input[type="checkbox"]:hover {
    border-color: var(--accent);
}

.profile-card .form-check-input:checked,
.profile-card input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.profile-card .form-check-input:checked::after,
.profile-card input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--accent-ink, #0A0A0C);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* Скрытый label-обёртка «Чужой компьютер» и подобные */
.profile-card label.form-check > span {
    color: var(--soft);
}

/* ------------------------- Кнопки ------------------------- */
.profile-card .form-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    margin-top: var(--sp-4, 16px);
    flex-wrap: wrap;
}

.profile-card .form-actions .s-btn,
.profile-card .form-actions button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: var(--r-md, 12px);
    border: 0;
    font: 600 14px var(--sans, system-ui, sans-serif);
    cursor: pointer;
    transition: filter .15s, transform .1s, background .15s, border-color .15s;
}

.profile-card .form-actions .s-btn.btn-accent {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: var(--accent-ink, #0A0A0C);
    box-shadow: 0 8px 24px -8px var(--accent);
}
.profile-card .form-actions .s-btn.btn-accent:hover {
    filter: brightness(1.08);
}
.profile-card .form-actions .s-btn.btn-accent:active {
    transform: translateY(1px);
}

/* ------------------------- Мобильные ------------------------- */
@media (max-width: 720px) {
    .profile-card {
        padding: 20px 16px;
        border-radius: var(--r-lg, 16px);
    }
    .profile-card .form-grid {
        grid-template-columns: 1fr;
    }
    .profile-card .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .profile-card .form-actions .s-btn,
    .profile-card .form-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   PCARD — финальные бейджи на постере (KinoStyle palette)
   Фиолет + Красный + Лайм + Белый. Чисто, современно.
   ========================================================================== */

/* ---- 1. Позиции ---- */
.pcard-img .b-rate    { top: 10px;    left: 10px;  right: auto; bottom: auto; }
.pcard-img .b-new     { top: 10px;    right: 10px; left: auto;  bottom: auto; }
.pcard-img .b-qual    { bottom: 10px; right: 10px; top: auto;   left: auto;  }
.pcard-img .b-dur     { bottom: 10px; left: 10px;  top: auto;   right: auto; }
/* [удалён старый .b-episode блок] */
/* [удалён] */
.pcard-img .b-new + .b-qual {
    top: auto; bottom: 10px; right: 10px;
}

/* ---- 2. Базовый стиль ---- */
.pcard-img .b-rate,
.pcard-img .b-new,
.pcard-img .b-qual,
.pcard-img .b-dur,
/* [удалён старый .b-episode блок] */

/* ---- 3. ОЦЕНКА (белый фон) ---- */

/* Обычный рейтинг < 8 — белый фон, чёрный текст, чёрная ★ */
.pcard-img .b-rate.plain {
    background: #ffffff;
    color: #0A0A0C;
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.06);
}
.pcard-img .b-rate.plain i {
    color: #0A0A0C;
    opacity: 1;
    filter: none;
    font-size: 9px;
}

/* Топ-рейтинг ≥ 8 — белый фон, золотой текст, золотая ★ */
.pcard-img .b-rate {
    background: #ffffff;
    color: #E8C27A;
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(232,194,122,.4);
}
.pcard-img .b-rate i {
    color: #E8C27A;
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(232,194,122,.35));
    font-size: 9px;
}

/* ---- 4. КАЧЕСТВО (FHD/4K/TC) — фиолетовый фон, белый текст ---- */
.pcard-img .b-qual {
    background: linear-gradient(135deg, #a000ff, #ce5eff);
    color: #ffffff;
    box-shadow: 0 6px 18px -6px rgba(160,0,255,.6), inset 0 0 0 1px rgba(255,255,255,.18);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* Убираем точку слева, если она была */
.pcard-img .b-qual::before { display: none; }

/* ---- 5. ВОЗРАСТ (16+/18+) — ярко-красный фон, белый текст ---- */
.pcard-img .b-new {
    background: linear-gradient(135deg, #ff2244, #ff5566);
    color: #ffffff;
    box-shadow: 0 6px 18px -6px rgba(255,34,68,.55), inset 0 0 0 1px rgba(255,255,255,.2);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* ---- 6. ДЛИТЕЛЬНОСТЬ — лаймовый фон, чёрный текст ---- */
.pcard-img .b-dur {
    background: linear-gradient(135deg, #d4ff3d, #b8f016);
    color: #0A0A0C;
    padding-left: 22px;
    position: absolute;
    box-shadow: 0 6px 18px -6px rgba(212,255,61,.5), inset 0 0 0 1px rgba(0,0,0,.08);
}
.pcard-img .b-dur::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    background: #0A0A0C;
    opacity: .85;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>") center/contain no-repeat;
}

/* ---- 7. Серия/эпизод — тоже фиолетовый, но темнее ---- */
/* [удалён старый .b-episode блок] */

/* ---- 8. Светлая тема ---- */
[data-theme="light"] .pcard-img .b-rate.plain {
    background: #1A1A1C;
    color: #ffffff;
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="light"] .pcard-img .b-rate.plain i { color: #ffffff; }

[data-theme="light"] .pcard-img .b-rate {
    background: #1A1A1C;
    color: #E8C27A;
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(232,194,122,.4);
}
[data-theme="light"] .pcard-img .b-rate i { color: #E8C27A; }

[data-theme="light"] .pcard-img .b-qual {
    background: linear-gradient(135deg, #7a28a8, #8b33c5);
    color: #ffffff;
    box-shadow: 0 6px 18px -6px rgba(122,40,168,.5);
}

[data-theme="light"] .pcard-img .b-new {
    background: linear-gradient(135deg, #d91235, #e63946);
    color: #ffffff;
    box-shadow: 0 6px 18px -6px rgba(217,18,53,.5);
}

[data-theme="light"] .pcard-img .b-dur {
    background: linear-gradient(135deg, #c8ff2e, #a8e000);
    color: #0A0A0C;
    box-shadow: 0 6px 18px -6px rgba(200,255,46,.5);
}
[data-theme="light"] .pcard-img .b-dur::before { background: #0A0A0C; }

[data-theme="light"] /* [удалён старый .b-episode блок] */

/* ---- 9. Hover — лёгкий подъём яркости ---- */
.pcard:hover .pcard-img .b-qual,
.pcard:hover .pcard-img .b-new,
.pcard:hover .pcard-img .b-dur {
    filter: brightness(1.08);
}
.pcard:hover .pcard-img .b-rate {
    filter: brightness(1.02);
}

/* ==========================================================================
   PCARD — ВАУ-эффекты (KinoStyle Premium v2)
   Кнопка Play 88px, zoom постера, блик, свечение, stagger.
   ========================================================================== */

/* --------------------------------------------------------
   1. КАРТОЧКА
   -------------------------------------------------------- */
.pcard {
    position: relative;
    isolation: isolate;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.pcard:hover { z-index: 10; }

/* --------------------------------------------------------
   2. ПОСТЕР — zoom + свечение + рамка
   -------------------------------------------------------- */
.pcard-img {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: var(--card) center/cover no-repeat;
    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        box-shadow .55s cubic-bezier(.2,.7,.2,1);
    box-shadow:
        0 6px 20px -10px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(244,241,236,.05);
}

/* Псевдо-слой для zoom фоновой картинки (чтобы не ломать бейджи) */
.pcard-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
    z-index: 0;
    pointer-events: none;
}

/* Вуаль — градиенты для читаемости бейджей + для глубины */
.pcard-img > span.shine {
    position: absolute;
    top: 0; left: -60%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,.28) 50%,
        rgba(255,255,255,0) 80%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 4;
    transition: left .65s cubic-bezier(.2,.7,.2,1);
}

/* Тонкая градиентная полоса сверху — акцентная */
.pcard-img {
    background-clip: padding-box;
}

/* HOVER */
.pcard:hover .pcard-img {
    transform: translateY(-10px) scale(1.015);
    box-shadow:
        0 32px 56px -24px rgba(160,0,255,.65),
        0 12px 28px -12px rgba(0,0,0,.7),
        0 0 0 2px rgba(206,94,255,.55),
        0 0 0 6px rgba(160,0,255,.12);
}
.pcard:hover .pcard-img::before {
    transform: scale(1.12);
}
.pcard:hover .pcard-img > span.shine {
    left: 120%;
}

/* Вуаль — псевдо на самой карточке через ::after */
.pcard-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,0) 26%),
        linear-gradient(0deg, rgba(10,10,12,.7) 0%, rgba(10,10,12,0) 38%);
    z-index: 2;
    pointer-events: none;
    transition: opacity .4s;
    opacity: .9;
}
.pcard:hover .pcard-img::after { opacity: 1; }

/* --------------------------------------------------------
   3. КНОПКА PLAY — белый круг на тёмной / чёрный на светлой
   -------------------------------------------------------- */
.pcard-play {
    position: absolute;
    top: 50%; left: 50%;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f4f1ec;         /* тёмная тема: белый круг */
    color: #a000ff;              /* фиолетовая иконка */
    font-size: 34px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
    transition:
        opacity .35s ease,
        transform .55s cubic-bezier(.34,1.56,.64,1),
        box-shadow .4s,
        background .3s;
    z-index: 5;
    pointer-events: none;
    box-shadow:
        0 20px 48px -16px rgba(0,0,0,.65),
        0 0 0 8px rgba(255,255,255,.16),
        inset 0 0 0 1px rgba(0,0,0,.06);
}
.pcard-play i {
    transform: translateX(3px);  /* сдвиг play-иконки к центру визуально */
}
.pcard:hover .pcard-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: pcard-play-pulse 1.8s ease-in-out infinite;
}
@keyframes pcard-play-pulse {
    0%, 100% { box-shadow:
        0 20px 48px -16px rgba(0,0,0,.65),
        0 0 0 8px rgba(255,255,255,.16),
        inset 0 0 0 1px rgba(0,0,0,.06); }
    50%      { box-shadow:
        0 24px 56px -16px rgba(160,0,255,.55),
        0 0 0 14px rgba(160,0,255,.12),
        inset 0 0 0 1px rgba(0,0,0,.06); }
}

/* --------------------------------------------------------
   4. НАЗВАНИЕ при hover — сдвиг + акцент
   -------------------------------------------------------- */
.pcard-title {
    transition:
        color .25s ease,
        transform .45s cubic-bezier(.2,.7,.2,1);
}
.pcard:hover .pcard-title {
    color: var(--accent2);
    transform: translateY(-2px);
}

.pcard-info small {
    transition: color .3s;
}
.pcard:hover .pcard-info small {
    color: var(--soft);
}

/* --------------------------------------------------------
   5. КНОПКА «В СПИСОК» — появляется с zoom
   -------------------------------------------------------- */
.pcard-info .add-btn {
    transition:
        transform .45s cubic-bezier(.34,1.56,.64,1),
        opacity .35s ease,
        background .25s, border-color .25s, color .25s,
        box-shadow .3s;
}
.pcard-info .add-btn.on {
    /* активная кнопка всегда видна */
    opacity: 1;
    transform: scale(1);
}
.pcard:hover .pcard-info .add-btn {
    transform: scale(1.1);
}
.pcard-info .add-btn:hover {
    transform: scale(1.18) rotate(-6deg) !important;
    box-shadow: 0 12px 28px -8px rgba(160,0,255,.6);
}
.pcard-info .add-btn.on {
    animation: pcard-fav-glow 2.8s ease-in-out infinite;
}
@keyframes pcard-fav-glow {
    0%, 100% { box-shadow: 0 6px 18px -6px rgba(160,0,255,.45); }
    50%      { box-shadow: 0 10px 26px -6px rgba(206,94,255,.8); }
}

/* --------------------------------------------------------
   6. ПОЯВЛЕНИЕ КАРТОЧЕК — stagger
   -------------------------------------------------------- */
.grid-cards .pcard {
    animation: pcard-fade-up .6s cubic-bezier(.2,.7,.2,1) both;
}
.grid-cards .pcard:nth-child(1)  { animation-delay: 0ms; }
.grid-cards .pcard:nth-child(2)  { animation-delay: 50ms; }
.grid-cards .pcard:nth-child(3)  { animation-delay: 100ms; }
.grid-cards .pcard:nth-child(4)  { animation-delay: 150ms; }
.grid-cards .pcard:nth-child(5)  { animation-delay: 200ms; }
.grid-cards .pcard:nth-child(6)  { animation-delay: 250ms; }
.grid-cards .pcard:nth-child(7)  { animation-delay: 300ms; }
.grid-cards .pcard:nth-child(8)  { animation-delay: 350ms; }
.grid-cards .pcard:nth-child(9)  { animation-delay: 400ms; }
.grid-cards .pcard:nth-child(10) { animation-delay: 450ms; }
.grid-cards .pcard:nth-child(n+11) { animation-delay: 500ms; }

@keyframes pcard-fade-up {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Пульс ★ у топ-рейтинга */
.pcard-img .b-rate:not(.plain) i {
    animation: pcard-star-shine 2.8s ease-in-out infinite;
}
@keyframes pcard-star-shine {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(232,194,122,.4)); }
    50%      { filter: drop-shadow(0 0 9px rgba(232,194,122,1)); }
}

/* --------------------------------------------------------
   7. СПИСОК (is-list)
   -------------------------------------------------------- */
.is-list .pcard {
    transition: background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.is-list .pcard:hover {
    transform: translateX(6px);
}
.is-list .pcard .pcard-title {
    transition: color .25s ease;
}
.is-list .pcard:hover .pcard-title {
    color: var(--accent2);
    transform: none;
}

/* --------------------------------------------------------
   8. СВЕТЛАЯ ТЕМА — инверсия Play
   -------------------------------------------------------- */
[data-theme="light"] .pcard-play {
    background: #1a1a1c;         /* чёрный круг */
    color: #ce5eff;              /* фиолетовая иконка */
    box-shadow:
        0 20px 48px -16px rgba(0,0,0,.3),
        0 0 0 8px rgba(26,26,28,.08),
        inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="light"] .pcard:hover .pcard-play {
    animation: pcard-play-pulse-light 1.8s ease-in-out infinite;
}
@keyframes pcard-play-pulse-light {
    0%, 100% { box-shadow:
        0 20px 48px -16px rgba(0,0,0,.3),
        0 0 0 8px rgba(26,26,28,.08),
        inset 0 0 0 1px rgba(255,255,255,.06); }
    50%      { box-shadow:
        0 24px 56px -16px rgba(122,40,168,.5),
        0 0 0 14px rgba(122,40,168,.14),
        inset 0 0 0 1px rgba(255,255,255,.06); }
}
[data-theme="light"] .pcard-img {
    box-shadow:
        0 4px 16px -8px rgba(0,0,0,.15),
        inset 0 0 0 1px rgba(26,26,28,.06);
}
[data-theme="light"] .pcard:hover .pcard-img {
    box-shadow:
        0 28px 48px -20px rgba(122,40,168,.35),
        0 10px 24px -10px rgba(0,0,0,.15),
        0 0 0 2px rgba(122,40,168,.45),
        0 0 0 6px rgba(122,40,168,.1);
}
[data-theme="light"] .pcard-img::after {
    background:
        linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 26%),
        linear-gradient(0deg, rgba(26,26,28,.62) 0%, rgba(26,26,28,0) 38%);
}

/* --------------------------------------------------------
   9. REDUCED MOTION
   -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pcard,
    .pcard-img,
    .pcard-img::before,
    .pcard-img::after,
    .pcard-img > span.shine,
    .pcard-play,
    .pcard-title,
    .add-btn,
    .grid-cards .pcard {
        animation: none !important;
        transition: none !important;
    }
    .pcard:hover .pcard-img {
        transform: none;
    }
    .pcard:hover .pcard-img::before {
        transform: scale(1);
    }
}

/* ==========================================================================
   KINO-AUTH — «Премьера KinoDron»
   Двухпанельный кинозал: афиша + форма.
   Тёмная/светлая тема, wow-эффекты, адаптив.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════
   KinoStyle — Форма рецензии v3 (clean, Lumen style)
   ══════════════════════════════════════════════════════════════ */

.cmt-form {
    margin-top: 28px;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.cmt-form.is-open,
.cmt-form:focus-within {
    border-color: var(--line2);
    box-shadow: var(--shadow-soft);
}

.cmt-form__toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease;
}

.cmt-form__toggle:hover {
    background: var(--accent-soft);
}

.cmt-form__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent3));
    color: var(--accent-ink);
    font-size: 16px;
    flex: 0 0 auto;
    box-shadow: 0 8px 20px -6px rgba(255, 90, 54, .45);
    transition: transform .25s ease, box-shadow .25s ease;
}

.cmt-form__toggle:hover .cmt-form__toggle-icon {
    transform: scale(1.05);
    box-shadow: 0 12px 28px -6px rgba(255, 90, 54, .6);
}

.cmt-form__toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.cmt-form__toggle-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--text);
}

.cmt-form__toggle-sub {
    font-size: var(--fs-meta);
    color: var(--muted);
}

.cmt-form__toggle-chevron {
    flex: 0 0 auto;
    color: var(--muted);
    transition: transform .25s ease;
}

.cmt-form.is-open .cmt-form__toggle-chevron {
    transform: rotate(180deg);
}

.cmt-form__inner {
    display: none;
    padding: 0 24px 24px;
    border-top: 1px solid var(--line);
}

.cmt-form.is-open .cmt-form__inner {
    display: block;
    animation: cmtFadeIn .3s ease;
}

@keyframes cmtFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.cmt-form__field--editor {
    margin-top: 16px;
    border: 1px solid var(--line2);
    border-radius: 16px;
    background: var(--surface-sunk);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cmt-form__field--editor:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.cmt-form .wseditor,
.cmt-form .dleaddcomments-editor {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cmt-form .tox-tinymce {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

.cmt-form .tox .tox-editor-header {
    padding: 6px 10px !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
    margin: 0 !important;
}

.cmt-form .tox .tox-toolbar-overlord,
.cmt-form .tox .tox-toolbar__primary,
.cmt-form .tox .tox-toolbar {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cmt-form .tox .tox-toolbar__group {
    padding: 0 2px !important;
    margin: 0 !important;
    border: 0 !important;
}

.cmt-form .tox .tox-tbtn {
    color: var(--muted) !important;
    border-radius: 8px !important;
    transition: background .18s ease, color .18s ease !important;
}

.cmt-form .tox .tox-tbtn svg {
    fill: currentColor !important;
}

.cmt-form .tox .tox-tbtn:hover,
.cmt-form .tox .tox-tbtn:focus {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

.cmt-form .tox .tox-tbtn--enabled,
.cmt-form .tox .tox-tbtn--enabled:hover,
.cmt-form .tox .tox-tbtn[aria-pressed="true"] {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
}

.cmt-form .tox .tox-edit-area {
    background: var(--surface-sunk) !important;
    padding: 0 !important;
}

.cmt-form .tox .tox-edit-area__iframe {
    background: var(--surface-sunk) !important;
    border: 0 !important;
    padding: 14px 16px !important;
    color: var(--text) !important;
    font-family: var(--sans) !important;
    font-size: var(--fs-body) !important;
}

.cmt-form .tox .tox-statusbar {
    background: var(--surface) !important;
    border-top: 1px solid var(--line) !important;
    color: var(--muted) !important;
    padding: 4px 10px !important;
}

.cmt-form .tox .tox-statusbar a,
.cmt-form .tox .tox-statusbar__path-item {
    color: var(--muted) !important;
}

.cmt-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.cmt-form__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.cmt-form__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: var(--soft);
    font-size: var(--fs-meta);
}

.cmt-form__check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid var(--line2);
    accent-color: var(--accent);
    cursor: pointer;
    flex: 0 0 auto;
}

.cmt-form__note {
    font-size: var(--fs-meta);
    color: var(--muted);
    line-height: 1.4;
}

.cmt-form__note a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s ease;
}

.cmt-form__note a:hover {
    color: var(--accent2);
}

.cmt-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--control-h);
    padding: 0 26px;
    border: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: var(--accent-ink);
    font-family: inherit;
    font-size: var(--fs-ui);
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: 0 8px 22px -8px rgba(255, 90, 54, .55);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cmt-form__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(255, 90, 54, .7);
    filter: brightness(1.05);
}

.cmt-form__submit:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -4px rgba(255, 90, 54, .5);
}

.cmt-form__submit i {
    font-size: 15px;
    width: auto;
}

.cmt-form__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--mist-soft);
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .2s ease, color .2s ease;
}

.cmt-form__close:hover {
    background: var(--rose-soft);
    color: var(--negative);
}

[data-theme="light"] .cmt-form {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .08);
}

[data-theme="light"] .cmt-form__field--editor {
    background: #fafafa;
    border-color: rgba(0, 0, 0, .1);
}

[data-theme="light"] .cmt-form .tox .tox-editor-header {
    background: #f5f5f5 !important;
    border-bottom-color: rgba(0, 0, 0, .08) !important;
}

[data-theme="light"] .cmt-form .tox .tox-edit-area,
[data-theme="light"] .cmt-form .tox .tox-edit-area__iframe {
    background: #fafafa !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .cmt-form .tox .tox-statusbar {
    background: #f5f5f5 !important;
    border-top-color: rgba(0, 0, 0, .08) !important;
}

@media (max-width: 640px) {
    .cmt-form__toggle {
        padding: 16px 18px;
    }
    .cmt-form__inner {
        padding: 0 18px 18px;
    }
    .cmt-form__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .cmt-form__submit {
        width: 100%;
        justify-content: center;
    }
    .cmt-form__meta {
        order: 2;
    }
}


/* ══════════════════════════════════════════════════════════════
   KinoStyle — Поля гостя, капча, reCAPTCHA
   ══════════════════════════════════════════════════════════════ */

/* Ряд с двумя полями (имя, email) — адаптивная сетка */
.cmt-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
    margin-top: 16px;
}

/* Общее поле */
.cmt-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Текстовые поля */
.cmt-form__field input[type="text"],
.cmt-form__field input[type="email"] {
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--line2);
    background: var(--surface-sunk);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--fs-body);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.cmt-form__field input[type="text"]::placeholder,
.cmt-form__field input[type="email"]::placeholder {
    color: var(--muted);
}

.cmt-form__field input[type="text"]:focus,
.cmt-form__field input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Капча (картинка + поле) ── */
.cmt-form__field--captcha {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
}

.cmt-form__captcha-img {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}

.cmt-form__captcha-img img {
    display: block;
    height: 46px;
    width: auto;
    border-radius: 10px;
}

.cmt-form__field--captcha input[type="text"] {
    flex: 1 1 180px;
    min-width: 0;
}

/* ── reCAPTCHA ── */
.cmt-form__field > .g-recaptcha,
.cmt-form__field > div[id^="rc-anchor"] {
    margin-top: 8px;
}

/* ── Светлая тема: поля гостя ── */
[data-theme="light"] .cmt-form__field input[type="text"],
[data-theme="light"] .cmt-form__field input[type="email"] {
    background: #fafafa;
    border-color: rgba(0, 0, 0, .12);
    color: #1a1a1a;
}

[data-theme="light"] .cmt-form__field input[type="text"]:focus,
[data-theme="light"] .cmt-form__field input[type="email"]:focus {
    background: #ffffff;
    border-color: var(--accent);
}

[data-theme="light"] .cmt-form__field--captcha {
    background: #fafafa;
    border-color: rgba(0, 0, 0, .08);
}

/* ── Мобильные ── */
@media (max-width: 640px) {
    .cmt-form__field--captcha {
        flex-direction: column;
        align-items: stretch;
    }
    .cmt-form__captcha-img {
        align-self: flex-start;
    }
}


/* ══════════════════════════════════════════════════════════════
   KinoStyle — .cmt-form__form (обёртка формы внутри cmt-form__inner)
   ══════════════════════════════════════════════════════════════ */

.cmt-form__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}

/* Поля-обёртки для гостя и reCAPTCHA — отступ сверху */
.cmt-form__form > .cmt-form__row {
    margin-top: 0;
}

.cmt-form__form > .cmt-form__field:not(.cmt-form__field--editor) {
    margin-top: 0;
}

.cmt-form__field--editor {
    margin-top: 16px;   /* отступ от тумблера-заголовка до редактора */
}


/* ============================================================
   KinoStyle — Кнопка «Смотреть вместе» (кинозал)
   ============================================================ */

.source-card--party {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%,
        color-mix(in srgb, var(--accent3) 8%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.source-card--party::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%,
        color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
    pointer-events: none;
}

.source-card--party:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 20%, var(--surface)) 0%,
        color-mix(in srgb, var(--accent3) 14%, var(--surface)) 100%);
    border-color: var(--accent) !important;
    box-shadow: 0 8px 22px -10px var(--accent);
}

.source-card--party .source-card__icon--party {
    background: linear-gradient(135deg, var(--accent), var(--accent3));
    color: #fff;
    box-shadow: 0 6px 16px -6px var(--accent);
}

.source-card--party .source-card__body b {
    color: var(--accent);
}

.source-card--party .source-card__dot {
    background: var(--accent);
    animation: partyPulse 2s ease-in-out infinite;
}

@keyframes partyPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.3); }
}

/* Светлая тема — цветовые корректировки */
[data-theme="light"] .source-card--party {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, #ffffff) 0%,
        color-mix(in srgb, var(--accent3) 5%, #ffffff) 100%);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

[data-theme="light"] .source-card--party:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 15%, #ffffff) 0%,
        color-mix(in srgb, var(--accent3) 10%, #ffffff) 100%);
}


/* ══════════════════════════════════════════════════════════════
   Светлая тема
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Мобильная адаптация
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {


}

/* ══════════════════════════════════════════════════════════════
   Светлая тема
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Планшет — одна колонка
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {

}

/* ══════════════════════════════════════════════════════════════
   Мобильный
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {


}


/* ══════════════════════════════════════════════════════════════
   Светлая тема
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Планшет — одна колонка
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {

}

/* ══════════════════════════════════════════════════════════════
   Мобильный
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {


    .cinema-create__btn,


}


/* ══════════════════════════════════════════════════════════════
   KinoStyle — Кинозалы: страница создания (v4, финальный)
   ══════════════════════════════════════════════════════════════ */

/* ─── Обёртка страницы ─── */
.cinema-create {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;

    /* КРИТИЧНО: отступ сверху = фиксированная шапка + воздух */
    padding: calc(var(--top) + clamp(24px, 3vw, 40px)) var(--pad) clamp(48px, 6vw, 80px);

    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 36px);
    min-width: 0;
}

/* ─── Шапка страницы ─── */
.cinema-create .section-head {
    align-items: flex-start;
    margin: 0;
}

.cinema-create__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.cinema-create__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    height: 36px;
    padding: 0 14px 0 12px;
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid var(--line2);
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

.cinema-create__back:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.cinema-create__back i {
    width: auto;
    font-size: 12px;
}

/* ─── Форма — симметричная сетка 2 колонки ─── */
.cinema-create__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 24px);
    align-items: stretch;   /* карточки одной высоты */
    width: 100%;
}

/* ─── Карточка-секция ─── */
.cinema-create__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    min-width: 0;
    transition: border-color .25s, box-shadow .25s;
    /* КРИТИЧНО: растягивается на всю высоту грид-ячейки */
    height: 100%;
}

.cinema-create__card:hover {
    border-color: var(--line2);
}

/* Растягивающийся вариант — для симметрии */
.cinema-create__card--grow {
    /* по умолчанию уже height:100% */
}

/* Шапка карточки */
.cinema-create__card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 4%, transparent),
        transparent);
    flex: 0 0 auto;   /* не растягивается */
}

.cinema-create__card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 20%, var(--surface)),
        color-mix(in srgb, var(--accent2) 12%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 17px;
}

.cinema-create__card-icon i {
    width: auto;
}

.cinema-create__card-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cinema-create__card-title b {
    font-family: var(--serif);
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--text);
}

.cinema-create__card-title span {
    font-size: var(--fs-meta);
    color: var(--muted);
    line-height: 1.4;
}

/* Тело карточки */
.cinema-create__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    flex: 1 1 auto;   /* растягивается на всю высоту карточки */
    min-width: 0;
}

/* ─── Поля ─── */
.cinema-create__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cinema-create__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-meta);
    font-weight: 700;
    color: var(--soft);
    letter-spacing: .02em;
    line-height: 1.3;
}

.cinema-create__req {
    color: var(--accent);
    font-weight: 800;
}

.cinema-create__optional {
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: var(--r-xs);
    background: var(--mist-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cinema-create__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    margin-top: 2px;
}

.cinema-create__hint i {
    width: auto;
    font-size: 11px;
    color: var(--accent);
    opacity: .8;
}

/* ─── Input ─── */
.cinema-create__input {
    width: 100%;
    min-height: var(--control-h);
    padding: 10px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--line2);
    background: var(--surface-sunk);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--fs-body);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.cinema-create__input::placeholder {
    color: var(--muted);
    opacity: .75;
}

.cinema-create__input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Поиск фильма */
.cinema-create__search {
    position: relative;
    display: flex;
    align-items: center;
}

.cinema-create__search-icon {
    position: absolute;
    left: 16px;
    color: var(--muted);
    font-size: 14px;
    pointer-events: none;
    width: auto;
    z-index: 1;
    transition: color .2s;
}

.cinema-create__search:focus-within .cinema-create__search-icon {
    color: var(--accent);
}

.cinema-create__search .cinema-create__input {
    padding-left: 42px;
}

/* Поле пароля */
.cinema-create__password {
    position: relative;
    display: flex;
    align-items: center;
}

.cinema-create__password-icon {
    position: absolute;
    left: 16px;
    color: var(--muted);
    font-size: 14px;
    pointer-events: none;
    width: auto;
    z-index: 1;
    transition: color .2s;
}

.cinema-create__password:focus-within .cinema-create__password-icon {
    color: var(--accent);
}

.cinema-create__password .cinema-create__input {
    padding-left: 42px;
    padding-right: 52px;
}

/* Глаз */
.cinema-create__eye {
    position: absolute;
    right: 8px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s, color .2s;
}

.cinema-create__eye i {
    width: auto;
    font-size: 14px;
}

.cinema-create__eye:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.cinema-create__eye:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ─── Инфо-блок — прижимается к низу карточки ─── */
.cinema-create__info {
    /* КРИТИЧНО: margin-top:auto прижимает блок к низу карточки */
    margin-top: auto;

    display: flex;
    gap: 14px;
    padding: 18px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 10%, var(--surface)),
        color-mix(in srgb, var(--accent2) 6%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    align-items: flex-start;
    min-width: 0;
}

.cinema-create__info-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: grid;
    place-items: center;
    font-size: 15px;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}

.cinema-create__info-icon i {
    width: auto;
}

.cinema-create__info-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.cinema-create__info-body > b {
    font-family: var(--serif);
    font-weight: 700;
    font-size: var(--fs-ui);
    color: var(--text);
    line-height: 1.3;
}

.cinema-create__info-body ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cinema-create__info-body li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: var(--soft);
}

.cinema-create__info-body li > i {
    flex: 0 0 auto;
    width: 16px;
    color: var(--accent);
    font-size: 12px;
    margin-top: 4px;
    text-align: center;
}

.cinema-create__info-body li > span {
    min-width: 0;
}

.cinema-create__info-body li b {
    color: var(--text);
    font-weight: 700;
}

/* ─── Кнопки — на всю ширину под формой ─── */
.cinema-create__actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cinema-create__btn {
    min-width: 180px;
}

.cinema-create__btn--primary {
    min-width: 220px;
}

/* ══════════════════════════════════════════════════════════════
   Светлая тема
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .cinema-create__card {
    background: #ffffff;
    border-color: rgba(26, 26, 28, .08);
}

[data-theme="light"] .cinema-create__card-head {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 5%, #ffffff),
        transparent);
}

[data-theme="light"] .cinema-create__input {
    background: #fafafa;
    border-color: rgba(26, 26, 28, .12);
    color: var(--text);
}

[data-theme="light"] .cinema-create__input:focus {
    background: #ffffff;
    border-color: var(--accent);
}

[data-theme="light"] .cinema-create__info {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, #ffffff),
        color-mix(in srgb, var(--accent2) 4%, #ffffff));
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   Планшет — одна колонка
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
    .cinema-create__form {
        grid-template-columns: 1fr;
    }
    .cinema-create__actions {
        justify-content: stretch;
    }
    .cinema-create__btn,
    .cinema-create__btn--primary {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   Мобильный
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .cinema-create {
        padding: calc(var(--top) + 20px) var(--pad) 48px;
        gap: 20px;
    }
    .cinema-create__card-head {
        padding: 18px 20px;
    }
    .cinema-create__body {
        padding: 20px;
        gap: 18px;
    }
    .cinema-create__actions {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .cinema-create__btn,
    .cinema-create__btn--primary {
        width: 100%;
        min-width: 0;
    }
    .cinema-create__info {
        padding: 14px;
    }
    .cinema-create__info-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}


/* ══════════════════════════════════════════════════════════════
   KinoStyle — Кинозалы: список комнат (v3, с постерами)
   ══════════════════════════════════════════════════════════════ */

.cinema-list {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
}

.cinema-list-container {
    width: 100%;
}

/* ─── Сетка: 4 в ряд на десктопе ─── */
.cinema-list-vertical {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
    align-items: stretch;
}

@media (max-width: 1199px) {
    .cinema-list-vertical { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .cinema-list-vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 539px) {
    .cinema-list-vertical { grid-template-columns: 1fr; }
}

/* ─── Карточка комнаты ─── */
.cinema-card-strip {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition:
        transform .3s cubic-bezier(.2, .7, .2, 1),
        border-color .25s ease,
        box-shadow .25s ease;
}

.cinema-card-strip:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow:
        0 20px 40px -18px color-mix(in srgb, var(--accent) 45%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
}

/* ─── Постер ─── */
.cinema-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    background-color: var(--card);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: transform .5s ease;
}

/* Затемнение постера снизу */
.cinema-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 45%,
        rgba(10, 10, 12, .35) 70%,
        rgba(10, 10, 12, .85) 100%
    );
    pointer-events: none;
}

.cinema-card-strip:hover .cinema-poster {
    transform: scale(1.04);
}

/* Заглушка, если нет постера */
.cinema-poster[style*="no-poster.png"] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 30%, var(--card)),
        var(--card) 70%);
}

.cinema-poster[style*="no-poster.png"]::before {
    content: "\f008"; /* film */
    font-family: "Font Awesome 6 Free", "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 48px;
    color: var(--muted);
    opacity: .35;
}

/* ─── Иконка замка ─── */
.cinema-lock {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(10, 10, 12, .7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    transition: transform .25s ease;
}

.cinema-card-strip:hover .cinema-lock {
    transform: scale(1.1) rotate(-6deg);
}

.cinema-lock i { width: auto; }

.cinema-lock .fa-lock { color: var(--gold); }
.cinema-lock .fa-unlock-alt { color: var(--positive); }

/* ─── Тело карточки ─── */
.cinema-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
    flex: 1;
    min-width: 0;
}

.cinema-title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color .2s ease;
    word-break: break-word;
}

.cinema-card-strip:hover .cinema-title {
    color: var(--accent2);
}

.cinema-news {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    min-height: 2.8em;
}

/* ─── Мета-строка (владелец · дата) ─── */
.cinema-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    white-space: nowrap;
}

.cinema-owner {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dim);
    font-weight: 600;
}

.cinema-owner::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free", "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--accent);
    margin-right: 5px;
    opacity: .8;
}

.cinema-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted);
    flex: 0 0 auto;
    opacity: .6;
}

.cinema-date {
    flex: 0 0 auto;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cinema-date::before {
    content: "\f017";
    font-family: "Font Awesome 6 Free", "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--accent);
    margin-right: 5px;
    opacity: .8;
}

/* ─── Скрытый .cinema-left, .cinema-right (нет в новой структуре) ─── */
.cinema-left,
.cinema-right,


/* ─── Светлая тема ─── */
[data-theme="light"] .cinema-card-strip {
    background: #ffffff;
    border-color: rgba(26, 26, 28, .08);
}

[data-theme="light"] .cinema-card-strip:hover {
    border-color: var(--accent);
    box-shadow:
        0 20px 40px -18px color-mix(in srgb, var(--accent) 30%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

[data-theme="light"] .cinema-poster::after {
    background: linear-gradient(
        180deg,
        transparent 45%,
        rgba(0, 0, 0, .25) 70%,
        rgba(0, 0, 0, .7) 100%
    );
}

[data-theme="light"] .cinema-lock {
    background: rgba(0, 0, 0, .65);
}

[data-theme="light"] .cinema-meta {
    border-top-color: rgba(26, 26, 28, .08);
}

/* ─── Заголовок страницы списка ─── */


/* ─── Мобильный ─── */
@media (max-width: 640px) {
    .cinema-card-strip { border-radius: 14px; }
    .cinema-body { padding: 12px 14px 14px; }
    .cinema-title { font-size: 15px; }
    .cinema-news { font-size: 11.5px; }
    
    
}


/* ─── Fix: страница списка комнат — отступ сверху (шапка fixed) ─── */
.section:has(.cinema-list) {
    padding-top: calc(var(--top, 92px) + 24px);
}

/* На случай, если страница обёрнута в .main или .cat-main */
.main > .section:has(.cinema-list),
.cat-main > .section:has(.cinema-list) {
    padding-top: calc(var(--top, 92px) + 24px);
}

@media (max-width: 819px) {
    .section:has(.cinema-list) {
        padding-top: calc(var(--top, 76px) + 20px);
    }
}




/* Но если {content} внутри .px — уменьшаем */
.px > .section:first-child {
    padding-top: calc(var(--top, 92px) + 16px);
}

@media (max-width: 819px) {
    .main,
    .cat-main,
    .page-main,
    .px > .section:first-child {
        /* padding-top: calc(var(--top, 76px) + 12px); */
    }
}


/* ══════════════════════════════════════════════════════════════
   KinoStyle — Кинозалы: фикс шапки + кнопка «Войти»
   ══════════════════════════════════════════════════════════════ */

/* ─── Компактная шапка списка комнат ─── */
.section:has(.cinema-list) {
    padding-top: calc(var(--top, 92px) + 20px);
    padding-left: var(--pad);
    padding-right: var(--pad);
}

.section:has(.cinema-list) .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;

    /* ⭐ Компактнее: ограничиваем ширину как у сетки карточек */
    width: 100%;
    max-width: var(--container);
    margin: 0 auto 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.section:has(.cinema-list) .section-head > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.section:has(.cinema-list) .section-heading {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15;
    color: var(--text);
    letter-spacing: -.01em;
}

.section:has(.cinema-list) .section-heading__sub {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.section:has(.cinema-list) .section-head__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.section:has(.cinema-list) .section-head__more:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: var(--accent-ink);
    box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}

.section:has(.cinema-list) .section-head__more i {
    font-size: 12px;
    width: auto;
}

/* ─── Кнопка «Войти» в карточке ─── */
.cinema-enter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    height: 42px;
    width: 100%;
    padding: 0 18px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent2);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.cinema-enter-btn i {
    width: auto;
    font-size: 12px;
    transition: transform .25s ease;
}

.cinema-card-strip:hover .cinema-enter-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: var(--accent-ink);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.cinema-card-strip:hover .cinema-enter-btn i {
    transform: scale(1.15);
}

/* Блик при hover */
.cinema-enter-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(255, 255, 255, .25) 50%,
        transparent 80%
    );
    transform: translateX(-100%);
    transition: transform .6s ease;
    pointer-events: none;
}

.cinema-card-strip:hover .cinema-enter-btn::before {
    transform: translateX(100%);
}

/* ─── Светлая тема ─── */
[data-theme="light"] .cinema-enter-btn {
    background: color-mix(in srgb, var(--accent) 10%, #ffffff);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

[data-theme="light"] .cinema-card-strip:hover .cinema-enter-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #ffffff;
    border-color: transparent;
}

/* ─── Мобильный ─── */
@media (max-width: 640px) {
    .section:has(.cinema-list) {
        padding-top: calc(var(--top, 76px) + 16px);
    }
    .section:has(.cinema-list) .section-head {
        gap: 12px;
        padding-bottom: 12px;
        margin-bottom: 18px;
    }
    .section:has(.cinema-list) .section-head__more {
        width: 100%;
        justify-content: center;
        height: 44px;
    }
    .cinema-enter-btn {
        height: 40px;
        font-size: 13px;
    }
}


/* ══════════════════════════════════════════════════════════════
   KinoStyle — Toast-уведомления (единый стиль)
   ══════════════════════════════════════════════════════════════ */

.kino-toast-container {
    position: fixed;
    z-index: 9999;
    top: calc(var(--top, 92px) + 16px);
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

@media (max-width: 640px) {
    .kino-toast-container {
        top: auto;
        bottom: 90px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

/* ─── Toast ─── */
.kino-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 40px 14px 16px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line2);
    box-shadow:
        0 20px 40px -18px rgba(0, 0, 0, .5),
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    transform: translateX(110%);
    opacity: 0;
    transition:
        transform .35s cubic-bezier(.2, .7, .2, 1),
        opacity .35s ease;
    pointer-events: auto;
}

.kino-toast.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.kino-toast.is-hiding {
    transform: translateX(110%);
    opacity: 0;
}

/* Иконка */
.kino-toast > i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    margin-top: 1px;
    background: var(--accent-soft);
    color: var(--accent);
}

/* Текст */
.kino-toast__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Кнопка закрытия */
.kino-toast__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.kino-toast__close:hover {
    background: var(--mist-soft);
    color: var(--text);
}

.kino-toast__close i {
    width: auto;
}

/* ─── Типы ─── */
.kino-toast--success > i {
    background: var(--positive-soft);
    color: var(--positive);
}

.kino-toast--error > i {
    background: var(--negative-soft);
    color: var(--negative);
}

.kino-toast--warning > i {
    background: var(--amber-soft);
    color: var(--gold);
}

.kino-toast--info > i {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ─── Прогресс-бар (по желанию) ─── */
.kino-toast::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    transform-origin: left;
    animation: kinoToastProgress 3.5s linear forwards;
    opacity: .4;
}

.kino-toast--error::after { background: var(--negative); }
.kino-toast--warning::after { background: var(--gold); }
.kino-toast--success::after { background: var(--positive); }

@keyframes kinoToastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ─── Светлая тема ─── */
[data-theme="light"] .kino-toast {
    background: #ffffff;
    border-color: rgba(26, 26, 28, .1);
    box-shadow:
        0 20px 40px -18px rgba(0, 0, 0, .25),
        0 0 0 1px rgba(26, 26, 28, .05);
    color: var(--text);
}

/* ─── Старые уведомления — скрываем ─── */
#notification,
.sync-notification {
    display: none !important;
}

/* Старый #syncNotification (если есть) — тоже скрываем */
#syncNotification {
    display: none !important;
}




/* ═══════════════════════════════════════════════════════════════════════
   🎬 KD-AUTH — Модалка входа KinoDron (v2, чистый дизайн)
   ═══════════════════════════════════════════════════════════════════════ */

body.kd-auth-lock { overflow: hidden; }

.kd-auth {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s cubic-bezier(.2,.7,.2,1),
                visibility .3s cubic-bezier(.2,.7,.2,1);
}

.kd-auth.open {
    opacity: 1;
    visibility: visible;
}

/* ─── Backdrop ─── */
.kd-auth__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 8, .82);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    cursor: pointer;
}

/* ─── Card ─── */
.kd-auth__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 36px 32px 28px;
    border-radius: 24px;
    background: linear-gradient(165deg, #1a1a20 0%, #111114 100%);
    border: 1px solid rgba(244,241,236,.08);
    box-shadow:
        0 50px 90px -30px rgba(0,0,0,.9),
        0 0 0 1px rgba(244,241,236,.04),
        0 0 60px -20px rgba(160,0,255,.25);
    transform: translateY(16px) scale(.96);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2,.7,.2,1),
                opacity .35s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
}

.kd-auth.open .kd-auth__card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ─── Тонкая полоса сверху ─── */
.kd-auth__stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent) 30%,
        var(--accent2) 70%,
        transparent 100%);
    animation: kdStripe 3s ease-in-out infinite;
}

@keyframes kdStripe {
    0%, 100% { opacity: .7; }
    50% { opacity: 1; }
}

/* ─── Кнопка закрытия ─── */
.kd-auth__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .2s cubic-bezier(.2,.7,.2,1);
    z-index: 3;
}

.kd-auth__close:hover {
    background: rgba(160,0,255,.15);
    color: var(--accent3);
    transform: rotate(90deg);
}

/* ─── Заголовок ─── */
.kd-auth__title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.15;
    margin: 0 0 6px;
    color: var(--text);
    letter-spacing: -.01em;
}

.kd-auth__subtitle {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0 0 24px;
    font-weight: 500;
    line-height: 1.4;
}

/* ─── Форма ─── */
.kd-auth__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ─── Поля ─── */
.kd-auth__field {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(244,241,236,.035);
    border: 1px solid rgba(244,241,236,.09);
    border-radius: 13px;
    transition: all .22s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
}

.kd-auth__field:hover {
    background: rgba(244,241,236,.05);
    border-color: rgba(244,241,236,.16);
}

.kd-auth__field:focus-within {
    border-color: var(--accent);
    background: rgba(160,0,255,.05);
    box-shadow:
        0 0 0 4px rgba(160,0,255,.12),
        0 0 20px -4px rgba(160,0,255,.3);
}

.kd-auth__field .kd-auth__icon {
    flex-shrink: 0;
    padding: 0 14px;
    color: var(--muted);
    font-size: 14px;
    transition: color .22s ease;
    pointer-events: none;
}

.kd-auth__field:focus-within .kd-auth__icon {
    color: var(--accent3);
}

.kd-auth__field input {
    flex: 1;
    min-height: 52px;
    padding: 0 14px 0 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-family: var(--sans);
    font-weight: 500;
    outline: none;
}

.kd-auth__field input::placeholder {
    color: var(--muted);
    opacity: .65;
}

/* Глазок показать/скрыть пароль — ВНУТРИ поля, справа */
.kd-auth__eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .2s ease;
    z-index: 2;
}

.kd-auth__eye:hover {
    color: var(--accent3);
    background: rgba(160,0,255,.10);
}

/* ─── Запомнить меня ─── */
.kd-auth__remember {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
    transition: color .2s ease;
    margin-top: 2px;
}

.kd-auth__remember:hover {
    color: var(--soft);
}

.kd-auth__remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kd-auth__check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(244,241,236,.22);
    background: rgba(244,241,236,.04);
    display: grid;
    place-items: center;
    transition: all .2s cubic-bezier(.2,.7,.2,1);
    position: relative;
}

.kd-auth__check::after {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--bg);
    border-bottom: 2px solid var(--bg);
    transform: rotate(-45deg) scale(0);
    margin-top: -2px;
    transition: transform .2s cubic-bezier(.2,.7,.2,1);
}

.kd-auth__remember input:checked + .kd-auth__check {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 10px -2px rgba(160,0,255,.6);
}

.kd-auth__remember input:checked + .kd-auth__check::after {
    transform: rotate(-45deg) scale(1);
}

/* ─── Кнопка "Войти" ─── */
.kd-auth__submit {
    position: relative;
    width: 100%;
    height: 52px;
    margin-top: 6px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    transition: all .25s cubic-bezier(.2,.7,.2,1);
    box-shadow:
        0 8px 22px -8px rgba(160,0,255,.55),
        inset 0 1px 0 rgba(255,255,255,.15);
}

.kd-auth__submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent3) 0%, var(--accent2) 100%);
    opacity: 0;
    transition: opacity .25s ease;
}

.kd-auth__submit span,
.kd-auth__submit i {
    position: relative;
    z-index: 1;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
}

.kd-auth__submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 28px -8px rgba(160,0,255,.8),
        0 0 32px -8px rgba(206,94,255,.5),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.kd-auth__submit:hover::before {
    opacity: 1;
}

.kd-auth__submit:hover i {
    transform: translateX(3px);
}

.kd-auth__submit:active {
    transform: translateY(0);
}

/* ─── Футер ─── */
.kd-auth__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(244,241,236,.06);
}

.kd-auth__link {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    transition: color .2s ease;
}

.kd-auth__link:hover {
    color: var(--accent2);
}

.kd-auth__link--reg {
    color: var(--accent3);
    font-weight: 700;
}

.kd-auth__link--reg:hover {
    color: var(--accent2);
}

/* ─── Мобильный ─── */
@media (max-width: 480px) {
    .kd-auth { padding: 12px; }
    .kd-auth__card {
        padding: 28px 20px 22px;
        border-radius: 20px;
    }
    .kd-auth__title { font-size: 22px; }
    .kd-auth__subtitle { font-size: 13px; margin-bottom: 20px; }
    .kd-auth__foot {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ─── Светлая тема ─── */
[data-theme="light"] .kd-auth__backdrop {
    background: rgba(240,238,234,.85);
}
[data-theme="light"] .kd-auth__card {
    background: linear-gradient(165deg, #fff 0%, #f7f5f1 100%);
    border-color: rgba(0,0,0,.08);
    box-shadow:
        0 40px 80px -20px rgba(0,0,0,.25),
        0 0 60px -20px rgba(160,0,255,.18);
}
[data-theme="light"] .kd-auth__title { color: #1a1a1e; }
[data-theme="light"] .kd-auth__subtitle { color: #666; }
[data-theme="light"] .kd-auth__field {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.09);
}
[data-theme="light"] .kd-auth__field:hover {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.15);
}
[data-theme="light"] .kd-auth__field input { color: #1a1a1e; }
[data-theme="light"] .kd-auth__icon { color: #888; }
[data-theme="light"] .kd-auth__eye { color: #888; }
[data-theme="light"] .kd-auth__remember { color: #666; }
[data-theme="light"] .kd-auth__link { color: #666; }
[data-theme="light"] .kd-auth__close { color: #888; }
[data-theme="light"] .kd-auth__close:hover { background: rgba(160,0,255,.12); color: var(--accent); }
[data-theme="light"] .kd-auth__foot { border-top-color: rgba(0,0,0,.06); }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .kd-auth__card,
    .kd-auth__stripe {
        animation: none !important;
        transition: opacity .1s !important;
    }
}



/* ═══════════════════════════════════════════════════════════════════════
   🎬 KD-AUTH v2 — Полный редизайн полей (одна рамка, чистота)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Отменяем ВСЕ глобальные стили input внутри kd-auth ─── */
.kd-auth input,
.kd-auth input[type="text"],
.kd-auth input[type="password"],
.kd-auth input[type="email"] {
    all: unset !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--text) !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.kd-auth input::placeholder {
    color: var(--muted) !important;
    opacity: .55 !important;
}

.kd-auth input:focus,
.kd-auth input:active {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Автофилл — убираем жёлтый фон Chrome */
.kd-auth input:-webkit-autofill,
.kd-auth input:-webkit-autofill:hover,
.kd-auth input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text) !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* ─── Сам контейнер поля — ЕДИНСТВЕННАЯ рамка ─── */
.kd-auth__field {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(160deg,
        rgba(244,241,236,.045) 0%,
        rgba(244,241,236,.020) 100%) !important;
    border: 1px solid rgba(244,241,236,.10) !important;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 1px 2px rgba(0,0,0,.15) !important;
    overflow: hidden !important;
    transition:
        border-color .25s cubic-bezier(.2,.7,.2,1),
        background .25s cubic-bezier(.2,.7,.2,1),
        box-shadow .25s cubic-bezier(.2,.7,.2,1),
        transform .15s cubic-bezier(.2,.7,.2,1) !important;
}

.kd-auth__field:hover {
    border-color: rgba(244,241,236,.18) !important;
    background: linear-gradient(160deg,
        rgba(244,241,236,.06) 0%,
        rgba(244,241,236,.03) 100%) !important;
}

.kd-auth__field:focus-within {
    border-color: var(--accent) !important;
    background: linear-gradient(160deg,
        rgba(160,0,255,.08) 0%,
        rgba(160,0,255,.04) 100%) !important;
    box-shadow:
        0 0 0 4px rgba(160,0,255,.14),
        0 0 24px -4px rgba(160,0,255,.45),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ─── Иконка слева ─── */
.kd-auth__field .kd-auth__icon {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 15px !important;
    pointer-events: none !important;
    transition: color .25s cubic-bezier(.2,.7,.2,1) !important;
    background: transparent !important;
    border: 0 !important;
}

.kd-auth__field:focus-within .kd-auth__icon {
    color: var(--accent3) !important;
}

/* ─── Текст внутри input ─── */
.kd-auth__field input {
    padding: 0 16px 0 0 !important;
    padding-right: 16px !important;
    font-size: 15px !important;
    letter-spacing: .005em !important;
}

/* Если в поле есть кнопка-глазок — даём справа отступ */
.kd-auth__field:has(.kd-auth__eye) input {
    padding-right: 52px !important;
}

/* ─── Кнопка-глазок (внутри поля, справа) ─── */
.kd-auth__field .kd-auth__eye {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 15px !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    transition:
        color .2s cubic-bezier(.2,.7,.2,1),
        background .2s cubic-bezier(.2,.7,.2,1),
        transform .2s cubic-bezier(.2,.7,.2,1) !important;
    z-index: 2 !important;
    outline: 0 !important;
}

.kd-auth__field .kd-auth__eye:hover {
    color: var(--accent3) !important;
    background: rgba(160,0,255,.10) !important;
}

.kd-auth__field .kd-auth__eye:active {
    transform: translateY(-50%) scale(.92) !important;
}

.kd-auth__field .kd-auth__eye i {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* ─── Светлая тема ─── */
[data-theme="light"] .kd-auth__field {
    background: linear-gradient(160deg,
        rgba(0,0,0,.025) 0%,
        rgba(0,0,0,.010) 100%) !important;
    border-color: rgba(0,0,0,.10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        0 1px 2px rgba(0,0,0,.05) !important;
}

[data-theme="light"] .kd-auth__field:hover {
    border-color: rgba(0,0,0,.18) !important;
    background: linear-gradient(160deg,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.02) 100%) !important;
}

[data-theme="light"] .kd-auth__field:focus-within {
    border-color: var(--accent) !important;
    background: linear-gradient(160deg,
        rgba(160,0,255,.06) 0%,
        rgba(160,0,255,.03) 100%) !important;
    box-shadow:
        0 0 0 4px rgba(160,0,255,.12),
        0 0 20px -4px rgba(160,0,255,.30),
        inset 0 1px 0 rgba(255,255,255,.7) !important;
}

[data-theme="light"] .kd-auth input {
    color: #1a1a1e !important;
}

[data-theme="light"] .kd-auth input::placeholder {
    color: #999 !important;
    opacity: .8 !important;
}

[data-theme="light"] .kd-auth__icon {
    color: #888 !important;
}

[data-theme="light"] .kd-auth__field:focus-within .kd-auth__icon {
    color: var(--accent) !important;
}

[data-theme="light"] .kd-auth__eye {
    color: #888 !important;
}

[data-theme="light"] .kd-auth__eye:hover {
    color: var(--accent) !important;
    background: rgba(160,0,255,.10) !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINO-AUTH PAGE — Страницы входа/регистрации/восстановления
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Обёртка ─── */
.kino-auth {
    position: relative;
    min-height: 100vh;
    padding: calc(var(--top, 92px) + 40px) var(--pad, 32px) 80px;
    background: var(--bg);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Фон ─── */
.kino-auth__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 60% at 30% 30%, rgba(160,0,255,.18), transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 90%, rgba(232,194,122,.06), transparent 60%),
        var(--bg);
}

.kino-auth__rays {
    position: absolute;
    top: 50%;
    left: 30%;
    width: 120vmax;
    height: 120vmax;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(160,0,255,.05) 30deg,
        transparent 60deg,
        rgba(232,194,122,.03) 90deg,
        transparent 120deg
    );
    animation: kinoRays 120s linear infinite;
    opacity: .6;
}

@keyframes kinoRays {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ─── Двухпанельный layout ─── */
.kino-auth__shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 60px);
    width: 100%;
    max-width: 1280px;
    align-items: center;
}

.kino-auth__single {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 60px);
    width: 100%;
    max-width: 1100px;
    align-items: center;
}

@media (max-width: 899px) {
    .kino-auth__shell,
    .kino-auth__single {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .kino-auth__story,
    .kino-auth__single-story {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ЛЕВАЯ ПАНЕЛЬ — АФИША
   ═══════════════════════════════════════════════════════════════ */

.kino-auth__story,
.kino-auth__single-story {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: clamp(20px, 3vw, 48px);
}

.kino-auth__story-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ─── ORB (орб с анимацией) ─── */
.kino-auth__orb {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kino-auth__orb-glow {
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160,0,255,.35) 0%, transparent 70%);
    filter: blur(20px);
    animation: kinoOrbGlow 3s ease-in-out infinite;
}

@keyframes kinoOrbGlow {
    0%, 100% { opacity: .6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.kino-auth__orb-ring {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(160,0,255,.3);
    border-radius: 50%;
    animation: kinoOrbRing 8s linear infinite;
}

.kino-auth__orb-ring--2 {
    inset: 15%;
    border-color: rgba(206,94,255,.4);
    animation-duration: 6s;
    animation-direction: reverse;
}

.kino-auth__orb-ring--3 {
    inset: 30%;
    border-color: rgba(232,194,122,.3);
    animation-duration: 4s;
}

@keyframes kinoOrbRing {
    to { transform: rotate(360deg); }
}

.kino-auth__orb-ray {
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--accent2), transparent);
    height: 2px;
    width: 60%;
    left: 20%;
}

.kino-auth__orb-ray--top { top: 0; }
.kino-auth__orb-ray--right { top: 50%; transform: rotate(90deg); }
.kino-auth__orb-ray--bottom { bottom: 0; }
.kino-auth__orb-ray--left { top: 50%; transform: rotate(90deg); }

.kino-auth__orb-core {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 20px;
    box-shadow:
        0 8px 24px -8px rgba(160,0,255,.8),
        inset 0 1px 0 rgba(255,255,255,.3);
    animation: kinoOrbCore 3s ease-in-out infinite;
}

@keyframes kinoOrbCore {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.kino-auth__orb-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent3);
    box-shadow: 0 0 12px var(--accent3);
}

.kino-auth__orb-dot--1 { top: 0; left: 50%; animation: kinoOrbDot 4s linear infinite; }
.kino-auth__orb-dot--2 { top: 50%; right: 0; animation: kinoOrbDot 4s linear infinite .5s; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.kino-auth__orb-dot--3 { bottom: 0; left: 50%; animation: kinoOrbDot 4s linear infinite 1s; }

@keyframes kinoOrbDot {
    to { transform: rotate(360deg); }
}

.kino-auth__orb-dot--1 { transform-origin: 0 70px; }
.kino-auth__orb-dot--2 { transform-origin: -70px 0; }
.kino-auth__orb-dot--3 { transform-origin: 0 -70px; }

.kino-auth__orb-dust {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent2);
    opacity: .5;
}

.kino-auth__orb-dust--1 { top: 20%; left: 15%; animation: kinoOrbDust 3s ease-in-out infinite; }
.kino-auth__orb-dust--2 { top: 80%; right: 20%; animation: kinoOrbDust 3s ease-in-out infinite .5s; }
.kino-auth__orb-dust--3 { bottom: 25%; right: 10%; animation: kinoOrbDust 3s ease-in-out infinite 1s; }
.kino-auth__orb-dust--4 { top: 10%; right: 30%; animation: kinoOrbDust 3s ease-in-out infinite 1.5s; }
.kino-auth__orb-dust--5 { bottom: 15%; left: 25%; animation: kinoOrbDust 3s ease-in-out infinite 2s; }

@keyframes kinoOrbDust {
    0%, 100% { opacity: .3; transform: scale(1); }
    50% { opacity: .8; transform: scale(1.5); }
}

/* ─── Бренд ─── */
.kino-auth__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: .02em;
    text-decoration: none;
}

.kino-auth__brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 4px 16px -4px rgba(160,0,255,.6);
}

.kino-auth__brand-accent {
    background: linear-gradient(135deg, var(--accent2) 0%, var(--accent3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Заголовок ─── */
.kino-auth__title {
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
    letter-spacing: -.02em;
    margin: 0;
}

.kino-auth__title-grad {
    background: linear-gradient(135deg, var(--accent3) 0%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kino-auth__subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
    max-width: 440px;
}

/* ─── Features ─── */
.kino-auth__features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kino-auth__feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(160deg,
        rgba(244,241,236,.04) 0%,
        rgba(244,241,236,.02) 100%);
    border: 1px solid rgba(244,241,236,.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all .25s cubic-bezier(.2,.7,.2,1);
}

.kino-auth__feature:hover {
    border-color: rgba(160,0,255,.3);
    transform: translateX(4px);
}

.kino-auth__feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(160,0,255,.15), rgba(206,94,255,.10));
    border: 1px solid rgba(160,0,255,.2);
    display: grid;
    place-items: center;
    color: var(--accent3);
    font-size: 16px;
}

.kino-auth__feature-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kino-auth__feature-body b {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--serif);
}

.kino-auth__feature-body span {
    font-size: 13px;
    color: var(--muted);
}

.kino-auth__feature-bar {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent2));
    opacity: 0;
    transition: opacity .25s;
}

.kino-auth__feature:hover .kino-auth__feature-bar {
    opacity: 1;
}

/* ─── Online card ─── */
.kino-auth__online-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(160,0,255,.08), rgba(206,94,255,.04));
    border: 1px solid rgba(160,0,255,.2);
    border-radius: 16px;
    margin-top: auto;
}

.kino-auth__online-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.kino-auth__online-card > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.kino-auth__online-card b {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.kino-auth__online-card span {
    font-size: 12px;
    color: var(--muted);
}

.kino-auth__online-num {
    color: var(--accent3);
    font-weight: 800;
}

.kino-auth__online-status {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(124,196,148,.15);
    border: 1px solid rgba(124,196,148,.3);
    color: var(--positive);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════════
   ПРАВАЯ ПАНЕЛЬ — ФОРМА
   ═══════════════════════════════════════════════════════════════ */

.kino-auth__panel {
    position: relative;
    width: 100%;
}

.kino-auth__card {
    position: relative;
    padding: clamp(24px, 3vw, 40px);
    background: linear-gradient(165deg, #1a1a20 0%, #111114 100%);
    border: 1px solid rgba(244,241,236,.08);
    border-radius: 24px;
    box-shadow:
        0 40px 80px -30px rgba(0,0,0,.9),
        0 0 0 1px rgba(244,241,236,.04),
        0 0 60px -20px rgba(160,0,255,.2);
    overflow: hidden;
}

.kino-auth__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent) 30%,
        var(--accent2) 70%,
        transparent 100%);
}

/* ─── Табы ─── */
.kino-auth__tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(244,241,236,.04);
    border-radius: 12px;
    margin-bottom: 24px;
}

.kino-auth__tab {
    flex: 1;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s cubic-bezier(.2,.7,.2,1);
}

.kino-auth__tab:hover {
    color: var(--text);
}

.kino-auth__tab.active {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(160,0,255,.6);
}

/* ─── Head ─── */
.kino-auth__head {
    margin-bottom: 24px;
}

.kino-auth__eyebrow {
    font-size: 11px;
    font-weight: 800;
    color: var(--accent2);
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: 8px;
}

.kino-auth__h2 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}

.kino-auth__lead {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

/* ─── Форма ─── */
.kino-auth__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Поле (единая рамка) ─── */
.kino-auth__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kino-auth__field > label,
.kino-auth__field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
}

/* ─── Input wrap (единая рамка) ─── */
.kino-auth__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    background: linear-gradient(160deg,
        rgba(244,241,236,.045) 0%,
        rgba(244,241,236,.020) 100%);
    border: 1px solid rgba(244,241,236,.10);
    border-radius: 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    overflow: hidden;
    transition: all .25s cubic-bezier(.2,.7,.2,1);
}

.kino-auth__input-wrap:hover {
    border-color: rgba(244,241,236,.18);
    background: linear-gradient(160deg,
        rgba(244,241,236,.06) 0%,
        rgba(244,241,236,.03) 100%);
}

.kino-auth__input-wrap:focus-within {
    border-color: var(--accent);
    background: linear-gradient(160deg,
        rgba(160,0,255,.08) 0%,
        rgba(160,0,255,.04) 100%);
    box-shadow:
        0 0 0 4px rgba(160,0,255,.14),
        0 0 24px -4px rgba(160,0,255,.45);
}

.kino-auth__input-wrap > i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 100%;
    flex-shrink: 0;
    color: var(--muted);
    font-size: 15px;
    pointer-events: none;
    transition: color .25s;
}

.kino-auth__input-wrap:focus-within > i {
    color: var(--accent3);
}

/* ─── Отмена глобальных стилей input ─── */
.kino-auth__input-wrap input,
.kino-auth__input-wrap textarea {
    all: unset !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    height: 100% !important;
    padding: 0 16px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--text) !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.kino-auth__input-wrap input::placeholder,
.kino-auth__input-wrap textarea::placeholder {
    color: var(--muted) !important;
    opacity: .5 !important;
}

.kino-auth__input-wrap input:focus {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ─── Глазок ─── */
.kino-auth__eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 15px;
    transition: all .2s;
    z-index: 2;
}

.kino-auth__eye:hover {
    color: var(--accent3);
    background: rgba(160,0,255,.10);
}

.kino-auth__eye::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
}

.kino-auth__eye.is-on::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>") center/contain no-repeat;
}

/* ─── Textarea ─── */
.kino-auth__input-wrap--textarea {
    height: auto;
    padding: 12px 16px;
}

.kino-auth__input-wrap--textarea textarea {
    min-height: 80px;
    padding: 0 !important;
    line-height: 1.5 !important;
    resize: vertical;
}

/* ─── Файл ─── */
.kino-auth__input-wrap--file {
    padding: 0 16px;
}

.kino-auth__input-wrap--file input[type="file"] {
    padding: 0 !important;
    font-size: 13px !important;
    cursor: pointer;
}

/* ─── Row (чекбокс + ссылка) ─── */
.kino-auth__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.kino-auth__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    transition: color .2s;
}

.kino-auth__check:hover {
    color: var(--soft);
}

.kino-auth__check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.kino-auth__forgot {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s;
}

.kino-auth__forgot:hover {
    color: var(--accent3);
}

/* ─── Submit ─── */
.kino-auth__submit-wrap {
    margin-top: 8px;
}

.kino-auth__submit {
    position: relative;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    transition: all .25s cubic-bezier(.2,.7,.2,1);
    box-shadow:
        0 8px 22px -8px rgba(160,0,255,.55),
        inset 0 1px 0 rgba(255,255,255,.15);
}

.kino-auth__submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent3) 0%, var(--accent2) 100%);
    opacity: 0;
    transition: opacity .25s;
}

.kino-auth__submit > * {
    position: relative;
    z-index: 1;
}

.kino-auth__submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 28px -8px rgba(160,0,255,.85),
        0 0 32px -8px rgba(206,94,255,.5);
}

.kino-auth__submit:hover::before {
    opacity: 1;
}

/* ─── Hint / ошибки ─── */
.kino-auth__hint {
    font-size: 13px;
    color: var(--muted);
    min-height: 18px;
    padding: 2px 0;
}

.kino-auth__hint--center {
    text-align: center;
    margin-top: 8px;
}

.kino-auth__hint.is-error {
    color: var(--negative);
}

.kino-auth__hint.is-success {
    color: var(--positive);
}

/* ─── Foot ─── */
.kino-auth__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--muted);
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(244,241,236,.06);
}

.kino-auth__foot--center {
    justify-content: center;
    text-align: center;
    border-top: 0;
    padding-top: 12px;
    margin-top: 12px;
}

.kino-auth__foot a {
    color: var(--accent3);
    font-weight: 700;
    text-decoration: none;
    transition: color .2s;
}

.kino-auth__foot a:hover {
    color: var(--accent2);
}

/* ─── Captcha ─── */
.kino-auth__captcha {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kino-auth__captcha-img {
    flex-shrink: 0;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(244,241,236,.04);
    border: 1px solid rgba(244,241,236,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.kino-auth__captcha-img img {
    display: block;
    height: 40px;
    width: auto;
}

.kino-auth__captcha .kino-auth__input-wrap {
    flex: 1;
}

/* ─── Капча внутри input-wrap ─── */
.kino-auth__check-btn {
    flex-shrink: 0;
    height: 100%;
    padding: 0 16px;
    border: 0;
    background: linear-gradient(135deg, rgba(160,0,255,.15), rgba(206,94,255,.10));
    border-left: 1px solid rgba(244,241,236,.08);
    color: var(--accent3);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.kino-auth__check-btn:hover {
    background: linear-gradient(135deg, rgba(160,0,255,.25), rgba(206,94,255,.15));
    color: var(--text);
}

/* ─── Табы-панели ─── */
.kino-auth__pane[hidden] {
    display: none;
}

/* ─── Светлая тема ─── */
[data-theme="light"] .kino-auth__card {
    background: linear-gradient(165deg, #fff 0%, #f7f5f1 100%);
    border-color: rgba(0,0,0,.08);
    box-shadow:
        0 40px 80px -20px rgba(0,0,0,.15),
        0 0 60px -20px rgba(160,0,255,.15);
}

[data-theme="light"] .kino-auth__input-wrap {
    background: linear-gradient(160deg, rgba(0,0,0,.025), rgba(0,0,0,.010));
    border-color: rgba(0,0,0,.10);
}

[data-theme="light"] .kino-auth__input-wrap input {
    color: #1a1a1e !important;
}

[data-theme="light"] .kino-auth__input-wrap > i {
    color: #888;
}

[data-theme="light"] .kino-auth__tab {
    color: #666;
}

[data-theme="light"] .kino-auth__tab.active {
    color: #fff;
}

[data-theme="light"] .kino-auth__feature {
    background: rgba(0,0,0,.025);
    border-color: rgba(0,0,0,.08);
}

[data-theme="light"] .kino-auth__field > label,
[data-theme="light"] .kino-auth__field label {
    color: #666;
}

[data-theme="light"] .kino-auth__h2 {
    color: #1a1a1e;
}

[data-theme="light"] .kino-auth__lead,
[data-theme="light"] .kino-auth__subtitle {
    color: #666;
}

[data-theme="light"] .kino-auth__title {
    color: #1a1a1e;
}

/* ─── Мобильный ─── */
@media (max-width: 640px) {
    .kino-auth__card {
        padding: 20px;
        border-radius: 20px;
    }
    .kino-auth__tabs {
        flex-direction: column;
    }
    .kino-auth__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .kino-auth__captcha {
        flex-direction: column;
    }
    .kino-auth__captcha-img {
        width: 100%;
        justify-content: center;
    }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .kino-auth__orb-glow,
    .kino-auth__orb-ring,
    .kino-auth__orb-core,
    .kino-auth__orb-dot,
    .kino-auth__orb-dust,
    .kino-auth__rays {
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINO-AUTH — дополнительные стили для регистрации
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Кнопка "Проверить" (внутри поля логина) ─── */
.kino-auth__check-btn {
    flex-shrink: 0;
    height: 100%;
    padding: 0 16px;
    border: 0;
    border-left: 1px solid rgba(244,241,236,.08);
    background: linear-gradient(135deg, rgba(160,0,255,.15), rgba(206,94,255,.10));
    color: var(--accent3);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s cubic-bezier(.2,.7,.2,1);
    white-space: nowrap;
    border-radius: 0;
}

.kino-auth__check-btn:hover {
    background: linear-gradient(135deg, rgba(160,0,255,.25), rgba(206,94,255,.15));
    color: #fff;
}

.kino-auth__check-btn:active {
    transform: scale(.98);
}

/* ─── Captcha: компактная, с reload ─── */
.kino-auth__captcha {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.kino-auth__captcha-img {
    flex-shrink: 0;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(244,241,236,.04);
    border: 1px solid rgba(244,241,236,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    position: relative;
    transition: all .2s;
}

.kino-auth__captcha-img:hover {
    border-color: rgba(160,0,255,.4);
}

.kino-auth__captcha-img img {
    display: block;
    height: 40px;
    width: auto;
    border-radius: 6px;
}

.kino-auth__captcha-img a {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
}

.kino-auth__captcha-img a::after {
    content: '\f021';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .2s;
}

.kino-auth__captcha-img:hover a::after {
    opacity: 1;
}

/* ─── Hint (подсказки) ─── */
#result-registration {
    font-size: 13px;
    color: var(--muted);
    padding: 4px 0;
    min-height: 18px;
}

#result-registration span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
}

#result-registration span.success,
#result-registration span.error {
    display: inline-block;
}

#result-registration span.success {
    background: rgba(124,196,148,.15);
    color: var(--positive);
    border: 1px solid rgba(124,196,148,.3);
}

#result-registration span.error {
    background: rgba(228,168,255,.15);
    color: var(--negative);
    border: 1px solid rgba(228,168,255,.3);
}

#result-registration img {
    vertical-align: middle;
    margin-right: 6px;
}

/* ─── Скрываем стандартный .kino-auth__check (это чекбокс!) ─── */
.kino-auth__field .kino-auth__check:not(input) {
    /* Если это не input — не применяем стили чекбокса */
    all: unset;
}

/* ─── Форма регистрации: убираем глобальный margin-bottom у полей ─── */
.kino-auth__field {
    margin-bottom: 0;
}

/* ─── Восстановление пароля: чуть компактнее ─── */
.kino-auth--simple .kino-auth__card {
    max-width: 480px;
    margin: 0 auto;
}

.kino-auth--simple .kino-auth__single {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
}

/* ─── Мобильный: форма сверху ─── */
@media (max-width: 899px) {
    .kino-auth {
        padding: calc(var(--top, 92px) + 20px) 16px 60px;
    }

    .kino-auth__shell {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .kino-auth__story {
        display: none;
    }

    .kino-auth__card {
        padding: 24px 20px;
    }

    .kino-auth__title {
        font-size: 28px;
    }

    .kino-auth__captcha {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .kino-auth__captcha-img {
        width: 100%;
        justify-content: center;
    }
}

/* ─── Светлая тема: captcha ─── */
[data-theme="light"] .kino-auth__captcha-img {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
}

[data-theme="light"] .kino-auth__check-btn {
    border-left-color: rgba(0,0,0,.08);
    background: linear-gradient(135deg, rgba(160,0,255,.12), rgba(206,94,255,.08));
    color: var(--accent);
}

[data-theme="light"] .kino-auth__check-btn:hover {
    background: linear-gradient(135deg, rgba(160,0,255,.22), rgba(206,94,255,.14));
    color: #fff;
}



/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINO-AUTH — версия БЕЗ левой панели (форма по центру)
   ═══════════════════════════════════════════════════════════════════════ */

/* Когда в shell 1 ребёнок (только panel) — центрируем */
.kino-auth__shell:has(> .kino-auth__panel:only-child),
.kino-auth__shell:not(:has(.kino-auth__story)) {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
}

.kino-auth__single {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
}

/* Карточка формы — с акцентом */
.kino-auth__shell:not(:has(.kino-auth__story)) .kino-auth__card {
    padding: clamp(28px, 4vw, 44px);
}

/* Заголовок по центру */
.kino-auth__shell:not(:has(.kino-auth__story)) .kino-auth__head {
    text-align: center;
}

/* Eyebrow по центру */
.kino-auth__shell:not(:has(.kino-auth__story)) .kino-auth__eyebrow {
    text-align: center;
}

/* Foot по центру */
.kino-auth__shell:not(:has(.kino-auth__story)) .kino-auth__foot {
    justify-content: center;
    text-align: center;
}



/* ═══════════════════════════════════════════════════════════════
   🎬 ВОССТАНОВЛЕНО — jQuery UI модалки (complaint, popup)
   Из бэкапа: styles.css.bak_cleanup_20261010_092820
   ═══════════════════════════════════════════════════════════════ */

.ui-widget-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: var(--ui-overlay-bg) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999998 !important;
    opacity: 1 !important;
}

/* === 4. Окно (высокая специфичность) === */
html body .ui-dialog.ui-widget.ui-widget-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: var(--ui-bg) !important;
    background-color: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--ui-shadow) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    max-width: min(600px, calc(100vw - 32px)) !important;
    font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
    color-scheme: light dark;
}

/* === 5. Заголовок === */
html body .ui-dialog .ui-dialog-titlebar {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-divider) !important;
    padding: 18px 22px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: move;
    min-height: 0 !important;
    border-radius: 16px 16px 0 0 !important;
}

html body .ui-dialog .ui-dialog-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--ui-text) !important;
    letter-spacing: -0.01em;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Кнопка закрытия */
html body .ui-dialog .ui-dialog-titlebar-close {
    background: transparent !important;
    border: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: var(--ui-muted) !important;
    transition: background .15s ease, color .15s ease !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    order: 999;
}

html body .ui-dialog .ui-dialog-titlebar-close:hover,
html body .ui-dialog .ui-dialog-titlebar-close:focus {
    background: var(--ui-hover-bg) !important;
    color: var(--accent2, #ce5eff) !important;
    outline: none !important;
}

html body .ui-dialog .ui-dialog-titlebar-close .ui-icon,
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
}

html body .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space,
html body .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-only span:not(.ui-icon) {
    display: none !important;
}

html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::before,
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform-origin: center;
}
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* === 6. Контент === */
html body .ui-dialog .ui-dialog-content {
    padding: 20px 22px !important;
    color: var(--ui-soft) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    background: transparent !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 220px) !important;
}

html body .ui-dialog .ui-dialog-content textarea,
html body .ui-dialog .ui-dialog-content input[type="text"],
html body .ui-dialog .ui-dialog-content input[type="email"],
html body .ui-dialog .ui-dialog-content input[type="number"],
html body .ui-dialog .ui-dialog-content input[type="search"],
html body .ui-dialog .ui-dialog-content input[type="url"],
html body .ui-dialog .ui-dialog-content input[type="password"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    margin: 10px 0 0 !important;
    background: var(--ui-input-bg) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-input-border) !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

html body .ui-dialog .ui-dialog-content textarea {
    min-height: 120px !important;
}

html body .ui-dialog .ui-dialog-content textarea:focus,
html body .ui-dialog .ui-dialog-content input:focus {
    border-color: var(--accent, #a000ff) !important;
    box-shadow: 0 0 0 3px rgba(160, 0, 255, .14) !important;
    background: var(--ui-input-bg) !important;
    outline: none !important;
}

html body .ui-dialog .ui-dialog-content textarea::placeholder,
html body .ui-dialog .ui-dialog-content input::placeholder {
    color: var(--ui-muted) !important;
    opacity: .7;
}

/* === 7. Кнопки === */
html body .ui-dialog .ui-dialog-buttonpane {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ui-divider) !important;
    padding: 14px 22px !important;
    margin: 0 !important;
    border-radius: 0 0 16px 16px !important;
}

html body .ui-dialog .ui-dialog-buttonset {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    float: none !important;
}

html body .ui-dialog .ui-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--ui-soft) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-shadow: none !important;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
    outline: none !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    float: none !important;
}

html body .ui-dialog .ui-button:hover,
html body .ui-dialog .ui-button:focus {
    background: var(--ui-hover-bg) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
    outline: none !important;
}

html body .ui-dialog .ui-button:active {
    transform: translateY(1px);
}

/* Акцентная кнопка (последняя = «Отправить», «OK») */
html body .ui-dialog .ui-dialog-buttonset .ui-button:last-child {
    background: var(--ui-accent-grad) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: var(--ui-accent-shadow) !important;
    font-weight: 600 !important;
}

html body .ui-dialog .ui-dialog-buttonset .ui-button:last-child:hover,
html body .ui-dialog .ui-dialog-buttonset .ui-button:last-child:focus {
    background: var(--ui-accent-grad-hover) !important;
    color: #0A0A0C !important;
    box-shadow: var(--ui-accent-shadow-hover) !important;
}

html body .ui-dialog .ui-dialog-buttonset .ui-button:only-child {
    background: var(--ui-accent-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--ui-accent-shadow) !important;
}

/* === 8. Ошибки === */
html body .ui-dialog .ui-state-error,
html body .ui-dialog .ui-state-highlight {
    background: rgba(232, 194, 122, .12) !important;
    border: 1px solid rgba(232, 194, 122, .5) !important;
    color: var(--gold, #E8C27A) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
}

[data-theme="light"] html body .ui-dialog .ui-state-error,
[data-theme="light"] html body .ui-dialog .ui-state-highlight {
    background: rgba(220, 38, 38, .08) !important;
    border-color: rgba(220, 38, 38, .35) !important;
    color: #b91c1c !important;
}

/* === 9. Мобильная адаптация === */
@media (max-width: 640px) {
    html body .ui-dialog.ui-widget.ui-widget-content {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 14px !important;
    }
    html body .ui-dialog .ui-dialog-titlebar {
        padding: 14px 16px !important;
        border-radius: 14px 14px 0 0 !important;
    }
    html body .ui-dialog .ui-dialog-title {
        font-size: 16px !important;
    }
    html body .ui-dialog .ui-dialog-content {
        padding: 16px !important;
        max-height: calc(100vh - 200px) !important;
    }
    html body .ui-dialog .ui-dialog-buttonpane {
        padding: 12px 16px !important;
        border-radius: 0 0 14px 14px !important;
    }
    html body .ui-dialog .ui-dialog-buttonset {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    html body .ui-dialog .ui-button {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
    }
}

/* === 10. Сброс дефолтных стилей jQuery UI === */
.ui-widget {
    font-family: inherit !important;
    font-size: inherit !important;
}
.ui-widget-content {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
}
.ui-widget-header {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    font-weight: inherit !important;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-right {
    border-radius: 0 !important;
}
.ui-helper-clearfix::before,
.ui-helper-clearfix::after {
    content: "";
    display: table;
    border-collapse: collapse;
}
.ui-helper-clearfix::after {
    clear: both;
}
.ui-icon {
    background-image: none !important;
    text-indent: 0 !important;
}
.ui-front {
    z-index: 999999 !important;
}


/* ============================================================
   KinoStyle — Кнопка закрытия модалки jQuery UI (крестик)
   Скрываем текст «Close», рисуем чистый крестик через CSS
   ============================================================ */

/* Убираем текст Close — font-size: 0 */
html body .ui-dialog .ui-dialog-titlebar-close {
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    text-indent: 0 !important;
    color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    position: relative !important;
    transition: background .15s ease, border-color .15s ease, transform .12s ease !important;
    order: 999;
    margin: 0 !important;
}

/* Скругление — переопределяем общий сброс .ui-corner-all */
html body .ui-dialog .ui-dialog-titlebar-close.ui-corner-all {
    border-radius: 10px !important;
}

/* Иконка jQuery UI — обнуляем фон */
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon,
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
    background-image: none !important;
    background: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: block !important;
}

/* Скрываем пробел */
html body .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none !important;
}

/* Скрываем любой текст внутри кнопки (Close) */
html body .ui-dialog .ui-dialog-titlebar-close *:not(.ui-icon) {
    display: none !important;
}

/* Крестик — две линии через ::before / ::after */
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::before,
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 2px !important;
    background: var(--ui-muted, #A29E97) !important;
    border-radius: 2px !important;
    transform-origin: center !important;
    transition: background .15s ease !important;
    pointer-events: none;
}

html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Наведение — подложка + фиолетовый крестик */
html body .ui-dialog .ui-dialog-titlebar-close:hover {
    background: var(--ui-hover-bg, rgba(244, 241, 236, .06)) !important;
    border-color: var(--ui-border, rgba(244, 241, 236, .16)) !important;
}

html body .ui-dialog .ui-dialog-titlebar-close:hover .ui-icon-closethick::before,
html body .ui-dialog .ui-dialog-titlebar-close:hover .ui-icon-closethick::after {
    background: var(--accent2, #ce5eff) !important;
}

/* Активное — лёгкое сжатие */
html body .ui-dialog .ui-dialog-titlebar-close:active {
    transform: scale(.94) !important;
}

/* Фокус — обводка для доступности */
html body .ui-dialog .ui-dialog-titlebar-close:focus {
    outline: none !important;
    border-color: var(--accent, #a000ff) !important;
    box-shadow: 0 0 0 3px rgba(160, 0, 255, .14) !important;
}

/* Светлая тема — крестик темнее, hover — насыщенный фиолет */
[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::before,
[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::after {
    background: var(--ui-muted, #6B6660) !important;
}

[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close:hover .ui-icon-closethick::before,
[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close:hover .ui-icon-closethick::after {
    background: var(--accent, #7a28a8) !important;
}


/* ============================================================
   KinoStyle — Section head: ссылка "Смотреть все"
   ============================================================ */

.section-head__more,
.section-heading .more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line2);
    background: transparent;
    color: var(--soft);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.section-head__more:hover,
.section-heading .more-link:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent2);
}

.section-head__more i,
.section-heading .more-link i {
    font-size: 12px;
    transition: transform .2s;
}

.section-head__more:hover i,
.section-heading .more-link:hover i {
    transform: translateX(3px);
}


/* ============================================================
   KinoStyle — Главная: intro-блок (заголовок + видео + SEO)
   ============================================================ */

.intro {
    display: grid;
    gap: clamp(20px, 3vw, 36px);
    padding: clamp(24px, 4vw, 56px);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
}

.intro__title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--text);
}

.intro__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-sunk);
}

.intro__video video,
.intro__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.intro__text {
    color: var(--soft);
    font-size: var(--fs-body);
    line-height: 1.7;
    max-width: 100%;
}

.intro__text br {
    margin-bottom: .5em;
}

@media (min-width: 1024px) {
    .intro {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-areas:
            "title video"
            "text  video";
        align-items: start;
    }
    .intro__title { grid-area: title; }
    .intro__video { grid-area: video; align-self: center; }
    .intro__text { grid-area: text; }
}

@media (max-width: 640px) {
    .intro {
        padding: 20px;
        border-radius: var(--r-lg);
    }
    .intro__title {
        font-size: clamp(22px, 6vw, 32px);
    }
}


/* ============================================================
   KinoStyle — Кинозалы (модуль room.php)
   Классы генерирует engine/modules/room.php
   ============================================================ */


/* ============================================================
   KinoStyle — Toast-уведомления DLEPush
   ============================================================ */

.dlepush-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    width: calc(100vw - 40px);
    pointer-events: none;
}

.dlepush-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    box-shadow: var(--shadow-modal);
    color: var(--text);
    font-size: var(--fs-sm);
    line-height: 1.4;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .25s ease, transform .25s ease;
}

.dlepush-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.dlepush-toast.is-hiding {
    opacity: 0;
    transform: translateX(20px);
}

.dlepush-toast__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
}

.dlepush-toast__text {
    flex: 1 1 auto;
    min-width: 0;
}

.dlepush-toast__close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    transition: background .15s, color .15s;
}

.dlepush-toast__close:hover {
    background: var(--ui-hover-bg, rgba(244, 241, 236, .06));
    color: var(--text);
}

.dlepush-toast--success { border-left-color: var(--positive, #7cc494); }
.dlepush-toast--success .dlepush-toast__icon {
    background: rgba(124, 196, 148, .15);
    color: var(--positive, #7cc494);
}

.dlepush-toast--error { border-left-color: var(--negative, #e4a8ff); }
.dlepush-toast--error .dlepush-toast__icon {
    background: rgba(228, 168, 255, .15);
    color: var(--negative, #e4a8ff);
}

.dlepush-toast--warning { border-left-color: var(--gold, #E8C27A); }
.dlepush-toast--warning .dlepush-toast__icon {
    background: rgba(232, 194, 122, .15);
    color: var(--gold, #E8C27A);
}

.dlepush-toast--info { border-left-color: var(--accent); }

@media (max-width: 640px) {
    .dlepush-container {
        top: auto;
        bottom: 90px;
        right: 12px;
        left: 12px;
        max-width: none;
        width: auto;
    }
    .dlepush-toast {
        padding: 12px 14px;
        font-size: 13px;
    }
}


/* ============================================================
   KinoStyle — Рейтинг фильма (блок .my-rate)
   ============================================================ */

.my-rate .vote-pill--up {
    color: var(--positive, #7cc494);
    border-color: rgba(124, 196, 148, .3);
    background: rgba(124, 196, 148, .06);
}

.my-rate .vote-pill--up:hover {
    color: #fff;
    border-color: var(--positive, #7cc494);
    background: var(--positive, #7cc494);
}

.my-rate .vote-pill--down {
    color: var(--negative, #e4a8ff);
    border-color: rgba(228, 168, 255, .3);
    background: rgba(228, 168, 255, .06);
}

.my-rate .vote-pill--down:hover {
    color: #0A0A0C;
    border-color: var(--negative, #e4a8ff);
    background: var(--negative, #e4a8ff);
}

.my-rate .vote-pill--big .vote-score {
    font-weight: 800;
    font-size: 15px;
    min-width: 22px;
    text-align: center;
    color: inherit;
}

[data-theme="light"] .my-rate .vote-pill--up {
    color: #2f7a44;
    background: rgba(47, 122, 68, .08);
    border-color: rgba(47, 122, 68, .25);
}

[data-theme="light"] .my-rate .vote-pill--up:hover {
    color: #fff;
    background: #2f7a44;
    border-color: #2f7a44;
}

[data-theme="light"] .my-rate .vote-pill--down {
    color: #8b33c5;
    background: rgba(139, 51, 197, .08);
    border-color: rgba(139, 51, 197, .25);
}

[data-theme="light"] .my-rate .vote-pill--down:hover {
    color: #fff;
    background: #8b33c5;
    border-color: #8b33c5;
}


/* ============================================================
   KinoStyle — Рейтинг: Оценка зрителей (Lumen-стиль)
   ============================================================ */

.rate-counter {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.rate-counter__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.rate-counter__head b {
    font-size: 15px;
    color: var(--text);
    font-weight: 700;
}

.rate-counter__head span {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rate-counter__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rate-counter__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: transparent;
    color: var(--soft);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
    outline: none;
    user-select: none;
}

.rate-counter__btn:active {
    transform: scale(.97);
}

.rate-counter__btn i {
    font-size: 15px;
    transition: color .2s ease;
}

.rate-counter__count {
    font-weight: 800;
    font-size: 15px;
    min-width: 24px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rate-counter__label {
    font-weight: 500;
    font-size: 13px;
    color: var(--muted);
    transition: color .2s ease;
}

/* === Нравится (up) === */
.rate-counter__btn--up:hover {
    background: rgba(124, 196, 148, .12);
    border-color: var(--positive, #7cc494);
    color: var(--positive, #7cc494);
}

.rate-counter__btn--up:hover .rate-counter__label {
    color: var(--positive, #7cc494);
}

.rate-counter__btn--up.is-active {
    background: var(--positive, #7cc494);
    border-color: var(--positive, #7cc494);
    color: #0A0A0C;
}

.rate-counter__btn--up.is-active .rate-counter__label {
    color: rgba(10, 10, 12, .7);
}

/* === Не нравится (down) === */
.rate-counter__btn--down:hover {
    background: rgba(228, 168, 255, .12);
    border-color: var(--negative, #e4a8ff);
    color: var(--negative, #e4a8ff);
}

.rate-counter__btn--down:hover .rate-counter__label {
    color: var(--negative, #e4a8ff);
}

.rate-counter__btn--down.is-active {
    background: var(--negative, #e4a8ff);
    border-color: var(--negative, #e4a8ff);
    color: #0A0A0C;
}

.rate-counter__btn--down.is-active .rate-counter__label {
    color: rgba(10, 10, 12, .7);
}

/* === Фокус === */
.rate-counter__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* === Мобильный === */
@media (max-width: 640px) {
    .rate-counter__btn {
        height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }
    .rate-counter__label {
        display: none;
    }
    .rate-counter__count {
        font-size: 14px;
    }
}

/* === Светлая тема === */
[data-theme="light"] .rate-counter__btn--up:hover {
    background: rgba(47, 122, 68, .1);
    border-color: #2f7a44;
    color: #2f7a44;
}

[data-theme="light"] .rate-counter__btn--up:hover .rate-counter__label {
    color: #2f7a44;
}

[data-theme="light"] .rate-counter__btn--up.is-active {
    background: #2f7a44;
    border-color: #2f7a44;
    color: #fff;
}

[data-theme="light"] .rate-counter__btn--up.is-active .rate-counter__label {
    color: rgba(255, 255, 255, .85);
}

[data-theme="light"] .rate-counter__btn--down:hover {
    background: rgba(139, 51, 197, .1);
    border-color: #8b33c5;
    color: #8b33c5;
}

[data-theme="light"] .rate-counter__btn--down:hover .rate-counter__label {
    color: #8b33c5;
}

[data-theme="light"] .rate-counter__btn--down.is-active {
    background: #8b33c5;
    border-color: #8b33c5;
    color: #fff;
}

[data-theme="light"] .rate-counter__btn--down.is-active .rate-counter__label {
    color: rgba(255, 255, 255, .85);
}


@keyframes rateBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); color: var(--accent2); }
    100% { transform: scale(1); }
}
.rate-counter__count.bump {
    display: inline-block;
    animation: rateBump .4s ease;
}


/* ============================================================


/* ═══════════════════════════════════════════════════════════════
   🎬 ВОССТАНОВЛЕНО — Панель оценок (score-panel, my-rate, rate-action)
   Из бэкапа: styles.css.bak_cleanup_20261010_092820
   ═══════════════════════════════════════════════════════════════ */

.score-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}

.score {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.ring {
    position: relative;
    width: 140px;
    height: 140px;
    flex: 0 0 auto;
}

.ring svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ring-bar {
    transition: stroke-dasharray 1.2s cubic-bezier(.2, .8, .2, 1);
    filter: drop-shadow(0 0 8px rgba(160, 0, 255, .5));
}

.ring b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--serif);
    font-weight: 800;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.score-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.score-info > b {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.score-info > span {
    font-size: 14px;
    color: var(--muted);
}

.score-ext {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.score-ext > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.score-ext > div b {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.score-ext > div span {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
}

[data-theme="light"] .ring-bar {
    filter: drop-shadow(0 0 8px rgba(122, 40, 168, .4));
}


/* ============================================================
   KinoStyle — Рейтинг звёзд (5 звёзд DLE)
   ============================================================ */

.rate-stars {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rate-stars__avg {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    min-width: 42px;
}

.rate-stars__row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rate-stars__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--muted);
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s, transform .12s;
}

.rate-stars__star:hover {
    color: var(--gold, #E8C27A);
    transform: scale(1.15);
}

.rate-stars__star:hover ~ .rate-stars__star {
    color: var(--muted);
    transform: scale(1);
}

.rate-stars__star.is-filled {
    color: var(--gold, #E8C27A);
}

.rate-stars__star.is-filled i {
    filter: drop-shadow(0 0 4px rgba(232, 194, 122, .5));
}

/* Светлая тема */
[data-theme="light"] .rate-stars__star.is-filled {
    color: #B8892E;
}

[data-theme="light"] .rate-stars__star:hover {
    color: #B8892E;
}


/* ============================================================
   KinoStyle — Рейтинг звёзд (как Lumen)
   ============================================================ */

.my-rate {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.my-rate-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.my-rate-head b {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.my-rate-head__avg {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    color: var(--gold, #E8C27A);
    font-variant-numeric: tabular-nums;
}

.rate-stars-ui {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rate-stars-ui__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s, color .15s;
    outline: none;
}

.rate-stars-ui__star i {
    transition: filter .15s;
}

.rate-stars-ui__star:hover {
    transform: scale(1.15);
}

.rate-stars-ui__star.is-filled,
.rate-stars-ui__star.is-hover {
    color: var(--gold, #E8C27A);
}

.rate-stars-ui__star.is-filled i,
.rate-stars-ui__star.is-hover i {
    filter: drop-shadow(0 0 6px rgba(232, 194, 122, .6));
}

.rate-stars-ui__star:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Скрываем DLE-разметку (но она нужна для doRate) */
[data-stars-source] {
    display: none !important;
}

/* Светлая тема */
[data-theme="light"] .rate-stars-ui__star.is-filled,
[data-theme="light"] .rate-stars-ui__star.is-hover {
    color: #B8892E;
}

[data-theme="light"] .my-rate-head__avg {
    color: #B8892E;
}

/* Мобильный */
@media (max-width: 640px) {
    .rate-stars-ui__star {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }
    .my-rate-head__avg {
        font-size: 20px;
    }
}


/* Жёстко скрываем DLE-разметку (даже если DLE пересоздал её) */
[data-stars-source] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================
   KinoStyle — Шкала оценок 1-10 (Lumen-style)
   ============================================================ */

.rate-scale-ui {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.rate-scale-ui__btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line2);
    border-radius: 50%;
    background: transparent;
    color: var(--soft);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all .2s ease;
    outline: none;
    user-select: none;
}

.rate-scale-ui__btn:hover {
    border-color: var(--accent);
    color: var(--accent2);
    transform: translateY(-2px);
}

.rate-scale-ui__btn.is-hover {
    background: rgba(160, 0, 255, .12);
    border-color: var(--accent);
    color: var(--accent2);
}

.rate-scale-ui__btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(160, 0, 255, .4);
}

.rate-scale-ui__btn.is-active.is-hover {
    background: var(--accent2);
    border-color: var(--accent2);
}

.rate-scale-ui__btn:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

.rate-scale-hint {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
    letter-spacing: .04em;
}

/* Светлая тема */
[data-theme="light"] .rate-scale-ui__btn:hover,
[data-theme="light"] .rate-scale-ui__btn.is-hover {
    color: #7a28a8;
    border-color: #7a28a8;
    background: rgba(122, 40, 168, .08);
}

[data-theme="light"] .rate-scale-ui__btn.is-active {
    background: #7a28a8;
    border-color: #7a28a8;
    color: #fff;
    box-shadow: 0 4px 12px rgba(122, 40, 168, .3);
}

/* Мобильный */
@media (max-width: 640px) {
    .rate-scale-ui__btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .rate-scale-ui {
        gap: 4px;
    }
}

/* Кольцо — фиолетовая полоска уже настроена, оставляем */
.ring-bar {
    transition: stroke-dasharray 1s cubic-bezier(.2, .8, .2, 1);
}


/* ============================================================
   KinoStyle — Оценка полезности (thumbs up/down, Lumen-style)
   ============================================================ */

.rate-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.rate-actions__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.rate-actions__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.rate-actions__total {
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.rate-actions__row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============ Кнопка ============ */
.rate-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px;
    border: 1px solid var(--line2);
    border-radius: 16px;
    background: var(--surface-sunk);
    color: var(--soft);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        color .25s ease,
        border-color .25s ease,
        transform .15s ease,
        box-shadow .25s ease;
    outline: none;
    user-select: none;
}

.rate-action__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 18px;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    z-index: 2;
}

.rate-action__count {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 16px;
    min-width: 20px;
    text-align: center;
    z-index: 2;
}

.rate-action__label {
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    transition: color .25s ease;
    z-index: 2;
}

/* Мерцающая полоса при hover */
.rate-action__shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, .12) 50%,
        transparent 80%
    );
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
    z-index: 1;
}

.rate-action:hover .rate-action__shine {
    left: 150%;
}

.rate-action:hover {
    transform: translateY(-2px);
}

.rate-action:active {
    transform: translateY(0) scale(.98);
}

.rate-action:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/* ============ Нравится (up) ============ */
.rate-action--up:hover {
    color: #7cc494;
    border-color: #7cc494;
    box-shadow:
        0 6px 24px -6px rgba(124, 196, 148, .45),
        inset 0 0 24px rgba(124, 196, 148, .08);
}

.rate-action--up:hover .rate-action__label {
    color: #7cc494;
}

.rate-action--up:hover .rate-action__icon {
    transform: scale(1.15) rotate(-8deg);
}

.rate-action--up.is-active {
    color: #fff;
    border-color: #7cc494;
    background: linear-gradient(135deg, rgba(124, 196, 148, .9), rgba(94, 160, 118, .9));
    box-shadow:
        0 8px 28px -8px rgba(124, 196, 148, .6),
        inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.rate-action--up.is-active .rate-action__label {
    color: rgba(255, 255, 255, .9);
}

.rate-action--up.is-active .rate-action__count {
    color: #fff;
}

/* ============ Не нравится (down) ============ */
.rate-action--down:hover {
    color: #e4a8ff;
    border-color: #e4a8ff;
    box-shadow:
        0 6px 24px -6px rgba(228, 168, 255, .45),
        inset 0 0 24px rgba(228, 168, 255, .08);
}

.rate-action--down:hover .rate-action__label {
    color: #e4a8ff;
}

.rate-action--down:hover .rate-action__icon {
    transform: scale(1.15) rotate(8deg);
}

.rate-action--down.is-active {
    color: #fff;
    border-color: #a000ff;
    background: linear-gradient(135deg, rgba(160, 0, 255, .9), rgba(139, 51, 197, .9));
    box-shadow:
        0 8px 28px -8px rgba(160, 0, 255, .6),
        inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.rate-action--down.is-active .rate-action__label {
    color: rgba(255, 255, 255, .9);
}

.rate-action--down.is-active .rate-action__count {
    color: #fff;
}

/* ============ Анимация при клике ============ */
@keyframes ratePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.rate-action.is-clicked {
    animation: ratePop .35s ease;
}

/* ============ Мобильный ============ */
@media (max-width: 640px) {
    .rate-action {
        height: 46px;
        padding: 0 16px;
        border-radius: 14px;
        gap: 8px;
    }

    .rate-action__label {
        display: none;
    }

    .rate-action__count {
        font-size: 15px;
    }
}

/* ============ Светлая тема ============ */
[data-theme="light"] .rate-action {
    background: #f8f6f2;
    border-color: rgba(26, 26, 28, .12);
    color: #3D3833;
}

[data-theme="light"] .rate-action--up:hover {
    color: #2f7a44;
    border-color: #2f7a44;
    box-shadow: 0 6px 24px -6px rgba(47, 122, 68, .35);
}

[data-theme="light"] .rate-action--up:hover .rate-action__label {
    color: #2f7a44;
}

[data-theme="light"] .rate-action--up.is-active {
    background: linear-gradient(135deg, #2f7a44, #256238);
    border-color: #2f7a44;
    color: #fff;
}

[data-theme="light"] .rate-action--down:hover {
    color: #8b33c5;
    border-color: #8b33c5;
    box-shadow: 0 6px 24px -6px rgba(139, 51, 197, .35);
}

[data-theme="light"] .rate-action--down:hover .rate-action__label {
    color: #8b33c5;
}

[data-theme="light"] .rate-action--down.is-active {
    background: linear-gradient(135deg, #8b33c5, #6b2296);
    border-color: #8b33c5;
    color: #fff;
}


@keyframes rateBump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.rate-action__count.bump {
    display: inline-block;
    animation: rateBump .4s ease;
}


/* ============================================================
   KinoStyle — Rating Panel v2 (финальная версия)
   Кольцо (IMDb + КП), 10 квадратных кнопок, thumbs на всю ширину
   ============================================================ */

.score-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: var(--r-xl);
    background: var(--surface-soft, var(--surface));
    border: 1px solid var(--line);
}

/* === Кольцо === */
.score {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 24px;
}

.score__ring {
    position: relative;
    width: 140px;
    height: 140px;
    flex: 0 0 auto;
}

.score__ring svg {
    display: block;
    width: 100%;
    height: 100%;
}

.score__ring-bar {
    transition: stroke-dasharray 1.2s cubic-bezier(.2, .8, .2, 1);
    filter: drop-shadow(0 0 10px rgba(160, 0, 255, .45));
}

.score__value {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 38px;
    letter-spacing: -.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.score__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.score__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.score__ext {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.score__ext-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.score__ext-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.score__ext-value {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* === Оценка зрителей (10 кнопок) === */
.my-rate {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.my-rate__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.my-rate__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.my-rate__avg {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    color: var(--accent2);
    font-variant-numeric: tabular-nums;
}

.my-rate__scale {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    width: 100%;
}

.my-rate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0;
    border: 1px solid var(--line2);
    border-radius: 12px;
    background: var(--surface-sunk);
    color: var(--soft);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s cubic-bezier(.2, .8, .2, 1);
    outline: none;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.my-rate__btn:hover {
    border-color: var(--accent);
    color: var(--accent2);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -6px rgba(160, 0, 255, .4);
}

.my-rate__btn.is-hover {
    border-color: var(--accent);
    background: rgba(160, 0, 255, .12);
    color: var(--accent2);
}

.my-rate__btn.is-active {
    background: linear-gradient(135deg, #a000ff 0%, #ce5eff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(160, 0, 255, .6);
}

.my-rate__btn.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: shineBtn .8s ease;
}

@keyframes shineBtn {
    to { transform: translateX(100%); }
}

.my-rate__btn:active {
    transform: translateY(0) scale(.96);
}

.my-rate__btn:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

.my-rate__meta {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .04em;
}

.my-rate__meta b {
    color: var(--text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* === Thumbs на всю ширину === */
.rate-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.rate-actions__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.rate-actions__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.rate-actions__total {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rate-actions__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

.rate-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 60px;
    padding: 0 24px;
    border: 1.5px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--soft);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: all .25s cubic-bezier(.2, .8, .2, 1);
    outline: none;
    user-select: none;
    isolation: isolate;
}

.rate-action__icon {
    font-size: 22px;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.rate-action__count {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 800;
    min-width: 32px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: transform .2s;
}

.rate-action__label {
    font-weight: 600;
    font-size: 14px;
    opacity: .9;
}

.rate-action__count.bump {
    animation: rateBump .4s ease;
}

@keyframes rateBump {
    50% { transform: scale(1.25); }
}

/* === Лайк — фиолетовый === */
.rate-action--up {
    border-color: rgba(160, 0, 255, .35);
    background: linear-gradient(180deg, rgba(160, 0, 255, .08), rgba(160, 0, 255, .02));
    color: #ce5eff;
}

.rate-action--up:hover {
    border-color: #a000ff;
    background: linear-gradient(180deg, rgba(160, 0, 255, .18), rgba(160, 0, 255, .06));
    color: #fff;
    box-shadow: 0 8px 28px -8px rgba(160, 0, 255, .55);
    transform: translateY(-2px);
}

.rate-action--up:hover .rate-action__icon {
    transform: scale(1.15) rotate(-8deg);
}

.rate-action--up.is-active {
    background: linear-gradient(135deg, #a000ff 0%, #ce5eff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 32px -8px rgba(160, 0, 255, .7);
}

/* === Дизлайк — красный === */
.rate-action--down {
    border-color: rgba(228, 70, 70, .35);
    background: linear-gradient(180deg, rgba(228, 70, 70, .08), rgba(228, 70, 70, .02));
    color: #e46e6e;
}

.rate-action--down:hover {
    border-color: #e44646;
    background: linear-gradient(180deg, rgba(228, 70, 70, .18), rgba(228, 70, 70, .06));
    color: #fff;
    box-shadow: 0 8px 28px -8px rgba(228, 70, 70, .55);
    transform: translateY(-2px);
}

.rate-action--down:hover .rate-action__icon {
    transform: scale(1.15) rotate(8deg);
}

.rate-action--down.is-active {
    background: linear-gradient(135deg, #e44646 0%, #ff6e6e 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 32px -8px rgba(228, 70, 70, .7);
}

.rate-action:active {
    transform: translateY(0) scale(.97);
}

.rate-action:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/* === Мобильный === */
@media (max-width: 640px) {
    .score {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .score__ring {
        margin: 0 auto;
    }

    .score__ext {
        justify-content: center;
    }

    .my-rate__scale {
        gap: 4px;
    }

    .my-rate__btn {
        height: 44px;
        font-size: 14px;
        border-radius: 10px;
    }

    .rate-actions__row {
        grid-template-columns: 1fr;
    }

    .rate-action {
        height: 52px;
    }
}

/* === Светлая тема === */
[data-theme="light"] .score-panel {
    background: #FFFFFF;
    border-color: rgba(26, 26, 28, .1);
}

[data-theme="light"] .score__ring-bar {
    filter: drop-shadow(0 0 8px rgba(122, 40, 168, .35));
}

[data-theme="light"] .my-rate__btn {
    background: #f8f6f2;
    border-color: rgba(26, 26, 28, .14);
    color: #3D3833;
}

[data-theme="light"] .my-rate__btn:hover,
[data-theme="light"] .my-rate__btn.is-hover {
    border-color: #7a28a8;
    color: #7a28a8;
    background: rgba(122, 40, 168, .08);
}

[data-theme="light"] .my-rate__btn.is-active {
    background: linear-gradient(135deg, #7a28a8 0%, #8b33c5 100%);
    color: #fff;
}

[data-theme="light"] .rate-action--up {
    border-color: rgba(122, 40, 168, .35);
    background: linear-gradient(180deg, rgba(122, 40, 168, .06), rgba(122, 40, 168, .02));
    color: #7a28a8;
}

[data-theme="light"] .rate-action--up:hover {
    color: #fff;
}

[data-theme="light"] .rate-action--down {
    border-color: rgba(200, 40, 40, .35);
    background: linear-gradient(180deg, rgba(200, 40, 40, .06), rgba(200, 40, 40, .02));
    color: #b92e2e;
}

[data-theme="light"] .rate-action--down:hover {
    color: #fff;
}




/* ═══════════════════════════════════════════════════════════════
   🎬 ВОССТАНОВЛЕНО — Комментарии (.cmt, .cmt-form)
   Источник: styles.css.bak_cleanup_20261010_092820
   ═══════════════════════════════════════════════════════════════ */

/* ============================================================
   KinoStyle — Comments v3 (3 стиля, переключение data-comment-style)
   ============================================================ */

/* ============ ОБЩАЯ БАЗА (для всех вариантов) ============ */

.cmt {
    position: relative;
    padding: 16px;
    margin-bottom: 8px;
    background: transparent;
    border-radius: 16px;
    transition: background .2s;
}

.cmt:hover {
    background: rgba(244, 241, 236, .02);
}

[data-theme="light"] .cmt:hover {
    background: rgba(26, 26, 28, .02);
}

.cmt__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.cmt__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
}

.cmt__avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-sunk);
}

.cmt__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.cmt__author {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmt__dot {
    color: var(--muted);
    font-weight: 700;
}

.cmt__date {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.cmt__rating {
    flex: 0 0 auto;
}

.cmt__like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(160, 0, 255, .08);
    color: var(--accent2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}

.cmt__like:hover {
    background: rgba(160, 0, 255, .18);
    transform: translateY(-1px);
}

.cmt__like i {
    font-size: 12px;
}

.cmt__like-num {
    font-variant-numeric: tabular-nums;
}

.cmt__body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--soft);
    margin: 0 0 10px;
    padding-left: 48px;
}

.cmt__context {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 48px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(160, 0, 255, .06);
    font-size: 13px;
    color: var(--muted);
}

.cmt__context i {
    color: var(--accent2);
}

.cmt__context b {
    color: var(--text);
    font-weight: 600;
}

.cmt__sign {
    margin: 10px 0 0 48px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
}

.cmt__foot {
    display: flex;
    gap: 8px;
    margin-left: 48px;
    flex-wrap: wrap;
}

.cmt__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}

.cmt__action:hover {
    color: var(--accent2);
    background: rgba(160, 0, 255, .08);
}

.cmt__action i {
    font-size: 13px;
}

/* ============ МОДЕРАЦИЯ (⋯) ============ */
.cmt__mod {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

.cmt__mod-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    transition: all .15s;
}

.cmt__mod-toggle:hover {
    background: rgba(160, 0, 255, .1);
    color: var(--accent2);
}

.cmt__mod-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 200px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .18s;
}

.cmt__mod.is-open .cmt__mod-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cmt__mod-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.cmt__mod-item i {
    width: 14px;
    text-align: center;
    color: var(--muted);
}

.cmt__mod-item:hover {
    background: rgba(160, 0, 255, .1);
    color: var(--accent2);
}

.cmt__mod-item:hover i {
    color: var(--accent2);
}

.cmt__mod-item--danger:hover {
    background: rgba(228, 70, 70, .1);
    color: #e46e6e;
}

.cmt__mod-item--mass {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.cmt__mod-item--mass input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

[data-theme="light"] .cmt__mod-menu {
    background: #fff;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .25);
}

/* ============================================================
   ВАРИАНТ 1 — YouTube-минимализм
   ============================================================ */
[data-comment-style="v1"] .cmt {
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 14px 0;
    margin-bottom: 0;
}

[data-comment-style="v1"] .cmt:last-child {
    border-bottom: 0;
}

[data-comment-style="v1"] .cmt__avatar {
    width: 36px;
    height: 36px;
}

[data-comment-style="v1"] .cmt__body {
    padding-left: 48px;
    font-size: 15px;
}

[data-comment-style="v1"] .cmt__action {
    padding: 5px 10px;
    font-size: 13px;
}

[data-comment-style="v1"] .cmt__action .cmt__action-label {
    display: inline;
}

/* ============================================================
   ВАРИАНТ 2 — Карточка Discord (крупнее, с обводкой)
   ============================================================ */
[data-comment-style="v2"] .cmt {
    padding: 18px 20px;
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

[data-comment-style="v2"] .cmt:hover {
    border-color: rgba(160, 0, 255, .3);
    background: var(--surface);
}

[data-comment-style="v2"] .cmt__avatar {
    width: 44px;
    height: 44px;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a000ff, #ce5eff);
}

[data-comment-style="v2"] .cmt__avatar-img {
    border: 2px solid var(--surface);
}

[data-comment-style="v2"] .cmt__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

[data-comment-style="v2"] .cmt__dot {
    display: none;
}

[data-comment-style="v2"] .cmt__body {
    padding-left: 0;
    margin-top: 12px;
    margin-bottom: 14px;
}

[data-comment-style="v2"] .cmt__context {
    margin-left: 0;
    margin-bottom: 12px;
}

[data-comment-style="v2"] .cmt__sign {
    margin-left: 0;
}

[data-comment-style="v2"] .cmt__foot {
    margin-left: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

[data-comment-style="v2"] .cmt__action {
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(160, 0, 255, .06);
    border: 1px solid rgba(160, 0, 255, .15);
    color: var(--accent2);
}

[data-comment-style="v2"] .cmt__action:hover {
    background: rgba(160, 0, 255, .14);
    border-color: var(--accent);
}

[data-theme="light"] [data-comment-style="v2"] .cmt {
    background: #fff;
}

[data-theme="light"] [data-comment-style="v2"] .cmt:hover {
    border-color: rgba(122, 40, 168, .3);
}

/* ============================================================
   ВАРИАНТ 3 — Компактный (иконки без текста)
   ============================================================ */
[data-comment-style="v3"] .cmt {
    padding: 14px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

[data-comment-style="v3"] .cmt:last-child {
    border-bottom: 0;
}

[data-comment-style="v3"] .cmt__avatar {
    width: 40px;
    height: 40px;
}

[data-comment-style="v3"] .cmt__head {
    gap: 10px;
    margin-bottom: 8px;
}

[data-comment-style="v3"] .cmt__meta {
    gap: 4px;
}

[data-comment-style="v3"] .cmt__rating {
    margin-left: 6px;
}

[data-comment-style="v3"] .cmt__like {
    padding: 4px 8px;
    font-size: 12px;
}

[data-comment-style="v3"] .cmt__body {
    padding-left: 50px;
    margin-bottom: 8px;
}

[data-comment-style="v3"] .cmt__foot {
    margin-left: 50px;
    gap: 6px;
}

[data-comment-style="v3"] .cmt__action {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
}

[data-comment-style="v3"] .cmt__action-label {
    display: none;
}

[data-comment-style="v3"] .cmt__action i {
    font-size: 13px;
}

[data-comment-style="v3"] .cmt__action:hover {
    background: rgba(160, 0, 255, .14);
    border-color: var(--accent);
    color: var(--accent2);
    transform: translateY(-1px);
}

/* ============ Мобильный ============ */
@media (max-width: 640px) {
    .cmt__body,
    .cmt__context,
    .cmt__sign,
    .cmt__foot {
        padding-left: 0;
        margin-left: 0;
    }

    [data-comment-style="v1"] .cmt__body,
    [data-comment-style="v1"] .cmt__foot {
        padding-left: 48px;
        margin-left: 0;
    }

    [data-comment-style="v3"] .cmt__body,
    [data-comment-style="v3"] .cmt__foot {
        padding-left: 50px;
        margin-left: 0;
    }
}


/* Светлая тема */


/* Мобильный */
@media (max-width: 640px) {

}


/* Мобильный — максимальная ширина = ширина экрана */
@media (max-width: 640px) {

}


/* 1. Скрываем заглушку, если есть комментарии */
#reviews-sec:has(#dle-comments-list .cmt) .empty {
    display: none !important;
}

/* 2. Скрываем весь [not-comments] блок, если есть cmt */
#reviews-sec:has(#dle-comments-list .cmt) .reviews-empty,
#reviews-sec:has(#dle-comments-list .cmt) [class*="empty"] {
    display: none !important;
}

/* ============ Кнопки формы — правильное расположение ============ */


/* Блок с правилами + чекбокс — слева */

/* Кнопка — справа */

/* Чекбокс — компактно */

/* Правила — мелко */

/* Мобильный — в столбик */
@media (max-width: 640px) {


}


/* Обёртка WYSIWYG — даём воздух через внешний контейнер */

/* Внутри — убираем border, фон прозрачный */

/* Сам TinyMCE — без собственных границ */

/* Toolbar — внутренний padding */


/* Поле редактирования — padding внутри iframe */


/* Статусбар — снизу */

/* Форма — общий padding */

/* Заголовок формы */

/* Чекбокс + правила */


/* Блок кнопок */

/* Кнопка */

/* Мобильный */
@media (max-width: 640px) {


}

/* === МОБИЛЬНЫЙ === */
@media (max-width: 640px) {


}

@keyframes cmtFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ── Мобильные ── */
@media (max-width: 640px) {
}


/* ══════════════════════════════════════════════════════════════
   KinoStyle — Форма рецензии v3 (clean, Lumen style)
   ══════════════════════════════════════════════════════════════ */

.cmt-form {
    margin-top: 28px;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.cmt-form.is-open,
.cmt-form:focus-within {
    border-color: var(--line2);
    box-shadow: var(--shadow-soft);
}

.cmt-form__toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease;
}

.cmt-form__toggle:hover {
    background: var(--accent-soft);
}

.cmt-form__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent3));
    color: var(--accent-ink);
    font-size: 16px;
    flex: 0 0 auto;
    box-shadow: 0 8px 20px -6px rgba(255, 90, 54, .45);
    transition: transform .25s ease, box-shadow .25s ease;
}

.cmt-form__toggle:hover .cmt-form__toggle-icon {
    transform: scale(1.05);
    box-shadow: 0 12px 28px -6px rgba(255, 90, 54, .6);
}

.cmt-form__toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.cmt-form__toggle-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--text);
}

.cmt-form__toggle-sub {
    font-size: var(--fs-meta);
    color: var(--muted);
}

.cmt-form__toggle-chevron {
    flex: 0 0 auto;
    color: var(--muted);
    transition: transform .25s ease;
}

.cmt-form.is-open .cmt-form__toggle-chevron {
    transform: rotate(180deg);
}

.cmt-form__inner {
    display: none;
    padding: 0 24px 24px;
    border-top: 1px solid var(--line);
}

.cmt-form.is-open .cmt-form__inner {
    display: block;
    animation: cmtFadeIn .3s ease;
}

@keyframes cmtFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.cmt-form__field--editor {
    margin-top: 16px;
    border: 1px solid var(--line2);
    border-radius: 16px;
    background: var(--surface-sunk);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cmt-form__field--editor:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.cmt-form .wseditor,
.cmt-form .dleaddcomments-editor {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cmt-form .tox-tinymce {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

.cmt-form .tox .tox-editor-header {
    padding: 6px 10px !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
    margin: 0 !important;
}

.cmt-form .tox .tox-toolbar-overlord,
.cmt-form .tox .tox-toolbar__primary,
.cmt-form .tox .tox-toolbar {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cmt-form .tox .tox-toolbar__group {
    padding: 0 2px !important;
    margin: 0 !important;
    border: 0 !important;
}

.cmt-form .tox .tox-tbtn {
    color: var(--muted) !important;
    border-radius: 8px !important;
    transition: background .18s ease, color .18s ease !important;
}

.cmt-form .tox .tox-tbtn svg {
    fill: currentColor !important;
}

.cmt-form .tox .tox-tbtn:hover,
.cmt-form .tox .tox-tbtn:focus {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

.cmt-form .tox .tox-tbtn--enabled,
.cmt-form .tox .tox-tbtn--enabled:hover,
.cmt-form .tox .tox-tbtn[aria-pressed="true"] {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
}

.cmt-form .tox .tox-edit-area {
    background: var(--surface-sunk) !important;
    padding: 0 !important;
}

.cmt-form .tox .tox-edit-area__iframe {
    background: var(--surface-sunk) !important;
    border: 0 !important;
    padding: 14px 16px !important;
    color: var(--text) !important;
    font-family: var(--sans) !important;
    font-size: var(--fs-body) !important;
}

.cmt-form .tox .tox-statusbar {
    background: var(--surface) !important;
    border-top: 1px solid var(--line) !important;
    color: var(--muted) !important;
    padding: 4px 10px !important;
}

.cmt-form .tox .tox-statusbar a,
.cmt-form .tox .tox-statusbar__path-item {
    color: var(--muted) !important;
}

.cmt-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.cmt-form__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.cmt-form__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: var(--soft);
    font-size: var(--fs-meta);
}

.cmt-form__check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid var(--line2);
    accent-color: var(--accent);
    cursor: pointer;
    flex: 0 0 auto;
}

.cmt-form__note {
    font-size: var(--fs-meta);
    color: var(--muted);
    line-height: 1.4;
}

.cmt-form__note a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s ease;
}

.cmt-form__note a:hover {
    color: var(--accent2);
}

.cmt-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--control-h);
    padding: 0 26px;
    border: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: var(--accent-ink);
    font-family: inherit;
    font-size: var(--fs-ui);
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: 0 8px 22px -8px rgba(255, 90, 54, .55);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cmt-form__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(255, 90, 54, .7);
    filter: brightness(1.05);
}

.cmt-form__submit:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -4px rgba(255, 90, 54, .5);
}

.cmt-form__submit i {
    font-size: 15px;
    width: auto;
}

.cmt-form__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--mist-soft);
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .2s ease, color .2s ease;
}

.cmt-form__close:hover {
    background: var(--rose-soft);
    color: var(--negative);
}

[data-theme="light"] .cmt-form {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .08);
}

[data-theme="light"] .cmt-form__field--editor {
    background: #fafafa;
    border-color: rgba(0, 0, 0, .1);
}

[data-theme="light"] .cmt-form .tox .tox-editor-header {
    background: #f5f5f5 !important;
    border-bottom-color: rgba(0, 0, 0, .08) !important;
}

[data-theme="light"] .cmt-form .tox .tox-edit-area,
[data-theme="light"] .cmt-form .tox .tox-edit-area__iframe {
    background: #fafafa !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .cmt-form .tox .tox-statusbar {
    background: #f5f5f5 !important;
    border-top-color: rgba(0, 0, 0, .08) !important;
}

@media (max-width: 640px) {
    .cmt-form__toggle {
        padding: 16px 18px;
    }
    .cmt-form__inner {
        padding: 0 18px 18px;
    }
    .cmt-form__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .cmt-form__submit {
        width: 100%;
        justify-content: center;
    }
    .cmt-form__meta {
        order: 2;
    }
}


/* ══════════════════════════════════════════════════════════════
   KinoStyle — Поля гостя, капча, reCAPTCHA
   ══════════════════════════════════════════════════════════════ */

/* Ряд с двумя полями (имя, email) — адаптивная сетка */
.cmt-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
    margin-top: 16px;
}

/* Общее поле */
.cmt-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Текстовые поля */
.cmt-form__field input[type="text"],
.cmt-form__field input[type="email"] {
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--line2);
    background: var(--surface-sunk);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--fs-body);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.cmt-form__field input[type="text"]::placeholder,
.cmt-form__field input[type="email"]::placeholder {
    color: var(--muted);
}

.cmt-form__field input[type="text"]:focus,
.cmt-form__field input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Капча (картинка + поле) ── */
.cmt-form__field--captcha {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
}

.cmt-form__captcha-img {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}

.cmt-form__captcha-img img {
    display: block;
    height: 46px;
    width: auto;
    border-radius: 10px;
}

.cmt-form__field--captcha input[type="text"] {
    flex: 1 1 180px;
    min-width: 0;
}

/* ── reCAPTCHA ── */
.cmt-form__field > .g-recaptcha,
.cmt-form__field > div[id^="rc-anchor"] {
    margin-top: 8px;
}

/* ── Светлая тема: поля гостя ── */
[data-theme="light"] .cmt-form__field input[type="text"],
[data-theme="light"] .cmt-form__field input[type="email"] {
    background: #fafafa;
    border-color: rgba(0, 0, 0, .12);
    color: #1a1a1a;
}

[data-theme="light"] .cmt-form__field input[type="text"]:focus,
[data-theme="light"] .cmt-form__field input[type="email"]:focus {
    background: #ffffff;
    border-color: var(--accent);
}

[data-theme="light"] .cmt-form__field--captcha {
    background: #fafafa;
    border-color: rgba(0, 0, 0, .08);
}

/* ── Мобильные ── */
@media (max-width: 640px) {
    .cmt-form__field--captcha {
        flex-direction: column;
        align-items: stretch;
    }
    .cmt-form__captcha-img {
        align-self: flex-start;
    }
}


/* ══════════════════════════════════════════════════════════════
   KinoStyle — .cmt-form__form (обёртка формы внутри cmt-form__inner)
   ══════════════════════════════════════════════════════════════ */

.cmt-form__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}

/* Поля-обёртки для гостя и reCAPTCHA — отступ сверху */
.cmt-form__form > .cmt-form__row {
    margin-top: 0;
}

.cmt-form__form > .cmt-form__field:not(.cmt-form__field--editor) {
    margin-top: 0;
}

.cmt-form__field--editor {
    margin-top: 16px;   /* отступ от тумблера-заголовка до редактора */
}

/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — jQuery UI переменные (для модалок complaint, popup)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── Модалка ─── */
    --ui-bg: #1a1a20;                    /* фон окна */
    --ui-text: #F4F1EC;                  /* основной текст */
    --ui-soft: #CFCAC2;                  /* мягкий текст */
    --ui-muted: #A29E97;                 /* приглушённый текст */
    --ui-border: rgba(244, 241, 236, .12); /* граница окна */
    --ui-divider: rgba(244, 241, 236, .08); /* разделитель */
    --ui-hover-bg: rgba(160, 0, 255, .12); /* hover */
    --ui-shadow: 0 40px 80px -20px rgba(0, 0, 0, .85),
                 0 0 0 1px rgba(244, 241, 236, .06),
                 0 0 80px -20px rgba(160, 0, 255, .35);

    /* ─── Оверлей ─── */
    --ui-overlay-bg: rgba(6, 6, 8, .82);

    /* ─── Поля ввода ─── */
    --ui-input-bg: rgba(244, 241, 236, .04);
    --ui-input-border: rgba(244, 241, 236, .10);
    --ui-input-focus: rgba(160, 0, 255, .4);
}

/* ─── Светлая тема ─── */
[data-theme="light"] {
    --ui-bg: #ffffff;
    --ui-text: #1a1a1e;
    --ui-soft: #4a4a50;
    --ui-muted: #888;
    --ui-border: rgba(0, 0, 0, .12);
    --ui-divider: rgba(0, 0, 0, .08);
    --ui-hover-bg: rgba(160, 0, 255, .08);
    --ui-shadow: 0 40px 80px -20px rgba(0, 0, 0, .25),
                 0 0 0 1px rgba(0, 0, 0, .04),
                 0 0 80px -20px rgba(160, 0, 255, .15);
    --ui-overlay-bg: rgba(240, 238, 234, .85);
    --ui-input-bg: rgba(0, 0, 0, .03);
    --ui-input-border: rgba(0, 0, 0, .10);
    --ui-input-focus: rgba(160, 0, 255, .3);
}

/* ═══════════════════════════════════════════════════════════════════════
   🎬 Специфичные стили для модалки жалобы (.dle-popup-complaint)
   ═══════════════════════════════════════════════════════════════════════ */

html body .ui-dialog.dle-popup-complaint {
    background: var(--ui-bg) !important;
    background-color: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--ui-shadow) !important;
    padding: 0 !important;
    max-width: min(560px, calc(100vw - 32px)) !important;
    overflow: hidden !important;
    font-family: var(--sans) !important;
    z-index: 999999 !important;
}

/* Заголовок модалки жалобы */
html body .ui-dialog.dle-popup-complaint .ui-dialog-titlebar {
    background: linear-gradient(180deg,
        rgba(160, 0, 255, .08) 0%,
        rgba(160, 0, 255, .02) 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-divider) !important;
    padding: 18px 24px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 20px 20px 0 0 !important;
}

/* Заголовок текста */
html body .ui-dialog.dle-popup-complaint .ui-dialog-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--ui-text) !important;
    font-family: var(--serif) !important;
    letter-spacing: -.01em !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Кнопка закрытия */
html body .ui-dialog.dle-popup-complaint .ui-dialog-titlebar-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(244, 241, 236, .04) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-muted) !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    transition: all .2s !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .ui-dialog.dle-popup-complaint .ui-dialog-titlebar-close:hover {
    background: rgba(160, 0, 255, .15) !important;
    color: var(--accent3) !important;
    border-color: rgba(160, 0, 255, .3) !important;
    transform: rotate(90deg) !important;
}

/* Скрываем дефолтную иконку jQuery UI */
html body .ui-dialog.dle-popup-complaint .ui-icon-closethick {
    background-image: none !important;
    text-indent: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
}

/* Крестик через псевдоэлементы */
html body .ui-dialog.dle-popup-complaint .ui-icon-closethick::before,
html body .ui-dialog.dle-popup-complaint .ui-icon-closethick::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 2px !important;
}

html body .ui-dialog.dle-popup-complaint .ui-icon-closethick::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

html body .ui-dialog.dle-popup-complaint .ui-icon-closethick::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Скрываем текстовую часть крестика */
html body .ui-dialog.dle-popup-complaint .ui-button-icon-space {
    display: none !important;
}

/* Контент модалки */
html body .ui-dialog.dle-popup-complaint .ui-dialog-content {
    padding: 22px 24px !important;
    color: var(--ui-soft) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    background: transparent !important;
    overflow-y: auto !important;
}

/* Textarea */
html body .ui-dialog.dle-popup-complaint .ui-dialog-content textarea {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    margin: 12px 0 0 !important;
    background: var(--ui-input-bg) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-input-border) !important;
    border-radius: 14px !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all .2s !important;
    min-height: 120px !important;
}

html body .ui-dialog.dle-popup-complaint .ui-dialog-content textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(160, 0, 255, .14) !important;
    background: rgba(160, 0, 255, .04) !important;
}

html body .ui-dialog.dle-popup-complaint .ui-dialog-content textarea::placeholder {
    color: var(--ui-muted) !important;
    opacity: .7 !important;
}

/* Кнопки */
html body .ui-dialog.dle-popup-complaint .ui-dialog-buttonpane {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ui-divider) !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    border-radius: 0 0 20px 20px !important;
}

html body .ui-dialog.dle-popup-complaint .ui-dialog-buttonset {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

html body .ui-dialog.dle-popup-complaint .ui-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 22px !important;
    border-radius: 999px !important;
    font-family: var(--sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all .2s !important;
    border: 1px solid var(--ui-border) !important;
    background: rgba(244, 241, 236, .04) !important;
    color: var(--ui-text) !important;
    text-shadow: none !important;
    outline: none !important;
}

html body .ui-dialog.dle-popup-complaint .ui-button:hover {
    background: rgba(244, 241, 236, .10) !important;
    border-color: var(--ui-border) !important;
}

/* Последняя кнопка (Отправить) — акцентная */
html body .ui-dialog.dle-popup-complaint .ui-dialog-buttonset .ui-button:last-child {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(160, 0, 255, .6) !important;
}

html body .ui-dialog.dle-popup-complaint .ui-dialog-buttonset .ui-button:last-child:hover {
    background: linear-gradient(135deg, var(--accent3) 0%, var(--accent2) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px -6px rgba(160, 0, 255, .8) !important;
}

/* Оверлей */
html body .ui-widget-overlay {
    background: var(--ui-overlay-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 1 !important;
    z-index: 999998 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Кнопка закрытия jQuery UI модалок (complaint, popup)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Базовая кнопка (все ui-dialog) ─── */
html body .ui-dialog .ui-dialog-titlebar-close.ui-button {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(244, 241, 236, .05) !important;
    background-image: none !important;
    color: var(--muted, #A29E97) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transition:
        background .2s cubic-bezier(.2, .7, .2, 1),
        color .2s cubic-bezier(.2, .7, .2, 1),
        transform .2s cubic-bezier(.2, .7, .2, 1) !important;
    z-index: 10 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body .ui-dialog .ui-dialog-titlebar-close.ui-button:hover {
    background: rgba(160, 0, 255, .18) !important;
    color: var(--accent3, #e4a8ff) !important;
    transform: rotate(90deg) !important;
    border: 0 !important;
}

html body .ui-dialog .ui-dialog-titlebar-close.ui-button:focus {
    outline: 2px solid var(--accent2, #ce5eff) !important;
    outline-offset: 2px !important;
}

html body .ui-dialog .ui-dialog-titlebar-close.ui-button:active {
    transform: rotate(90deg) scale(.94) !important;
}

/* ─── Скрываем jQuery UI иконку и текст ─── */
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon,
html body .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
    background-image: none !important;
    background: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 0 !important;
    color: transparent !important;
}

html body .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space,
html body .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-only span:not(.ui-icon) {
    display: none !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Скрываем текст "Close" внутри кнопки */
html body .ui-dialog .ui-dialog-titlebar-close.ui-button,
html body .ui-dialog .ui-dialog-titlebar-close.ui-button * {
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* ─── Крестик через ::before и ::after ─── */
html body .ui-dialog .ui-dialog-titlebar-close.ui-button::before,
html body .ui-dialog .ui-dialog-titlebar-close.ui-button::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 2px !important;
    background: var(--muted, #A29E97) !important;
    border-radius: 2px !important;
    text-indent: 0 !important;
    transition: background .2s !important;
    pointer-events: none !important;
}

html body .ui-dialog .ui-dialog-titlebar-close.ui-button::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

html body .ui-dialog .ui-dialog-titlebar-close.ui-button::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* При hover — крестик становится ярче */
html body .ui-dialog .ui-dialog-titlebar-close.ui-button:hover::before,
html body .ui-dialog .ui-dialog-titlebar-close.ui-button:hover::after {
    background: var(--accent3, #e4a8ff) !important;
}

/* ─── Модалка жалобы (.dle-popup-complaint) — усиленная специфичность ─── */
html body .ui-dialog.dle-popup-complaint .ui-dialog-titlebar-close.ui-button {
    background: rgba(244, 241, 236, .06) !important;
    border: 1px solid rgba(244, 241, 236, .08) !important;
}

html body .ui-dialog.dle-popup-complaint .ui-dialog-titlebar-close.ui-button:hover {
    background: rgba(160, 0, 255, .20) !important;
    border-color: rgba(160, 0, 255, .35) !important;
    color: var(--accent3, #e4a8ff) !important;
}

/* ─── Светлая тема ─── */
[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close.ui-button,
[data-theme="light"] .ui-dialog .ui-dialog-titlebar-close.ui-button {
    background: rgba(0, 0, 0, .04) !important;
    color: #666 !important;
}

[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close.ui-button:hover,
[data-theme="light"] .ui-dialog .ui-dialog-titlebar-close.ui-button:hover {
    background: rgba(160, 0, 255, .12) !important;
    color: var(--accent, #a000ff) !important;
}

[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close.ui-button::before,
[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close.ui-button::after {
    background: #666 !important;
}

[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close.ui-button:hover::before,
[data-theme="light"] html body .ui-dialog .ui-dialog-titlebar-close.ui-button:hover::after {
    background: var(--accent, #a000ff) !important;
}

/* ─── Мобильный ─── */
@media (max-width: 640px) {
    html body .ui-dialog .ui-dialog-titlebar-close.ui-button {
        width: 32px !important;
        height: 32px !important;
        top: 12px !important;
        right: 12px !important;
    }
    html body .ui-dialog .ui-dialog-titlebar-close.ui-button::before,
    html body .ui-dialog .ui-dialog-titlebar-close.ui-button::after {
        width: 12px !important;
    }
}



/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Блок "Сезон / Серии" на постере (для сериалов)
   ═══════════════════════════════════════════════════════════════════════ */

/* [удалён старый .b-episode блок] */

/* [удалён] */

/* Строка "число + метка" */
/* [удалён .b-episode__row] */

/* Число — крупное, serif, tabular */
/* [удалён .b-episode__num] */

/* Метка — мелкая, uppercase, приглушённая */
/* [удалён .b-episode__label] */

/* Вторая строка (серия) — с акцентным числом */
/* [удалён nth-child] */

/* Вторая строка (серия) — метка чуть ярче */
/* [удалён nth-child] */

/* Скрываем .b-dur, если есть .b-episode */
.pcard-img:has(.b-episode) .b-dur,
.pcard-img .b-episode + .b-dur {
    display: none !important;
}

/* ─── Мобильный ─── */
@media (max-width: 640px) {
    /* [удалён старый .b-episode блок] */
    /* [удалён .b-episode__num] */
    /* [удалён .b-episode__label] */
}

/* ─── Светлая тема ─── */
[data-theme="light"] /* [удалён старый .b-episode блок] */
[data-theme="light"] /* [удалён .b-episode__num] */
[data-theme="light"] /* [удалён .b-episode__label] */
[data-theme="light"] /* [удалён nth-child] */
[data-theme="light"] /* [удалён nth-child] */
[data-theme="light"] /* [удалён] */





/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Сезон/Серии на постере — ЕДИНСТВЕННЫЙ ФИНАЛЬНЫЙ БЛОК
   Тёмная тема: белый текст. Светлая тема: чёрный текст.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Контейнер ─── */
.pcard-img .b-episode {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    top: auto !important;
    right: auto !important;
    z-index: 5 !important;
    
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    gap: 3px !important;
    
    padding: 10px 14px 11px !important;
    margin: 0 !important;
    
    border-radius: 13px !important;
    
    /* Серое стекло (тёмная тема) */
    background: rgba(50, 50, 55, .58) !important;
    backdrop-filter: blur(16px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    
    box-shadow:
        0 4px 14px -4px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    
    font-family: var(--sans) !important;
    line-height: 1 !important;
    
    pointer-events: none !important;
    transition: all .25s cubic-bezier(.2, .7, .2, 1) !important;
    white-space: nowrap !important;
    
    width: auto !important;
    height: auto !important;
    min-width: 56px !important;
    overflow: visible !important;
}

.pcard:hover .b-episode {
    background: rgba(60, 60, 66, .68) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    box-shadow:
        0 6px 18px -6px rgba(0, 0, 0, .65),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* ─── Числа — ЖИРНЫЕ ─── */
.pcard-img .b-episode__value {
    display: block !important;
    position: static !important;
    
    font-family: var(--sans) !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: -.015em !important;
    
    color: #ffffff !important;
    font-variant-numeric: tabular-nums !important;
    
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ─── Подписи — ЖИРНЫЕ ─── */
.pcard-img .b-episode__text {
    display: block !important;
    position: static !important;
    
    font-family: var(--sans) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .11em !important;
    line-height: 1 !important;
    
    color: rgba(255, 255, 255, .9) !important;
    
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pcard-img .b-episode__text.last {
    margin-bottom: 4px !important;
}

/* ─── Разделитель (тёмная тема) ─── */
.pcard-img .b-episode__value:nth-of-type(2) {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, .22) !important;
    width: 100% !important;
    text-align: center !important;
}

/* ─── Скрываем .b-dur ─── */
.pcard-img:has(.b-episode) .b-dur {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   ☀️ СВЕТЛАЯ ТЕМА — ЧЁРНЫЙ текст
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .pcard-img .b-episode {
    background: rgba(240, 240, 245, .82) !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    box-shadow:
        0 4px 14px -4px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

[data-theme="light"] .pcard:hover .b-episode {
    background: rgba(245, 245, 250, .92) !important;
    border-color: rgba(0, 0, 0, .18) !important;
}

/* ─── ЧИСЛА — ЧЁРНЫЕ ─── */
[data-theme="light"] .pcard-img .b-episode__value {
    color: #0a0a0c !important;
}

/* ─── ПОДПИСИ — ЧЁРНЫЕ ─── */
[data-theme="light"] .pcard-img .b-episode__text {
    color: rgba(10, 10, 12, .8) !important;
}

[data-theme="light"] .pcard-img .b-episode__value:nth-of-type(2) {
    border-top: 1px solid rgba(0, 0, 0, .15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   📱 МОБИЛЬНЫЙ
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .pcard-img .b-episode {
        bottom: 8px !important;
        left: 8px !important;
        padding: 8px 11px 9px !important;
        border-radius: 11px !important;
        min-width: 48px !important;
    }
    
    .pcard-img .b-episode__value {
        font-size: 15px !important;
    }
    
    .pcard-img .b-episode__text {
        font-size: 9px !important;
        letter-spacing: .1em !important;
    }
    
    .pcard-img .b-episode__value:nth-of-type(2) {
        margin-top: 5px !important;
        padding-top: 5px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — .b-episode (сезон/серии) — ФИНАЛЬНАЯ ВЕРСИЯ
   Используем html body для максимальной специфичности
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── КОНТЕЙНЕР ─── */
.pcard-img .b-episode,
.pcard .b-episode {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    top: auto !important;
    right: auto !important;
    z-index: 10 !important;
    
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    gap: 3px !important;
    
    padding: 10px 14px 11px !important;
    margin: 0 !important;
    
    border-radius: 13px !important;
    width: auto !important;
    height: auto !important;
    min-width: 56px !important;
    max-width: calc(100% - 20px) !important;
    
    background: rgba(50, 50, 55, .58) !important;
    backdrop-filter: blur(16px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    
    box-shadow:
        0 4px 14px -4px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    
    font-family: var(--sans) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    text-align: center !important;
}

html body .pcard:hover .b-episode,
html body .pcard-img:hover .b-episode {
    background: rgba(60, 60, 66, .68) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    box-shadow:
        0 6px 18px -6px rgba(0, 0, 0, .65),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* ─── ЧИСЛА ─── */
.pcard-img .b-episode__value,
.pcard .b-episode__value {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    
    font-family: var(--sans) !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: -.015em !important;
    
    color: #ffffff !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5) !important;
    
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ─── ПОДПИСИ ─── */
.pcard-img .b-episode__text,
.pcard .b-episode__text {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    
    font-family: var(--sans) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .11em !important;
    line-height: 1 !important;
    
    color: rgba(255, 255, 255, .9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important;
    
    margin: 3px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body .pcard-img .b-episode__text.last,
html body .pcard .b-episode__text.last {
    margin-bottom: 5px !important;
}

/* ─── Разделитель ─── */
.pcard-img .b-episode__value:nth-of-type(2),
.pcard .b-episode__value:nth-of-type(2) {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, .22) !important;
    width: 100% !important;
    text-align: center !important;
}

/* ─── Скрываем .b-dur ─── */
.pcard-img:has(.b-episode) .b-dur,
.pcard:has(.b-episode) .b-dur {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ☀️ СВЕТЛАЯ ТЕМА — ЧЁРНЫЙ текст
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .pcard-img .b-episode,
[data-theme="light"] .pcard .b-episode {
    background: rgba(240, 240, 245, .85) !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    box-shadow:
        0 4px 14px -4px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

[data-theme="light"] .pcard:hover .b-episode,
[data-theme="light"] .pcard-img:hover .b-episode {
    background: rgba(245, 245, 250, .95) !important;
    border-color: rgba(0, 0, 0, .18) !important;
}

[data-theme="light"] .pcard-img .b-episode__value,
[data-theme="light"] .pcard .b-episode__value {
    color: #0a0a0c !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .6) !important;
}

[data-theme="light"] .pcard-img .b-episode__text,
[data-theme="light"] .pcard .b-episode__text {
    color: rgba(10, 10, 12, .8) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .5) !important;
}

[data-theme="light"] .pcard-img .b-episode__value:nth-of-type(2),
[data-theme="light"] .pcard .b-episode__value:nth-of-type(2) {
    border-top: 1px solid rgba(0, 0, 0, .15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   📱 МОБИЛЬНЫЙ
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .pcard-img .b-episode,
    .pcard .b-episode {
        bottom: 8px !important;
        left: 8px !important;
        padding: 8px 11px 9px !important;
        border-radius: 11px !important;
        min-width: 48px !important;
    }
    
    .pcard-img .b-episode__value,
    .pcard .b-episode__value {
        font-size: 15px !important;
    }
    
    .pcard-img .b-episode__text,
    .pcard .b-episode__text {
        font-size: 9px !important;
        letter-spacing: .1em !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 ФИНАЛ — Прозрачнее фон + меньше текст
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── ТЁМНАЯ ТЕМА — фон прозрачнее ─── */
.pcard-img .b-episode,
.pcard .b-episode {
    background: rgba(50, 50, 55, .35) !important;        /* ← было .58, стало .35 */
    backdrop-filter: blur(20px) saturate(1.6) !important; /* ← blur чуть больше */
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important; /* ← чуть прозрачнее */
    box-shadow:
        0 4px 14px -4px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

html body .pcard:hover .b-episode,
html body .pcard-img:hover .b-episode {
    background: rgba(60, 60, 66, .45) !important;         /* ← было .68 */
    border-color: rgba(255, 255, 255, .25) !important;
}

/* ─── ЧИСЛА — меньше ─── */
.pcard-img .b-episode__value,
.pcard .b-episode__value {
    font-size: 16px !important;                          /* ← было 18px */
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
}

/* ─── ПОДПИСИ — меньше ─── */
.pcard-img .b-episode__text,
.pcard .b-episode__text {
    font-size: 9px !important;                           /* ← было 10px */
    font-weight: 800 !important;
    letter-spacing: .1em !important;
}

/* ─── Чуть компактнее padding ─── */
.pcard-img .b-episode,
.pcard .b-episode {
    padding: 9px 13px 10px !important;                   /* ← было 10px 14px 11px */
    gap: 2px !important;
}

.pcard-img .b-episode__value:nth-of-type(2),
.pcard .b-episode__value:nth-of-type(2) {
    margin-top: 5px !important;                          /* ← было 6px */
    padding-top: 5px !important;
}

html body .pcard-img .b-episode__text.last,
html body .pcard .b-episode__text.last {
    margin-bottom: 4px !important;                       /* ← было 5px */
}

/* ═══════════════════════════════════════════════════════════════════════
   ☀️ СВЕТЛАЯ ТЕМА — тоже прозрачнее
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .pcard-img .b-episode,
[data-theme="light"] .pcard .b-episode {
    background: rgba(240, 240, 245, .65) !important;      /* ← было .85, стало .65 */
    border: 1px solid rgba(0, 0, 0, .10) !important;
    box-shadow:
        0 4px 14px -4px rgba(0, 0, 0, .15),
        inset 0 1px 0 rgba(255, 255, 255, .65) !important;
}

[data-theme="light"] .pcard:hover .b-episode,
[data-theme="light"] .pcard-img:hover .b-episode {
    background: rgba(245, 245, 250, .8) !important;
    border-color: rgba(0, 0, 0, .15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   📱 МОБИЛЬНЫЙ — тоже чуть меньше
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .pcard-img .b-episode,
    .pcard .b-episode {
        padding: 7px 10px 8px !important;
        min-width: 44px !important;
    }
    
    .pcard-img .b-episode__value,
    .pcard .b-episode__value {
        font-size: 13px !important;                      /* ← было 15px */
    }
    
    .pcard-img .b-episode__text,
    .pcard .b-episode__text {
        font-size: 8px !important;                       /* ← было 9px */
        letter-spacing: .08em !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Разделитель между сезоном и сериями
   Третий элемент (.b-episode__value:nth-child(3)) = число серий
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Разделитель для числа СЕРИЙ (третий span) ─── */
html body .pcard-img .b-episode > span:nth-child(3),
html body .pcard .b-episode > span:nth-child(3) {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, .25) !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

/* ─── Разделитель: светлая тема ─── */
html body[data-theme="light"] .pcard-img .b-episode > span:nth-child(3),
html body[data-theme="light"] .pcard .b-episode > span:nth-child(3) {
    border-top: 1px solid rgba(0, 0, 0, .15) !important;
}

/* ─── Скрываем возможные старые (не работают) ─── */
.pcard-img .b-episode__value:nth-of-type(2),
.pcard .b-episode__value:nth-of-type(2) {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: auto !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Поменять местами: КАЧЕСТВО (верх) ↔ ВОЗРАСТ (низ)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── .b-qual (КАЧЕСТВО) — вверх-вправо ─── */
html body .pcard-img .b-qual,
html body .pcard .b-qual {
    top: 10px !important;
    bottom: auto !important;
    right: 10px !important;
    left: auto !important;
}

/* ─── .b-new (ВОЗРАСТ) — вниз-вправо ─── */
html body .pcard-img .b-new,
html body .pcard .b-new {
    top: auto !important;
    bottom: 10px !important;
    right: 10px !important;
    left: auto !important;
}

/* ─── Убираем конфликт: .b-new + .b-qual ─── */
html body .pcard-img .b-new + .b-qual,
html body .pcard .b-new + .b-qual {
    top: 10px !important;
    bottom: auto !important;
    right: 10px !important;
    left: auto !important;
}

/* ─── На случай, если .b-dur тоже мешает ─── */
html body .pcard-img .b-dur,
html body .pcard .b-dur {
    bottom: 10px !important;
    left: 10px !important;
    top: auto !important;
    right: auto !important;
}

/* ─── .b-episode — тоже слева-внизу ─── */
.pcard-img .b-episode,
.pcard .b-episode {
    bottom: 10px !important;
    left: 10px !important;
    top: auto !important;
    right: auto !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Нижний таббар (мобильный) — 5 кнопок
   Главная / Фильмы / Сериалы / Мультфильмы / Аниме
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Контейнер ─── */
.tabbar {
    position: fixed;
    z-index: 60;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: none;
    justify-content: space-around;
    align-items: center;
    height: 64px;
    padding: 4px 6px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(244, 241, 236, .10);
    box-shadow:
        0 12px 32px -8px rgba(0, 0, 0, .65),
        0 0 0 1px rgba(244, 241, 236, .04);
}

/* ─── Показываем только на мобильных ─── */
@media (max-width: 819px) {
    .tabbar {
        display: flex;
    }
}

/* ─── Кнопка ─── */
.tabbar__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    height: 56px;
    padding: 0 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background .2s cubic-bezier(.2, .7, .2, 1),
        color .2s cubic-bezier(.2, .7, .2, 1),
        transform .15s cubic-bezier(.2, .7, .2, 1);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.tabbar__item i {
    font-size: 17px;
    width: auto;
    line-height: 1;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}

.tabbar__item span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

/* ─── Hover ─── */
.tabbar__item:hover {
    color: var(--text);
}

/* ─── Активный (текущая страница) ─── */
.tabbar__item.active,
.tabbar__item[data-nav].active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 22%, transparent),
        color-mix(in srgb, var(--accent2) 14%, transparent));
    color: var(--accent3);
    box-shadow: inset 0 0 0 1px rgba(160, 0, 255, .25);
}

.tabbar__item.active i {
    color: var(--accent3);
    transform: scale(1.08);
}

/* ─── Нажатие ─── */
.tabbar__item:active {
    transform: scale(.94);
}

/* ─── Скрываем на странице фильма (полный просмотр) ─── */
.page-film .tabbar {
    display: none;
}

/* ─── Светлая тема ─── */
[data-theme="light"] .tabbar {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(0, 0, 0, .06);
    box-shadow:
        0 12px 32px -8px rgba(0, 0, 0, .15),
        0 0 0 1px rgba(0, 0, 0, .03);
}

[data-theme="light"] .tabbar__item {
    color: #6b6b70;
}

[data-theme="light"] .tabbar__item:hover {
    color: #1a1a1e;
}

[data-theme="light"] .tabbar__item.active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 14%, transparent),
        color-mix(in srgb, var(--accent2) 8%, transparent));
    color: var(--accent, #a000ff);
    box-shadow: inset 0 0 0 1px rgba(160, 0, 255, .18);
}

[data-theme="light"] .tabbar__item.active i {
    color: var(--accent, #a000ff);
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Сезон/серии: показываем ТОЛЬКО в плитке
   Скрываем в списке (is-list) на ВСЕХ устройствах
   ═══════════════════════════════════════════════════════════════════════ */

/* В СПИСКЕ — скрываем .b-episode (и мобильный, и ПК) */
.is-list .pcard-img .b-episode,
.is-list .pcard .b-episode,
html body .is-list .pcard-img .b-episode,
html body .is-list .pcard .b-episode {
    display: none !important;
}

/* В СПИСКЕ — показываем .b-dur (длительность) вместо .b-episode */
.is-list .pcard-img:has(.b-episode) .b-dur,
.is-list .pcard-img .b-episode + .b-dur,
html body .is-list .pcard-img:has(.b-episode) .b-dur {
    display: inline-flex !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Мобильный адаптив .is-list (список)
   Исправляем сломанный список на мобильном
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 819px) {

    /* Контейнер списка */
    .cat-main.is-list,
    .is-list #dle-feed,
    .is-list #dle-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 12px 80px !important;
    }

    /* Карточка в списке — горизонтальная */
    .is-list .pcard {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: var(--surface) !important;
        border: 1px solid var(--line) !important;
        border-radius: 14px !important;
    }

    /* Постер — фиксированный размер */
    .is-list .pcard-img {
        flex: 0 0 100px !important;
        width: 100px !important;
        height: 150px !important;
        aspect-ratio: auto !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    /* Инфо — гибкая */
    .is-list .pcard-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 0 !important;
    }

    .is-list .pcard-info > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    /* Заголовок */
    .is-list .pcard-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* Год · Страна */
    .is-list .pcard-info small {
        font-size: 12px !important;
        color: var(--muted) !important;
    }

    /* Описание — скрываем */
    .is-list .pcard-text {
        display: none !important;
    }

    /* Мета-строка */
    .is-list .pcard-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 11px !important;
        color: var(--muted) !important;
        margin-top: 2px !important;
    }

    .is-list .pcard-meta .dot {
        display: none !important;
    }

    /* Скрываем лишнее */
    .is-list .lrow-rate,
    .is-list .pcard-tools {
        display: none !important;
    }

    /* Кнопка "В список" — фиксируем справа */
    .is-list .add-btn {
        flex: 0 0 auto !important;
        align-self: flex-end !important;
        width: 30px !important;
        height: 30px !important;
    }

    /* Плашка "Нравится/Не нравится" — компактно */
    .is-list .rate-dle {
        display: inline-flex !important;
        gap: 4px !important;
    }

    /* Фильтры — прячем на мобильном в списке, чтобы не мешали */
    .is-list .fbar-wrap,
    .is-list .fbar {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   🎬 Плитка (grid) — оставляем .b-episode видимым (по умолчанию)
   Ничего не трогаем — там всё работает.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — на мобильном в списке: только лайк/дизлайк
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 819px) {
    /* Показываем мету в списке */
    .is-list .pcard-meta {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
        align-items: center;
    }
    /* Скрываем всё кроме лайков */
    .is-list .pcard-meta > *:not(.rate-dle) {
        display: none !important;
    }
    /* Лайки — компактно, принудительно показываем */
    .is-list .pcard-meta > .rate-dle,
    html body .is-list .pcard-meta > .rate-dle {
        display: inline-flex !important;
        gap: 6px;
        align-items: center;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
    }
    .is-list .pcard-meta > .rate-dle .vote-pill {
        padding: 2px 6px;
        font-size: 11px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — качество видео в списке вместо даты (фикс)
   ═══════════════════════════════════════════════════════════════════════ */

/* По умолчанию — скрыт (в сетке качество уже есть на постере) */
.b-qual-inline {
    display: none;
}

/* В списке — показываем качество, скрываем дату */
.is-list .pcard-meta .b-qual-inline {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    color: var(--muted);
}
.is-list .pcard-meta > time {
    display: none !important;
}
.is-list .pcard-meta > time + .dot {
    display: none !important;
}

/* На мобильном — скрываем .b-qual-inline (там только лайки) */
@media (max-width: 819px) {
    .is-list .pcard-meta .b-qual-inline {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Логотип: картинка вместо иконки play
   ═══════════════════════════════════════════════════════════════════════ */

.logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 9px;
    flex: 0 0 auto;
    display: block;
    background: transparent;
    /* лёгкая подсветка, чтобы лого не терялось на прозрачном фоне */
    filter: drop-shadow(0 2px 6px rgba(160, 0, 255, .25));
    transition: transform .25s cubic-bezier(.2,.7,.2,1), filter .25s;
}

.logo:hover .logo-img {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(160, 0, 255, .45));
}

/* В футере лого крупнее */
.footer-brand .logo-img,
.footer .logo-img {
    width: 42px;
    height: 42px;
    border-radius: 11px;
}

/* На мобильном — компактнее */
@media (max-width: 819px) {
    .logo-img {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }
    .footer-brand .logo-img,
    .footer .logo-img {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
}

/* Если где-то ещё .logo-mark остался — оставляем рабочий fallback */
.logo-mark {
    /* на случай, если не все места заменили */
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.logo-mark i {
    color: var(--bg);
    font-size: .8em;
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Логотип: шрифт Flaming (как в Sinemagic)
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Logo';
    src: url('../fonts/Flaming.eot');
    src:
        url('../fonts/Flaming.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Flaming.woff2') format('woff2'),
        url('../fonts/Flaming.woff') format('woff'),
        url('../fonts/Flaming.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Применяем шрифт к тексту лого */
.logo-text {
    font-family: 'Logo', var(--serif), Georgia, serif;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 0;
    line-height: 1;
    /* небольшой запас справа/слева — Flaming с выносными элементами */
    padding-right: 2px;
    /* чтобы выравнивание с картинкой было по центру */
    display: inline-flex;
    align-items: center;
}

/* На мобильном — компактнее */
@media (max-width: 819px) {
    .logo-text {
        font-size: 26px;
    }
}

/* На очень узких экранах — можно уменьшить ещё */
@media (max-width: 480px) {
    .logo-text {
        font-size: 22px;
    }
}

/* В футере лого крупнее (там .logo-text 26px был по умолчанию) */
.footer-brand .logo-text,
.footer .logo-text {
    font-size: 36px;
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Шрифт логотипа Flaming (как в Sinemagic)
   Применяется везде, где текст «KinoDron» — шапка, футер, и т.д.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Logo';
    src: url('../fonts/Flaming.eot');
    src:
        url('../fonts/Flaming.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Flaming.woff2') format('woff2'),
        url('../fonts/Flaming.woff') format('woff'),
        url('../fonts/Flaming.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ═══ Шапка сайта ═══ */
.logo-text,
.header .logo-text,
.header .logo .logo-text {
    font-family: 'Logo', var(--serif), Georgia, serif !important;
    font-weight: normal !important;
    font-size: 34px !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center;
    padding: 0 2px;
}

/* ═══ Футер ═══ */
.footer-brand .logo-text,
.footer .logo-text,
.footer-brand .logo .logo-text,
.footer .logo .logo-text {
    font-family: 'Logo', var(--serif), Georgia, serif !important;
    font-weight: normal !important;
    font-size: 40px !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
}

/* ═══ Мобильный — компактнее ═══ */
@media (max-width: 819px) {
    .logo-text,
    .header .logo-text,
    .header .logo .logo-text {
        font-size: 26px !important;
    }
    .footer-brand .logo-text,
    .footer .logo-text,
    .footer-brand .logo .logo-text,
    .footer .logo .logo-text {
        font-size: 32px !important;
    }
}

@media (max-width: 480px) {
    .logo-text,
    .header .logo-text,
    .header .logo .logo-text {
        font-size: 22px !important;
    }
    .footer-brand .logo-text,
    .footer .logo-text,
    .footer-brand .logo .logo-text,
    .footer .logo .logo-text {
        font-size: 28px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Hero: новая тех-мета слайда (стильно, современно)
   ═══════════════════════════════════════════════════════════════════════ */

/* Контейнер тех-меты */
.hero-text .meta,
.hero-text .hero-meta,
.hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-size: 15px;
    color: var(--dim);
    line-height: 1;
}

/* ═══ Рейтинги ═══ */
.hero-meta__rate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: transform .2s ease;
}

.hero-meta__rate i {
    font-size: 12px;
    line-height: 1;
    filter: drop-shadow(0 0 4px currentColor);
}

.hero-meta__num {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
}

.hero-meta__rate small {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .6;
    line-height: 1;
    margin-left: 2px;
}

/* Кинопоиск — золотой */
.hero-meta__rate--kp {
    color: var(--gold, #E8C27A);
}
.hero-meta__rate--kp i {
    color: var(--gold, #E8C27A);
}

/* IMDb — жёлтый, узнаваемый */
.hero-meta__rate--imdb {
    color: #f5c518;
}
.hero-meta__rate--imdb i {
    color: #f5c518;
}
.hero-meta__rate--imdb small {
    color: #f5c518;
    opacity: .85;
}

/* ═══ Год ═══ */
.hero-meta__year {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dim);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.hero-meta__year i {
    font-size: 12px;
    color: var(--muted);
    line-height: 1;
}

.hero-meta__year a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.hero-meta__year a:hover {
    color: var(--accent2);
}

/* ═══ Качество — акцентный градиент-бейдж ═══ */
.hero-meta__qual {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg,
        var(--accent, #a000ff) 0%,
        var(--accent2, #ce5eff) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow:
        0 6px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.hero-meta__qual i {
    font-size: 11px;
    opacity: .95;
    line-height: 1;
}

.hero-meta__qual:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 10px 24px -6px color-mix(in srgb, var(--accent) 80%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ═══ Разделитель │ (тонкая вертикальная полоса) ═══ */
.hero-meta__sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    margin: 0 14px;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--dim) 40%, transparent) 50%,
        transparent 100%);
    align-self: center;
    flex: 0 0 auto;
}

/* ═══ Адаптив — на мобильном короче ═══ */
@media (max-width: 819px) {
    .hero-meta {
        gap: 8px;
        font-size: 13px;
    }
    .hero-meta__num {
        font-size: 15px;
    }
    .hero-meta__rate small {
        font-size: 9px;
        letter-spacing: .1em;
    }
    .hero-meta__sep {
        margin: 0 8px;
        height: 12px;
    }
    .hero-meta__qual {
        padding: 5px 10px 5px 8px;
        font-size: 11px;
    }
    .hero-meta__year i {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .hero-meta__sep {
        margin: 0 6px;
    }
    .hero-meta__qual {
        padding: 4px 9px 4px 7px;
        font-size: 10px;
    }
}

/* ═══ Светлая тема ═══ */
[data-theme="light"] .hero-meta__rate--kp {
    color: #B8892E;
}
[data-theme="light"] .hero-meta__rate--kp i {
    color: #B8892E;
}
[data-theme="light"] .hero-meta__rate--imdb {
    color: #b58900;
}
[data-theme="light"] .hero-meta__qual {
    background: linear-gradient(135deg, #7a28a8, #8b33c5);
    box-shadow:
        0 6px 18px -6px rgba(122, 40, 168, .45),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — HERO: премиум-мета слайда (Wow-версия)
   Бейдж-компоненты с фирменными цветами КП / IMDb / Качество
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ Контейнер ═══ */
.hero-text .hero-meta,
.hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ⭐ Бейдж-компонент: ЛОГО + ЗНАЧЕНИЕ
   ═══════════════════════════════════════════════════════════════════════ */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    /* стекло */
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    background: rgba(20, 20, 24, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .08);

    transition:
        transform .25s cubic-bezier(.2,.7,.2,1),
        box-shadow .25s,
        border-color .25s;
}

.hero-badge:hover {
    transform: translateY(-2px);
}

/* ─── Логотип-плашка ─── */
.hero-badge__logo {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1;
}

/* ─── Значение ─── */
.hero-badge__value {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* ─── Иконки (год, качество) ─── */
.hero-badge > i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   🟠 КИНОПОИСК — фирменный оранжево-красный
   ═══════════════════════════════════════════════════════════════════════ */
.hero-badge--kp {
    border-color: rgba(255, 110, 30, .35);
    background:
        linear-gradient(135deg,
            rgba(255, 85, 0, .18),
            rgba(255, 120, 30, .10)),
        rgba(20, 20, 24, .55);
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, .5),
        0 0 24px -8px rgba(255, 85, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.hero-badge--kp .hero-badge__logo {
    background: linear-gradient(135deg, #FF5500 0%, #FF7700 100%);
    box-shadow:
        0 4px 10px -3px rgba(255, 85, 0, .7),
        inset 0 1px 0 rgba(255, 255, 255, .25);
    font-size: 13px;
}

.hero-badge--kp:hover {
    border-color: rgba(255, 110, 30, .65);
    box-shadow:
        0 8px 20px -6px rgba(255, 85, 0, .65),
        0 0 32px -8px rgba(255, 85, 0, .8),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ═══════════════════════════════════════════════════════════════════════
   🟡 IMDB — фирменный жёлтый
   ═══════════════════════════════════════════════════════════════════════ */
.hero-badge--imdb {
    border-color: rgba(245, 197, 24, .35);
    background:
        linear-gradient(135deg,
            rgba(245, 197, 24, .16),
            rgba(245, 197, 24, .06)),
        rgba(20, 20, 24, .55);
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, .5),
        0 0 24px -8px rgba(245, 197, 24, .35),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.hero-badge--imdb .hero-badge__logo {
    background: linear-gradient(135deg, #F5C518 0%, #FFD84A 100%);
    color: #1a1a1c;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .02em;
    padding: 0 5px;
    box-shadow:
        0 4px 10px -3px rgba(245, 197, 24, .7),
        inset 0 1px 0 rgba(255, 255, 255, .6);
}

.hero-badge--imdb:hover {
    border-color: rgba(245, 197, 24, .65);
    box-shadow:
        0 8px 20px -6px rgba(245, 197, 24, .55),
        0 0 32px -8px rgba(245, 197, 24, .75),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ═══════════════════════════════════════════════════════════════════════
   🔵 ГОД — нейтральный, лёгкий
   ═══════════════════════════════════════════════════════════════════════ */
.hero-badge--year {
    background: rgba(20, 20, 24, .45);
    border-color: rgba(255, 255, 255, .1);
    padding-left: 10px;
}

.hero-badge--year > i {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
}

.hero-badge--year .hero-badge__value {
    color: rgba(255, 255, 255, .92);
    font-weight: 700;
}

.hero-badge--year:hover {
    border-color: rgba(255, 255, 255, .22);
    box-shadow:
        0 8px 20px -6px rgba(0, 0, 0, .6),
        0 0 20px -8px rgba(255, 255, 255, .15),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ═══════════════════════════════════════════════════════════════════════
   🟣 КАЧЕСТВО — фирменный фиолетовый
   ═══════════════════════════════════════════════════════════════════════ */
.hero-badge--qual {
    border-color: rgba(206, 94, 255, .4);
    background:
        linear-gradient(135deg,
            rgba(160, 0, 255, .22),
            rgba(206, 94, 255, .10)),
        rgba(20, 20, 24, .55);
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, .5),
        0 0 24px -8px rgba(160, 0, 255, .55),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
}

.hero-badge--qual > i {
    background: linear-gradient(135deg, #a000ff 0%, #ce5eff 100%);
    box-shadow:
        0 4px 10px -3px rgba(160, 0, 255, .7),
        inset 0 1px 0 rgba(255, 255, 255, .25);
    font-size: 10px;
}

.hero-badge--qual:hover {
    border-color: rgba(206, 94, 255, .75);
    box-shadow:
        0 8px 20px -6px rgba(160, 0, 255, .7),
        0 0 32px -8px rgba(206, 94, 255, .9),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ═══════════════════════════════════════════════════════════════════════
   🎬 ТЕГ «ВЫБОР РЕДАКЦИИ» — accent gradient
   ═══════════════════════════════════════════════════════════════════════ */
.tag--editor {
    background: linear-gradient(135deg, #a000ff 0%, #ce5eff 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: .08em;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow:
        0 6px 16px -6px rgba(160, 0, 255, .6),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tag--editor i {
    font-size: 10px;
    opacity: .9;
}

/* Общие теги в hero — стеклянные */
.hero-tags .tag.outline {
    background: rgba(20, 20, 24, .45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, .14);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-tags .tag.outline i {
    font-size: 10px;
    color: var(--accent3);
    opacity: .85;
}

/* ═══════════════════════════════════════════════════════════════════════
   🎬 Каскадное появление бейджей
   ═══════════════════════════════════════════════════════════════════════ */
.hero-text .hero-badge {
    animation: heroBadgeIn .5s cubic-bezier(.2,.7,.2,1) both;
}

.hero-text .hero-badge:nth-child(1) { animation-delay: .10s; }
.hero-text .hero-badge:nth-child(2) { animation-delay: .18s; }
.hero-text .hero-badge:nth-child(3) { animation-delay: .26s; }
.hero-text .hero-badge:nth-child(4) { animation-delay: .34s; }

@keyframes heroBadgeIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   📱 АДАПТИВ
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 819px) {
    .hero-meta {
        gap: 8px;
    }

    .hero-badge {
        height: 30px;
        padding: 0 12px 0 5px;
        gap: 6px;
        font-size: 13px;
    }

    .hero-badge__logo {
        min-width: 20px;
        height: 20px;
        font-size: 10px;
        padding: 0 5px;
    }

    .hero-badge--imdb .hero-badge__logo {
        font-size: 8px;
        padding: 0 4px;
    }

    .hero-badge > i {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }

    .hero-badge--qual {
        font-size: 10px;
        letter-spacing: .05em;
    }
}

@media (max-width: 480px) {
    .hero-badge {
        height: 28px;
        font-size: 12px;
    }

    .hero-badge__logo {
        min-width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .hero-badge > i {
        width: 18px;
        height: 18px;
        font-size: 8px;
    }

    .hero-badge--qual {
        font-size: 9px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ☀️ СВЕТЛАЯ ТЕМА
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .hero-badge {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(0, 0, 0, .1);
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, .15),
        inset 0 1px 0 rgba(255, 255, 255, .6);
}

[data-theme="light"] .hero-badge__value {
    color: #1a1a1c;
}

[data-theme="light"] .hero-badge--kp {
    background:
        linear-gradient(135deg, rgba(255, 85, 0, .08), rgba(255, 120, 30, .04)),
        rgba(255, 255, 255, .9);
}

[data-theme="light"] .hero-badge--kp .hero-badge__logo {
    color: #fff;
}

[data-theme="light"] .hero-badge--imdb {
    background:
        linear-gradient(135deg, rgba(245, 197, 24, .08), rgba(245, 197, 24, .03)),
        rgba(255, 255, 255, .9);
}

[data-theme="light"] .hero-badge--imdb .hero-badge__logo {
    color: #1a1a1c;
}

[data-theme="light"] .hero-badge--year {
    background: rgba(255, 255, 255, .85);
}

[data-theme="light"] .hero-badge--year > i {
    background: rgba(0, 0, 0, .06);
    color: rgba(26, 26, 28, .85);
}

[data-theme="light"] .hero-badge--year .hero-badge__value {
    color: #1a1a1c;
}

[data-theme="light"] .hero-badge--qual {
    background:
        linear-gradient(135deg, rgba(160, 0, 255, .14), rgba(206, 94, 255, .06)),
        rgba(255, 255, 255, .9);
}

[data-theme="light"] .hero-badge--qual .hero-badge__value,
[data-theme="light"] .hero-badge--qual > i {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   ♿ Reduced motion
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hero-text .hero-badge {
        animation: none;
    }
    .hero-badge {
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — HERO-мета: фикс светлой темы
   Проблема: страна и качество — нечитаемы на белом фоне
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ СТРАНА (tag.outline в hero-tags) — светлая тема ═══ */
[data-theme="light"] .hero-tags .tag.outline,
[data-theme="light"] .hero-tags .tag.outline .cat-link,
[data-theme="light"] .hero-tags .tag.outline a,
[data-theme="light"] .hero-tags .tag.outline i {
    color: #1a1a1c !important;
}

[data-theme="light"] .hero-tags .tag.outline {
    background: rgba(255, 255, 255, .85) !important;
    border-color: rgba(0, 0, 0, .14) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, .15),
        inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

[data-theme="light"] .hero-tags .tag.outline i {
    color: #7a28a8 !important;
    opacity: 1 !important;
}

[data-theme="light"] .hero-tags .tag.outline:hover {
    border-color: rgba(122, 40, 168, .5) !important;
    color: #7a28a8 !important;
}

[data-theme="light"] .hero-tags .tag.outline:hover .cat-link,
[data-theme="light"] .hero-tags .tag.outline:hover a {
    color: #7a28a8 !important;
}

/* ═══ КАЧЕСТВО (hero-badge--qual) — светлая тема ═══ */
[data-theme="light"] .hero-badge--qual,
[data-theme="light"] .hero-badge--qual .hero-badge__value,
[data-theme="light"] .hero-badge--qual > i,
[data-theme="light"] .hero-meta .hero-badge--qual {
    color: #fff !important;
}

[data-theme="light"] .hero-badge--qual {
    background:
        linear-gradient(135deg, #7a28a8 0%, #8b33c5 100%) !important;
    border-color: rgba(122, 40, 168, .6) !important;
    box-shadow:
        0 6px 18px -6px rgba(122, 40, 168, .5),
        inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

[data-theme="light"] .hero-badge--qual > i {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
}

/* ═══ На всякий случай — .b-qual-inline если попадёт в hero ═══ */
[data-theme="light"] .hero-badge--qual .b-qual-inline,
[data-theme="light"] .hero-meta .b-qual-inline {
    color: #fff !important;
}

/* ═══ ВЫБОР РЕДАКЦИИ — светлая тема ═══ */
[data-theme="light"] .tag--editor,
[data-theme="light"] .tag--editor span,
[data-theme="light"] .tag--editor i {
    color: #fff !important;
}

[data-theme="light"] .tag--editor {
    background: linear-gradient(135deg, #7a28a8 0%, #8b33c5 100%) !important;
    border-color: rgba(255, 255, 255, .25) !important;
    box-shadow:
        0 6px 16px -6px rgba(122, 40, 168, .5),
        inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

/* ═══ Age (soft) — светлая тема ═══ */
[data-theme="light"] .hero-tags .tag.soft {
    background: rgba(0, 0, 0, .06) !important;
    color: #1a1a1c !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Live-поиск: стили подсказок (#searchsuggestions)
   ═══════════════════════════════════════════════════════════════════════ */

#searchsuggestions {
    position: absolute !important;
    z-index: 9999 !important;
    min-width: 320px;
    max-width: min(560px, calc(100vw - 40px));
    max-height: 480px;
    overflow-y: auto;
    padding: 8px;
    margin-top: 8px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--line2);
    border-radius: 18px;
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, .7),
        0 0 0 1px rgba(244, 241, 236, .04);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

#searchsuggestions a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
    min-width: 0;
}

#searchsuggestions a:hover {
    background: var(--accent-soft);
    color: var(--text);
}

#searchsuggestions .searchheading {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#searchsuggestions .searchsnippet {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

#searchsuggestions .notfound,
#searchsuggestions .seperator {
    display: block;
    padding: 10px 14px;
    color: var(--muted);
    font-size: 13px;
}

#searchsuggestions .seperator a {
    display: inline;
    padding: 0;
    color: var(--accent2);
    font-weight: 600;
}

/* Светлая тема */
[data-theme="light"] #searchsuggestions {
    background: color-mix(in srgb, #ffffff 98%, transparent);
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, .15),
        0 0 0 1px rgba(0, 0, 0, .06);
}

[data-theme="light"] #searchsuggestions a:hover {
    background: rgba(160, 0, 255, .08);
}

/* На мобильном — на всю ширину */
@media (max-width: 640px) {
    #searchsuggestions {
        min-width: 0;
        max-width: calc(100vw - 24px);
        left: 12px !important;
        right: 12px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Live-поиск: карточки под полем
   ═══════════════════════════════════════════════════════════════════════ */

.search-live {
    margin-top: 16px;
    padding: 12px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid var(--line2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    max-height: 60vh;
    overflow-y: auto;
}

.search-live__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.search-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease;
    overflow: hidden;
    min-width: 0;
}

.search-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    color: var(--text);
}

.search-card__poster {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 10px;
    background-color: var(--surface-sunk);
    background-size: cover;
    background-position: center;
}

.search-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.search-card__body b {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.search-card__body small {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-live__empty {
    text-align: center;
    padding: 20px;
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 640px) {
    .search-live__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

[data-theme="light"] .search-live {
    background: rgba(255,255,255,.85);
    border-color: rgba(0,0,0,.08);
}

[data-theme="light"] .search-card {
    background: #fff;
    border-color: rgba(0,0,0,.06);
}

/* ============================================================
   KD-FIX — список (is-list): карточка растягивается на всю ширину
   #dle-content — тоже grid с одной колонкой, .pcard внутри него
   ============================================================ */
.is-list #dle-content,
.is-list #dle-feed > #dle-content,
#dle-feed.is-list #dle-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.is-list #dle-content > .pcard,
.is-list #dle-feed > #dle-content > .pcard,
#dle-feed.is-list #dle-content > .pcard {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* На всякий случай — снимаем фиксированную ширину у poster-контейнера */
.is-list #dle-content > .pcard > .pcard-img {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 96px !important;
}

/* Инфо растягивается */
.is-list #dle-content > .pcard > .pcard-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* ============================================================
   KD-FILTER — только НОВЫЕ элементы (seg--age, seg--order, reset, more)
   Существующие .fbar, .dd, .seg — НЕ трогаем, они уже стилизованы
   ============================================================ */

/* --- Возраст (seg--age) — копирует стиль .seg --- */
.seg--age button,
.seg--rating button,
.seg--order button {
    min-width: 36px;
    text-align: center;
}

.seg--order button i {
    font-size: 13px;
}

/* --- Кнопка «Сброс» --- */
.fbar-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(244, 241, 236, .12);
    border-radius: 14px;
    color: var(--muted);
    cursor: pointer;
    transition: all .2s;
    font-size: 14px;
}

.fbar-reset:hover {
    background: rgba(255, 90, 90, .12);
    border-color: rgba(255, 90, 90, .3);
    color: #ff5a5a;
}

.fbar-reset:active {
    transform: scale(.95);
}

/* --- Кнопка «Ещё» --- */
.fbar-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid rgba(244, 241, 236, .12);
    border-radius: 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}

.fbar-more:hover {
    background: rgba(244, 241, 236, .06);
    border-color: rgba(244, 241, 236, .2);
}

.fbar-more i {
    font-size: 13px;
}

/* --- Поиск в dd-menu --- */
.dd-search {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid rgba(244, 241, 236, .1);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    margin-bottom: 4px;
    box-sizing: border-box;
}

.dd-search:focus {
    border-color: rgba(160, 0, 255, .5);
}

.dd-search::placeholder {
    color: var(--muted);
}

/* --- Текстовые поля в фильтре --- */
.fbar-input {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.fbar-input i {
    position: absolute;
    left: 14px;
    font-size: 13px;
    color: var(--muted);
    pointer-events: none;
}

.fbar-input input {
    height: 42px;
    padding: 0 14px 0 38px;
    background: transparent;
    border: 1px solid rgba(244, 241, 236, .12);
    border-radius: 14px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
    min-width: 180px;
    box-sizing: border-box;
}

.fbar-input input:focus {
    border-color: rgba(160, 0, 255, .5);
}

.fbar-input input::placeholder {
    color: var(--muted);
}

/* --- Мобильный адаптив --- */
@media (max-width: 819px) {
    .fbar-reset {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .fbar-more {
        height: 38px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 12px;
    }

    .seg--age button,
    .seg--rating button {
        min-width: 30px;
    }

    .fbar-input input {
        min-width: 140px;
        height: 38px;
    }
}

/* ============================================================
   KD-FILTER — обёртка сегментов с подписью
   ============================================================ */
.seg-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.seg-group__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-right: 2px;
}

/* На мобильном — прячем лейбл (или делаем маленьким) */
@media (max-width: 819px) {
    .seg-group {
        gap: 5px;
    }

    .seg-group__label {
        font-size: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Drawer (bottom-sheet) для мобильного меню
   ═══════════════════════════════════════════════════════════════════════ */

.tabbar__item--more {
    cursor: pointer;
    background: transparent;
    border: 0;
    font-family: inherit;
}

/* --- Контейнер drawer --- */
.tabbar-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.tabbar-drawer[hidden] {
    display: none !important;
}

.tabbar-drawer.is-open {
    pointer-events: auto;
}

/* --- Overlay --- */
.tabbar-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .25s ease;
}

.tabbar-drawer.is-open .tabbar-drawer__overlay {
    opacity: 1;
}

/* --- Панель --- */
.tabbar-drawer__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: var(--surface);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-top: 1px solid rgba(244, 241, 236, .10);
    box-shadow: 0 -12px 48px -8px rgba(0, 0, 0, .65);
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
    pointer-events: auto;
    will-change: transform;
}

.tabbar-drawer.is-open .tabbar-drawer__panel {
    transform: translateY(0);
}

/* --- Ручка --- */
.tabbar-drawer__handle {
    width: 44px;
    height: 4px;
    margin: 0 auto 16px;
    background: rgba(244, 241, 236, .2);
    border-radius: 999px;
}

/* --- Заголовок --- */
.tabbar-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.tabbar-drawer__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.tabbar-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(244, 241, 236, .12);
    border-radius: 12px;
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    font-size: 14px;
}

.tabbar-drawer__close:hover {
    background: rgba(255, 90, 90, .1);
    border-color: rgba(255, 90, 90, .3);
    color: #ff5a5a;
}

/* --- Сетка 3 колонки --- */
.tabbar-drawer__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* --- Пункт --- */
.tabbar-drawer__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    background: rgba(244, 241, 236, .03);
    border: 1px solid rgba(244, 241, 236, .08);
    border-radius: 16px;
    color: var(--text);
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s cubic-bezier(.2, .7, .2, 1);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.tabbar-drawer__item:hover {
    background: rgba(244, 241, 236, .06);
    border-color: rgba(244, 241, 236, .16);
    transform: translateY(-2px);
}

.tabbar-drawer__item:active {
    transform: scale(.96);
}

/* --- Иконка --- */
.tabbar-drawer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 18%, transparent),
        color-mix(in srgb, var(--accent2) 12%, transparent));
    border-radius: 12px;
    color: var(--accent3);
    font-size: 16px;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}

.tabbar-drawer__item:hover .tabbar-drawer__icon {
    transform: scale(1.1) rotate(-4deg);
}

/* --- Лейбл --- */
.tabbar-drawer__label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

/* --- Скрываем на десктопе --- */
@media (min-width: 820px) {
    .tabbar-drawer {
        display: none !important;
    }
}

/* --- Светлая тема --- */
[data-theme="light"] .tabbar-drawer__panel {
    background: #F7F4EF;
    border-top-color: rgba(0, 0, 0, .06);
    box-shadow: 0 -12px 48px -8px rgba(0, 0, 0, .18);
}

[data-theme="light"] .tabbar-drawer__handle {
    background: rgba(0, 0, 0, .15);
}

[data-theme="light"] .tabbar-drawer__item {
    background: rgba(0, 0, 0, .025);
    border-color: rgba(0, 0, 0, .06);
    color: #1a1a1c;
}

[data-theme="light"] .tabbar-drawer__item:hover {
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .12);
}

[data-theme="light"] .tabbar-drawer__title,
[data-theme="light"] .tabbar-drawer__label {
    color: #1a1a1c;
}

[data-theme="light"] .tabbar-drawer__close {
    border-color: rgba(0, 0, 0, .1);
    color: #666;
}

/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Мобильный фильтр (Вариант C)
   Десктоп: всё в одну строку
   Мобильный: основное на виду, доп. — в bottom-sheet
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Кнопка "Фильтры" — по умолчанию СКРЫТА --- */
.fbar-mobile-btn {
    display: none;
}

/* --- На мобильном: --- */
@media (max-width: 819px) {

    /* Скрываем Возраст, Рейтинг, Сброс */
    .fbar-mobile-hide {
        display: none !important;
    }

    /* Показываем кнопку "Фильтры" */
    .fbar-mobile-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 0 12px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 20%, transparent),
            color-mix(in srgb, var(--accent2) 12%, transparent));
        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
        border-radius: 12px;
        color: var(--accent3);
        font-size: 12px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        transition: all .15s;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .fbar-mobile-btn:hover,
    .fbar-mobile-btn:active {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 30%, transparent),
            color-mix(in srgb, var(--accent2) 20%, transparent));
        transform: scale(.96);
    }

    .fbar-mobile-btn i {
        font-size: 13px;
    }

    /* В основной строке на мобильном — компактнее */
    .fbar.fbar--main {
        gap: 6px;
        padding: 8px;
    }

    .fbar.fbar--main .dd-btn {
        height: 38px;
        padding: 0 10px 0 12px;
        font-size: 13px;
    }

    .fbar.fbar--main .dd-btn span {
        font-size: 11px;
    }

    /* Прячем лейбл в кнопке вида на мобильном */
    .fbar.fbar--main .seg.icons button {
        width: 28px;
        height: 28px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Fbar Drawer (bottom-sheet)
   ═══════════════════════════════════════════════════════════════════════ */

.fbar-drawer {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.fbar-drawer[hidden] {
    display: none !important;
}

.fbar-drawer.is-open {
    pointer-events: auto;
}

.fbar-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .25s ease;
}

.fbar-drawer.is-open .fbar-drawer__overlay {
    opacity: 1;
}

.fbar-drawer__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: var(--surface);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-top: 1px solid rgba(244, 241, 236, .10);
    box-shadow: 0 -12px 48px -8px rgba(0, 0, 0, .65);
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
    pointer-events: auto;
    will-change: transform;
}

.fbar-drawer.is-open .fbar-drawer__panel {
    transform: translateY(0);
}

.fbar-drawer__handle {
    width: 44px;
    height: 4px;
    margin: 0 auto 16px;
    background: rgba(244, 241, 236, .2);
    border-radius: 999px;
}

.fbar-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.fbar-drawer__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.fbar-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(244, 241, 236, .12);
    border-radius: 12px;
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    font-size: 14px;
}

.fbar-drawer__close:hover {
    background: rgba(255, 90, 90, .1);
    border-color: rgba(255, 90, 90, .3);
    color: #ff5a5a;
}

.fbar-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 22px;
}

.fbar-drawer__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fbar-drawer__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fbar-drawer__foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fbar-drawer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
}

.fbar-drawer__btn--reset {
    background: transparent;
    border-color: rgba(244, 241, 236, .12);
    color: var(--muted);
}

.fbar-drawer__btn--reset:hover {
    background: rgba(255, 90, 90, .1);
    border-color: rgba(255, 90, 90, .3);
    color: #ff5a5a;
}

.fbar-drawer__btn--apply {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 100%, transparent),
        color-mix(in srgb, var(--accent2) 100%, transparent));
    color: #fff;
    border: none;
}

.fbar-drawer__btn--apply:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.fbar-drawer__btn--apply:active {
    transform: scale(.97);
}

/* --- Скрываем drawer на десктопе --- */
@media (min-width: 820px) {
    .fbar-drawer {
        display: none !important;
    }
}

/* --- Светлая тема --- */
[data-theme="light"] .fbar-drawer__panel {
    background: #F7F4EF;
    border-top-color: rgba(0, 0, 0, .06);
    box-shadow: 0 -12px 48px -8px rgba(0, 0, 0, .18);
}

[data-theme="light"] .fbar-drawer__handle {
    background: rgba(0, 0, 0, .15);
}

[data-theme="light"] .fbar-drawer__title {
    color: #1a1a1c;
}

[data-theme="light"] .fbar-drawer__close {
    border-color: rgba(0, 0, 0, .1);
    color: #666;
}

/* ═══════════════════════════════════════════════════════════════════════
   🎬 KINODRON — Страница поиска (финальный редизайн)
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Убираем отступы page-main для поиска --- */
.search-crumbs {
    padding: 0 var(--pad);
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--muted);
}
.search-crumbs a {
    color: var(--muted);
}
.search-crumbs a:hover {
    color: var(--accent2);
}

/* --- HERO --- */
.search-hero {
    padding: 16px var(--pad) 8px;
    text-align: center;
}

.search-hero__inner {
    max-width: 640px;
    margin: 0 auto;
}

.search-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 20%, transparent),
        color-mix(in srgb, var(--accent2) 12%, transparent));
    border-radius: 18px;
    color: var(--accent3);
    font-size: 22px;
    box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--accent) 40%, transparent);
}

.search-hero__title {
    font-family: var(--serif);
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.search-hero__subtitle {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

/* --- ФОРМА --- */
.search-form-wrap {
    padding: 16px var(--pad) 8px;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

.search-simple {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-simple__field {
    position: relative;
    width: 100%;
}

/* Стилизуем DLE-инпут через обёртку */
.search-simple__field input[type="text"],
.search-simple__field input[type="search"] {
    width: 100%;
    height: 54px;
    padding: 0 20px 0 48px;
    background: var(--surface);
    border: 1px solid rgba(244, 241, 236, .12);
    border-radius: 16px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: all .2s;
    box-sizing: border-box;
}

.search-simple__field input::placeholder {
    color: var(--muted);
}

.search-simple__field input:focus {
    background: color-mix(in srgb, var(--surface) 92%, var(--accent));
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Иконка поиска внутри поля (через :before) */
.search-simple__field::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--muted);
    pointer-events: none;
    z-index: 1;
}

.search-simple__actions {
    display: flex;
    gap: 10px;
}

.search-simple__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px;
    padding: 0 28px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 100%, transparent),
        color-mix(in srgb, var(--accent2) 100%, transparent));
    border: none;
    border-radius: 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    flex: 1 1 auto;
}

.search-simple__btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

.search-simple__btn--ghost {
    background: transparent;
    border: 1px solid rgba(244, 241, 236, .16);
    color: var(--text);
    flex: 0 0 auto;
}

.search-simple__btn--ghost:hover {
    background: rgba(244, 241, 236, .06);
    box-shadow: none;
}

/* --- СООБЩЕНИЕ О РЕЗУЛЬТАТАХ --- */
.search-result-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px var(--pad) 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 18px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}

.search-result-msg i {
    color: var(--accent3);
    font-size: 16px;
    flex-shrink: 0;
}

/* --- РЕЗУЛЬТАТЫ --- */
.search-results {
    padding: 24px var(--pad) 40px;
}

.search-results__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.search-results__title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-results__title i {
    color: var(--accent3);
    font-size: 18px;
}

/* --- Расширенный поиск --- */
.search-advanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px;
}

.search-fieldset {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    background: var(--surface);
}

.search-fieldset legend {
    padding: 0 8px;
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
}

.search-fieldset--wide,
.search-actions {
    grid-column: 1 / -1;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.form-label {
    font-size: 13px;
    color: var(--soft);
}

/* --- Мобильный --- */
@media (max-width: 640px) {
    .search-hero {
        padding: 12px 16px 6px;
    }
    .search-hero__icon {
        width: 48px;
        height: 48px;
        font-size: 19px;
        border-radius: 14px;
        margin-bottom: 10px;
    }
    .search-hero__subtitle {
        font-size: 13px;
    }
    .search-form-wrap {
        padding: 12px 16px 6px;
    }
    .search-simple__field input[type="text"],
    .search-simple__field input[type="search"] {
        height: 48px;
        font-size: 14px;
        padding: 0 16px 0 42px;
    }
    .search-simple__field::before {
        left: 14px;
        font-size: 14px;
    }
    .search-simple__actions {
        flex-direction: column;
    }
    .search-simple__btn {
        height: 48px;
        font-size: 14px;
        flex: 1 1 auto;
    }
    .search-results {
        padding: 16px 16px 100px;
    }
    .search-results__title {
        font-size: 18px;
    }
}

/* --- Светлая тема --- */
[data-theme="light"] .search-simple__field input[type="text"],
[data-theme="light"] .search-simple__field input[type="search"] {
    background: #fff;
    border-color: rgba(0, 0, 0, .1);
}

[data-theme="light"] .search-hero__title,
[data-theme="light"] .search-results__title {
    color: #1a1a1c;
}

/* ============================================================




/* ============================================================
   /collections/ — сетка для страницы всех подборок
   (использует body.page-plain, чтобы не затронуть другие страницы)
   ============================================================ */

/* Обёртка #dle-content как сетка */
body.page-plain #dle-content:has(> .pcard--collection) {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2vw, 28px) clamp(12px, 1.4vw, 20px) !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 var(--pad) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Карточка коллекции — flex-колонка как .pcard */
body.page-plain #dle-content > article.pcard--collection {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Адаптив */
@media (max-width: 1199px) {
    body.page-plain #dle-content:has(> .pcard--collection) {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 899px) {
    body.page-plain #dle-content:has(> .pcard--collection) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 639px) {
    body.page-plain #dle-content:has(> .pcard--collection) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 479px) {
    body.page-plain #dle-content:has(> .pcard--collection) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================================
   /collections/ — сетка для страницы всех подборок
   ============================================================ */

body.page-plain #dle-content:has(> .pcard--collection) {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2vw, 28px) clamp(12px, 1.4vw, 20px) !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 var(--pad) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.page-plain #dle-content > article.pcard--collection {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1199px) {
    body.page-plain #dle-content:has(> .pcard--collection) {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 899px) {
    body.page-plain #dle-content:has(> .pcard--collection) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 639px) {
    body.page-plain #dle-content:has(> .pcard--collection) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 479px) {
    body.page-plain #dle-content:has(> .pcard--collection) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================================
   TOP-POSTER — вписывание постера в блок "Топ 10"
   ============================================================ */
.top-poster {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================================
   KinoStyle — НОВЫЙ .facts (3 группы с иконками)
   ============================================================ */

.facts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 24px;
    overflow: hidden;
}

.facts-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.facts-group--crew {
    grid-template-columns: 1fr;
}

.facts-group--stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.facts__item {
    display: grid;
    grid-template-columns: auto 1fr;   /* иконка + подпись в первой строке */
    grid-template-rows: auto auto;      /* значение — вторая строка */
    gap: 4px 10px;
    padding: 16px 20px;
    background: var(--surface);
    min-width: 0;
    align-items: center;
}

.facts__item > i {
    grid-column: 1;
    grid-row: 1;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent2);
    font-size: 15px;
}

.facts__item > span {
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    align-self: center;
}

.facts__item > b {
    grid-column: 1 / -1;    /* значение — на всю ширину */
    grid-row: 2;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    overflow-wrap: anywhere;
    min-width: 0;
}

.facts__item > b a {
    color: var(--text);
    border-bottom: 1px solid rgba(244,241,236,.2);
}

.facts__item > b a:hover {
    color: var(--accent2);
    border-color: var(--accent2);
}

.facts__item--full {
    grid-column: 1 / -1;
}

.facts__item--actors > b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.facts__item--actors.is-expanded > b {
    -webkit-line-clamp: unset;
    display: block;
}

.cast-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 10px;
    padding: 0;
    border: 1px solid var(--line2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    color: var(--accent2);
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
}

.cast-toggle:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.cast-toggle i {
    font-size: 12px;
    transition: transform .25s;
}

.facts__item--actors.is-expanded .cast-toggle i {
    transform: rotate(180deg);
}

/* Мобильная адаптация */
@media (max-width: 900px) and (min-width: 641px) {
    .facts-group,
    .facts-group--stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .facts-group,
    .facts-group--stats {
        grid-template-columns: 1fr;
    }
    .facts__item {
        padding: 14px 16px;
    }
}

/* Светлая тема */
[data-theme="light"] .facts-group {
    background: rgba(26, 26, 28, .12);
    border-color: rgba(26, 26, 28, .08);
}

[data-theme="light"] .facts__item {
    background: #ffffff;
}

[data-theme="light"] .facts__item > span {
    color: rgba(26, 26, 28, .55);
}

[data-theme="light"] .facts__item > b {
    color: #1a1a20;
}

[data-theme="light"] .facts__item > b a {
    color: #1a1a20;
    border-bottom-color: rgba(26, 26, 28, .2);
}

[data-theme="light"] .facts__item > b a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

[data-theme="light"] .facts__item > i {
    color: var(--accent);
}

[data-theme="light"] .cast-toggle {
    border-color: rgba(26, 26, 28, .15);
    color: var(--accent);
}

[data-theme="light"] .cast-toggle:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* ============================================================
   Основной блок — всё в одну строку
   ============================================================ */
.facts-group--main .facts__item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 20px !important;
    flex-wrap: wrap;
}

.facts-group--main .facts__item > i {
    flex: 0 0 auto;
    margin: 0 !important;
    align-self: center;
}

.facts-group--main .facts__item > span {
    flex: 0 0 auto;
    font-size: 12px;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 !important;
}

.facts-group--main .facts__item > span::after {
    content: ":";
    margin-left: 2px;
}

.facts-group--main .facts__item > b {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    min-width: 0;
}

/* ============================================================
   Кнопка «Наверх» (страница фильма)
   ============================================================ */
.to-top {
    position: fixed;
    right: clamp(16px, 3vw, 32px);
    bottom: clamp(20px, 4vw, 36px);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--line2);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .3s, visibility .3s, transform .3s, background .2s;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.to-top i {
    width: auto;
    height: auto;
    font-size: 16px;
}

@media (max-width: 640px) {
    .to-top {
        width: 44px;
        height: 44px;
        font-size: 14px;
        right: 12px;
        bottom: 76px;
    }
}

/* ============================================================
   KinoStyle — Анимации (fade-in секций при скролле)
   ============================================================ */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}

.fade-in.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Не анимируем Hero (он виден сразу) */
.film-hero.fade-in,
.hero.fade-in {
    opacity: 1;
    transform: none;
}

/* Уважаем предпочтения пользователя */
@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Hover-эффект на карточках (усиление) */
.pcard {
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.pcard:hover {
    transform: translateY(-4px);
}

/* Принудительно — больше места сверху */
.row[data-row] {
    padding-top: 24px !important;
}

/* ===== Шапка подборки — в стиле сайта ===== */
.cat-head--collection {
    padding-top: clamp(96px, 9vw, 120px);
    padding-bottom: clamp(20px, 2.5vw, 28px);
}
.cat-head--collection .cat-title {
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1;
}
.cat-head--collection .cat-title .news-num {
    display: inline-block;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 12px;
    vertical-align: middle;
}
.cat-head--collection .lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--soft);
    max-width: 720px;
    margin: 0;
}
@media (max-width: 640px) {
    .cat-head--collection { padding-top: 88px; padding-bottom: 18px; }
    .cat-head--collection .cat-title { font-size: 30px; }
    .cat-head--collection .lead { font-size: 14px; }
}





/* ============================================================
   RKN block v6 — «киноэкран KinoStyle» (без золота, фиолет)
   Hero всегда тёмный. Градиенты: accent → accent2 → accent3.
   ============================================================ */

/* ---------- HERO ---------- */
.rkn-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-xl);
  margin:0 0 var(--sp-5);
  min-height:clamp(300px,34vw,400px);
  border:1px solid var(--line2);
  box-shadow:var(--shadow-soft);
  /* ВСЕГДА тёмный киноэкран, как постер */
  background:
    radial-gradient(ellipse 70% 110% at 100% 0%, rgba(160,0,255,.32), transparent 62%),
    radial-gradient(ellipse 60% 100% at 0% 100%, rgba(206,94,255,.14), transparent 60%),
    linear-gradient(135deg,#0d0d12 0%,#15121c 50%,#0a0a0c 100%);
}
[data-theme="light"] .rkn-hero{
  border-color:rgba(26,26,28,.16);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.35);
}

/* Картинка /abuse.png — приглушена, только фактура */
.rkn-hero__bg{
  position:absolute; inset:0; z-index:0;
  background-image:url('../img/rkn-dark.png');
  background-size:cover; background-position:center;
  filter:blur(2px) brightness(.60) saturate(1.08);
  transform:scale(1.06);
  opacity:.55;
}

/* --- Светлая тема: свой фон hero + свои цвета --- */
[data-theme="light"] .rkn-hero{
  background:
    radial-gradient(ellipse 70% 110% at 100% 0%, rgba(122,40,168,.12), transparent 62%),
    linear-gradient(135deg,#FAFAFA 0%,#F0F0F5 100%);
  border-color:rgba(26,26,28,.12);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.18);
}
[data-theme="light"] .rkn-hero__bg{
  background-image:url('../img/rkn-light.png');
  filter:blur(3px) brightness(1.08) saturate(.9);
  opacity:.35;
}
[data-theme="light"] .rkn-hero::after{
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.92) 100%);
}
[data-theme="light"] .rkn-hero__glow{
  background:radial-gradient(circle, rgba(122,40,168,.18) 0%, transparent 65%);
}
[data-theme="light"] .rkn-hero__title{
  color:#1A1A1C;
  text-shadow:none;
}
[data-theme="light"] .rkn-hero__subtitle{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="light"] .rkn-hero__lead{
  color:#3D3833;
}
[data-theme="light"] .rkn-hero__badge{
  background:rgba(122,40,168,.10);
  border-color:rgba(122,40,168,.30);
  color:var(--accent);
}
[data-theme="light"] .rkn-hero__badge i{ color:var(--accent); }
[data-theme="light"] .rkn-hero__cta{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 10px 28px -10px rgba(122,40,168,.45);
}
[data-theme="light"] .rkn-hero__cta:hover{
  background:var(--text);
  color:var(--bg);
  border-color:var(--text);
}
[data-theme="light"] .rkn-hero__details{
  background:rgba(26,26,28,.04);
  border-color:rgba(26,26,28,.10);
  color:#3D3833;
}
[data-theme="light"] .rkn-hero__details i{ color:var(--accent); }


/* Оверлей — всегда тёмный */
.rkn-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,12,.05) 0%, rgba(10,10,12,.45) 55%, rgba(10,10,12,.80) 100%);
}

/* Фиолетовое свечение сверху справа */
.rkn-hero__glow{
  position:absolute; z-index:1; pointer-events:none;
  width:560px; height:560px; right:-160px; top:-180px;
  background:radial-gradient(circle, rgba(206,94,255,.30) 0%, transparent 65%);
  filter:blur(40px);
}

.rkn-hero__inner{
  position:relative; z-index:2;
  padding:clamp(22px,3.4vw,44px);
  max-width:720px;
}

/* Бейдж — стекло, фиолетовый */
.rkn-hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px 6px 12px; border-radius:var(--r-pill);
  background:rgba(228,168,255,.12);
  border:1px solid rgba(228,168,255,.28);
  color:var(--accent3);
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  margin:0 0 var(--sp-4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  position:relative;
}
.rkn-hero__badge i{ font-size:12px; color:var(--accent2); }
/* Полоска под badge: accent → accent3 */
.rkn-hero__badge::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent3));
  border-radius:2px; opacity:.9;
}

/* Заголовок — белый на тёмном */
.rkn-hero__title{
  font-family:var(--serif);
  font-size:clamp(28px,4.6vw,52px);
  font-weight:800; line-height:1.05; letter-spacing:-.02em;
  margin:0 0 6px;
  color:#F4F1EC;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}

/* Подзаголовок — градиент accent2 → accent3 */
.rkn-hero__subtitle{
  font-size:clamp(15px,2.2vw,20px);
  font-weight:800;
  margin:0 0 var(--sp-3);
  background:linear-gradient(90deg, var(--accent2), var(--accent3));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Текст */
.rkn-hero__lead{
  font-size:var(--fs-sm); line-height:1.6;
  color:#CFCAC2;
  margin:0 0 var(--sp-5);
  max-width:600px;
}

/* CTA — белая стеклянная */
.rkn-hero__cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; min-height:var(--control-h);
  border-radius:var(--r-md);
  background:rgba(244,241,236,.92);
  color:#0A0A0C;
  font-weight:800; font-size:var(--fs-ui); text-decoration:none;
  border:1px solid rgba(244,241,236,.9);
  box-shadow:0 10px 28px -8px rgba(0,0,0,.6);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rkn-hero__cta:hover{
  transform:translateY(-2px);
  background:#fff; color:#0A0A0C;
  box-shadow:0 16px 36px -10px rgba(160,0,255,.5);
}
.rkn-hero__cta i{ font-size:14px; }

/* Детали для групп */
.rkn-hero__details{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 18px; border-radius:var(--r-md);
  background:rgba(244,241,236,.07);
  border:1px solid rgba(244,241,236,.14);
  color:#CFCAC2; font-size:var(--fs-meta); line-height:1.55;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.rkn-hero__details i{ color:var(--accent2); font-size:18px; flex-shrink:0; margin-top:2px; }
.rkn-hero__details p{ margin:0; }

/* ---------- СЕТКА 2×N ---------- */
.rkn-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp-4);
  margin:0 0 var(--sp-5);
}
@media (max-width:819px){ .rkn-grid{ grid-template-columns:1fr; } }

.rkn-tile{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(18px,2.6vw,26px);
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow-tiny);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
/* Полоска сверху при hover: accent → accent3 */
.rkn-tile::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent3));
  opacity:0; transition:opacity .25s ease;
}
.rkn-tile:hover{
  transform:translateY(-3px);
  border-color:var(--line2);
  box-shadow:var(--shadow-soft);
}
.rkn-tile:hover::after{ opacity:1; }

/* Иконка — градиент accent → accent2 */
.rkn-tile__icon{
  width:44px; height:44px; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; margin:0 0 10px;
  box-shadow:0 8px 20px -8px rgba(160,0,255,.55);
}
.rkn-tile--cinema .rkn-tile__icon{
  background:linear-gradient(135deg, var(--accent2), var(--accent3));
  box-shadow:0 8px 20px -8px rgba(206,94,255,.55);
}

.rkn-tile__title{
  font-family:var(--serif);
  font-size:var(--fs-h4); font-weight:800;
  color:var(--text); line-height:1.2; margin:0;
}
.rkn-tile__lead{
  font-size:var(--fs-meta); color:var(--muted);
  line-height:1.55; margin:0 0 10px;
}

/* Прогресс — accent → accent2 → accent3 + свечение */
.rkn-tile__progress{ margin:4px 0 12px; display:flex; flex-direction:column; gap:6px; }
.rkn-tile__progress-bar{
  height:9px; border-radius:var(--r-pill);
  background:var(--surface-sunk);
  overflow:hidden;
  border:1px solid var(--line);
}
.rkn-tile__progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  border-radius:var(--r-pill);
  box-shadow:0 0 16px rgba(160,0,255,.55);
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.rkn-tile__progress-num{ font-size:var(--fs-meta); color:var(--muted); }
.rkn-tile__progress-num b{ color:var(--text); font-weight:800; font-size:15px; }

/* Кнопки плиток */
.rkn-tile__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 20px; min-height:var(--control-h);
  border-radius:var(--r-md);
  border:1px solid var(--line2);
  background:transparent; color:var(--text);
  font-weight:700; font-size:var(--fs-ui); text-decoration:none;
  cursor:pointer; margin-top:auto;
  transition:background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
}
.rkn-tile__btn:hover{
  background:var(--accent-soft);
  border-color:var(--accent2);
  transform:translateY(-1px);
}
.rkn-tile__btn--accent{
  background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(160,0,255,.6);
}
.rkn-tile__btn--accent:hover{
  background:linear-gradient(135deg, var(--accent2), var(--accent3));
  box-shadow:0 14px 30px -10px rgba(206,94,255,.7);
  color:#fff;
}
.rkn-tile__btn i{ font-size:13px; }

/* ---------- КЛУБ ---------- */
.rkn-club{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(20px,3vw,30px);
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow-tiny);
  overflow:hidden;
}
/* Левая полоска accent → accent2 */
.rkn-club::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), var(--accent2));
}
.rkn-club__head{ margin:0 0 var(--sp-3); }
.rkn-club__eyebrow{
  font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase;
  background:linear-gradient(90deg, var(--accent2), var(--accent3));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.rkn-club__title{
  font-family:var(--serif);
  font-size:clamp(20px,2.6vw,26px); font-weight:800;
  color:var(--text); margin:4px 0 6px;
}
.rkn-club__lead{ font-size:var(--fs-meta); color:var(--muted); margin:0; }

.rkn-club__list{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; list-style:none; padding:0; margin:0 0 var(--sp-5);
}
@media (max-width:819px){ .rkn-club__list{ grid-template-columns:1fr; } }
.rkn-club__list li{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:var(--r-md);
  background:var(--surface-sunk);
  border:1px solid var(--line);
  font-size:var(--fs-meta); color:var(--soft);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.rkn-club__list li:hover{
  border-color:var(--line2);
  background:var(--surface);
  color:var(--text);
}
.rkn-club__list i{ color:var(--accent2); font-size:14px; flex-shrink:0; }

.rkn-club__cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 26px; min-height:var(--control-h);
  border-radius:var(--r-md);
  background:var(--text); color:var(--bg);
  font-weight:800; font-size:var(--fs-ui); text-decoration:none;
  align-self:flex-start;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.rkn-club__cta:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  box-shadow:0 12px 28px -10px rgba(160,0,255,.5);
}

/* Доступность */
@media (prefers-reduced-motion: reduce){
  .rkn-hero__cta, .rkn-tile, .rkn-tile__btn, .rkn-club__cta, .rkn-tile__progress-fill,
  .rkn-tile::after{
    transition:none !important;
    transform:none !important;
  }
}