html,body.modern-film-page { min-width: 0; }
body.modern-film-page { overflow-x: hidden; color: #123746; font-family: Arial,Helvetica,sans-serif; }
body.modern-film-page #body { box-sizing: border-box; width: calc(100% - 32px); max-width: 1320px; }
body.modern-film-page #content.modern-film { box-sizing: border-box; float: none; width: 100%; margin: 0; background: #f5fafc; }
body.modern-film-page #sidebar { display: none; }
.modern-film { color: #123746; display: grid; gap: 4px; padding: 4px; }
.modern-film__intro,.modern-film__lock,.modern-film__empty,.modern-film__player,.modern-film__frames,.modern-film__more { background: #fff; border: 1px solid #d4e2e8; border-radius: 4px; }
.modern-film__intro { padding: 8px; }
.modern-film__title-row { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; }
.modern-film__title-row h1 { color: #073b53; font-size: clamp(21px,2.2vw,30px); line-height: 1.02; margin: 0 0 2px; }
.modern-film__title-row a { color: #087da4; font-size: 14px; line-height: 1.1; font-weight: 700; }
.modern-film__cast { margin: 0; color: #355c6d; font-size: 14px; line-height: 1.2; }
.modern-film__cast span { color: #607c89; padding: 0 2px; }
.modern-film__cast a { display: inline; }
.modern-film__title-row time { color: #607c89; font-size: 12px; white-space: nowrap; }
.modern-film__description { color: #355c6d; line-height: 1.35; margin: 6px 0 0; }
.modern-film__traits { display: flex; flex-wrap: wrap; gap: 2px 10px; list-style: none; margin: 6px 0 0; padding: 5px 0 0; border-top: 1px solid #e3edf1; color: #486674; font-size: 11px; line-height: 1.15; }
.modern-film__traits a { color: inherit; text-decoration: none; }
.modern-film__traits a:hover, .modern-film__traits a:focus-visible { color: #0879aa; text-decoration: underline; text-underline-offset: 2px; }
.modern-film__players { display: grid; gap: 6px; }
.modern-film__player { position: relative; overflow: hidden; background: #071015; }
.modern-film__player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; object-fit: contain; }
.modern-film__poster { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; width: 100%; height: 100%; padding: 0; border: 0; background: #13242b; cursor: pointer; }
.modern-film__poster[hidden] { display: none; }
.modern-film__poster-background { position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); object-fit: cover; filter: blur(16px) brightness(.62) saturate(.85); transform: scale(1.08); }
.modern-film__poster-image { position: relative; z-index: 1; display: block; width: 173px; height: auto; max-width: calc(100% - 32px); aspect-ratio: 173 / 130; object-fit: cover; border: 1px solid rgba(255,255,255,.62); box-shadow: 0 8px 28px rgba(0,0,0,.48); }
.modern-film__poster span { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding-left: 3px; border-radius: 50%; background: rgba(3,18,25,.78); color: #fff; font-size: 23px; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.modern-film__poster:focus { outline: 3px solid #d5a441; outline-offset: -3px; }
.modern-film-controls { position: absolute; z-index: 4; inset: 0; color: #fff; pointer-events: none; }
.modern-film-controls { opacity: 1; visibility: visible; transition: opacity 180ms ease,visibility 0s linear 0s; }
.modern-film-controls.is-hidden { opacity: 0; visibility: hidden; transition: opacity 180ms ease,visibility 0s linear 180ms; }
.modern-film__player.has-hidden-controls { cursor: none; }
.modern-film-controls[hidden],.modern-film__loading[hidden] { display: none; }
.modern-film-controls__top,.modern-film-controls__bottom { position: absolute; left: 8px; right: 8px; display: flex; align-items: center; pointer-events: auto; }
.modern-film-controls__top { --film-top-control-size: 30px; top: 8px; gap: 6px; width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.modern-film-controls__top > * { pointer-events: auto; }
.modern-film-controls__top .modern-film-controls__icon-button { width: var(--film-top-control-size)!important; height: var(--film-top-control-size)!important; min-width: var(--film-top-control-size)!important; min-height: var(--film-top-control-size)!important; }
.modern-film-controls__center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); pointer-events: auto; }
.modern-film-controls__bottom { --film-bottom-control-size: 28px; bottom: 8px; height: var(--film-bottom-control-size); min-height: 0; box-sizing: border-box; gap: 0; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(3,18,25,.78); box-shadow: 0 5px 16px rgba(0,0,0,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modern-film-controls input[type="range"] { appearance: none; -webkit-appearance: none; border: 0; background: transparent; }
.modern-film-controls input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.34); }
.modern-film-controls input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.34); }
.modern-film-controls input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 2px solid #fff; border-radius: 50%; background: #0792bd; box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.modern-film-controls input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #0792bd; box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.modern-film-controls__progress { display: block; min-width: 0; width: auto; height: 18px; margin: 0 4px; flex: 1; cursor: pointer; }
.modern-film-controls__playback { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; padding: 2px 12px; border-radius: 999px; background: rgba(0,0,0,.18); }
.modern-film-controls button,.modern-film-controls select { min-height: 34px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font: inherit; }
.modern-film-controls button { min-width: 34px; padding: 0 7px; cursor: pointer; }
.modern-film-controls button:hover,.modern-film-controls button:focus-visible,.modern-film-controls select:focus-visible { background: rgba(7,146,189,.9); outline: 2px solid rgba(255,255,255,.92); outline-offset: 1px; }
.modern-film-controls__icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0!important; border-radius: 50%!important; }
.modern-film-controls__icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.modern-film-controls__icon-button svg text { fill: currentColor; stroke: none; font: 700 7px Arial,sans-serif; text-anchor: middle; }
.modern-film-controls__play { width: 38px; height: 38px; border: 1px solid rgba(213,164,65,.82)!important; background: #0792bd!important; box-shadow: 0 2px 10px rgba(0,0,0,.3),0 0 0 2px rgba(7,146,189,.18); }
.modern-film-controls__play svg { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.modern-film-controls__pause-icon,.modern-film-controls__muted-icon { display: none; }
.modern-film-controls [data-film-toggle][data-state="playing"] .modern-film-controls__play-icon,.modern-film-controls [data-film-mute][data-state="muted"] .modern-film-controls__sound-icon { display: none; }
.modern-film-controls [data-film-toggle][data-state="playing"] .modern-film-controls__pause-icon,.modern-film-controls [data-film-mute][data-state="muted"] .modern-film-controls__muted-icon { display: block; }
.modern-film-controls__bottom-toggle,.modern-film-controls__bottom [data-film-fullscreen] { width: var(--film-bottom-control-size)!important; height: var(--film-bottom-control-size)!important; min-width: var(--film-bottom-control-size)!important; min-height: var(--film-bottom-control-size)!important; flex: 0 0 var(--film-bottom-control-size); border-radius: 0!important; }
.modern-film-controls__bottom-toggle { border-right: 1px solid rgba(255,255,255,.1)!important; background: rgba(7,146,189,.82)!important; }
.modern-film-controls__bottom-toggle:hover,.modern-film-controls__bottom-toggle:focus-visible { background: #0792bd!important; }
.modern-film-controls__bottom [data-film-fullscreen] { border-left: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07); }
.modern-film-controls__bottom-toggle svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.modern-film-controls__spacer { flex: 1; }
.modern-film-controls output { min-width: 34px; color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.modern-film-controls select { padding: 0 7px; cursor: pointer; }
.modern-film-controls__volume { display: flex; align-items: center; gap: 3px; border-radius: 999px; background: rgba(3,18,25,.78); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.modern-film-controls__volume label { display: flex; align-items: center; padding-right: 7px; }
.modern-film-controls__volume [data-film-mute][data-state="muted"] + label { display: none; }
.modern-film-controls__volume label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.modern-film-controls__volume input { width: 144px; height: 20px; margin: 0; cursor: pointer; }
.modern-film-controls__exit,.modern-film-controls__pip { display: none; }
.modern-film-controls__brand { padding: 3px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(3,18,25,.42); color: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap; pointer-events: none!important; }
.modern-film-controls__brand span { color: rgba(255,255,255,.82); }
.modern-film-controls__brand span::first-letter { color: #d5a441; }
.modern-film-controls__volume { order: 1; }
.modern-film-controls [data-film-cast] { order: 2; }
.modern-film-controls__spacer { order: 3; }
.modern-film-controls__settings-wrap { order: 4; }
.modern-film-controls button:disabled { opacity: .62; cursor: default; }
.modern-film-controls__settings-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.modern-film-controls__settings { position: absolute; top: calc(100% + 6px); right: 0; width: 180px; padding: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(3,18,25,.94); box-shadow: 0 8px 24px rgba(0,0,0,.32); }
.modern-film-controls__settings[hidden] { display: none; }
.modern-film-controls__settings label { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 7px; color: #fff; font-size: 11px; }
.modern-film-controls__settings label + label { margin-top: 6px; }
.modern-film-controls__settings select { width: 100%; min-width: 0; }
.modern-film-controls__preview { position: absolute; z-index: 7; bottom: 44px; transform: translateX(-50%); overflow: hidden; padding: 3px; border: 1px solid rgba(255,255,255,.3); border-radius: 7px; background: rgba(3,18,25,.94); box-shadow: 0 7px 22px rgba(0,0,0,.38); pointer-events: none; }
.modern-film-controls__preview[hidden] { display: none; }
.modern-film-controls__preview > span { display: block; max-width: 180px; max-height: 101px; border-radius: 4px; background-color: #071015; background-repeat: no-repeat; }
.modern-film-controls__preview output { position: absolute; right: 6px; bottom: 6px; min-width: 0; padding: 2px 4px; border-radius: 3px; background: rgba(0,0,0,.72); color: #fff; font-size: 10px; }
.modern-film__player:fullscreen,.modern-film__player:-webkit-full-screen { width: 100vw; height: 100vh; border: 0; border-radius: 0; background: #000; }
.modern-film__player:fullscreen video,.modern-film__player:-webkit-full-screen video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.modern-film__player:fullscreen .modern-film-controls__exit,.modern-film__player:fullscreen .modern-film-controls__pip { display: inline-grid; }
.modern-film__player:fullscreen .modern-film-controls__exit { order: 1; }
.modern-film__player:fullscreen .modern-film-controls__pip { order: 2; }
.modern-film__player:fullscreen .modern-film-controls [data-film-cast] { order: 3; }
.modern-film__player:fullscreen .modern-film-controls__spacer { display: block; order: 4; }
.modern-film__player:fullscreen .modern-film-controls__volume { order: 5; }
.modern-film__player:fullscreen .modern-film-controls__settings-wrap { order: 6; }
.modern-film__player:fullscreen .modern-film-controls__bottom [data-film-fullscreen] { display: none; }
.modern-film__loading { position: absolute; z-index: 5; top: 8px; right: 8px; padding: 5px 8px; border-radius: 4px; background: rgba(3,18,25,.76); color: #fff; font-size: 12px; pointer-events: none; }
.modern-film__legacy-file { min-height: 280px; display: grid; place-items: center; position: relative; color: #fff; text-align: center; }
.modern-film__legacy-file > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .42; }
.modern-film__legacy-file > div { position: relative; z-index: 1; padding: 16px; }
.modern-film__legacy-file a,.modern-film__lock a { display: inline-flex; min-height: 42px; align-items: center; padding: 0 14px; border-radius: 4px; color: #fff; background: #087da4; font-weight: 700; }
.modern-film__lock,.modern-film__empty { padding: 18px; text-align: center; }
.modern-film__lock p { color: #607c89; margin: 0 0 2px; }
.modern-film__lock h2,.modern-film__empty h2 { margin: 0 0 10px; }
.modern-film__frames { display: grid; grid-template-columns: repeat(auto-fit,173px); justify-content: start; align-items: center; gap: 6px; padding: 6px; }
.modern-film__frames h2 { grid-column: 1 / -1; margin: 0; color: #073b53; font-size: 22px; }
.modern-film__frames img { display: block; width: 173px; height: 130px; object-fit: cover; justify-self: start; border-radius: 4px; }
.modern-film__more { padding: 6px; }
.modern-film__more > h2 { margin: 0 0 5px; font-size: 22px; }
.modern-film__more-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.modern-film-card { min-width: 0; height: 130px; display: grid; grid-template-columns: 173px minmax(0,1fr); overflow: hidden; border: 1px solid #d4e2e8; border-radius: 4px; background: #fff; }
.modern-film-card__image { position: relative; overflow: hidden; }
.modern-film-card__image:after { content: ""; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(to top,rgba(3,18,25,.72),transparent); }
.modern-film-card img { display: block; width: 173px; height: 130px; object-fit: cover; }
.modern-film-card time { position: absolute; right: 6px; bottom: 5px; z-index: 1; color: #fff; font-size: 11px; font-weight: 700; }
.modern-film-card__count { position: absolute; left: 6px; bottom: 5px; z-index: 1; color: #fff; font-size: 11px; font-weight: 700; }
.modern-film-card > div { min-width: 0; padding: 6px; }
.modern-film-card h3 { margin: 0; font-size: 17px; line-height: 1.08; }
.modern-film-card h3 a { color: #073b53; }
.modern-film-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 6px 0 0; color: #486674; font-size: 12px; line-height: 1.22; }
@media (max-width: 899px) {
  .modern-film__player.has-hidden-controls { cursor: auto; }
  body.modern-film-page #body { width: 100%; }
  .modern-film { padding: 0 4px 4px; }
  .modern-film__title-row h1 { font-size: 26px; }
  .modern-film__player video { height: auto; aspect-ratio: 16 / 9; }
  .modern-film-controls__top,.modern-film-controls__bottom { left: 4px; right: 4px; }
  .modern-film-controls__top { --film-top-control-size: 28px; top: 4px; }
  .modern-film-controls__bottom { --film-bottom-control-size: 24px; bottom: 4px; }
  .modern-film-controls__preview { bottom: 36px; }
  .modern-film-controls__preview > span { max-width: 160px; max-height: 90px; }
  .modern-film-controls__playback { gap: 16px; padding: 1px 8px; }
  .modern-film-controls button { min-width: 32px; min-height: 32px; padding: 0 5px; font-size: 11px; }
  .modern-film-controls__icon-button { width: 32px; height: 32px; }
  .modern-film-controls__volume { gap: 1px; }
  .modern-film-controls__volume input { width: 96px; }
  .modern-film__more-grid { grid-template-columns: 1fr; gap: 4px; }
  .modern-film__more { padding: 4px; }
}
@media (max-width: 380px) {
  .modern-film-controls__brand { padding-inline: 5px; font-size: 9px; }
  .modern-film-controls__icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
  .modern-film-controls__play { width: 32px; height: 32px; min-width: 32px; }
  .modern-film-controls__bottom { --film-bottom-control-size: 24px; }
  .modern-film-controls__volume input { width: 64px; }
  .modern-film-controls output { min-width: 31px; font-size: 10px; }
  .modern-film-card { grid-template-columns: 160px minmax(0,1fr); }
  .modern-film-card img { width: 160px; }
}