.movie-page {
      --movie-page-bg: linear-gradient(180deg, rgba(245, 247, 251, 0.75) 0%, rgba(238, 242, 250, 0.85) 100%);
      --movie-surface: rgba(255, 255, 255, 0.94);
      --movie-surface-alt: rgba(249, 251, 255, 0.9);
      --movie-border: rgba(15, 23, 42, 0.08);
      --movie-text: #0f172a;
      --movie-muted: #4b5563;
      --movie-hero-bg: var(--movie-page-bg);
      --movie-shadow: 0 4px 8px rgba(15, 23, 42, 0.06),
                      0 12px 24px rgba(15, 23, 42, 0.08),
                      0 24px 48px rgba(15, 23, 42, 0.1);
      --movie-card-shadow: 0 2px 8px rgba(15, 23, 42, 0.04),
                           0 10px 20px rgba(15, 23, 42, 0.06),
                           0 20px 40px rgba(15, 23, 42, 0.08);
      --movie-poster-shadow: 0 6px 12px rgba(15, 23, 42, 0.1),
                             0 16px 32px rgba(15, 23, 42, 0.12),
                             0 28px 56px rgba(15, 23, 42, 0.14);
      --movie-panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(249, 251, 255, 0.98) 100%);
      display: grid;
      grid-template-columns: minmax(190px, 0.8fr) minmax(340px, 2.4fr) minmax(240px, 0.9fr);
      grid-template-areas:
        "hero hero aside"
        "main main aside-bottom";
      grid-auto-rows: auto;
      gap: 1.1rem;
      padding: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      backdrop-filter: none;
    }

    .dark .movie-page {
      --movie-page-bg: linear-gradient(180deg, rgba(38, 38, 38, 0.80) 0%, rgba(18, 20, 27, 0.88) 100%);
      --movie-surface: rgba(23, 26, 36, 0.95);
      --movie-surface-alt: rgba(28, 31, 44, 0.9);
      --movie-border: rgba(255, 255, 255, 0.08);
      --movie-text: #f8fafc;
      --movie-muted: rgba(248, 250, 252, 0.7);
      --movie-hero-bg: var(--movie-page-bg);
      --movie-shadow: 0 4px 8px rgba(0, 0, 0, 0.25),
                      0 12px 20px rgba(0, 0, 0, 0.3),
                      0 24px 48px rgba(0, 0, 0, 0.35);
      --movie-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.2),
                           0 10px 20px rgba(0, 0, 0, 0.28),
                           0 18px 36px rgba(0, 0, 0, 0.35);
      --movie-poster-shadow: 0 6px 12px rgba(0, 0, 0, 0.3),
                             0 16px 28px rgba(0, 0, 0, 0.35),
                             0 24px 48px rgba(0, 0, 0, 0.4);
      --movie-panel-gradient: linear-gradient(135deg, rgba(38, 38, 38, 0.95) 0%, rgba(28, 31, 44, 0.97) 100%);
    }

    .movie-hero__wrapper {
      grid-area: hero;
      background: var(--movie-panel-gradient);
      border-radius: 1.1rem;
      border: 1px solid var(--movie-border);
      box-shadow: var(--movie-card-shadow);
      padding: 1.25rem;
      color: var(--movie-text);
      align-self: start;
      display: flex;
      gap: 1.25rem;
      transition: box-shadow 0.3s ease;
    }

    .movie-hero__firstrow {
      display: contents;
    }


    .movie-hero__scorecard {
      grid-area: aside;
      background: var(--movie-panel-gradient);
      border-radius: 1.25rem;
      border: 1px solid var(--movie-border);
      box-shadow: var(--movie-card-shadow);
      padding: 1.25rem;
      color: var(--movie-text);
      align-self: start;
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: box-shadow 0.3s ease;
    }


    .movie-hero__poster {
      position: relative;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow: none;
      transition: box-shadow 0.3s ease;
    }

    .movie-hero__details {
      flex: 1;
      box-shadow: none;
      transition: box-shadow 0.3s ease;
    }

    .movie-hero__poster img {
      max-width: 200px !important;
      width: auto !important;
      height: auto;
      object-fit: contain;
      border-radius: 1rem;
      box-shadow: var(--movie-poster-shadow);
      transition: box-shadow 0.3s ease;
    }

    .movie-page .poster-card {
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
      transition: transform 180ms ease, box-shadow 180ms ease;
      will-change: transform;
    }

    .movie-page .poster-card:hover {
      transform: scale(1.015);
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
    }

    .dark .movie-page .poster-card:hover {
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
    }

    .movie-hero__poster .floating.ui.mrating {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0 !important;
      z-index: 3;
    }

    .movie-hero__title {
      margin: 0;
      font-size: 2.1rem;
      line-height: 1.2;
      color: var(--movie-text);
    }

    .movie-hero__label {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }

    .movie-hero__description {
      margin-top: 0.9rem;
      color: var(--movie-muted);
      line-height: 1.5;
    }

    .movie-hero__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: 1rem;
    }

    .movie-hero__longform {
      margin-top: 1rem;
    }

    .movie-pill {
      padding: 0.35rem 0.85rem;
      border-radius: 999px;
      background: var(--movie-surface-alt);
      border: 1px solid var(--movie-border);
      font-size: 0.85rem;
      color: var(--movie-text);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .movie-pill--interactive {
      cursor: pointer;
    }

    .movie-pill--interactive:hover,
    .movie-pill--interactive:focus-visible {
      background: var(--movie-panel-gradient);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
      color: var(--movie-text);
      outline: none;
    }

    .dark .movie-pill--interactive:hover,
    .dark .movie-pill--interactive:focus-visible {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .movie-pill--fresh img {
      width: 14px;
      height: 14px;
      display: block;
    }

    .movie-pill--ai svg {
      width: 16px;
      height: 16px;
      color: #6366f1;
      flex-shrink: 0;
    }

    .dark .movie-pill--ai svg {
      color: #a5b4fc;
    }

    .movie-hero__ai-toggle {
      margin-top: 0.85rem;
    }

    .movie-hero__ai-panel {
      margin-top: 0.75rem;
      padding: 1rem;
      border-radius: 1rem;
      border: 1px solid var(--movie-border);
      background: var(--movie-panel-gradient);
      color: var(--movie-text);
      display: none;
      line-height: 1.55;
      font-size: 0.9rem;
    }

    .movie-hero__ai-panel.is-visible {
      display: block;
    }

    .movie-hero__scorecard .movie-action-icons {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.3rem;
    }

    .movie-hero__scorecard .movie-score {
      position: relative;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .movie-hero__scorecard .idscore {
      position: absolute !important;
      left: 50% !important;
      top: 10px !important;
      right: auto !important;
      margin: 0 !important;
      transform: translateX(-80%);
    }

    .movie-hero__scorecard .idscoreavg {
      position: absolute !important;
      left: 50% !important;
      top: 35px !important;
      right: auto !important;
      margin: 0 !important;
      transform: translateX(5%);
    }

    .movie-hero__scorecard .ui.grid {
      margin: 0 !important;
      padding: 0 !important;
      font-size: 0.8rem;
      line-height: 0.9;
      min-height: auto !important;
    }

    .movie-hero__scorecard .ui.grid .column {
      padding: 0.02rem 0.2rem !important;
      line-height: 0.6;
    }

    .movie-hero__scorecard .ui.grid > .row {
      padding: 0 !important;
      margin: 0 !important;
    }

    .movie-main {
      grid-area: main;
      background: var(--movie-panel-gradient);
      border-radius: 1.25rem;
      border: 1px solid var(--movie-border);
      padding: 1.25rem;
      box-shadow: var(--movie-card-shadow);
      align-self: start;
      color: var(--movie-text);
      transition: box-shadow 0.3s ease;
    }


    .movie-aside-card {
      background: var(--movie-panel-gradient);
      border-radius: 1.25rem;
      border: 1px solid var(--movie-border);
      padding: 1.25rem;
      box-shadow: var(--movie-card-shadow);
      align-self: start;
      color: var(--movie-text);
      transition: box-shadow 0.3s ease;
    }

    .movie-hero__wrapper:hover,
    .movie-hero__scorecard:hover,
    .movie-main:hover,
    .movie-aside-card:hover {
      box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08),
                  0 16px 32px rgba(15, 23, 42, 0.1),
                  0 28px 56px rgba(15, 23, 42, 0.12);
    }

    .dark .movie-hero__wrapper:hover,
    .dark .movie-hero__scorecard:hover,
    .dark .movie-main:hover,
    .dark .movie-aside-card:hover {
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28),
                  0 14px 24px rgba(0, 0, 0, 0.35),
                  0 22px 44px rgba(0, 0, 0, 0.42);
    }


    .movie-aside-card {
      grid-area: aside-bottom;
    }

    .movie-main .ui.segment,
    .movie-main .ui.grid,
    .movie-main .row {
      background: transparent !important;
    }

    @media (max-width: 992px) {
      .movie-page {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "hero hero"
          "main main"
          "aside aside-bottom";
      }

      .movie-hero__wrapper,
      .movie-main {
        grid-column: 1 / -1;
      }

      .movie-hero__scorecard {
        margin-bottom: 0;
      }

      .movie-aside-card {
        margin-top: 0;
      }

      .movie-hero__scorecard .ui.grid,
      .movie-hero__scorecard .movie-score {
        max-width: 200px;
        margin-left: 0;
        margin-right: 0;
      }
    }

    @media (max-width: 700px) {
      .movie-page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "mobile-hero"
          "main"
          "aside-bottom";
        row-gap: 1rem;
        column-gap: 0;
      }

      .movie-hero__firstrow {
        grid-area: mobile-hero;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "poster scorecard"
          "details details";
        gap: 0.85rem;
        align-items: stretch;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
      }

      .movie-hero__wrapper {
        display: contents;
      }

      .movie-hero__poster {
        grid-area: poster;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(249, 251, 255, 0.96) 100%);
        border-radius: 1.15rem;
        border: 1px solid var(--movie-border);
        box-shadow: var(--movie-card-shadow);
        padding: 0.5rem;
        margin-bottom: 0;
        height: 100%;
        width: 100%;
        max-width: none;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        transition: box-shadow 0.3s ease;
      }

      .season-page .movie-hero__poster {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.5rem;
      }

      .season-page .movie-hero__poster img {
        margin-bottom: 0;
      }

      .season-page .movie-hero__poster .season-progress {
        width: 100%;
        margin-top: 0.1rem;
      }

      .dark .movie-hero__poster {
        background: linear-gradient(135deg, rgba(38, 38, 38, 0.92) 0%, rgba(23, 26, 36, 0.98) 100%);
      }

      .movie-hero__poster img {
        width: 100% !important;
        max-width: 220px;
        height: auto;
      }

      .movie-hero__details {
        grid-area: details;
        background: var(--movie-panel-gradient);
        border-radius: 1.25rem;
        border: 1px solid var(--movie-border);
        box-shadow: var(--movie-card-shadow);
        padding: 1.25rem;
      }

      .movie-hero__scorecard {
        grid-area: scorecard;
        border-radius: 1.25rem;
        border: 1px solid var(--movie-border);
        margin-top: 0;
        height: 100%;
        background: var(--movie-panel-gradient);
        box-shadow: var(--movie-card-shadow);
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .movie-hero__poster .floating.ui.mrating {
        top: 6px;
        right: 6px;
      }

      .ui.container[role="main"] {
        margin-left: 0.8em !important;
        margin-right: 0.8em !important;
      }

      .movie-hero__poster:hover {
        box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08),
                    0 16px 32px rgba(15, 23, 42, 0.1),
                    0 28px 56px rgba(15, 23, 42, 0.12);
      }

      .dark .movie-hero__poster:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28),
                    0 14px 24px rgba(0, 0, 0, 0.35),
                    0 22px 44px rgba(0, 0, 0, 0.42);
      }
    }