/* Private Domain Box Inline Styles */
    .private-domain-box {
      background: linear-gradient(135deg, #0f0f0f 0%, #1e3305 100%);
      /* Dark background blending into dark theme green */
      border: 1px solid #96F207;
      /* Theme Green Border */
      color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(150, 242, 7, 0.2);
      /* Green glow */
      margin: 20px auto;
      text-align: center;
      direction: rtl;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      position: relative;
      overflow: hidden;
    }

    .private-domain-box .icon {
      font-size: 50px;
      margin: 0 0 15px 0;
      opacity: 0.9;
      flex-shrink: 0;
      color: #96F207;
      /* Theme Green Icon */
    }

    .private-domain-box .content {
      flex-grow: 1;
      width: 100%;
    }

    .private-domain-box .content h3 {
      margin: 0 0 10px;
      font-size: 20px;
      font-weight: bold;
      color: #96F207;
      /* Theme Green Title */
      text-align: center;
    }

    .domain-info-row {
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 10px 15px;
      margin: 10px 0;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center !important;
      flex-wrap: wrap;
      gap: 10px;
    }

    .domain-badge {
      direction: ltr;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: #ffd700;
      background: rgba(255, 255, 255, 0.1);
      padding: 5px 15px;
      border-radius: 6px;
      letter-spacing: 0.5px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    a.domain-badge {
      text-decoration: none;
      transition: all 0.3s ease;
      display: inline-block;
    }

    a.domain-badge:hover {
      background: rgba(255, 215, 0, 0.2);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .domain-label-text {
      font-size: 0.9rem;
      opacity: 0.9;
    }

    .private-domain-link {
      color: #fff;
      text-decoration: none;
      font-size: 0.85rem;
      opacity: 0.8;
      transition: opacity 0.2s;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .private-domain-link:hover {
      opacity: 1;
      color: #ffd700;
    }

    .private-domain-box .content p {
      margin: 5px 0 0;
      font-size: 13px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.85);
    }

    @media (max-width: 768px) {
      .private-domain-box {
        padding: 20px 15px;
      }

      .domain-info-row {
        flex-direction: column;
      }
    }


    .content-toggle {
      max-height: max-content !important;
      position: static !important;
    }


    /* ---- the hero's height --------------------------------------------
       At most 75% of what is on screen, so the shelves under it show and
       the page reads as more than one picture. On a phone that is 75% of
       the screen above the bottom bar: --appnav-h is the bar's height,
       measured by script.js (0 where there is no bar). svh, where it is
       understood, is the height with the browser's address bar showing, so
       the hero does not grow and shrink as that bar slides away. The theme
       had min-height: 85vh, which on a phone left the bar covering most of
       what came after. */
    #suggested-movies {
      min-height: 0 !important;
      height: calc((100vh - var(--appnav-h, 0px)) * 0.75);
    }

    @supports (height: 100svh) {
      #suggested-movies {
        height: calc((100svh - var(--appnav-h, 0px)) * 0.75);
      }
    }

    /* A desktop gives the hero 85% of the screen (a phone keeps its own, below). */
    @media (min-width: 641px) {
      #suggested-movies {
        height: calc((100vh - var(--appnav-h, 0px)) * 0.85);
      }

      @supports (height: 100svh) {
        #suggested-movies {
          height: calc((100svh - var(--appnav-h, 0px)) * 0.85);
        }
      }
    }

    /* ---- the hero on a phone ------------------------------------------
       The thumbnail strip goes - five covers in a row on a 390px screen is
       five covers nobody can make out - and the slider is navigated by
       bullets instead, sitting over the foot of the cover. The theme hides
       every splide pagination by default, so this says otherwise for one. */
    @media (max-width: 640px) {
      /* On a phone the hero takes 70% of the screen rather than 75%. */
      #suggested-movies {
        height: calc((100vh - var(--appnav-h, 0px)) * 0.7);
      }

      @supports (height: 100svh) {
        #suggested-movies {
          height: calc((100svh - var(--appnav-h, 0px)) * 0.7);
        }
      }

      #suggested-movies #suggested-thumbnails {
        display: none;
      }

      #suggested-movies #cover-suggested-movies .splide__pagination {
        display: flex;
        gap: 6px;
        inset-inline: 0;
        bottom: 10px;
        padding: 0 1em;
        z-index: 3;
      }

      /* All of them white, all of them the same height: the one you are on is
         told apart by its width alone, which keeps the row a straight line
         rather than a line with a lump in it. */
      #suggested-movies #cover-suggested-movies .splide__pagination__page {
        width: 7px;
        height: 7px;
        margin: 0;
        border-radius: 999px;
        background: #fff;
        opacity: 1;
        transform: none;
        transition: width .2s ease;
      }

      /* A pill rather than a bigger dot - same height, more of it. */
      #suggested-movies #cover-suggested-movies .splide__pagination__page.is-active {
        width: 22px;
        height: 7px;
        background: #fff;
        transform: none;
      }
    }

    /* ---- the hero's foot fades into the page ----------------------------
       The cover's :before sits over the image but under the title, the
       thumbnail strip and the bullets (the cover is behind the slide's
       content, and the strip and bullets stack above the slides), so the
       fade darkens only the picture. It runs to the page background, so the
       hero meets the section below it without an edge, in either theme.
       On a desktop the theme's left-hand :after gradient stays too - it is
       what the date, title and ratings sit on; a phone drops it. */
    #suggested-movies #cover-suggested-movies .slide .cover:before {
      top: auto;
      bottom: 0;
      height: 55%;
      pointer-events: none;
      background: linear-gradient(to top, var(--bg-body) 0%, rgba(0, 0, 0, .55) 35%, transparent 100%) !important;
    }

    @media (max-width: 640px) {
      #suggested-movies #cover-suggested-movies .slide .cover:after {
        display: none;
      }
    }

    /* The play mark (the theme places it): a link, so it centres its icon
       as the theme's button did, and lights up under the pointer. */
    #suggested-movies #cover-suggested-movies .slide .playbutton {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      transition: background-color .2s ease, transform .2s ease;
    }

    #suggested-movies #cover-suggested-movies .slide .playbutton:hover {
      background-color: rgba(255, 255, 255, .28);
      transform: translateY(-50%) scale(1.06);
    }

    /* the play mark is a desktop's (after the rule above, which it overrides) */
    @media (max-width: 640px) {
      #suggested-movies #cover-suggested-movies .slide .playbutton {
        display: none;
      }
    }

    /* The admin «edit» button, for an admin without the right to edit: the
       pencil dimmed and crossed by the cursor, the button itself left at full
       strength so its hover label (why) reads clearly. */
    .work-action-admin-edit.is-disabled {
      cursor: not-allowed;
    }

    .work-action-admin-edit.is-disabled svg {
      opacity: .35;
    }

    /* the blog post's text button: its label dims with it */
    .admin-edit-post.is-disabled {
      opacity: .55;
    }

    /* ---- an underlay for the menu ---------------------------------------
       The header floats over the hero, so on a light picture its white menu
       all but vanished. A band at the top shades and softly blurs the
       picture behind the menu and fades out downwards - no edge to it. Over
       the slides, under the header (z-index 1020). In the light theme the
       menu is grey, so the band is a pale one. */
    #suggested-movies::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: calc(var(--sitehead-h, 90px) + 110px);
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 100%);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
    }


    .light-mode #suggested-movies::before {
      background: linear-gradient(to bottom, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, 0) 100%);
    }

    @media (max-width: 640px) {
      #suggested-movies::before {
        height: calc(var(--sitehead-h, 90px) + 70px);
      }
    }

    /* On a phone, with no side gradient, the title can land on a light
       picture: a shadow keeps it readable there (a light halo in the light
       theme, whose title is dark). A desktop has the gradient and no shadow. */
    @media (max-width: 640px) {
      #suggested-movies #cover-suggested-movies .slide .content h2 {
        text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 14px rgba(0, 0, 0, .75);
      }

      .light-mode #suggested-movies #cover-suggested-movies .slide .content h2 {
        text-shadow: 0 1px 3px rgba(255, 255, 255, .9), 0 2px 14px rgba(255, 255, 255, .7);
      }
    }

    @media (max-width: 640px) {
      #suggested-movies #cover-suggested-movies .slide .cover:before {
        height: 65%;
      }
    }

    /* ---- the hero's date, title and scores -----------------------------
       Under the title: IMDb, and Rotten Tomatoes once index.dj.html's script
       has it - chips on a dark glass so they read on any picture. On a
       desktop a line with the work's years sits over the title, and the three
       lines are one block, left-aligned and centred in the slide's height;
       on a phone the title and scores sit centred at the foot and there is
       no date line. The slide's stretched link covers all of it, so a click
       still opens the work. */
    /* The work's years over the title, on a desktop and a phone alike. */
    #suggested-movies .hero-date {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      color: rgba(255, 255, 255, .85);
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
    }

    .light-mode #suggested-movies .hero-date {
      color: rgba(0, 0, 0, .75);
    }

    /* An icon and its text on one centred line: both are blocks (off the
       text baseline), and the text box is trimmed to the glyphs' cap height
       (text-box), so the digits - which ride high in the font's line box -
       sit on the icon's centre. */
    #suggested-movies .hero-date svg,
    #suggested-movies .hero-date bdi {
      display: block;
      flex: none;
      line-height: 1;
    }

    #suggested-movies .hero-date bdi,
    #suggested-movies .hero-score strong {
      text-box: trim-both cap alphabetic;
    }

    #suggested-movies .hero-scores {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
      margin-top: 10px;
    }

    #suggested-movies .hero-scores:not(:has(.hero-score:not([hidden]))) {
      display: none;
    }

    /* A rating is its logo and its number - no chip - on one centred line:
       the icon and the text box are blocks, so neither sits on the text's
       baseline. */
    #suggested-movies .hero-score {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      color: #fff;
      font-size: 15px;
      line-height: 1;
    }

    #suggested-movies .hero-score svg {
      display: block;
      flex: none;
    }

    #suggested-movies .hero-score strong {
      display: block;
      line-height: 1;
    }

    .light-mode #suggested-movies .hero-score {
      color: #1d1c21;
    }

    .light-mode #suggested-movies .hero-score-imdb strong {
      color: #a07800;
    }

    #suggested-movies .hero-score[hidden] {
      display: none;
    }

    #suggested-movies .hero-score strong {
      font-weight: 800;
    }

    #suggested-movies .hero-score-imdb strong {
      color: #f5c518;
    }

    @media (min-width: 641px) {
      /* Centred in the open part of the slide - between the header and the
         thumbnail strip (about 280px with its gap) - so the ratings never
         run into the posters below them. */
      #suggested-movies #cover-suggested-movies .slide .content {
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        padding-top: var(--sitehead-h, 90px);
        padding-bottom: 300px;
      }

      #suggested-movies .hero-scores {
        justify-content: flex-start;
        margin-top: 12px;
      }

      /* One left edge for the three lines, measured on the drawn ink: the
         IMDb badge starts at its box's edge and the calendar's stroke 1.5px
         inside its own, while the title's first letter keeps a little side
         spacing - so the badge moves in and the calendar out to meet it. */
      #suggested-movies .hero-scores {
        padding-left: 1px;
      }

      #suggested-movies .hero-date svg {
        margin-left: -.5px;
      }

      /* The thumbnail strip: the shelves' poster shape (111 wide by 175
         tall) rather than the 3:4 of the server's thumbnails; the picture
         is cropped to it, never stretched. A phone hides the strip. */
      #suggested-movies #suggested-thumbnails .splide__list .slide figure img {
        aspect-ratio: 111 / 175;
        height: auto;
        object-fit: cover;
      }
    }

    @media (max-width: 640px) {
      /* Title, then scores, centred at the foot of the slide, over the fade
         and just above the bullets. */
      #suggested-movies #cover-suggested-movies .slide .content {
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        padding-bottom: 34px;
      }

      #suggested-movies .hero-scores {
        justify-content: center;
      }

      #suggested-movies .hero-date {
        justify-content: center;
        margin-bottom: 8px;
        font-size: 14px;
      }
    }



    /* ---- A face is never stretched ------------------------------
       A portrait put in a box that is not its shape is cropped to fit it,
       never pulled to it. cover is what the theme asks for in most of
       these places already; this is a floor under the rest, since a plain
       width and height with no fit named leaves the browser filling the
       box, which is the stretch.
       ------------------------------------------------------------- */
    .work-person-thumb {
      background-size: cover;
      background-position: top center;
    }

    /* The cast portraits keep their face near the top - see works-page.css. */
    .person-thumb {
      background-size: cover;
      background-position: center top 15%;
    }

    .person-item img,
    .persons-items img,
    .person-description > figure > img,
    #archive-header figure img,
    img.pimg {
      object-fit: cover;
    }

    /* ---- A card's short classes (2026-11-01) ----------------------
       The card macros in base.dj.html wrote Bootstrap's utility chains on
       every one of the ~185 cards of a list. Each chain is one class (or
       a selector) here instead, with the same declarations and the same
       !important the utilities carry, so the theme's rules and the phone
       overrides above and below resolve exactly as they did.
       .em  = d-flex align-items-end justify-content-between fsz-13
       .eu  = text-center text-muted fsz-12 mt-2 */
    .em {
      display: flex !important;
      align-items: flex-end !important;
      justify-content: space-between !important;
      font-size: 13px !important;
    }

    /* the IMDb block: d-flex flex-column gap-05 */
    .em > span:first-child {
      display: flex !important;
      flex-direction: column !important;
      gap: .5rem;
    }

    /* the score: d-inline-flex align-items-center */
    .em > span:first-child > span {
      display: inline-flex !important;
      align-items: center !important;
    }

    /* the year: d-inline-flex align-items-center gap-05 */
    .em > span + span {
      display: inline-flex !important;
      align-items: center !important;
      gap: .5rem;
    }

    /* fw-500 fsz-16 */
    .em strong {
      font-weight: 500;
      font-variation-settings: "wght" 500;
      font-size: 16px !important;
    }

    /* the genres over the poster: d-flex gap-05 flex-wrap justify-content-center */
    .ganrs > span {
      display: flex !important;
      gap: .5rem;
      flex-wrap: wrap !important;
      justify-content: center !important;
    }

    .eu {
      text-align: center !important;
      color: var(--text-muted) !important;
      font-size: 12px !important;
      margin-top: .5rem !important;
    }

    /* ---- No hover on a card where there is no pointer -------------
       A phone fires :hover on a tap and leaves it there until something
       else is touched, so the card a reader had just opened came back
       from the history with its icons gone, its poster dimmed and its
       genres showing - a state nothing on screen explained.

       There is no way to unmatch a rule, so the three the theme puts on a
       card are restated here at their resting values. Keyed on (hover:
       none) rather than on a width: it is the pointer that decides this,
       and a narrow window on a desktop still has one. */
    @media (hover: none) {
      .posts .entry:hover .icns,
      .posts .entry:hover .imdbpos {
        opacity: 1;
        visibility: visible;
      }

      .posts .entry:hover .ganrs {
        opacity: 0;
        visibility: hidden;
      }

      .posts .entry:hover .cvr:after {
        background-color: transparent;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .8) 100%);
      }

      .posts .entry:hover,
      .posts .entry:hover .cvr img {
        transform: none;
      }
    }

    @media (max-width: 991px) {


      html {
        margin-top: 0 !important;
      }




      /* The notifications panel hangs off a 50px button, and its contents ask */
      /* for 300px, so opening it pushed 117px of page out past the edge and */
      /* left the whole site scrollable sideways - with the logo off-screen. */
      /* On a phone it belongs to the screen, not to the button: pinned under */
      /* the header, a hand's width from each edge, and out of the flow so it */
      /* cannot drag the header around with it. */
      #siteHead #notificationsList {
        position: fixed !important;
        top: 84px !important;
        right: 12px !important;
        left: auto !important;
        width: min(360px, calc(100vw - 24px)) !important;
        max-width: none !important;
      }

      #siteHead #notificationsList > .bg-card {
        width: 100%;
      }

      /* Nine results are taller than a phone, and the list hangs off the */
      /* header with nothing to scroll - so the last of them were simply out */
      /* of reach. It scrolls inside itself now. */
      #saerch-ajaxresult {
        /* header, the field above it, and the bottom tab bar it must not */
        /* disappear behind */
        max-height: calc(100vh - 210px);
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      #siteHead #notificationsList .user-notifications-box {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
      }


      :root {
        --spiner_size: 1rem !important;
      }





        /* A shelf of posters that scrolls sideways.
           :not(.splide__list) is load-bearing. Every carousel on the site is
           a .posts that Splide has taken over, and Splide sizes each slide
           itself, in pixels, inline. This rule was overriding that with
           flex: 0 0 30% - a flex-basis beats a width - so the slides came out
           at 110px while Splide still believed they were 170px and laid the
           track out on that. Its drag ran off the end of a list that was
           400px shorter than it thought, which is why the rows would not
           scroll through to the last poster. The carousels are left to
           Splide below; this is for the plain grids only. */
        .posts:not(.splide__list) {
          display: flex !important;
          overflow-x: auto;
          /* Narrower than the 0.35rem it was, so more of the next poster is
             on screen. */
          gap: 0.3rem !important;
          padding-bottom: 1rem;
          -webkit-overflow-scrolling: touch;
          scroll-snap-type: x proximity;
          scrollbar-width: none;
        }

        /* Three posters and a fifth of a fourth. The division is written out
           so that the sliver is what is being chosen rather than whatever the
           arithmetic happens to leave over: three cards, the three gaps, and
           0.22 of a card left showing at the edge. */
        /* > *, not > div: an archive page lays its cards out as <article
           class="entry">, so a div selector sizes nothing and every card
           shrinks to the width of its own text. The rule this replaces was
           .posts div, which matched the divs *inside* a card as well and
           sized the card by accident. */
        .posts:not(.splide__list) > * {
          flex: 0 0 calc((100% - 0.9rem) / 3.22);
          scroll-snap-align: start;
        }

        /* A page of results is not a shelf. #archive-posts is the search, the
           archives, the charts and the two people lists - lists a reader came to
           read through, not to glance along - and the rule above had turned every
           one of them into a sideways scroller on a phone, three cards at a time
           with the rest off-screen. They lay out as a grid, three to a row. */
        #archive-posts .posts:not(.splide__list) {
          display: grid !important;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 1rem 0.4rem !important;
          overflow: visible;
          padding-bottom: 0;
        }

        #archive-posts .posts:not(.splide__list) > * {
          flex: initial;
          width: auto;
        }

        /* A Splide row keeps the width Splide gave it. The gap here would be
           added on top of the margin Splide already writes, and the overflow
           would fight the track's own. */
        .posts.splide__list {
          gap: 0 !important;
          overflow: visible;
          padding-bottom: 0;
        }

        .posts.splide__list > .slide {
          flex: 0 0 auto;
        }

        /* A shelf on a phone is not a carousel (script.js, makeNativeShelf):
           the track is a plain sideways scroller the browser drives itself -
           no snapping, no script on the touch, and a vertical swipe over it
           scrolls the page straight away. The card width and gap are worked
           out in script.js and handed over as --shelf-card / --shelf-gap. */
        .posts-splide.f2m-native-shelf {
          visibility: visible;
        }

        .f2m-native-shelf .splide__track {
          overflow-x: auto;
          overflow-y: hidden;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .f2m-native-shelf .splide__track::-webkit-scrollbar {
          display: none;
        }

        .f2m-native-shelf .posts.splide__list {
          display: flex !important;
          flex-wrap: nowrap;
          gap: var(--shelf-gap, 6px) !important;
        }

        .f2m-native-shelf .posts.splide__list > .slide {
          flex: 0 0 var(--shelf-card, calc((100% - 18px) / 3.22));
          width: var(--shelf-card, auto);
        }






        /* The cover has a shape rather than a height of its own: 111 wide
           by 175 tall, the shelf poster's proportion on a phone. A fixed
           175px against a card that changes width with the screen was a
           different shape on every phone. The image is cropped to the box
           (object-fit: cover below), never stretched. */
        .posts .entry .cvr {
          height: auto !important;
          aspect-ratio: 111 / 175;
        }

        /* Where aspect-ratio is not understood, the old fixed height. */
        @supports not (aspect-ratio: 2 / 3) {
          .posts .entry .cvr {
            height: 175px !important;
          }
        }



        .posts .entry .icns .icon {
          width: 20px !important;
          height: 20px !important;
        }

        .posts .entry .icns .icon>svg {
          width: 13px !important;
          height: 13px !important;
        }


        .posts .entry .ganrs a {
          font-size: 7px !important;
        }

        /* 10px was the rating and the year on every poster on the site, and */
        /* they are the two numbers a phone user reads before tapping. 12px */
        /* still fits a 110px card - the row is "9.2/10" and four digits. */
        .meta .em {
          font-size: 12px !important;
        }

        .meta .em span:first-child svg {
          width: 18px !important;
          height: 9px !important;
        }

        .meta .em span:last-child svg {
          width: 9px !important;
          height: 9px !important;
        }

        .meta .em span strong {
          font-size: 12px !important;
        }

        .posts .entry .ttl {
          font-size: 13px !important;
          margin: 0 5px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          white-space: pre-line;
          overflow: hidden;

        }

        /* 9px is below reading size. On most rows this is the description in */
        /* the hover overlay, which a phone never shows anyway - but on the */
        /* search results it is the original title, printed under every card. */
        .entry p {
          font-size: 11px !important;
        }

        .posts .entry .cvr {
          margin-bottom: 1rem;
        }

        .cvr {
          border-radius: .5rem !important;
        }

        .list-section:not(:last-child) {
          margin-bottom: 2.5rem !important;
        }

        /* object-fit: fill was squashing every poster. The theme asks for
           cover, which keeps a picture's own proportions and crops what will
           not fit; fill drops the proportions and stretches it to the box.
           With a card that is now sized from the screen width rather than
           fixed, that box is a different shape on every phone, so the same
           poster came out stretched a different way on each one. */
        .posts .entry .cvr img {
          -o-object-fit: cover;
          object-fit: cover;
        }

        /* 14px in a form field is the line under which iOS zooms the page in */
        /* on focus, and it does not zoom back out afterwards - the filter */
        /* sheet is the one form a phone user is most likely to open. */
        #filter-results .form-control,
        #filter-results .select2-search__field {
          font-size: 16px !important;
        }









    }

    .switch-div {
      position: sticky;
      right: 20px;
      /* Adjust as needed */
      top: 50%;
      /* Center vertically */
      transform: translateY(-50%);
      /* Adjust for perfect centering */
      z-index: 1000;
      /* Ensure it stays on top */
    }


    .light-mode {
      background-color: #ededed !important;
      color: #000000 !important;
      --bg-card: #ffffff;
      --bg-body: #e1e1e1;
      --text-body: #000000;
      --border-color: #999999;
      --info-lighten-color: #e4e8ed;
      --danger-lighten-color: #e9c5c5;
      --primary-color: #070c12;
      --primary-lighten-color: #727272;
    }
    /* de-nested from .light-mode - see the header of this file */

    .light-mode input,
    .light-mode textarea {
      background: white !important;
    }

    .light-mode .content-toggle:after {
      background: none !important;
    }

    .light-mode .posts .entry .ganrs a {
      color: white;
    }

    .light-mode #siteHead .menu .megasub .lists .list>li>a {
      color: #fff;
    }

    .light-mode #menucanvas .list>li,
    .light-mode .pagination,
    .light-mode #siteHead .menu .megasub .lists .list>li,
    .light-mode #siteHead .menu a,
    .light-mode #siteHead .menu {
      color: #7e7e7e;
    }

    .light-mode #siteHead .menu .megasub .navs .list-group.active {
      color: #ffffff;
    }

    .light-mode #siteHead .menu .megasub .navs .list-group {
      color: white;
    }

    .light-mode #siteHead .menu .submenu-list {
      padding-right: 1rem;
    }

    .light-mode #siteHead .menu .submenu-list > li > .submenu-list {
      margin-top: .5rem;
      border-right: 1px solid rgba(255, 255, 255, .08);
      padding-right: .75rem;
    }

    .light-mode span.d-flex.flex-column.gap-05 {
      color: #fff;
    }

    .light-mode span.d-inline-flex.align-items-center.gap-05 {
      color: white;
    }

    /* The same two, for the card's short classes (2026-11-01): the rating and
       the year sit on the dark foot of the poster in light mode too. */
    .light-mode .em > span:first-child,
    .light-mode .em > span + span {
      color: #fff;
    }

    .light-mode #suggested-movies #suggested-thumbnails .splide__list .slide.is-active {
      border-color: rgb(233 233 233);
    }

    .light-mode #post-intro .coverimg {
      -webkit-filter: blur(20px) brightness(4.35);
      filter: blur(20px) brightness(4.35);
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;

      margin-left: 10px;
    }

    .switch #input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #2196f3;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      z-index: 0;
      overflow: hidden;
    }

    .sun-moon {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: yellow;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }

    #input:checked+.slider {
      background-color: black;
    }

    #input:focus+.slider {
      box-shadow: 0 0 1px #2196f3;
    }

    #input:checked+.slider .sun-moon {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
      background-color: white;
      -webkit-animation: rotate-center 0.6s ease-in-out both;
      animation: rotate-center 0.6s ease-in-out both;
    }

    .moon-dot {
      opacity: 0;
      transition: 0.4s;
      fill: gray;
    }

    #input:checked+.slider .sun-moon .moon-dot {
      opacity: 1;
    }

    .slider.round {
      border-radius: 34px;
    }

    .slider.round .sun-moon {
      border-radius: 50%;
    }

    #moon-dot-1 {
      left: 10px;
      top: 3px;
      position: absolute;
      width: 6px;
      height: 6px;
      z-index: 4;
    }

    #moon-dot-2 {
      left: 2px;
      top: 10px;
      position: absolute;
      width: 10px;
      height: 10px;
      z-index: 4;
    }

    #moon-dot-3 {
      left: 16px;
      top: 18px;
      position: absolute;
      width: 3px;
      height: 3px;
      z-index: 4;
    }

    #light-ray-1 {
      left: -8px;
      top: -8px;
      position: absolute;
      width: 43px;
      height: 43px;
      z-index: -1;
      fill: white;
      opacity: 10%;
    }

    #light-ray-2 {
      left: -50%;
      top: -50%;
      position: absolute;
      width: 55px;
      height: 55px;
      z-index: -1;
      fill: white;
      opacity: 10%;
    }

    #light-ray-3 {
      left: -18px;
      top: -18px;
      position: absolute;
      width: 60px;
      height: 60px;
      z-index: -1;
      fill: white;
      opacity: 10%;
    }

    .cloud-light {
      position: absolute;
      fill: #eee;
      animation-name: cloud-move;
      animation-duration: 6s;
      animation-iteration-count: infinite;
    }

    .cloud-dark {
      position: absolute;
      fill: #ccc;
      animation-name: cloud-move;
      animation-duration: 6s;
      animation-iteration-count: infinite;
      animation-delay: 1s;
    }

    #cloud-1 {
      left: 30px;
      top: 15px;
      width: 40px;
    }

    #cloud-2 {
      left: 44px;
      top: 10px;
      width: 20px;
    }

    #cloud-3 {
      left: 18px;
      top: 24px;
      width: 30px;
    }

    #cloud-4 {
      left: 36px;
      top: 18px;
      width: 40px;
    }

    #cloud-5 {
      left: 48px;
      top: 14px;
      width: 20px;
    }

    #cloud-6 {
      left: 22px;
      top: 26px;
      width: 30px;
    }

    @keyframes cloud-move {
      0% {
        transform: translateX(0px);
      }

      40% {
        transform: translateX(4px);
      }

      80% {
        transform: translateX(-4px);
      }

      100% {
        transform: translateX(0px);
      }
    }

    .stars {
      transform: translateY(-32px);
      opacity: 0;
      transition: 0.4s;
    }

    .star {
      fill: white;
      position: absolute;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      animation-name: star-twinkle;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }

    #input:checked+.slider .stars {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }

    #star-1 {
      width: 20px;
      top: 2px;
      left: 3px;
      animation-delay: 0.3s;
    }

    #star-2 {
      width: 6px;
      top: 16px;
      left: 3px;
    }

    #star-3 {
      width: 12px;
      top: 20px;
      left: 10px;
      animation-delay: 0.6s;
    }

    #star-4 {
      width: 18px;
      top: 0px;
      left: 18px;
      animation-delay: 1.3s;
    }

    @keyframes star-twinkle {
      0% {
        transform: scale(1);
      }

      40% {
        transform: scale(1.2);
      }

      80% {
        transform: scale(0.8);
      }

      100% {
        transform: scale(1);
      }
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .switch #input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #2196f3;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      z-index: 0;
      overflow: hidden;
    }

    .sun-moon {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: yellow;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }

    #input:checked+.slider {
      background-color: black;
    }

    #input:focus+.slider {
      box-shadow: 0 0 1px #2196f3;
    }

    #input:checked+.slider .sun-moon {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
      background-color: white;
      -webkit-animation: rotate-center 0.6s ease-in-out both;
      animation: rotate-center 0.6s ease-in-out both;
    }

    .moon-dot {
      opacity: 0;
      transition: 0.4s;
      fill: gray;
    }

    #input:checked+.slider .sun-moon .moon-dot {
      opacity: 1;
    }

    .slider.round {
      border-radius: 34px;
    }

    .slider.round .sun-moon {
      border-radius: 50%;
    }

    #moon-dot-1 {
      left: 10px;
      top: 3px;
      position: absolute;
      width: 6px;
      height: 6px;
      z-index: 4;
    }

    #moon-dot-2 {
      left: 2px;
      top: 10px;
      position: absolute;
      width: 10px;
      height: 10px;
      z-index: 4;
    }

    #moon-dot-3 {
      left: 16px;
      top: 18px;
      position: absolute;
      width: 3px;
      height: 3px;
      z-index: 4;
    }

    #light-ray-1 {
      left: -8px;
      top: -8px;
      position: absolute;
      width: 43px;
      height: 43px;
      z-index: -1;
      fill: white;
      opacity: 10%;
    }

    #light-ray-2 {
      left: -50%;
      top: -50%;
      position: absolute;
      width: 55px;
      height: 55px;
      z-index: -1;
      fill: white;
      opacity: 10%;
    }

    #light-ray-3 {
      left: -18px;
      top: -18px;
      position: absolute;
      width: 60px;
      height: 60px;
      z-index: -1;
      fill: white;
      opacity: 10%;
    }

    .cloud-light {
      position: absolute;
      fill: #eee;
      animation-name: cloud-move;
      animation-duration: 6s;
      animation-iteration-count: infinite;
    }

    .cloud-dark {
      position: absolute;
      fill: #ccc;
      animation-name: cloud-move;
      animation-duration: 6s;
      animation-iteration-count: infinite;
      animation-delay: 1s;
    }

    #cloud-1 {
      left: 30px;
      top: 15px;
      width: 40px;
    }

    #cloud-2 {
      left: 44px;
      top: 10px;
      width: 20px;
    }

    #cloud-3 {
      left: 18px;
      top: 24px;
      width: 30px;
    }

    #cloud-4 {
      left: 36px;
      top: 18px;
      width: 40px;
    }

    #cloud-5 {
      left: 48px;
      top: 14px;
      width: 20px;
    }

    #cloud-6 {
      left: 22px;
      top: 26px;
      width: 30px;
    }

    @keyframes cloud-move {
      0% {
        transform: translateX(0px);
      }

      40% {
        transform: translateX(4px);
      }

      80% {
        transform: translateX(-4px);
      }

      100% {
        transform: translateX(0px);
      }
    }

    .stars {
      transform: translateY(-32px);
      opacity: 0;
      transition: 0.4s;
    }

    .star {
      fill: white;
      position: absolute;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      animation-name: star-twinkle;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }

    #input:checked+.slider .stars {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }

    #star-1 {
      width: 20px;
      top: 2px;
      left: 3px;
      animation-delay: 0.3s;
    }

    #star-2 {
      width: 6px;
      top: 16px;
      left: 3px;
    }

    #star-3 {
      width: 12px;
      top: 20px;
      left: 10px;
      animation-delay: 0.6s;
    }

    #star-4 {
      width: 18px;
      top: 0px;
      left: 18px;
      animation-delay: 1.3s;
    }

    @keyframes star-twinkle {
      0% {
        transform: scale(1);
      }

      40% {
        transform: scale(1.2);
      }

      80% {
        transform: scale(0.8);
      }

      100% {
        transform: scale(1);
      }
    }





    #post-intro .entry-poster .btn-tracking {
      top: 1rem;
      left: 4rem;
      position: absolute;
      width: 42px;
      height: 42px;
      border-radius: 50px;
    }


    .quick-access-menu.is-stuck {
      position: fixed;
      top: 0;
      width: -webkit-fill-available;
      z-index: 1000;
    }


    .quick-access-menu {
      position: sticky;
      top: 0;
      width: -webkit-fill-available;
      background-color: var(--bg-body);
      z-index: 1000;
      transition: box-shadow .2s ease;
    }

    .quick-access-menu ul {
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      margin: 0;
      list-style: none;
    }

    .quick-access-menu li {
      position: relative;
    }

    .quick-access-menu a {
      text-decoration: none;
      color: var(--text-body);
      padding: 10px 15px;
      transition: color 0.3s;
    }

    .quick-access-menu a.active {
      color: red;
      /* Change color for active link */
    }

    .quick-access-menu a::after {
      content: '';
      display: block;
      height: 2px;
      background: red;
      position: absolute;
      left: 50%;
      right: 50%;
      bottom: -5px;
      /* Adjust as needed */
      transition: left 0.3s, right 0.3s;
    }

    .quick-access-menu a.active::after {
      left: 0;
      right: 0;
    }



    @media (max-width: 768px) {

      .entry-genres,


      .entry-country,


      .entry-language {
        scrollbar-width: none;
      }

      .float-search.bg-card.border.fsz-13 {
        width: 700%;
        left: -125%;
      }
    }






    .main-footer-insta {
      background: linear-gradient(145deg, #FA9F6F, #FA697C);
      box-shadow: 0 3px 20px rgba(250, 123, 119, .3);
    }

    .main-footer-telegram {
      background: linear-gradient(145deg, #96D5F5, #5EBAE8);
      box-shadow: 0 3px 20px rgba(142, 209, 243, .35);
    }

    .ficon-instagram,
    .ficon-telegram {

      margin-left: 10px;

    }


    .ficon-instagram,
    .ficon-telegram {

      width: 22px;
      height: 22px;
      line-height: 1;
      font-weight: 300;
      transform: translate(-5px, 0);
      display: inline-block;
      fill: #fff;


    }

    .ficon-instagram g,
    .ficon-telegram g {
      fill: #fff;

    }


    .main-footer-insta .ficon-arrow-left-sign,
    .main-footer-telegram .ficon-arrow-left-sign {
      width: 22px;
      height: 22px;
      display: inline-block;
      left: 15px;
      top: 15px;
      position: absolute;
      border-radius: 100px;
      font-size: 10px;
      background: rgba(255, 255, 255, .15);
      fill: #fff;
    }

    .position-absolute {
      position: absolute !important;
    }


    .single-mb-header {
      display: flex;
      justify-content: space-around;
      height: 60% !important;

    }
    /* --------------------------------------------------------------
   Responsive corrections

   Measured in a real browser at 320, 360, 414, 768, 1024 and 1440,
   not read off the CSS. Each rule below fixes a width where the
   document came out wider than the viewport - which on a phone is a
   page that scrolls sideways and clips its own text.
   -------------------------------------------------------------- */

/* The like / dislike / follow row is a flex line that does not wrap, so on
   a 320-360px screen its controls ran up to 55px past the edge of the
   person page. Wrapping costs nothing on a wide screen, where the row
   never reaches two lines. */
.like-dislike {
  flex-wrap: wrap;
  row-gap: .5rem;
}

/* The mega-menu panel is 900px wide and absolutely positioned against its
   own menu item, so in this RTL layout it hung 94px off the start edge of
   every page with a header. Anchoring it to the header's container keeps
   its width and puts it back inside the page. The menu exists at xl and up. */
@media (min-width: 1200px) {
  #siteHead > .container-fluid {
    position: relative;
  }

  #siteHead .menu > li.has-children {
    position: static;
  }

  #siteHead .megasub {
    inset-inline: 0;
    width: auto;
    max-width: min(900px, calc(100vw - 3rem));
    margin-inline: auto;
  }

  /* Bridging the dead zone under the menu item.

     The panel is opened by `#siteHead .menu li:hover > .megasub`, and it is
     positioned at `top: 100%` of #siteHead > .container-fluid - so its top
     edge is the bottom of the header. The item that opens it is not that
     tall: .menu is a flex row with align-items:center, so each <li> is only
     as tall as its own text and sits centred, leaving bare header between
     the bottom of the link and the top of the panel. Moving the pointer down
     to the submenu crossed that strip, `li:hover` went false on the way, and
     the panel closed before the pointer arrived.

     The strip is covered by a transparent ::after on the link. It is inside
     the <li>, so hovering it keeps `li:hover` true and the panel open. It is
     deliberately on the link rather than on the panel: the panel spans almost
     the whole header width, so a bridge drawn from there would lie on top of
     the other menu items and swallow their hovers.

     The <li> keeps `position: static` - the panel's placement depends on it -
     so the anchor for the bridge is the link, which can be relative without
     changing anything else. */
  #siteHead .menu > li.has-children > a {
    position: relative;
  }

  #siteHead .menu > li.has-children > a::after {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline: 0;
    /* Tall enough to reach the header's bottom edge from a centred link.
       It costs nothing if it overshoots: the strip is transparent and only
       live while this item is being hovered. */
    height: 2.5rem;
  }

  /* And forgiveness for a diagonal move that leaves the bridge. The panel
     opens instantly and closes a beat late, so a pointer that clips the
     corner on its way in does not have to start again. */
  #siteHead .menu .megasub {
    transition: opacity .2s linear .28s;
  }

  #siteHead .menu li:hover > .megasub {
    transition-delay: 0s;
  }
}

/* Anything the API hands over as HTML - a blog body, a summary - can carry
   a wide table or an unbroken URL. Neither may set the page width. */
.contentstyle img,
.contentstyle video,
.contentstyle iframe {
  max-width: 100%;
  height: auto;
}

.contentstyle table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

    /* A menu leaf the API gave no target_url. It keeps the row's shape and
       colour so the menu does not look broken, but it is not underlined, not
       focusable and not a pointer - because it goes nowhere. See the note in
       base.dj.html: 24 of these items arrive with an empty target_url. */
    #siteHead .menu .megasub .lists .list > li > .menu-leaf-untargeted,
    .f2m-nav-sub > li > .menu-leaf-untargeted {
      color: var(--text-muted, #9aa08e);
      cursor: default;
    }

    /* The drawer's version keeps the row's height and padding so the list does
       not lose its rhythm where an item happens to have no target. */
    .f2m-nav-sub > li > .menu-leaf-untargeted {
      display: flex;
      align-items: center;
      min-height: 42px;
      padding-block: 0;
      padding-inline: 26px 16px;
      font-size: 14px;
    }

    /* In-page navigation glides rather than jumps.
       The works page already asked for this in its own script, but only for
       the three jump tabs; a link into the same page from anywhere else - the
       drawer, a section anchor, the comment pagination - still snapped. Stated
       once here so every anchor behaves the same.
       Behind prefers-reduced-motion, because a long smooth scroll over a
       megabyte of page is exactly the motion that setting exists to refuse. */
    @media (prefers-reduced-motion: no-preference) {
      html {
        scroll-behavior: smooth;
      }
    }

    /* Anchors land clear of the header when it is pinned over them. The
       script keeps --pinned-head-height in step with the real height, and the
       fallback covers the first paint before it runs. */
    :target,
    #downloads,
    #additional-information,
    #reviews,
    #work-gallery,
    #related-movies,
    #related-series {
      scroll-margin-top: calc(var(--pinned-head-height, 64px) + 12px);
    }

    /* The shelf card (index, work page) carries no stretched-link class, rel
       or dir: its title link is the only <a> directly under .entry, and the
       meta row is the only .meta in it, so both are styled from the parent -
       185 cards on the index, ~47 bytes each. Same rules as Bootstrap's
       .stretched-link::after and as dir="ltr". The archive grid's card
       (categories, genres, country, language: #archive-posts) is the same. */
    .slide > .entry > a::after,
    #archive-posts .entry > a::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      content: "";
    }
    .slide > .entry .meta,
    #archive-posts .entry .meta {
      direction: ltr;
      unicode-bidi: isolate;
    }