/* ============================================================================
   Labocine — Playlists (main + detail + pro), revamped black-theme OTT layout.
   Mirrors the film page design language. ALL rules are scoped under `.fx` so the
   shared classes in playlist.css / issue.css (also used by the Library page) are
   left untouched. Modal/player base behavior stays in those files; we only
   override visuals here.
   ============================================================================ */

.fx {
    --fx-nav-h: 56px;
    --fx-bg: #0a0a0b;
    --fx-surface: #141417;
    --fx-surface-2: #1c1c20;
    --fx-surface-3: #26262b;
    --fx-border: rgba(255, 255, 255, 0.10);
    --fx-border-strong: rgba(255, 255, 255, 0.18);
    --fx-text: #f3f3f5;
    --fx-muted: #b9b9c4;
    --fx-muted-2: #8b8b96;
    --fx-accent: #f40000;
    --fx-accent-hover: #ff2b2b;
    --fx-radius: 14px;
    --fx-radius-sm: 10px;
    --fx-maxw: 1440px;

    background: var(--fx-bg);
    color: var(--fx-text);
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    padding-top: calc(var(--fx-nav-h) + 18px);
    padding-bottom: 4rem;
}

body.fx-page, html.fx-page { background: #0a0a0b; }
body.fx-page footer { color: #6f6f78; text-align: center; background: #0a0a0b; }

.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }
.fx a { color: inherit; text-decoration: none; }
/* Beat the global `h1..h6, strong { color:#222 }` rule on this dark page */
.fx h1, .fx h2, .fx h3, .fx h4, .fx h5, .fx h6, .fx strong { color: inherit; }

.fx__container {
    width: 100%;
    max-width: var(--fx-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* Buttons (shared with the films look) */
.fx__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--fx-border-strong);
    background: var(--fx-surface-2);
    color: var(--fx-text);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.05s ease;
    white-space: nowrap;
}
.fx__btn:hover { background: var(--fx-surface-3); }
.fx__btn:active { transform: translateY(1px); }
.fx__btn svg { width: 18px; height: 18px; }
.fx__btn--primary { background: var(--fx-accent); border-color: var(--fx-accent); color: #fff; }
.fx__btn--primary:hover { background: var(--fx-accent-hover); border-color: var(--fx-accent-hover); }

/* ------------------------------------------------------------- Page header */
.fx__page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 30px 0 22px;
}
.fx__page-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; margin: 0; color: #fff; }
.fx__section { margin-top: 44px; }
.fx__section-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 18px; color: #fff; }
.fx__empty { color: var(--fx-muted); font-size: 1rem; margin: 8px 0 0; }

/* ------------------------------------------------------------- Featured hero */
.fx__featured { margin-bottom: 8px; }
.fx .home__spotlights { border-radius: var(--fx-radius); overflow: hidden; }
.fx .home__spotlight {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: clamp(260px, 42vw, 460px);
    background-size: cover;
    background-position: center;
    border-radius: var(--fx-radius);
    overflow: hidden;
}
.fx .home__spotlight::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 35%, rgba(0,0,0,0.85) 100%);
}
.fx .home__spotlight .content { position: relative; z-index: 2; padding: 0 0 36px 40px; max-width: 80%; }
.fx .home__section__caption { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
.fx .home__spotlight h1.home__section__caption { font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 800; margin: 0; line-height: 1.05; }
.fx__featured-eyebrow {
    display: inline-block; margin-bottom: 10px;
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: #fff; background: var(--fx-accent); padding: 5px 12px; border-radius: 999px; font-weight: 700;
}
/* slick controls */
.fx .slick-dots { bottom: 14px; }
.fx .slick-dots li button:before { color: #fff; opacity: 0.5; font-size: 9px; }
.fx .slick-dots li.slick-active button:before { color: var(--fx-accent); opacity: 1; }
.fx .home__spotlights .slick-arrow { z-index: 3; width: 40px; height: 40px; }
.fx .home__spotlights .slick-prev { left: 14px; }
.fx .home__spotlights .slick-next { right: 14px; }
.fx .home__spotlights .slick-prev:before,
.fx .home__spotlights .slick-next:before { font-size: 28px; opacity: 0.9; }

/* --------------------------------------------------- Playlist cards (grid) */
.fx__pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 24px 22px;
}
.fx-pcard {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--fx-surface);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fx-pcard:hover { transform: translateY(-4px); border-color: var(--fx-border-strong); box-shadow: 0 22px 48px -24px rgba(0,0,0,0.95); }
.fx-pcard__media {
    display: block; position: relative; aspect-ratio: 16 / 9;
    background: var(--fx-surface-2); overflow: hidden;
}
.fx-pcard__media-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.55s cubic-bezier(0.2,0.6,0.2,1); }
.fx-pcard:hover .fx-pcard__media-img { transform: scale(1.06); }
.fx-pcard__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.28));
    opacity: 0; transition: opacity 0.25s ease;
}
.fx-pcard:hover .fx-pcard__media::after { opacity: 1; }
/* Info block — always visible, below the still (editorial / Mubi-style).
   Tight: the title clamps to 2 lines but does NOT reserve a fixed 2-line height,
   so short titles sit snug against the meta instead of leaving a big gap. */
.fx-pcard__body { display: block; padding: 12px 15px 13px; }
.fx-pcard__title {
    font-size: 1.04rem; font-weight: 700; color: #fff; margin: 0 0 4px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fx-pcard__meta { display: inline-flex; align-items: center; gap: 7px; font-size: 0.81rem; color: var(--fx-muted); }

/* Card action menu (share / edit / delete / feature) */
.fx-pcard__actions {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    display: flex; gap: 6px;
    opacity: 0; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.fx-pcard:hover .fx-pcard__actions,
.fx-pcard:focus-within .fx-pcard__actions { opacity: 1; transform: none; }
.fx-pcard__act {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,10,12,0.72); border: 1px solid var(--fx-border-strong); color: #fff;
    cursor: pointer; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.fx-pcard__act:hover { background: var(--fx-accent); border-color: var(--fx-accent); }
.fx-pcard__act svg { width: 16px; height: 16px; }
.fx-pcard__act--danger:hover { background: #c0392b; border-color: #c0392b; }

/* ============================================================ DETAIL / PRO */

.fx-pl-hero { position: relative; margin: 6px 0 12px; }
.fx-pl-hero__eyebrow { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fx-muted); margin: 0 0 8px; }
.fx-pl-hero__title { font-size: clamp(1.8rem, 4.4vw, 3rem); font-weight: 800; color: #fff; margin: 0; line-height: 1.05; }
.fx-pl-hero__desc { color: #d7d7dc; font-size: 1.02rem; line-height: 1.6; margin: 14px 0 0; max-width: 760px; }
.fx-pl-hero__desc a { color: #fff; text-decoration: underline; }
.fx-pl-hero__by { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--fx-muted); }
.fx-pl-hero__by .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fx-border-strong); vertical-align: middle; }
.fx-pl-hero__by:hover .avatar { border-color: var(--fx-accent); }

.fx .playlist-controls, .fx__pl-actions {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0 0;
}
.fx .playlist-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 46px; padding: 0 20px; border-radius: 999px;
    border: 1px solid var(--fx-border-strong); background: var(--fx-surface-2); color: var(--fx-text);
    font-size: 0.95rem; font-weight: 600; cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease;
}
.fx .playlist-btn:hover { background: var(--fx-surface-3); transform: translateY(-2px); box-shadow: 0 9px 20px -10px rgba(0, 0, 0, 0.85); }
.fx .playlist-btn:active { transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: 0.07s; }
/* Primary "Play All" — solid accent + a red glow lift so it reads as THE action */
.fx #btn-play-all { background: var(--fx-accent); border-color: var(--fx-accent); color: #fff; }
.fx #btn-play-all:hover { background: var(--fx-accent-hover); border-color: var(--fx-accent-hover); box-shadow: 0 12px 26px -10px rgba(244, 0, 0, 0.7); }
/* active toggle state (shuffle/loop) */
.fx .playlist-btn.active { background: rgba(244,0,0,0.16); border-color: var(--fx-accent); color: #fff; }

/* "+ Add Film" — styled as a SECONDARY outline pill (distinct from the red Play All) */
.fx .button { border: 0; cursor: pointer; }
.fx .button--red, .fx a.button--red { background: var(--fx-accent); color: #fff; border-radius: 999px; }
.fx .button--red:hover { background: var(--fx-accent-hover); }
/* Add Film sits on the same row as Play All — match the control height, but as a quieter outline pill */
.fx .playlist-controls .fx-add-film {
    height: 46px; padding: 0 22px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 600;
    background: var(--fx-surface-2); border: 1px solid var(--fx-border-strong); color: var(--fx-text); border-radius: 999px;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease;
}
.fx .playlist-controls .fx-add-film:hover { background: var(--fx-surface-3); border-color: var(--fx-border-strong); transform: translateY(-2px); box-shadow: 0 9px 20px -10px rgba(0, 0, 0, 0.85); }
.fx .playlist-controls .fx-add-film:active { transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: 0.07s; }

/* Owner dropdown (share/edit/delete) */
.fx .dropdown { position: relative; }
.fx .dropbtn {
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    /* menu-white.svg is mis-named (its fill is #444 → invisible on dark), so use an
       inline WHITE hamburger instead. */
    background: var(--fx-surface-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>') center/18px no-repeat;
    border: 1px solid var(--fx-border-strong);
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.fx .dropbtn:hover { background-color: var(--fx-surface-3); border-color: var(--fx-border-strong); transform: scale(1.08); }
.fx .dropbtn:active { transform: scale(0.94); transition-duration: 0.07s; }
.fx .dropdown-content {
    background: #15151a; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-sm);
    box-shadow: 0 18px 50px -16px rgba(0,0,0,0.9); overflow: hidden; min-width: 160px;
}
.fx .dropdown-content a { color: var(--fx-text); padding: 11px 16px; display: block; cursor: pointer; }
.fx .dropdown-content a:hover { background: var(--fx-surface-3); color: #fff; }

/* ------------------------------------------------------ Inline playlist player */
.fx #playlist-player-wrap {
    background: #000; border: 1px solid var(--fx-border); border-radius: var(--fx-radius);
    overflow: hidden; margin: 8px 0 28px;
    /* Stay pinned (below the nav) while the film plays and the list scrolls.
       z-index sits below the modals (issue.css .modal = 10). */
    position: sticky; top: calc(var(--fx-nav-h) + 10px); z-index: 5;
    box-shadow: 0 26px 60px -28px rgba(0,0,0,0.95);
}
.fx .playlist-player-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--fx-surface); border-bottom: 1px solid var(--fx-border);
    color: var(--fx-text);
}
.fx #playlist-now-playing { font-weight: 700; color: #fff; }
.fx #playlist-queue-pos { color: var(--fx-muted); font-size: 0.88rem; }
.fx #playlist-close-btn {
    margin-left: auto; background: var(--fx-surface-2); color: var(--fx-text);
    border: 1px solid var(--fx-border-strong); border-radius: 999px; padding: 7px 16px; cursor: pointer;
}
.fx #playlist-close-btn:hover { background: var(--fx-surface-3); }
.fx .playlist-player-nav { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; background: var(--fx-surface); }
.fx .playlist-player-nav .playlist-btn { height: 42px; }
.fx .playlist-player-nav .playlist-nav-btn.active { background: rgba(244,0,0,0.16); border-color: var(--fx-accent); color: #fff; }
.fx #playlist-video, .fx #playlist-player-wrap .plyr { border-radius: 0; }
/* keep the injected fullscreen overlay (playlist-player.js) usable */
.fx .card.playlist-card-active { outline: 2px solid var(--fx-accent); outline-offset: 3px; border-radius: var(--fx-radius); }

/* ----------------------------------------------------- Film / scene cards
   Amazon-style hover (matches the issues detail page): a clean still + single-line
   title at rest; on hover a richer card scales up from the centre (floating over
   neighbours in EVERY direction — no reflow) with a bigger still, a Play/Watch
   button, the full title, metadata and a synopsis snippet. The film Play button
   keeps the `playlist-play-from` + `data-film-id` hooks that drive the inline
   player, so Play All / queueing / the active-card outline all still work. */
.fx .films { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 22px; padding: 0; }

/* ---- rest tile ---- */
.fx .card {
    position: relative; z-index: 1; display: block;
    width: auto; max-width: none; margin: 0; float: none;
    background: var(--fx-surface); border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius); overflow: visible; box-shadow: none;
    transition: z-index 0s linear 0.26s;   /* on hover-out, drop behind neighbours only AFTER the popover scales away */
}
.fx .card:hover { z-index: 50; transition: z-index 0s linear 0s; }   /* raise immediately so the popover floats over everything */
.fx .card .card__media {
    position: relative; aspect-ratio: 16/9; overflow: hidden;
    border-radius: var(--fx-radius) var(--fx-radius) 0 0; background: var(--fx-surface-2);
}
.fx .card .card__media .card_link { display: block; width: 100%; height: 100%; }
.fx .card .card__img, .fx .card .card__img--hover {
    width: 100%; height: 100%; min-height: 0; border-radius: 0;
    background-size: cover; background-position: center; opacity: 1; transform: none;
}
.fx .card .card__img--hover { display: none; }
.fx .card:hover .card__img { visibility: visible; }   /* legacy sets visibility:hidden on hover */
.fx .card .card__info {
    position: static; background: var(--fx-surface); margin: 0;
    padding: 12px 14px 13px; border-radius: 0 0 var(--fx-radius) var(--fx-radius); overflow: hidden;
}
/* single-line title at rest → tight spacing, uniform card heights */
.fx .card .card__info .card__title {
    font-size: 0.96rem; font-weight: 600; color: #fff; margin: 0; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "Not available" badge stays on the still at rest */
.fx .card .card__not-available {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.7rem; font-weight: 600; color: #fff;
    background: rgba(0,0,0,0.66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    border: 1px solid var(--fx-border-strong); padding: 5px 10px; border-radius: 999px;
}

/* ---- hover popover (scales up from the centre, in all directions) ---- */
.fx .card .card__pop {
    position: absolute; left: 50%; top: 50%; z-index: 4;
    width: 112%;
    transform: translate(-50%, -50%) scale(0.9);
    transform-origin: center center;
    background: var(--fx-surface);
    border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius);
    box-shadow: 0 40px 80px -18px rgba(0, 0, 0, 0.96);
    overflow: hidden;
    opacity: 0; visibility: hidden; pointer-events: none;
    /* exit: quick, smooth */
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.22s;
}
.fx .card:hover .card__pop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    will-change: transform, opacity;
    /* enter: short hover-intent delay, then opacity + scale glide together on ONE
       gentle Material-standard curve (eases in, not a front-loaded snap) so the
       card grows up to size smoothly instead of jerking */
    transition: opacity 0.36s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, transform 0.36s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, visibility 0s;
}
.fx .card .card__pop-media {
    display: block; width: 100%; aspect-ratio: 16/9;
    background-size: cover; background-position: center; background-color: var(--fx-surface-2);
}
.fx .card .card__pop-body { padding: 13px 15px 15px; }

/* action button */
.fx .card .card__btns { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.fx .card .card__play-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 18px; border-radius: 999px;
    background: var(--fx-accent); color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer;
    transition: background 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease;
}
.fx .card .card__play-btn:hover { background: var(--fx-accent-hover); transform: scale(1.06); box-shadow: 0 10px 22px -8px rgba(244, 0, 0, 0.62); }
.fx .card .card__play-btn:active { transform: scale(0.94); box-shadow: 0 3px 10px -8px rgba(244, 0, 0, 0.5); transition-duration: 0.07s; }
.fx .card .card__play-btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.fx .card .card__play-btn:hover svg { transform: scale(1.18); }
.fx .card .card__play-btn--disabled {
    background: var(--fx-surface-3); color: var(--fx-muted); cursor: not-allowed;
    border: 1px solid var(--fx-border-strong); font-weight: 600;
}
/* the gated pill stays inert — no lift/scale/glow */
.fx .card .card__play-btn--disabled:hover { background: var(--fx-surface-3); transform: none; box-shadow: none; }
.fx .card .card__play-btn--disabled:hover svg { transform: none; }

/* popover text */
.fx .card .card__pop-title {
    font-size: 1.02rem; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fx .card .card__pop-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.fx .card .card__pop-sub { font-size: 0.82rem; color: var(--fx-muted); }
.fx .card .card__by {
    display: block; font-size: 0.83rem; color: var(--fx-muted); line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx .card .card__by .card__author { color: #d7d7dc; font-weight: 600; }
.fx .card .card__by .card__author:hover { color: var(--fx-accent-hover); }
.fx .card .card__pop-desc {
    margin: 9px 0 0; font-size: 0.83rem; line-height: 1.55; color: #c4c4cf;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fx .card .card__category {
    display: inline-block; font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase;
    color: var(--fx-muted); background: var(--fx-surface-3); border: 1px solid var(--fx-border);
    padding: 3px 9px; border-radius: 999px; flex: 0 0 auto;
}

/* --------------------------------------------------------- Modals (dark) */
.fx .modal { background: rgba(0,0,0,0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fx .modal-content {
    background: #15151a; color: #f3f3f5;
    border: 1px solid var(--fx-border-strong); border-radius: 16px;
    width: min(480px, 92%); padding: 24px 26px; margin-top: 8vh;
    box-shadow: 0 30px 90px -20px rgba(0,0,0,0.95);
}
.fx .modal-content h4, .fx .modal-content h6 { color: #fff; margin: 0 0 12px; }
.fx .modal-content hr { border: 0; border-top: 1px solid var(--fx-border); margin: 14px 0; }
.fx .modal-content .control-label { color: var(--fx-muted); display: block; margin: 12px 0 6px; }
.fx .modal-content .form__input {
    width: 100%; min-height: 44px; padding: 11px 14px; margin-bottom: 6px;
    background: #1f1f25; border: 1px solid var(--fx-border-strong); border-radius: 10px; color: #f3f3f5; font-size: 0.96rem;
}
.fx .modal-content .form__input:focus { outline: none; border-color: var(--fx-accent); }
.fx .modal-content .button {
    height: 46px; line-height: 46px; padding: 0 24px; margin-top: 10px;
    background: var(--fx-accent); color: #fff; border-radius: 999px; font-weight: 600; cursor: pointer;
}
.fx .modal-content .button:hover { background: var(--fx-accent-hover); }
.fx .modal-content .close { color: var(--fx-muted); float: right; font-size: 26px; line-height: 1; cursor: pointer; }
.fx .modal-content .close:hover { color: #fff; }
.fx .modal-content .playlist__share__link {
    width: 100%; padding: 11px 14px; background: #1f1f25; border: 1px solid var(--fx-border-strong);
    border-radius: 10px; color: #f3f3f5; margin-bottom: 10px;
}
.fx .modal-content .playlist__share__icons { display: flex; gap: 12px; margin-top: 14px; }
.fx .modal-content .form__alert { color: #5ad17e; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1024px), (hover: none) {
    /* narrow windows OR any touch device (incl. tablets that can't hover) →
       render the film/scene popover inline (drop its duplicate still, keep info) */
    .fx .card:hover { z-index: 1; transition: none; }
    .fx .card .card__info { display: none; }   /* the inline popover shows the title instead */
    /* NB: include the :hover variant so it beats the desktop `.fx .card:hover .card__pop`
       (0,4,0) — otherwise a hovering pointer in mobile emulation re-applies the centring
       translate to a now-static popover and flings it into the top-left corner. */
    .fx .card .card__pop,
    .fx .card:hover .card__pop {
        position: static; transform: none; width: auto; z-index: auto;
        opacity: 1; visibility: visible; pointer-events: auto;
        border: 0; border-top: 1px solid var(--fx-border); box-shadow: none;
        border-radius: 0 0 var(--fx-radius) var(--fx-radius); transition: none; will-change: auto;
    }
    .fx .card .card__pop-media { display: none; }
    .fx .card .card__pop-body { padding: 12px 14px 14px; }
    /* playlist (main page) action buttons can't hover-reveal on touch → always show */
    .fx-pcard__actions { opacity: 1; transform: none; }
}
@media (max-width: 768px) {
    .fx { padding-top: calc(var(--fx-nav-h) + 10px); }
    .fx__container { padding: 0 16px; }
    .fx__page-head { margin: 22px 0 18px; }
    .fx__pgrid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
    .fx .films { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 14px; }
    .fx__section { margin-top: 34px; }
    .fx__section-title { font-size: 1.15rem; }
    .fx .home__spotlight { height: clamp(200px, 52vw, 320px); }
    .fx .home__spotlight .content { padding: 0 0 22px 18px; max-width: 92%; }
    .fx-pl-hero__desc { font-size: 0.96rem; }
    /* compact inline cards on phones: full title + button + meta, no synopsis */
    .fx .card .card__pop-body { padding: 11px 12px 13px; }
    .fx .card .card__pop-title { font-size: 0.95rem; margin-bottom: 7px; }
    .fx .card .card__pop-desc { display: none; }
    .fx .card .card__btns { gap: 8px; margin-bottom: 9px; }
    .fx .card .card__play-btn { height: 34px; padding: 0 14px; font-size: 0.8rem; }
    .fx-pcard__body { padding: 11px 12px 12px; }
    .fx-pcard__title { font-size: 0.98rem; }
    .fx .playlist-controls, .fx__pl-actions { gap: 8px; }
    .fx .playlist-controls .playlist-btn, .fx .playlist-controls .fx-add-film, .fx__pl-actions .fx__btn { flex: 1 1 auto; justify-content: center; }
    .fx #playlist-player-wrap { margin: 8px 0 22px; position: static; }
    .fx .playlist-player-nav { gap: 8px; }
    .fx .playlist-player-nav .playlist-btn { flex: 1 1 auto; justify-content: center; height: 40px; padding: 0 12px; }
    .fx .playlist-player-header { flex-wrap: wrap; gap: 6px 12px; }
}
@media (max-width: 400px) {
    .fx__pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fx .films { grid-template-columns: 1fr; }
    .fx .card .card__pop-desc { display: -webkit-box; }   /* single column → room for the synopsis again */
}