/*
Theme Name:  LexStreamCMS
Theme URI:   https://github.com/lexstreamcms
Author:      LexStream
Author URI:  #
Description: A high-performance video streaming WordPress theme powered by external REST API. Features click-to-play player, full admin control panel, dual light/dark mode, SEO-ready structured data, and zero local post storage.
Version:     2.2.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lexstreamcms
Tags:        streaming, video, dark-mode, api, responsive, custom-menu, custom-logo
*/

/* ============================================================
   DESIGN TOKEN SYSTEM — LexStreamCMS
   Palette: Deep navy base / electric indigo accent / soft amber highlight
   Signature: Iridescent "live indicator" glow on featured cards
   ============================================================ */

:root {
    /* --- Dark mode (default) --- */
    --clr-bg-primary:    #0d0f1a;   /* Deep navy — main background        */
    --clr-bg-secondary:  #141726;   /* Slightly lifted surface             */
    --clr-bg-card:       #1b1e30;   /* Card / panel background             */
    --clr-bg-elevated:   #242840;   /* Modals, dropdowns, tooltips         */
    --clr-border:        #2a2e47;   /* Subtle dividers                     */
    --clr-border-hover:  #3d4270;   /* Hover state borders                 */

    /* Accent system */
    --clr-accent:        #6c63ff;   /* Electric indigo — primary CTA       */
    --clr-accent-hover:  #8b84ff;   /* Lighter indigo on hover             */
    --clr-accent-muted:  rgba(108,99,255,0.15); /* Ghost bg for tags      */
    --clr-highlight:     #f0a500;   /* Amber — ratings, featured badge     */
    --clr-highlight-muted: rgba(240,165,0,0.12);
    --clr-danger:        #ff4d6d;   /* Error, delete, blocked              */
    --clr-success:       #22c55e;   /* Active, online, cached              */
    --clr-warning:       #f59e0b;   /* Warnings                            */

    /* Text */
    --clr-text-primary:  #e8eaf6;   /* Near-white — headings, titles       */
    --clr-text-secondary:#9fa3c0;   /* Subtext, meta, captions             */
    --clr-text-muted:    #5c6080;   /* Placeholders, disabled              */
    --clr-text-inverse:  #0d0f1a;   /* Text on light/accent backgrounds    */

    /* Signature glow — iridescent featured card ring */
    --glow-featured: 0 0 0 2px #6c63ff, 0 0 20px rgba(108,99,255,0.4), 0 0 40px rgba(240,165,0,0.15);
    --glow-accent:   0 0 12px rgba(108,99,255,0.5);

    /* Typography */
    --font-display: 'Syne', 'Helvetica Neue', sans-serif;     /* Bold, geometric — headings     */
    --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;/* Clean — body, labels, UI       */
    --font-mono:    ui-monospace, 'Cascadia Code', 'Fira Code', monospace; /* system-ui mono — JetBrains Mono removed from Fonts request */ /* Code, IDs, debug               */

    /* Type scale */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Layout */
    --container-max:  1400px;
    --container-wide: 1200px;
    --container-text: 780px;
    --sidebar-width:  280px;
    --header-height:  64px;

    /* Radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.6);

    /* Z-index layers */
    --z-below:   -1;
    --z-base:     0;
    --z-raised:   10;
    --z-overlay:  100;
    --z-drawer:   200;
    --z-modal:    300;
    --z-toast:    400;
    --z-header:   500;
}

/* Light mode override */
[data-theme="light"] {
    --clr-bg-primary:    #f5f6fa;
    --clr-bg-secondary:  #eceef5;
    --clr-bg-card:       #ffffff;
    --clr-bg-elevated:   #ffffff;
    --clr-border:        #dde0ee;
    --clr-border-hover:  #b8bcda;

    --clr-accent:        #5046e5;
    --clr-accent-hover:  #4037cc;
    --clr-accent-muted:  rgba(80,70,229,0.1);
    --clr-highlight:     #d97706;
    --clr-highlight-muted: rgba(217,119,6,0.1);

    --clr-text-primary:  #111827;
    --clr-text-secondary:#4b5280;
    --clr-text-muted:    #9ca3af;
    --clr-text-inverse:  #ffffff;

    --glow-featured: 0 0 0 2px #5046e5, 0 0 16px rgba(80,70,229,0.25);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.14);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--clr-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

ul, ol { list-style: none; }

button {
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: var(--font-body);
    font-size: var(--text-base);
}

:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.lx-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.lx-container--wide {
    max-width: var(--container-wide);
}

.lx-container--text {
    max-width: var(--container-text);
}

.lx-grid {
    display: grid;
    gap: var(--space-6);
}

.lx-grid--videos {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.lx-grid--featured {
    grid-template-columns: 2fr 1fr;
}

.lx-flex {
    display: flex;
    align-items: center;
}

.lx-flex--between {
    justify-content: space-between;
}

.lx-flex--wrap {
    flex-wrap: wrap;
}

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

/* ============================================================
   HEADER
   ============================================================ */

.lx-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-height);
    background: rgba(13,15,26,0.92);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border-bottom: 1px solid var(--clr-border);
    transition: background var(--transition-base);
}

[data-theme="light"] .lx-header {
    background: rgba(245,246,250,0.92);
}

.lx-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.lx-logo {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--clr-text-primary);
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.lx-logo__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--clr-accent);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 900;
}

/* Custom logo image uploaded via Customizer → Site Identity */
.lx-logo .custom-logo-link,
.custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.lx-logo .custom-logo,
.custom-logo {
    /* WordPress outputs inline width="1600" height="480" attributes on
       the img tag — those beat plain CSS. !important is required here
       to override the inline style/attribute specificity. */
    display: block !important;
    width: auto !important;         /* cancel the inline width="1600"  */
    height: auto !important;        /* cancel the inline height="480"  */
    max-height: 44px !important;    /* 44px → ~147px wide at 10:3 ratio */
    max-width: 320px !important;
    object-fit: contain !important;
}

/* Slightly smaller on the 56px mobile header */
@media (max-width: 768px) {
    .lx-logo .custom-logo,
    .custom-logo {
        max-height: 32px !important;
        max-width: 200px !important;
    }
}

.lx-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.lx-nav li,
.lx-drawer__nav li {
    list-style: none;
    display: contents;
}

.lx-nav a {
    color: var(--clr-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.lx-nav a:hover,
.lx-nav a.active {
    color: var(--clr-text-primary);
    background: var(--clr-bg-elevated);
}

.lx-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Search bar */
.lx-search {
    position: relative;
    display: flex;
    align-items: center;
}

.lx-search__input {
    width: 240px;
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8);
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    color: var(--clr-text-primary);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), width var(--transition-base);
}

.lx-search__input::placeholder { color: var(--clr-text-muted); }
.lx-search__input:focus { border-color: var(--clr-accent); width: 300px; outline: none; }

.lx-search__icon {
    position: absolute;
    left: var(--space-3);
    color: var(--clr-text-muted);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.lx-search__results {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-overlay);
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.lx-search__results.is-open { display: block; }

.lx-search__result-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.lx-search__result-item:hover { background: var(--clr-bg-card); }

.lx-search__result-thumb {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--clr-bg-secondary);
}

.lx-search__result-title {
    font-size: var(--text-sm);
    color: var(--clr-text-primary);
    line-height: 1.3;
}

/* Theme toggle */
.lx-theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-secondary);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.lx-theme-toggle:hover {
    color: var(--clr-accent);
    border-color: var(--clr-accent);
}

/* Mobile nav toggle */
.lx-nav-toggle {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-primary);
}

/* ============================================================
   HERO / FEATURED BANNER
   ============================================================ */

.lx-hero {
    position: relative;
    overflow: hidden;
    background: var(--clr-bg-secondary);
    border-bottom: 1px solid var(--clr-border);
}

.lx-hero__slider {
    display: flex;
    transition: transform var(--transition-slow);
}

.lx-hero__slide {
    min-width: 100%;
    position: relative;
    height: 520px;
    display: flex;
    align-items: flex-end;
}

.lx-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lx-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(13,15,26,0.97) 0%,
        rgba(13,15,26,0.5) 50%,
        rgba(13,15,26,0.1) 100%
    );
}

.lx-hero__content {
    position: relative;
    z-index: 2;
    padding: var(--space-10) var(--space-6);
    width: 100%;
    max-width: 680px;
}

.lx-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--clr-accent);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}

.lx-hero__title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: var(--space-4);
}

.lx-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.lx-hero__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
}

.lx-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.lx-hero__dots {
    position: absolute;
    bottom: var(--space-5);
    right: var(--space-6);
    display: flex;
    gap: var(--space-2);
    z-index: 2;
}

.lx-hero__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.lx-hero__dot.is-active {
    width: 20px;
    background: var(--clr-accent);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.lx-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

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

.lx-btn--primary:hover {
    background: var(--clr-accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--glow-accent);
}

.lx-btn--ghost {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

.lx-btn--ghost:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.lx-btn--outline {
    background: transparent;
    color: var(--clr-accent);
    border: 1px solid var(--clr-accent);
}

.lx-btn--outline:hover {
    background: var(--clr-accent);
    color: #fff;
}

.lx-btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.lx-btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.lx-btn--icon {
    padding: var(--space-2);
    aspect-ratio: 1;
    justify-content: center;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */

.lx-section {
    padding-block: var(--space-12);
}

.lx-section + .lx-section {
    padding-top: 0;
}

.lx-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    gap: var(--space-4);
}

.lx-section__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--clr-text-primary);
}

.lx-section__title span {
    color: var(--clr-accent);
}

.lx-section__link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* ============================================================
   VIDEO CARD
   ============================================================ */

.lx-card {
    position: relative;
    background: var(--clr-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--clr-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.lx-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--clr-border-hover);
}

.lx-card--featured {
    box-shadow: var(--glow-featured);
    border-color: var(--clr-accent);
}

/* Thumbnail */
.lx-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--clr-bg-secondary);
}

.lx-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.lx-card:hover .lx-card__img {
    transform: scale(1.05);
}

/* Play overlay */
.lx-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    transition: background var(--transition-base);
}

.lx-card:hover .lx-card__play {
    background: rgba(0,0,0,0.45);
}

.lx-card__play-icon {
    width: 48px;
    height: 48px;
    background: var(--clr-accent);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity var(--transition-base), transform var(--transition-spring);
    box-shadow: var(--glow-accent);
}

.lx-card:hover .lx-card__play-icon {
    opacity: 1;
    transform: scale(1);
}

/* Duration badge */
.lx-card__duration {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--font-mono);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

/* Featured badge */
.lx-card__badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    background: var(--clr-highlight);
    color: #000;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

/* Content status labels (censorship / subtitle) */
.lx-card__labels {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    z-index: 2;
}

.lx-card__labels--static {
    position: static;
    margin: 0;
}

.lx-label {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    color: #fff;
    line-height: 1.5;
}

.lx-label--censored          { background: #dc2626; }
.lx-label--uncensored        { background: #16a34a; }
.lx-label--uncensored-leaked { background: #d97706; }
.lx-label--eng-sub           { background: var(--clr-accent); }
.lx-label--combined          { background: linear-gradient(90deg, var(--clr-accent), #16a34a); }

/* Card body */
.lx-card__body {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lx-card__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--clr-text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lx-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: auto;
}

.lx-card__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
}

.lx-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.lx-tag {
    display: inline-block;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--clr-accent);
    background: var(--clr-accent-muted);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.lx-tag:hover {
    border-color: var(--clr-accent);
    color: var(--clr-accent);
}

/* ============================================================
   CATEGORY / TAXONOMY PILLS
   ============================================================ */

.lx-pills {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lx-pills::-webkit-scrollbar { display: none; }

.lx-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    background: var(--clr-bg-card);
    color: var(--clr-text-secondary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.lx-pill:hover,
.lx-pill.is-active {
    background: var(--clr-accent);
    color: #fff;
    border-color: var(--clr-accent);
}

.lx-pill__count {
    font-size: var(--text-xs);
    opacity: 0.7;
}

/* ============================================================
   FILTER BAR
   ============================================================ */

.lx-filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.lx-filter-select {
    padding: var(--space-2) var(--space-4);
    padding-right: var(--space-8);
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    color: var(--clr-text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fa3c0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    transition: border-color var(--transition-fast);
}

.lx-filter-select:focus {
    border-color: var(--clr-accent);
    outline: none;
}

.lx-filters__count {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
}

/* ============================================================
   SINGLE VIDEO / WATCH PAGE
   ============================================================ */

.lx-watch {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    grid-template-areas: "main sidebar" "comments comments";
    gap: var(--space-8);
    padding-block: var(--space-8);
    align-items: start;
}

.lx-watch__main { grid-area: main; }
.lx-watch__sidebar { grid-area: sidebar; }
.lx-watch > .lx-comments { grid-area: comments; margin-top: 0; }

.lx-player {
    width: 100%;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
}

/* Click-to-play overlay */
.lx-player__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    background: rgba(0,0,0,0.3);
    transition: background var(--transition-base);
}

.lx-player__overlay:hover { background: rgba(0,0,0,0.1); }

.lx-player__overlay-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lx-player__play-btn {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    background: var(--clr-accent);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: var(--glow-featured);
    transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

.lx-player__overlay:hover .lx-player__play-btn {
    transform: scale(1.1);
}

.lx-player__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: none;
}

.lx-player__iframe.is-active { display: block; }
.lx-player__overlay.is-hidden { display: none; }

/* Video info */
.lx-video-info {
    margin-top: var(--space-6);
}

.lx-video-info__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--clr-text-primary);
    margin-bottom: var(--space-4);
    line-height: 1.25;
}

.lx-video-info__meta {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--clr-border);
    flex-wrap: wrap;
}

.lx-video-info__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
}

.lx-video-info__meta-item strong {
    color: var(--clr-text-primary);
}

.lx-video-info__taxonomy {
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--clr-border);
}

.lx-video-info__taxonomy-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
    margin-bottom: var(--space-2);
}

/* Watch sidebar */

.lx-sidebar-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin-bottom: var(--space-4);
}

/* Related — compact card */
.lx-card--compact {
    display: flex;
    flex-direction: row;
    border-radius: var(--radius-md);
}

.lx-card--compact .lx-card__thumb {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.lx-card--compact .lx-card__body {
    padding: var(--space-3);
}

.lx-card--compact .lx-card__title {
    -webkit-line-clamp: 2;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.lx-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-12);
}

.lx-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    background: var(--clr-bg-card);
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.lx-page-btn:hover {
    border-color: var(--clr-accent);
    color: var(--clr-accent);
}

.lx-page-btn.is-active {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: #fff;
}

.lx-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   EMPTY / LOADING STATES
   ============================================================ */

.lx-skeleton {
    background: linear-gradient(
        90deg,
        var(--clr-bg-card) 25%,
        var(--clr-bg-elevated) 50%,
        var(--clr-bg-card) 75%
    );
    background-size: 200% 100%;
    animation: lx-shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes lx-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.lx-skeleton--card {
    height: 240px;
    border-radius: var(--radius-lg);
}

/* ── Spinner / load-more ────────────────────────────────────────────────── */
.lx-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--clr-border);
    border-top-color: var(--clr-accent);
    border-radius: 50%;
    animation: lx-spin 0.7s linear infinite;
    margin: 0 auto;
}
@keyframes lx-spin { to { transform: rotate(360deg); } }

.lx-load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.lx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-16);
    text-align: center;
    color: var(--clr-text-muted);
}

.lx-empty__icon {
    width: 64px;
    height: 64px;
    opacity: 0.3;
}

.lx-empty__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--clr-text-secondary);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.lx-toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lx-toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--clr-text-primary);
    min-width: 260px;
    animation: lx-toast-in var(--transition-spring) forwards;
}

@keyframes lx-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.lx-toast--success { border-left: 3px solid var(--clr-success); }
.lx-toast--error   { border-left: 3px solid var(--clr-danger); }
.lx-toast--warning { border-left: 3px solid var(--clr-warning); }

/* ============================================================
   FOOTER
   ============================================================ */

.lx-footer {
    background: var(--clr-bg-secondary);
    border-top: 1px solid var(--clr-border);
    padding-block: var(--space-12);
    margin-top: var(--space-16);
}

.lx-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-10);
    margin-bottom: var(--space-10);
}

.lx-footer__brand {}

.lx-footer__desc {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    margin-top: var(--space-3);
    line-height: 1.7;
}

.lx-footer__col-title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
    margin-bottom: var(--space-4);
}

.lx-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lx-footer__links a {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    transition: color var(--transition-fast);
}

.lx-footer__links a:hover {
    color: var(--clr-accent);
}

.lx-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-8);
    border-top: 1px solid var(--clr-border);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* ============================================================
   BACK-TO-TOP
   ============================================================ */

.lx-back-top {
    position: fixed;
    bottom: var(--space-6);
    left: var(--space-6);
    width: 40px;
    height: 40px;
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-secondary);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-base);
    z-index: var(--z-overlay);
}

.lx-back-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lx-back-top:hover {
    background: var(--clr-accent);
    color: #fff;
    border-color: var(--clr-accent);
}

/* ============================================================
   MOBILE DRAWER NAV
   ============================================================ */

.lx-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    pointer-events: none;
}

.lx-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.lx-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    background: var(--clr-bg-secondary);
    border-right: 1px solid var(--clr-border);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.lx-drawer.is-open {
    pointer-events: all;
}

.lx-drawer.is-open .lx-drawer__backdrop { opacity: 1; }
.lx-drawer.is-open .lx-drawer__panel { transform: translateX(0); }

.lx-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.lx-drawer__nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--clr-text-primary);
    transition: background var(--transition-fast);
}

.lx-drawer__nav a:hover { background: var(--clr-bg-elevated); }

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1024px) {
    .lx-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .lx-watch {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "comments" "sidebar";
    }

    .lx-grid--featured {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {
    :root {
        --header-height: 56px;
    }

    .lx-nav,
    .lx-search { display: none; }
    .lx-drawer__search .lx-search { display: flex; width: 100%; }

    .lx-nav-toggle { display: flex; }

    .lx-container { padding-inline: var(--space-4); }

    .lx-hero__slide { height: 380px; }

    .lx-hero__title {
        font-size: var(--text-2xl);
    }

    .lx-grid--videos {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .lx-section { padding-block: var(--space-8); }

    .lx-footer__grid {
        grid-template-columns: 1fr;
    }

    .lx-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .lx-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .lx-toast-container {
        bottom: var(--space-4);
        right: var(--space-4);
        left: var(--space-4);
    }

    .lx-toast { min-width: unset; }
}

@media (max-width: 480px) {
    .lx-grid--videos {
        grid-template-columns: 1fr;
    }

    .lx-hero__slide { height: 300px; }

    .lx-player__play-btn {
        width: 60px;
        height: 60px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Mobile search overlay ─────────────────────────────────────────────── */
.lx-mobile-search-btn {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-primary);
    transition: all var(--transition-fast);
}

.lx-mobile-search-btn:hover {
    color: var(--clr-accent);
    border-color: var(--clr-accent);
}

.lx-mobile-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--clr-bg-primary);
    z-index: 999;
    padding: var(--space-4) var(--space-5);
    align-items: center;
}
.lx-mobile-search-overlay.is-open {
    display: flex;
}
.lx-mobile-search-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
}
.lx-mobile-search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--clr-text-primary);
    font-size: var(--text-base);
    outline: none;
}

@media (max-width: 768px) {
    .lx-mobile-search-btn { display: flex; }
    .lx-search { display: none !important; }
}

/* ============================================================
   AUTH PAGES (login / register / forgot / reset / account)
   ============================================================ */

.lx-auth {
    min-height: calc(100vh - 400px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
}

.lx-auth__card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.lx-auth__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    background: var(--clr-bg);
    color: var(--clr-text-secondary);
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: 1;
    transition: all var(--transition-fast);
}

.lx-auth__close:hover {
    color: var(--clr-accent);
    border-color: var(--clr-accent);
}

.lx-auth__head {
    text-align: center;
    margin-bottom: var(--space-6);
}

.lx-auth__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--clr-accent);
    color: #fff;
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.lx-auth__avatar {
    border-radius: 50%;
    margin-bottom: var(--space-4);
}

.lx-auth__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 0 var(--space-2);
}

.lx-auth__subtitle {
    color: var(--clr-text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.lx-auth__notice {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
    border: 1px solid transparent;
}

.lx-auth__notice--success {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.35);
    color: #16a34a;
}

.lx-auth__notice--error {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
    color: #dc2626;
}

.lx-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.lx-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lx-field label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--clr-text-secondary);
}

.lx-field__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    background: var(--clr-bg);
    color: var(--clr-text-primary);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast);
}

.lx-field__input:focus {
    outline: none;
    border-color: var(--clr-accent);
}

.lx-field__hint {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    margin: 0;
}

.lx-field__password {
    position: relative;
    display: flex;
}

.lx-field__password .lx-field__input {
    padding-right: 44px;
}

.lx-field__toggle {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--clr-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    display: flex;
    align-items: center;
}

.lx-field__toggle.is-active,
.lx-field__toggle:hover {
    color: var(--clr-accent);
}

/* Honeypot — hidden from real users, present for simple bots */
.lx-auth__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lx-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-sm);
}

.lx-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    color: var(--clr-text-secondary);
}

.lx-auth__link {
    color: var(--clr-accent);
    font-weight: 600;
}

.lx-auth__submit {
    width: 100%;
    justify-content: center;
}

.lx-auth__foot {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
}

.lx-auth__foot a {
    color: var(--clr-accent);
    font-weight: 600;
    margin-left: 4px;
}

@media (max-width: 480px) {
    .lx-auth__card { padding: var(--space-6) var(--space-5); }
}

/* ============================================================
   MY ACCOUNT
   ============================================================ */

.lx-account {
    padding-block: var(--space-8) var(--space-12);
}

.lx-account__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.lx-account__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: 0;
}

.lx-account__head-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.lx-account__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.lx-account__panel {
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.lx-account__panel:first-child {
    grid-column: 1 / -1;
}

.lx-account__panel-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0 0 var(--space-5);
}

.lx-account__avatar-row {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.lx-account__avatar-img {
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.lx-account__avatar-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.lx-account__avatar-btn {
    display: inline-flex;
    cursor: pointer;
    width: fit-content;
}

.lx-account__avatar-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lx-account__avatar-filename {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lx-field__textarea {
    resize: vertical;
    font-family: inherit;
}

.lx-account__submit {
    width: fit-content;
}

@media (max-width: 860px) {
    .lx-account__grid { grid-template-columns: 1fr; }
    .lx-account__panel:first-child { grid-column: auto; }
}

@media (max-width: 480px) {
    .lx-account__head { flex-direction: column; align-items: flex-start; }
    .lx-account__submit { width: 100%; justify-content: center; }
    .lx-account__avatar-row { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   COMMENTS
   ============================================================ */

.lx-comments {
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--clr-border);
}

.lx-comments__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 0 var(--space-6);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.lx-comments__count {
    color: var(--clr-text-muted);
    font-weight: 500;
    font-size: var(--text-base);
}

.lx-comments__login-cta {
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    margin-bottom: var(--space-6);
}

.lx-comments__login-cta p {
    margin: 0 0 var(--space-3);
    color: var(--clr-text-secondary);
}

.lx-comments__empty {
    color: var(--clr-text-muted);
    font-size: var(--text-sm);
    padding: var(--space-4) 0;
}

/* Comment composer */
.lx-comment-form {
    margin-bottom: var(--space-6);
}

.lx-comment-form,
.lx-comments__list,
.lx-comments__login-cta,
.lx-comments__empty {
    max-width: 820px;
}

.lx-comment-form__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.lx-comment-form__input-wrap {
    flex: 1;
    min-width: 0;
}

.lx-comment-form__textarea {
    width: 100%;
    resize: vertical;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    background: var(--clr-bg-elevated);
    color: var(--clr-text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
}

.lx-comment-form__textarea:focus {
    outline: none;
    border-color: var(--clr-accent);
}

.lx-comment-form__emoji-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: var(--space-2);
}

.lx-comment-form__emoji {
    background: none;
    border: none;
    font-size: var(--text-base);
    line-height: 1;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.lx-comment-form__emoji:hover {
    background: var(--clr-bg);
}

.lx-comment-form__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.lx-comment-form__error {
    color: #dc2626;
    font-size: var(--text-xs);
    margin-right: auto;
}

/* Comment rows */
.lx-comment {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--clr-border);
}

.lx-comments__list > .lx-comment:last-child {
    border-bottom: none;
}

.lx-comment__avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.lx-comment__body {
    flex: 1;
    min-width: 0;
}

.lx-comment__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.lx-comment__author {
    font-weight: 700;
    font-size: var(--text-sm);
}

.lx-comment__time {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
}

.lx-comment__text {
    margin: var(--space-1) 0 var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--clr-text-secondary);
    word-break: break-word;
    white-space: pre-wrap;
}

.lx-comment__actions {
    display: flex;
    gap: var(--space-4);
}

.lx-comment__action {
    background: none;
    border: none;
    color: var(--clr-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.lx-comment__action:hover {
    color: var(--clr-accent);
}

.lx-comment__delete-btn:hover {
    color: #dc2626;
}

.lx-comment__reply-form-wrap {
    margin-top: var(--space-3);
}

.lx-comment__replies {
    margin-top: var(--space-3);
    padding-left: var(--space-5);
    border-left: 2px solid var(--clr-border);
}

.lx-comment--reply {
    padding: var(--space-3) 0;
    border-bottom: none;
}

@media (max-width: 480px) {
    .lx-comment__replies { padding-left: var(--space-3); }
    .lx-comment-form__row { gap: var(--space-2); }
    .lx-comment-form__foot { flex-wrap: wrap; }
}

/* ============================================================
   AVATAR IMAGE FIX (global)
   ------------------------------------------------------------
   get_avatar()/img tags set explicit width+height attributes,
   which stretches non-square uploads instead of cropping them.
   object-fit: cover crops to fill the box instead of distorting.
   ============================================================ */
img.avatar,
.lx-comment__avatar,
.lx-account__avatar-img,
.lx-auth__avatar {
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* ============================================================
   ENGAGEMENT (like / dislike / favorite)
   ============================================================ */

.lx-video-info__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.lx-engage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.lx-engage__reactions {
    display: flex;
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.lx-engage__reactions .lx-engage__btn {
    border-radius: 0;
    border: none;
}

.lx-engage__reactions .lx-engage__btn:first-child {
    border-right: 1px solid var(--clr-border);
}

.lx-engage__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    color: var(--clr-text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.lx-engage__btn:hover {
    color: var(--clr-text-primary);
    background: var(--clr-bg);
}

.lx-engage__btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.lx-engage__btn.is-active--like {
    color: #16a34a;
}

.lx-engage__btn.is-active--dislike {
    color: #dc2626;
}

.lx-engage__btn.is-active--like svg,
.lx-engage__btn.is-active--dislike svg {
    fill: currentColor;
}

.lx-engage__btn--favorite.is-active--favorite {
    color: var(--clr-accent);
    border-color: var(--clr-accent);
}

.lx-engage__btn--favorite.is-active--favorite svg {
    fill: var(--clr-accent);
}

.lx-engage__count {
    font-variant-numeric: tabular-nums;
    color: inherit;
}

/* Guest sign-in / engagement toast (unique name — avoids colliding with the
   unrelated .lx-toast-container notification system elsewhere, whose
   `animation: ... forwards` was overriding this element's transform and
   breaking centering) */
.lx-engage-toast {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: var(--space-6);
    transform: translate(-50%, 20px);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    padding: var(--space-3) var(--space-4);
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    max-width: calc(100vw - var(--space-8));
    width: max-content;
}

.lx-engage-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.lx-engage-toast__msg {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .lx-engage { gap: var(--space-2); }
    .lx-engage__btn { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
    .lx-engage-toast { flex-direction: column; align-items: stretch; text-align: center; width: calc(100vw - var(--space-8)); }
    .lx-engage-toast__msg { white-space: normal; }
}

/* ============================================================
   ON-PAGE SEO CONTENT BLOCK (H1 + description near the footer)
   ============================================================ */

.lx-onpage-seo {
    margin-top: var(--space-10);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--clr-border);
}

.lx-onpage-seo__h1 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}

.lx-onpage-seo__desc {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--clr-text-secondary);
    max-width: 900px;
    margin: 0;
}

.lx-onpage-seo--desc-only {
    padding-top: var(--space-5);
}

.lx-grid .lx-ad-slot,
.lx-watch > .lx-ad-slot {
    grid-column: 1 / -1;
}

@media (max-width: 480px) {
    .lx-onpage-seo { padding: var(--space-5) 0; }
    .lx-onpage-seo__h1 { font-size: var(--text-base); }
    .lx-onpage-seo__desc { font-size: var(--text-xs); }
}

/* ============================================================
   AD SLOTS
   ============================================================ */

.lx-ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: var(--space-4) auto;
    /* No min-height by default — JS adds .lx-ad-slot--loaded only when
       an ad actually renders, preventing ghost space when ads are blocked. */
    max-width: 100%;
}

.lx-ad-slot:empty {
    display: none;
}

/* Only reserve height once JS confirms real content rendered */
.lx-ad-slot--loaded {
    min-height: 90px;
}

.lx-ad-slot--mobile-frame { /* used by header/footer wrappers if needed */
    max-width: 100%;
}

/* Device targeting — CSS-based so the HTML is identical for every visitor
   (cache-safe), only visibility differs by viewport. */
@media (max-width: 768px) {
    .lx-ad--desktop-only { display: none !important; }
}
@media (min-width: 769px) {
    .lx-ad--mobile-only { display: none !important; }
}