/* =============================================================
   gokusx theme — style sheet
   01. Tokens
   02. Reset & base
   03. Layout primitives
   04. Buttons & forms
   05. Header / nav
   06. Mobile menu
   07. Hero
   08. Section header & grid
   09. Cards
   10. Sliders
   11. Filter tabs
   12. Pagination
   13. Detail page
   14. Player & report
   15. Episodes
   16. Search / request / 404
   17. Person / country
   18. Footer
   19. Breadcrumb / notification / popup
   20. Trailer modal
   21. Misc utilities
   22. Responsive overrides
   ============================================================= */

/* 01. Tokens
   ============================================================= */
:root {
    --gx-bg: #323744;
    --gx-bg-2: #2b303b;
    --gx-bg-3: #272b35;
    --gx-card: #1d212c;
    --gx-card-hi: #262b38;
    --gx-line: #2a3040;
    --gx-line-2: #353c4d;
    --gx-text: #f6f7fa;
    --gx-text-2: #d8dce5;
    --gx-muted: #9aa1ad;
    --gx-fade: #5a6273;
    --gx-accent: #ff6118;
    --gx-accent-2: #ff7833;
    --gx-warn: #f5b042;
    --gx-good: #2ec27e;
    --gx-bad: #e2453c;
    --gx-radius-sm: 4px;
    --gx-radius: 6px;
    --gx-radius-lg: 12px;
    --gx-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    --gx-shadow-soft: 0 2px 8px rgba(0, 0, 0, .25);
    --gx-step: 14px;
    --gx-step-lg: 28px;
    --gx-trans: 180ms ease;
    --gx-shell: 1280px;
    --gx-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --gx-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* 02. Reset & base
   ============================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--gx-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--gx-text);
    background: var(--gx-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--gx-trans);
}

a:hover {
    color: var(--gx-accent);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: inherit;
}

input,
select,
textarea {
    font-family: inherit;
}

::selection {
    background: var(--gx-accent);
    color: #fff;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--gx-accent);
    color: #fff;
    padding: 8px 12px;
    z-index: 9999;
}

.skip-link:focus {
    top: 0;
}

/* 03. Layout primitives
   ============================================================= */
.gx-shell {
    width: 100%;
    max-width: var(--gx-shell);
    margin: 0 auto;
    padding: 0 24px;
}

.container {
    width: 100%;
    max-width: var(--gx-shell);
    margin: 0 auto;
    padding: 0 24px;
}

.gx-section {
    padding: 32px 0 8px;
}

.section {
    padding: 32px 0 8px;
}

main {
    min-height: 60vh;
}

/* 04. Buttons & forms
   ============================================================= */
.gx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--gx-radius);
    border: 1px solid transparent;
    transition: background var(--gx-trans), border-color var(--gx-trans), color var(--gx-trans), transform var(--gx-trans);
    text-align: center;
    cursor: pointer;
}

.gx-btn--primary {
    background: var(--gx-accent);
    color: #fff;
}

.gx-btn--primary:hover {
    background: var(--gx-accent-2);
    color: #fff;
}

.gx-btn--ghost {
    background: transparent;
    color: var(--gx-text-2);
    border-color: var(--gx-line-2);
}

.gx-btn--ghost:hover {
    border-color: var(--gx-accent);
    color: var(--gx-accent);
}

.gx-btn--pill {
    border-radius: 999px;
    padding: 10px 24px;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--gx-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--gx-trans), border-color var(--gx-trans);
}

.btn-primary {
    background: var(--gx-accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--gx-accent-2);
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: var(--gx-text-2);
    border-color: var(--gx-line-2);
}

.btn-secondary:hover {
    border-color: var(--gx-accent);
    color: var(--gx-accent);
}

.btn-sm {
    padding: 8px 14px;
    font-size: 12px;
}

.gx-input,
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--gx-bg-3);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    color: var(--gx-text);
    font-size: 14px;
    transition: border-color var(--gx-trans);
}

.gx-input:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: 0;
    border-color: var(--gx-accent);
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gx-text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.form-group {
    margin-bottom: 16px;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* 05. Header / nav
   ============================================================= */
.gx-topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    background: #2B303B;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.gx-topbar__row {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 84px;
    max-width: none;
    width: 100%;
    padding: 0 28px;
}

.gx-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 8px;
    font-family: var(--gx-font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--gx-text);
    flex: 0 0 auto;
}

.gx-brand img {
    height: 56px;
    width: auto;
}

.gx-brand:hover {
    color: var(--gx-text);
}

.gx-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1 1 auto;
}

.gx-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gx-text-2);
    border-radius: var(--gx-radius);
    transition: color var(--gx-trans), background var(--gx-trans);
}

.gx-nav__link:hover,
.gx-nav__link.is-current {
    color: var(--gx-text);
    background: rgba(255, 255, 255, .05);
}

.gx-toolset {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gx-search {
    display: flex;
    align-items: center;
    background: var(--gx-bg-3);
    border: 1px solid var(--gx-line);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color var(--gx-trans);
}

.gx-search:focus-within {
    border-color: var(--gx-accent);
}

.gx-search__input {
    width: 200px;
    padding: 9px 16px;
    border: 0;
    background: transparent;
    color: var(--gx-text);
    font-size: 13px;
}

.gx-search__input::placeholder {
    color: var(--gx-fade);
}

.gx-search__input:focus {
    outline: 0;
}

.gx-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    color: #fff;
    background: var(--gx-accent);
    flex-shrink: 0;
    transition: background var(--gx-trans);
}

.gx-search__btn:hover {
    background: var(--gx-accent-2);
}

.gx-contact {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    margin-left: 4px;
    color: var(--gx-text);
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--gx-line-2);
    transition: background var(--gx-trans), border-color var(--gx-trans), color var(--gx-trans);
}

.gx-contact:hover {
    background: var(--gx-accent);
    border-color: var(--gx-accent);
    color: #fff;
}

.gx-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--gx-radius);
    color: var(--gx-text-2);
    transition: color var(--gx-trans), background var(--gx-trans);
}

.gx-icon-btn:hover {
    color: var(--gx-accent);
    background: rgba(255, 255, 255, .05);
}

.gx-burger {
    display: none;
}

/* 06. Mobile menu
   ============================================================= */
.gx-drawer {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 14, .96);
    backdrop-filter: blur(8px);
    z-index: 70;
    padding: 80px 24px 24px;
    transform: translateY(-100%);
    transition: transform 280ms ease;
    overflow-y: auto;
}

.gx-drawer.is-shown {
    transform: translateY(0);
}

.gx-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gx-drawer__link {
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gx-text);
    border-radius: var(--gx-radius);
    border: 1px solid var(--gx-line);
    background: var(--gx-card);
}

.gx-drawer__search {
    margin-top: 18px;
}

.gx-drawer__search form {
    display: flex;
    gap: 8px;
}

.gx-drawer__search input {
    flex: 1;
    padding: 12px 14px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    color: var(--gx-text);
}

.gx-drawer__search button {
    padding: 0 18px;
    background: var(--gx-accent);
    border-radius: var(--gx-radius);
    color: #fff;
}

/* 07. Hero
   ============================================================= */
.gx-hero {
    position: relative;
    width: 100%;
    margin-top: 0;
    margin-bottom: 32px;
}

.gx-hero__frame {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    background: linear-gradient(135deg, #2c3440, #1a2030);
}

.gx-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.gx-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0;
    transition: opacity 600ms ease;
}

.gx-hero__bg.is-visible {
    opacity: 1;
}

.gx-hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 16, 22, .97) 0%, rgba(13, 16, 22, .9) 24%, rgba(13, 16, 22, .5) 50%, rgba(13, 16, 22, .12) 72%, rgba(13, 16, 22, .35) 100%),
        linear-gradient(180deg, rgba(13, 16, 22, .35) 0%, rgba(13, 16, 22, 0) 28%, rgba(13, 16, 22, .55) 100%);
}

.gx-hero__stage {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 460px;
}

.gx-hero__inner {
    max-width: 540px;
    padding: 32px 0;
}

.gx-hero__lede {
    margin: 0 0 24px;
    font-family: var(--gx-font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--gx-text);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.gx-hero__lede em {
    font-style: normal;
    color: var(--gx-accent);
    font-weight: 800;
}

.gx-hero__form {
    display: flex;
    gap: 0;
    max-width: 420px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.gx-hero__form input {
    flex: 1;
    padding: 13px 16px;
    border: 0;
    color: var(--gx-text);
    font-size: 13px;
    background: rgba(20, 24, 31, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    border-right: 0;
    border-radius: 4px 0 0 4px;
}

.gx-hero__form input::placeholder {
    color: var(--gx-fade);
}

.gx-hero__form input:focus {
    outline: 0;
    border-color: var(--gx-accent);
}

.gx-hero__form button {
    padding: 13px 20px;
    background: var(--gx-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 4px 4px 0;
    transition: background var(--gx-trans);
}

.gx-hero__form button:hover {
    background: var(--gx-accent-2);
}

.gx-hero__viral {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gx-text);
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.gx-hero__spark {
    font-size: 14px;
}

/* Featured card mini-carousel with stacked nav (bottom-right) */
.gx-hero__featured {
    position: absolute;
    right: max(20px, calc((100% - var(--gx-shell)) / 2 + 20px));
    bottom: 24px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    z-index: 5;
}

.gx-hero__fcard {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .97);
    color: #181818;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    max-width: 240px;
    text-decoration: none;
}

.gx-hero__fcard.is-visible {
    display: flex;
}

.gx-hero__fcard img {
    width: 40px;
    height: 58px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 auto;
}

.gx-hero__fcard-info {
    min-width: 0;
}

.gx-hero__fcard-info strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #181818;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.gx-hero__fcard-info span {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #666;
}

.gx-hero__fnav-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gx-hero__fnav {
    flex: 1;
    width: 30px;
    background: rgba(255, 255, 255, .95);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    transition: background var(--gx-trans), color var(--gx-trans);
}

.gx-hero__fnav:hover {
    background: var(--gx-accent);
    color: #fff;
}

@keyframes gx-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

/* 08. Section header & grid
   ============================================================= */
.gx-sechead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 14px;
}

.gx-sechead__title {
    margin: 0;
    font-family: var(--gx-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--gx-text);
    letter-spacing: -.005em;
}

.gx-sechead__more {
    font-size: 12px;
    font-weight: 600;
    color: var(--gx-muted);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--gx-line);
}

.gx-sechead__more:hover {
    color: var(--gx-accent);
    border-color: var(--gx-accent);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 14px;
}

.section-title {
    margin: 0;
    font-family: var(--gx-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--gx-text);
    letter-spacing: -.01em;
}

.section-title-center {
    text-align: center;
    width: 100%;
}

.gx-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.gx-more-row {
    display: flex;
    justify-content: center;
    margin: 22px 0 8px;
}

.gx-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gx-text-2);
    border: 1px solid var(--gx-line-2);
    border-radius: 999px;
    transition: all var(--gx-trans);
}

.gx-more:hover {
    border-color: var(--gx-accent);
    color: var(--gx-accent);
    transform: translateY(-1px);
}

/* 09. Cards
   ============================================================= */
.content-card,
.gx-card {
    position: relative;
}

.content-card a,
.gx-card a {
    display: block;
    color: inherit;
}

.card-poster,
.gx-card__poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--gx-bg-3);
    box-shadow: var(--gx-shadow-soft);
}

.card-poster img,
.gx-card__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

.content-card:hover .card-poster img,
.gx-card:hover .gx-card__poster img {
    transform: scale(1.04);
}

.card-badges,
.gx-card__badges {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 2;
}

.quality-badge,
.gx-badge--type {
    display: inline-block;
    padding: 3px 7px;
    background: var(--gx-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: .04em;
}

.rating-badge,
.gx-badge--rate {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    background: rgba(0, 0, 0, .76);
    color: #f5b042;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    backdrop-filter: blur(4px);
}

.episode-badge,
.gx-badge--ep {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 3px 7px;
    background: rgba(0, 0, 0, .76);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    z-index: 2;
}

.card-play-overlay,
.gx-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .8) 100%);
    opacity: 0;
    transition: opacity var(--gx-trans);
    z-index: 3;
}

.content-card:hover .card-play-overlay,
.gx-card:hover .gx-card__hover {
    opacity: 1;
}

.play-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gx-accent);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(255, 97, 24, .5);
}

.play-icon svg {
    width: 22px;
    height: 22px;
    margin-left: 3px;
}

.card-info,
.gx-card__info {
    padding: 8px 2px 4px;
    text-align: left;
}

.card-title,
.gx-card__title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gx-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-year,
.gx-card__meta {
    display: block;
    font-size: 11px;
    color: var(--gx-muted);
    font-weight: 500;
}

/* The hover overlay info inside card (for goku style) */
.gx-card__hover-info {
    position: absolute;
    bottom: 14px;
    left: 12px;
    right: 12px;
    text-align: center;
}

.gx-card__hover-info .gx-card__title {
    color: #fff;
    margin-bottom: 4px;
}

.gx-card__hover-info .gx-card__meta {
    color: rgba(255, 255, 255, .8);
}

/* 10. Sliders
   ============================================================= */
.slider-container {
    position: relative;
}

.content-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 0 14px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.content-slider::-webkit-scrollbar {
    display: none;
}

.content-slider > * {
    flex: 0 0 calc((100% - 14px * 6) / 7);
    scroll-snap-align: start;
    min-width: 0;
}

.slider-prev,
.slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(13, 16, 22, .85);
    border: 1px solid var(--gx-line);
    color: var(--gx-text);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--gx-trans);
    opacity: 0;
}

.slider-container:hover .slider-prev,
.slider-container:hover .slider-next {
    opacity: 1;
}

.slider-prev {
    left: -12px;
}

.slider-next {
    right: -12px;
}

.slider-prev:hover,
.slider-next:hover {
    background: var(--gx-accent);
    border-color: var(--gx-accent);
}

.slider-prev[disabled],
.slider-next[disabled] {
    opacity: 0 !important;
    pointer-events: none;
}

.slider-prev svg,
.slider-next svg {
    width: 18px;
    height: 18px;
}

/* TOP 10 */
.top10-section {
    padding-top: 12px;
}

.top10-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 16px;
}

.top10-title {
    font-family: var(--gx-font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--gx-accent);
    letter-spacing: -.02em;
}

.top10-subtitle {
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-size: 11px;
    font-weight: 600;
    color: var(--gx-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.top10-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 14px 0 14px 56px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.top10-slider::-webkit-scrollbar {
    display: none;
}

.top10-item {
    position: relative;
    flex: 0 0 200px;
    scroll-snap-align: start;
}

.top10-number {
    position: absolute;
    left: -52px;
    bottom: -20px;
    font-family: var(--gx-font-display);
    font-size: 180px;
    font-weight: 900;
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 2px var(--gx-line-2);
    z-index: 1;
}

.top10-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--gx-card);
    z-index: 2;
}

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

/* 11. Filter tabs
   ============================================================= */
.filter-tabs {
    margin: 18px 0;
}

.filter-tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.filter-tab {
    padding: 7px 14px;
    background: var(--gx-bg-3);
    color: var(--gx-text-2);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    font-size: 12px;
    font-weight: 500;
    transition: all var(--gx-trans);
}

.filter-tab:hover {
    border-color: var(--gx-accent);
    color: var(--gx-accent);
}

.filter-tab.active {
    background: var(--gx-accent);
    border-color: var(--gx-accent);
    color: #fff;
}

.filter-dropdown {
    position: relative;
}

.filter-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
}

.filter-dropdown-toggle::-webkit-details-marker {
    display: none;
}

.filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--gx-card-hi);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    padding: 6px;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 30;
    box-shadow: var(--gx-shadow);
}

.filter-dropdown-item {
    display: block;
    padding: 7px 10px;
    color: var(--gx-text-2);
    font-size: 12px;
    border-radius: 4px;
}

.filter-dropdown-item:hover,
.filter-dropdown-item.active {
    background: var(--gx-accent);
    color: #fff;
}

/* 12. Pagination
   ============================================================= */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px 0 16px;
}

.pagination__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination__item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    color: var(--gx-text-2);
    border-radius: var(--gx-radius);
    font-size: 13px;
    font-weight: 600;
    transition: background var(--gx-trans), border-color var(--gx-trans), color var(--gx-trans);
}

.pagination__link:hover {
    border-color: var(--gx-accent);
    color: var(--gx-accent);
}

.pagination__link--active {
    background: var(--gx-accent);
    border-color: var(--gx-accent);
    color: #fff;
}

.pagination__link--active:hover {
    color: #fff;
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    color: var(--gx-muted);
    font-size: 13px;
}

/* 13. Detail page
   ============================================================= */
.page-detail {
    background: var(--gx-bg);
}

.gx-back {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.gx-back__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.gx-back__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    opacity: .35;
    filter: blur(2px);
}

.gx-back__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 24, 31, .65) 0%, rgba(20, 24, 31, .98) 100%);
}

.gx-back__inner {
    position: relative;
    padding: 56px 0 36px;
}

.gx-detail {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: flex-start;
}

.gx-detail__poster {
    border-radius: var(--gx-radius);
    overflow: hidden;
    background: var(--gx-card);
    box-shadow: var(--gx-shadow);
    aspect-ratio: 2 / 3;
}

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

.gx-detail__poster-actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gx-detail__main h1 {
    font-family: var(--gx-font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 6px;
    letter-spacing: -.015em;
}

.gx-detail__sub {
    margin: 0 0 14px;
    color: var(--gx-muted);
    font-size: 14px;
    font-style: italic;
}

.gx-pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.gx-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--gx-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gx-text-2);
}

.gx-pill--type {
    background: var(--gx-accent);
    border-color: var(--gx-accent);
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 11px;
}

.gx-pill--rate {
    color: var(--gx-warn);
}

.gx-pill--rate svg {
    fill: var(--gx-warn);
}

.gx-pill--status {
    background: rgba(46, 194, 126, .15);
    color: var(--gx-good);
    border-color: rgba(46, 194, 126, .3);
}

.gx-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.gx-genre {
    padding: 4px 10px;
    background: var(--gx-bg-3);
    border: 1px solid var(--gx-line);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--gx-text-2);
    transition: all var(--gx-trans);
}

.gx-genre:hover {
    background: var(--gx-accent);
    border-color: var(--gx-accent);
    color: #fff;
}

.gx-summary {
    color: var(--gx-text-2);
    line-height: 1.65;
    margin-bottom: 20px;
    font-size: 14px;
}

.gx-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin-bottom: 18px;
}

.gx-info__item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    font-size: 13px;
    align-items: baseline;
}

.gx-info__label {
    color: var(--gx-muted);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}

.gx-info__value {
    color: var(--gx-text-2);
}

.gx-info__value a {
    color: var(--gx-text);
}

.gx-info__value a:hover {
    color: var(--gx-accent);
}

.gx-info__row--full {
    grid-column: 1 / -1;
}

.gx-mobile-actions {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

/* 14. Player & report
   ============================================================= */
.watch-section {
    padding: 18px 0 28px;
}

.player-hidden {
    display: none;
}

.player-hidden:target,
.player-hidden.is-shown {
    display: block;
}

.player-container {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--gx-radius);
    overflow: hidden;
    box-shadow: var(--gx-shadow);
}

.gx-player .player-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 2;
}

.gx-player .player-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .75;
    transition: opacity var(--gx-trans);
}

.gx-player .player-backdrop:hover img {
    opacity: .6;
}

.player-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--gx-accent);
    color: #fff;
    box-shadow: 0 8px 28px rgba(255, 97, 24, .55);
    transition: transform var(--gx-trans);
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.player-play-btn svg {
    margin-left: 5px;
}

.player-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: var(--gx-muted);
    z-index: 4;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gx-line);
    border-top-color: var(--gx-accent);
    border-radius: 50%;
    animation: gx-spin 800ms linear infinite;
}

@keyframes gx-spin {
    to { transform: rotate(360deg); }
}

.player-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.server-select {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
}

.server-hint {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--gx-muted);
    font-size: 13px;
}

.server-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.server-tab {
    padding: 9px 18px;
    background: var(--gx-card);
    border: 1px solid transparent;
    color: var(--gx-text-2);
    border-radius: var(--gx-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--gx-trans), color var(--gx-trans);
}

.server-tab:hover {
    background: var(--gx-card-hi);
    color: var(--gx-text);
}

.server-tab.active {
    background: var(--gx-accent);
    color: #fff;
}

.server-tab.active:hover {
    background: var(--gx-accent-2);
    color: #fff;
}

.episode-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}

.episode-nav-btn {
    padding: 8px 14px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    color: var(--gx-text-2);
    border-radius: var(--gx-radius);
    font-size: 12px;
    font-weight: 500;
}

.episode-nav-btn:hover:not(:disabled) {
    border-color: var(--gx-accent);
    color: var(--gx-accent);
}

.episode-nav-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.episode-nav-current {
    font-size: 12px;
    color: var(--gx-muted);
}

.report-section {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
}

.report-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gx-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--gx-trans);
}

.report-toggle:hover {
    color: var(--gx-bad);
}

.report-form {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.report-form select,
.report-form .report-textarea {
    flex: 1 1 200px;
    padding: 9px 14px;
    background: var(--gx-card);
    border: 1px solid transparent;
    color: var(--gx-text);
    border-radius: var(--gx-radius);
    font-size: 13px;
    font-weight: 500;
    transition: background var(--gx-trans);
}

.report-form select:hover,
.report-form .report-textarea:hover {
    background: var(--gx-card-hi);
}

.report-form select:focus,
.report-form .report-textarea:focus {
    outline: 0;
    border-color: var(--gx-accent);
}

.report-submit-btn {
    padding: 9px 18px;
    background: var(--gx-accent);
    color: #fff;
    border-radius: var(--gx-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--gx-trans);
}

.report-submit-btn:hover {
    background: var(--gx-accent-2);
}

.d-none {
    display: none !important;
}

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

/* 15. Episodes
   ============================================================= */
.episodes-section {
    padding: 18px 0 28px;
}

.episodes-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.season-select {
    padding: 9px 14px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    color: var(--gx-text);
    border-radius: var(--gx-radius);
    font-size: 13px;
    min-width: 180px;
}

.episode-search {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
}

.episode-search svg {
    color: var(--gx-muted);
    flex-shrink: 0;
}

.episode-search input {
    flex: 1;
    padding: 9px 0;
    background: transparent;
    border: 0;
    color: var(--gx-text);
    font-size: 13px;
}

.episode-search input:focus {
    outline: 0;
}

.season-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--gx-muted);
    font-size: 12px;
    font-weight: 500;
}

.episode-count {
    margin-left: auto;
    color: var(--gx-fade);
}

.episode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}

.episode-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all var(--gx-trans);
}

.episode-item:not(.episode-upcoming):hover {
    border-color: var(--gx-accent);
    background: var(--gx-card-hi);
}

.episode-item.is-current {
    border-color: var(--gx-accent);
    background: rgba(255, 97, 24, .12);
}

.episode-num {
    flex: 0 0 32px;
    font-family: var(--gx-font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--gx-muted);
    text-align: center;
}

.episode-item:hover:not(.episode-upcoming) .episode-num,
.episode-item.is-current .episode-num {
    color: var(--gx-accent);
}

.episode-info {
    flex: 1;
    min-width: 0;
}

.episode-title {
    display: block;
    font-size: 13px;
    color: var(--gx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.episode-description {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--gx-muted);
}

.episode-airs-label {
    color: var(--gx-warn);
}

.episode-play {
    color: var(--gx-muted);
    flex-shrink: 0;
}

.episode-item:hover:not(.episode-upcoming) .episode-play {
    color: var(--gx-accent);
}

.episode-upcoming {
    opacity: .5;
    cursor: not-allowed;
}

.text-muted-padded {
    padding: 16px;
    color: var(--gx-muted);
    text-align: center;
}

/* 16. Search / request / 404
   ============================================================= */
.search-page {
    padding: 30px 0 30px;
}

.search-empty-state {
    text-align: center;
    padding: 48px 16px;
    max-width: 640px;
    margin: 0 auto;
}

.search-hero-icon {
    margin: 0 auto 14px;
    color: var(--gx-muted);
}

.search-empty-state h1 {
    font-family: var(--gx-font-display);
    font-size: 26px;
    margin: 0 0 6px;
}

.search-empty-state p {
    color: var(--gx-muted);
    margin: 0 0 22px;
}

.search-form {
    max-width: 640px;
    margin: 0 auto;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    margin-bottom: 12px;
}

.search-input-wrap .search-icon {
    color: var(--gx-muted);
    flex-shrink: 0;
}

.search-input-wrap input {
    flex: 1;
    padding: 12px 0;
    background: transparent;
    border: 0;
    color: var(--gx-text);
    font-size: 14px;
}

.search-input-wrap input:focus {
    outline: 0;
}

.search-type-filter {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.search-type-option {
    padding: 7px 14px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    color: var(--gx-text-2);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--gx-trans);
}

.search-type-option input {
    display: none;
}

.search-type-option.active {
    background: var(--gx-accent);
    border-color: var(--gx-accent);
    color: #fff;
}

.search-header {
    margin-bottom: 18px;
}

.search-results-count {
    color: var(--gx-muted);
    font-size: 13px;
    margin: 14px 0 0;
}

.search-no-results {
    text-align: center;
    padding: 40px 16px;
    color: var(--gx-muted);
}

.search-no-results p {
    margin: 4px 0;
}

.search-browse-links {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* request */
.request-page {
    padding: 30px 0;
}

.rq-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 28px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius-lg);
    padding: 28px;
}

.rq-info-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 97, 24, .12);
    color: var(--gx-accent);
    border-radius: 50%;
    margin-bottom: 14px;
}

.rq-info-title {
    font-family: var(--gx-font-display);
    font-size: 22px;
    margin: 0 0 8px;
}

.rq-info-desc {
    color: var(--gx-muted);
    line-height: 1.55;
    margin: 0 0 22px;
}

.rq-howto-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gx-muted);
    margin: 0 0 10px;
}

.rq-steps {
    margin: 0 0 14px;
    padding-left: 20px;
}

.rq-step {
    color: var(--gx-text-2);
    margin-bottom: 6px;
    font-size: 13px;
}

.rq-howto-note {
    font-size: 12px;
    color: var(--gx-fade);
    margin: 0;
}

.rq-row {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 14px;
}

.rq-required {
    color: var(--gx-bad);
}

.rq-optional {
    color: var(--gx-fade);
    font-weight: 400;
    text-transform: lowercase;
    font-size: 11px;
}

.rq-helper-links {
    margin-top: 6px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.rq-helper-link {
    font-size: 11px;
    color: var(--gx-muted);
}

.form-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--gx-accent);
    color: #fff;
    border-radius: var(--gx-radius);
    font-weight: 600;
    font-size: 13px;
    margin-top: 6px;
}

.form-submit:hover {
    background: var(--gx-accent-2);
}

.alert {
    padding: 12px 14px;
    border-radius: var(--gx-radius);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.alert-success {
    background: rgba(46, 194, 126, .12);
    color: var(--gx-good);
    border: 1px solid rgba(46, 194, 126, .3);
}

.alert-error {
    background: rgba(226, 69, 60, .12);
    color: var(--gx-bad);
    border: 1px solid rgba(226, 69, 60, .3);
}

/* 404 */
.error-page {
    text-align: center;
    padding: 70px 16px;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.error-code {
    font-family: var(--gx-font-display);
    font-size: 110px;
    font-weight: 900;
    line-height: 1;
    color: var(--gx-accent);
    margin-bottom: 8px;
    letter-spacing: -.04em;
}

.error-title {
    font-family: var(--gx-font-display);
    font-size: 26px;
    margin: 0 0 12px;
}

.error-message {
    color: var(--gx-muted);
    max-width: 480px;
    margin: 0 0 24px;
    line-height: 1.5;
}

.error-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* 17. Person / country
   ============================================================= */
.person-header {
    text-align: center;
    margin: 18px 0 24px;
}

.person-role-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--gx-bg-3);
    border: 1px solid var(--gx-line);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gx-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}

.person-name {
    font-family: var(--gx-font-display);
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px;
}

.person-intro {
    color: var(--gx-muted);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.genre-pill {
    display: inline-block;
    padding: 4px 12px;
    background: var(--gx-bg-3);
    border: 1px solid var(--gx-line);
    border-radius: 999px;
    font-size: 11px;
    color: var(--gx-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* 18. Footer
   ============================================================= */
.gx-footer {
    background: var(--gx-bg-2);
    margin-top: 56px;
    padding: 40px 0 22px;
    border-top: 1px solid var(--gx-line);
}

.gx-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, auto);
    gap: 32px;
    margin-bottom: 28px;
}

.gx-footer__col h4 {
    font-family: var(--gx-font-display);
    font-size: 13px;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gx-text);
}

.gx-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gx-footer__col li {
    margin-bottom: 6px;
}

.gx-footer__col a {
    color: var(--gx-muted);
    font-size: 13px;
}

.gx-footer__col a:hover {
    color: var(--gx-accent);
}

.gx-footer__brand {
    text-align: right;
}

.gx-footer__brand img {
    width: 240px;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    opacity: 1;
}

.gx-footer__brand-mark {
    font-family: var(--gx-font-display);
    font-size: 42px;
    font-weight: 900;
    color: var(--gx-accent);
    letter-spacing: -.02em;
    line-height: 1;
}

.gx-footer__bottom {
    border-top: 1px solid var(--gx-line);
    padding-top: 18px;
    color: var(--gx-fade);
    font-size: 12px;
    text-align: center;
}

.gx-footer__disclaim {
    color: var(--gx-fade);
    font-size: 12px;
    line-height: 1.55;
    max-width: 800px;
    margin: 0 auto 14px;
    text-align: center;
}

/* 19. Breadcrumb / notification / popup
   ============================================================= */
.breadcrumb {
    padding: 14px 0 0;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--gx-fade);
    font-size: 12px;
}

.breadcrumb__item:not(:last-child)::after {
    content: '/';
    margin-left: 6px;
    color: var(--gx-fade);
}

.breadcrumb__link {
    color: var(--gx-muted);
}

.breadcrumb__link:hover {
    color: var(--gx-accent);
}

.notification-bar {
    position: relative;
    background: var(--gx-accent);
    color: #fff;
}

.notification-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    flex-wrap: wrap;
}

.notification-icon {
    flex-shrink: 0;
}

.notification-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, .25);
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.notification-close {
    color: rgba(255, 255, 255, .8);
    flex-shrink: 0;
}

.notification-close:hover {
    color: #fff;
}

.notification-dialog {
    border: 0;
    border-radius: var(--gx-radius-lg);
    padding: 0;
    background: var(--gx-card);
    color: var(--gx-text);
    max-width: 520px;
    width: 92%;
}

.notification-dialog::backdrop {
    background: rgba(0, 0, 0, .7);
}

.notification-dialog-content {
    padding: 22px;
}

.notification-dialog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.notification-dialog-header h3 {
    flex: 1;
    margin: 0;
    font-family: var(--gx-font-display);
    font-size: 16px;
}

.notification-dialog-close {
    color: var(--gx-muted);
}

.notification-dialog-body p {
    color: var(--gx-text-2);
    line-height: 1.55;
    margin: 0;
}

.notification-dialog-footer {
    margin-top: 16px;
}

.notification-dialog-link {
    color: var(--gx-accent);
    font-weight: 600;
    font-size: 13px;
}

/* 20. Trailer modal
   ============================================================= */
.cb-trailer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.cb-trailer-overlay.visible {
    display: flex;
}

.cb-trailer-glass {
    width: 100%;
    max-width: 960px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius-lg);
    overflow: hidden;
    box-shadow: var(--gx-shadow);
}

.cb-trailer-dismiss {
    width: 100%;
    padding: 10px 14px;
    background: var(--gx-bg-3);
    color: var(--gx-text-2);
    text-align: right;
    font-size: 12px;
    border-radius: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.cb-trailer-dismiss span {
    font-size: 18px;
}

.cb-trailer-frame {
    aspect-ratio: 16 / 9;
}

.cb-trailer-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* 21. Misc utilities
   ============================================================= */
.dp-status-returning-series,
.dp-status-in-production {
    background: rgba(46, 194, 126, .15);
    color: var(--gx-good);
}

.content-lazy {
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
}

/* Landing page (index.php) styles */
.landing-hero {
    position: relative;
    padding: 64px 24px 40px;
    text-align: center;
    overflow: hidden;
}

.landing-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.landing-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 97, 24, .15), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(46, 194, 126, .08), transparent 50%);
}

.landing-content {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.landing-headline {
    font-family: var(--gx-font-display);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -.02em;
}

.landing-subheadline {
    color: var(--gx-muted);
    font-size: 16px;
    margin: 0 0 26px;
}

.landing-search {
    margin: 0 0 18px;
}

.landing-search-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    padding: 4px 4px 4px 14px;
}

.landing-search-icon {
    color: var(--gx-muted);
}

.landing-search-input {
    flex: 1;
    padding: 12px 4px;
    background: transparent;
    border: 0;
    color: var(--gx-text);
    font-size: 14px;
}

.landing-search-input:focus {
    outline: 0;
}

.landing-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    background: var(--gx-accent);
    color: #fff;
    border-radius: var(--gx-radius);
    font-weight: 600;
    font-size: 13px;
}

.landing-search-btn:hover {
    background: var(--gx-accent-2);
}

.landing-browse {
    margin-top: 18px;
}

.landing-browse-label {
    display: block;
    color: var(--gx-fade);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}

.landing-browse-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.landing-browse-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: 999px;
    color: var(--gx-text-2);
    font-size: 12px;
    font-weight: 500;
}

.landing-browse-link:hover {
    border-color: var(--gx-accent);
    color: var(--gx-accent);
}

.landing-stats {
    padding: 28px 0;
    border-top: 1px solid var(--gx-line);
    border-bottom: 1px solid var(--gx-line);
    background: var(--gx-bg-2);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-number {
    font-family: var(--gx-font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--gx-accent);
}

.stat-label {
    font-size: 11px;
    color: var(--gx-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.landing-hot-today,
.landing-features,
.landing-faq,
.landing-seo-content {
    padding: 40px 0;
}

.hot-today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.hot-today-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    transition: all var(--gx-trans);
}

.hot-today-card:hover {
    border-color: var(--gx-accent);
    transform: translateY(-1px);
}

.hot-today-badge {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gx-accent);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
}

.hot-today-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--gx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-today-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    align-items: flex-end;
}

.hot-today-type {
    padding: 2px 6px;
    background: var(--gx-bg-3);
    border-radius: 3px;
    font-size: 9px;
    color: var(--gx-muted);
    text-transform: uppercase;
}

.hot-today-score {
    font-size: 11px;
    color: var(--gx-warn);
}

.hot-today-footer {
    text-align: center;
    margin: 0;
}

.hot-today-footer a {
    color: var(--gx-accent);
    font-weight: 600;
    font-size: 13px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.feature-card {
    padding: 24px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius-lg);
    text-align: center;
}

.feature-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 97, 24, .12);
    color: var(--gx-accent);
    border-radius: 50%;
}

.feature-title {
    font-family: var(--gx-font-display);
    font-size: 16px;
    margin: 0 0 8px;
}

.feature-desc {
    color: var(--gx-muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

.landing-faq-list {
    max-width: 720px;
    margin: 0 auto;
}

.landing-faq-item {
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    margin-bottom: 8px;
    padding: 14px 18px;
}

.landing-faq-question {
    cursor: pointer;
    font-family: var(--gx-font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--gx-text);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-faq-question::-webkit-details-marker {
    display: none;
}

.landing-faq-question::after {
    content: '+';
    font-size: 18px;
    color: var(--gx-muted);
}

.landing-faq-item[open] .landing-faq-question::after {
    content: '−';
}

.landing-faq-answer {
    margin: 12px 0 0;
    color: var(--gx-text-2);
    font-size: 13px;
    line-height: 1.65;
}

.landing-faq-answer a {
    color: var(--gx-accent);
}

.seo-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    color: var(--gx-text-2);
    line-height: 1.75;
}

.seo-content-wrapper h2 {
    font-family: var(--gx-font-display);
    font-size: 20px;
    margin: 28px 0 12px;
    color: var(--gx-text);
}

.seo-content-wrapper p {
    color: var(--gx-text-2);
    margin: 0 0 14px;
    font-size: 14px;
}

.seo-feature-list {
    padding-left: 18px;
    margin: 0;
}

.seo-feature-list li {
    color: var(--gx-text-2);
    margin-bottom: 6px;
    font-size: 14px;
}

.h1-brand {
    color: var(--gx-accent);
}

.home-page-heading {
    font-family: var(--gx-font-display);
    font-size: 18px;
    color: var(--gx-muted);
    font-weight: 500;
    margin: 24px 0 0;
}

/* 22. Responsive overrides
   ============================================================= */
@media (max-width: 1180px) {
    .gx-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .content-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .content-slider > * {
        flex-basis: calc((100% - 14px * 5) / 6);
    }
}

@media (max-width: 980px) {
    .gx-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .content-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .content-slider > * {
        flex-basis: calc((100% - 14px * 4) / 5);
    }
    .gx-detail {
        grid-template-columns: 200px 1fr;
    }
    .rq-layout {
        grid-template-columns: 1fr;
    }
    .gx-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .gx-footer__brand {
        grid-column: 1 / -1;
        text-align: center;
    }
    .gx-footer__brand img {
        margin: 0 auto;
    }
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .gx-nav {
        display: none;
    }
    .gx-burger {
        display: inline-flex;
    }
    .gx-search {
        display: none;
    }
    .gx-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .content-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .content-slider > * {
        flex-basis: calc((100% - 14px * 2) / 3);
    }
    .gx-hero__frame {
        min-height: 340px;
    }
    .gx-hero__stage {
        min-height: 340px;
    }
    .gx-hero__inner {
        padding: 24px 0;
    }
    .gx-hero__lede {
        font-size: 18px;
    }
    .gx-hero__featured {
        display: none;
    }
    .gx-detail {
        grid-template-columns: 1fr;
    }
    .gx-detail__poster {
        max-width: 220px;
        margin: 0 auto;
    }
    .gx-detail__poster-actions {
        display: none;
    }
    .gx-mobile-actions {
        display: flex;
    }
    .gx-info {
        grid-template-columns: 1fr;
    }
    .gx-info__item {
        grid-template-columns: 100px 1fr;
    }
    .top10-item {
        flex-basis: 140px;
    }
    .top10-number {
        left: -32px;
        bottom: -10px;
        font-size: 110px;
    }
    .top10-slider {
        padding-left: 36px;
    }
    .gx-detail__main h1 {
        font-size: 24px;
    }
    .landing-headline {
        font-size: 28px;
    }
    .rq-row {
        grid-template-columns: 1fr;
    }
    .episodes-header {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .gx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .content-slider > * {
        flex-basis: calc((100% - 12px) / 2);
    }
    .container, .gx-shell {
        padding: 0 14px;
    }
    .gx-hero__form {
        flex-direction: column;
        gap: 0;
    }
    .gx-hero__form input {
        border-radius: var(--gx-radius) var(--gx-radius) 0 0;
        border-right: 1px solid var(--gx-line);
    }
    .gx-hero__form button {
        border-radius: 0 0 var(--gx-radius) var(--gx-radius);
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Landing page — centered card variant (index.php)
   ============================================================= */
.gk-land {
    padding: 56px 0 64px;
}

.gk-land__card {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 28px 32px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius-lg);
    box-shadow: var(--gx-shadow-soft);
}

.gk-land__art {
    flex: 0 0 auto;
}

.gk-land__art img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 50%;
}

.gk-land__body {
    flex: 1;
    min-width: 0;
}

.gk-land__lede {
    margin: 0 0 18px;
    font-family: var(--gx-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--gx-text-2);
}

.gk-land__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    background: var(--gx-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--gx-radius);
    transition: background var(--gx-trans), transform var(--gx-trans);
}

.gk-land__cta:hover {
    background: var(--gx-accent-2);
    color: #fff;
    transform: translateY(-1px);
}

.gk-land__pitch {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 8px;
}

.gk-land__title {
    font-family: var(--gx-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gx-text);
    margin: 0 0 18px;
}

.gk-land__perks {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gk-land__perks li {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: var(--gx-text-2);
}

.gk-land__perks li::before {
    content: '–';
    margin-right: 6px;
    color: var(--gx-fade);
}

.gk-land__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.gk-land__links a {
    padding: 8px 16px;
    background: var(--gx-bg-3);
    border: 1px solid var(--gx-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gx-text-2);
    transition: all var(--gx-trans);
}

.gk-land__links a:hover {
    border-color: var(--gx-accent);
    color: var(--gx-accent);
}

.gk-land__seo {
    max-width: 720px;
    margin: 44px auto 0;
    text-align: center;
}

.gk-land__seo h2 {
    font-family: var(--gx-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--gx-text);
    margin: 0 0 12px;
}

.gk-land__seo p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--gx-muted);
    margin: 0 0 14px;
}

.gk-land__seo a {
    color: var(--gx-accent);
}

.gk-land__faq {
    max-width: 640px;
    margin: 44px auto 0;
    text-align: center;
}

.gk-land__faq-list {
    text-align: left;
    margin-top: 18px;
}

.gk-faq {
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    margin-bottom: 8px;
    padding: 14px 18px;
}

.gk-faq__q {
    cursor: pointer;
    list-style: none;
    font-family: var(--gx-font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--gx-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gk-faq__q::-webkit-details-marker {
    display: none;
}

.gk-faq__q::after {
    content: '+';
    font-size: 18px;
    color: var(--gx-muted);
}

.gk-faq[open] .gk-faq__q::after {
    content: '\2212';
}

.gk-faq__a {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--gx-text-2);
}

.gk-faq__a a {
    color: var(--gx-accent);
}

@media (max-width: 600px) {
    .gk-land__card {
        flex-direction: column;
        text-align: center;
        padding: 24px;
        gap: 18px;
    }
    .gk-land__cta {
        width: 100%;
        justify-content: center;
    }
}

/* Trending section — toggle + edge-to-edge grid (home.php)
   ============================================================= */
.gx-trend {
    padding: 28px 0 8px;
}

/* Break the inner shell out to near-full width so posters run edge to edge */
.gx-trend .gx-shell {
    max-width: none;
    padding: 0 32px;
}

.gx-trend__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.gx-trend__title {
    margin: 0;
    font-family: var(--gx-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--gx-text);
}

.gx-trend__tabs {
    display: flex;
    align-items: center;
    gap: 22px;
}

.gx-trend__tab {
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--gx-muted);
    background: none;
    border: 0;
    position: relative;
    transition: color var(--gx-trans);
}

.gx-trend__tab:hover {
    color: var(--gx-text);
}

.gx-trend__tab.is-on {
    color: var(--gx-text);
    font-weight: 600;
}

.gx-trend__tab.is-on::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--gx-accent);
    border-radius: 2px;
}

.gx-trend__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px;
}

/* Card: poster on top, dark info panel below */
.gx-tcard {
    display: block;
    color: inherit;
}

.gx-tcard__poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--gx-radius);
    overflow: hidden;
    background: var(--gx-bg-3);
    box-shadow: var(--gx-shadow-soft);
}

.gx-tcard__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

.gx-tcard:hover .gx-tcard__poster img {
    transform: scale(1.05);
}

.gx-tcard__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 7px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: .04em;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.gx-tcard__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .55) 100%);
    opacity: 0;
    transition: opacity var(--gx-trans);
    z-index: 1;
}

.gx-tcard__play svg {
    width: 44px;
    height: 44px;
    padding: 12px;
    color: #fff;
    background: var(--gx-accent);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(255, 97, 24, .5);
}

.gx-tcard:hover .gx-tcard__play {
    opacity: 1;
}

.gx-tcard__meta {
    padding: 10px 2px 4px;
}

.gx-tcard__title {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gx-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gx-tcard:hover .gx-tcard__title {
    color: var(--gx-accent);
}

.gx-tcard__sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--gx-muted);
}

.gx-tcard__rate {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--gx-text-2);
    flex: 0 0 auto;
}

@media (max-width: 1180px) {
    .gx-trend__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .gx-trend__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .gx-trend .gx-shell { padding: 0 20px; }
}

@media (max-width: 760px) {
    .gx-trend__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .gx-trend__title { font-size: 20px; }
}

@media (max-width: 480px) {
    .gx-trend__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gx-trend .gx-shell { padding: 0 14px; }
}

/* Filter bar — custom dark dropdowns (movie-list / series-list)
   ============================================================= */
.gx-filterbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 24px;
}

.gx-dd {
    flex: 1 1 0;
    min-width: 150px;
    position: relative;
}

.gx-dd__head {
    width: 100%;
    height: 100%;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 8px 38px 8px 14px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--gx-trans), background var(--gx-trans);
}

.gx-dd__head:hover {
    border-color: var(--gx-line-2);
}

.gx-dd.is-open .gx-dd__head {
    border-color: var(--gx-accent);
    background: var(--gx-bg-3);
}

.gx-dd__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gx-muted);
}

.gx-dd__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--gx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gx-dd__chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gx-muted);
    transition: transform var(--gx-trans), color var(--gx-trans);
    pointer-events: none;
}

.gx-dd.is-open .gx-dd__chev {
    transform: translateY(-50%) rotate(180deg);
    color: var(--gx-accent);
}

.gx-dd__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--gx-card-hi);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    box-shadow: var(--gx-shadow);
    max-height: 280px;
    overflow-y: auto;
    z-index: 40;
    display: none;
}

.gx-dd.is-open .gx-dd__menu {
    display: block;
}

.gx-dd__opt {
    padding: 9px 12px;
    font-size: 13px;
    color: var(--gx-text-2);
    border-radius: 5px;
    cursor: pointer;
    transition: background var(--gx-trans), color var(--gx-trans);
}

.gx-dd__opt:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--gx-text);
}

.gx-dd__opt.is-sel {
    background: var(--gx-accent);
    color: #fff;
    font-weight: 600;
}

.gx-dd__menu::-webkit-scrollbar {
    width: 8px;
}

.gx-dd__menu::-webkit-scrollbar-thumb {
    background: var(--gx-line-2);
    border-radius: 4px;
}

.gx-filterbar__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 28px;
    min-height: 56px;
    background: var(--gx-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--gx-radius);
    cursor: pointer;
    transition: background var(--gx-trans), transform var(--gx-trans);
}

.gx-filterbar__btn:hover {
    background: var(--gx-accent-2);
}

.gx-filterbar__btn:active {
    transform: translateY(1px);
}

/* No-JS fallback form */
.gx-filterbar-fallback {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 24px;
}

.gx-filterbar-fallback select,
.gx-filterbar-fallback button {
    padding: 12px 14px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
    color: var(--gx-text);
    font-family: inherit;
    font-size: 14px;
}

.gx-filterbar-fallback button {
    background: var(--gx-accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 760px) {
    .gx-dd {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }
    .gx-filterbar__btn {
        flex: 1 1 100%;
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    .gx-dd {
        flex: 1 1 100%;
    }
}


/* Movie/Series detail — player-first layout
   ============================================================= */
.gx-watch {
    padding: 18px 0 8px;
}

.gx-player {
    margin-bottom: 18px;
}

.gx-player .player-container {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--gx-radius);
    overflow: hidden;
    box-shadow: var(--gx-shadow);
}

.gx-player__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--gx-good);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(46, 194, 126, .5);
    transition: transform var(--gx-trans), background var(--gx-trans);
    z-index: 3;
}

.gx-player__btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: #34d98c;
}

.gx-player__btn svg {
    margin-left: 4px;
}

/* Info panel */
.gx-dinfo {
    display: grid;
    grid-template-columns: 170px 1fr 280px;
    gap: 24px;
    padding: 22px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius-lg);
    margin-bottom: 28px;
}

.gx-dinfo__poster {
    border-radius: var(--gx-radius);
    overflow: hidden;
    background: var(--gx-card);
    aspect-ratio: 2 / 3;
}

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

.gx-dinfo__title {
    font-family: var(--gx-font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--gx-text);
}

.gx-dinfo__stream {
    font-weight: 500;
    color: var(--gx-muted);
}

.gx-dinfo__trailer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    margin-bottom: 14px;
    background: #2b7de0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--gx-trans);
}

.gx-dinfo__trailer:hover {
    background: #1f6bc7;
}

.gx-dinfo__desc {
    font-size: 13px;
    font-style: italic;
    line-height: 1.6;
    color: var(--gx-muted);
    margin: 0 0 16px;
}

.gx-dinfo__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
}

.gx-dinfo__col p {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--gx-text-2);
    line-height: 1.5;
}

.gx-dinfo__k {
    color: var(--gx-muted);
    font-weight: 600;
    margin-right: 4px;
}

.gx-dinfo__col a {
    color: var(--gx-accent);
}

.gx-dinfo__col a:hover {
    text-decoration: underline;
}

.gx-dinfo__imdb {
    display: inline-block;
    padding: 1px 8px;
    background: #f5c518;
    color: #000 !important;
    font-weight: 700;
    border-radius: 3px;
    font-size: 12px;
}

/* Side: rating + CTAs */
.gx-dinfo__side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gx-dinfo__rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.gx-dinfo__score {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    background: var(--gx-bad);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    border-radius: var(--gx-radius-sm);
}

.gx-dinfo__stars-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gx-dinfo__rlabel {
    font-size: 11px;
    color: var(--gx-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.gx-dinfo__stars {
    display: inline-flex;
    gap: 1px;
}

.gx-dinfo__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    border-radius: var(--gx-radius);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--gx-trans), transform var(--gx-trans);
}

.gx-dinfo__cta--play {
    background: var(--gx-good);
    color: #fff;
}

.gx-dinfo__cta--play:hover {
    background: #34d98c;
    color: #fff;
}

.gx-dinfo__cta--alt {
    background: var(--gx-accent);
    color: #fff;
}

.gx-dinfo__cta--alt:hover {
    background: var(--gx-accent-2);
}

.gx-dinfo__cta--ghost {
    background: var(--gx-card);
    color: var(--gx-text-2);
}

.gx-dinfo__cta--ghost:hover {
    background: var(--gx-card-hi);
    color: var(--gx-text);
}

.gx-dinfo__cta:active {
    transform: translateY(1px);
}

/* Episodes section */
.gx-episodes {
    margin-bottom: 32px;
}

.gx-episodes .episodes-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.gx-episodes .season-select {
    padding: 10px 14px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    color: var(--gx-text);
    border-radius: var(--gx-radius);
    font-size: 13px;
    font-weight: 500;
    min-width: 200px;
    cursor: pointer;
}

.gx-episodes .episode-search {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-radius);
}

.gx-episodes .episode-search svg {
    color: var(--gx-muted);
    flex-shrink: 0;
}

.gx-episodes .episode-search input {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: 0;
    color: var(--gx-text);
    font-size: 13px;
}

.gx-episodes .episode-search input:focus {
    outline: 0;
}

.gx-episodes .episode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}

.gx-episodes .episode-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--gx-bg-2);
    border: 1px solid transparent;
    border-radius: var(--gx-radius);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background var(--gx-trans), border-color var(--gx-trans);
}

.gx-episodes .episode-item:not(.episode-upcoming):hover {
    background: var(--gx-card-hi);
    border-color: var(--gx-accent);
}

.gx-episodes .episode-item.is-current {
    border-color: var(--gx-accent);
    background: rgba(255, 97, 24, .12);
}

.gx-episodes .episode-num {
    flex: 0 0 30px;
    font-family: var(--gx-font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--gx-muted);
    text-align: center;
}

.gx-episodes .episode-item:not(.episode-upcoming):hover .episode-num,
.gx-episodes .episode-item.is-current .episode-num {
    color: var(--gx-accent);
}

.gx-episodes .episode-info {
    flex: 1;
    min-width: 0;
}

.gx-episodes .episode-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--gx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gx-episodes .episode-description {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--gx-muted);
}

.gx-episodes .episode-airs-label {
    color: var(--gx-warn);
}

.gx-episodes .episode-play {
    color: var(--gx-muted);
    flex-shrink: 0;
}

.gx-episodes .episode-item:not(.episode-upcoming):hover .episode-play {
    color: var(--gx-accent);
}

.gx-episodes .episode-upcoming {
    opacity: .5;
    cursor: not-allowed;
}

/* Episode nav under player */
.gx-player .episode-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}

/* Related heading bar */
.gx-related {
    margin-bottom: 32px;
}

.gx-related__head {
    margin-bottom: 16px;
}

.gx-related__title {
    display: inline-block;
    margin: 0;
    padding: 9px 18px;
    background: var(--gx-accent);
    color: #fff;
    font-family: var(--gx-font-display);
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--gx-radius);
}

@media (max-width: 980px) {
    .gx-dinfo {
        grid-template-columns: 140px 1fr;
    }
    .gx-dinfo__side {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .gx-dinfo__rating {
        margin-right: auto;
        margin-bottom: 0;
    }
    .gx-dinfo__cta {
        flex: 0 0 auto;
    }
}

@media (max-width: 600px) {
    .gx-dinfo {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .gx-dinfo__poster {
        max-width: 150px;
    }
    .gx-dinfo__facts {
        grid-template-columns: 1fr;
    }
    .gx-dinfo__side {
        flex-direction: column;
        align-items: stretch;
    }
    .gx-dinfo__cta {
        width: 100%;
    }
}