/* ==========================================================================
   Bluvy Tube — Design System Officiel & PWA-First
   Conforme aux maquettes et à la charte colors.md (Light & Dark mode)
   Prêt pour l'intégration Web & future application Ionic / Angular
   ========================================================================== */

/* Inter — auto-hébergé, activé uniquement via <html data-font="inter">
   (réglage d'apparence). La pile système reste le défaut. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400-poxsSdI.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500-Uwgfwtt.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600-keCwlca.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-700-_eucScQ.woff2") format('woff2');
}

:root {
    color-scheme: light;
    /* Couleurs officielles de marque */
    --bluvy-blue: #185DFF;
    --bluvy-deep: #0040D6;
    --bluvy-cyan: #3BD3E7;
    --bluvy-sky: #C5F4FA;
    --bluvy-ice: #F0FDFE;

    /* Neutres officiels */
    --bluvy-ink: #0B1736;
    --bluvy-slate: #52627D;
    --bluvy-muted: #8290A8;
    --bluvy-border: #DCE5F2;
    --bluvy-white: #FFFFFF;

    /* Couleurs sémantiques */
    --bluvy-success: #16A66A;
    --bluvy-success-bg: #E8F8F1;
    --bluvy-warning: #E59A16;
    --bluvy-warning-bg: #FFF6DF;
    --bluvy-error: #E5484D;
    --bluvy-error-bg: #FDEBEC;
    --bluvy-info: #185DFF;
    --bluvy-info-bg: #EAF0FF;

    /* Accent réglable : par défaut = couleur signature Bluvy Blue.
       L'axe accent (data-accent) et les palettes d'écosystème (data-palette)
       le surchargent ; il ne remplace jamais --bluvy-blue comme signature. */
    --accent: var(--bluvy-blue);
    --accent-hover: var(--bluvy-deep);
    --accent-contrast: #FFFFFF;

    /* Variables de thème : Light Mode (Défaut) — famille ice/sky de la charte */
    --bg-app: #F0FDFE;
    --bg-page: #F0FDFE;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #E6F7FA;
    --bg-sidebar: #FFFFFF;
    --bg-chip: #E4F4F8;
    --bg-chip-hover: #D5EEF4;
    --bg-active-nav: #EAF0FF;
    --text-primary: var(--bluvy-ink);
    --text-secondary: var(--bluvy-slate);
    --text-muted: var(--bluvy-muted);
    --border-color: var(--bluvy-border);
    --border-subtle: #E3F1F4;

    --btn-primary-bg: var(--accent);
    --btn-primary-hover: var(--accent-hover);
    --btn-primary-text: var(--accent-contrast);
    --btn-secondary-bg: #E4F4F8;
    --btn-secondary-border: transparent;
    --btn-secondary-hover: #D5EEF4;
    --btn-secondary-text: var(--bluvy-ink);
    
    /* Cartes plates : bordure seule, pas d'ombre. Les surfaces flottantes
       (menus, sheets, toasts, lecteur) portent leur propre box-shadow. */
    --card-shadow: none;
    --card-shadow-hover: none;
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);

    /* Dimensions du layout */
    --header-height: 64px;
    --sidebar-width: 240px;
    --mobile-tabbar-height: 60px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 9999px;
    /* Surfaces-écran (miniatures, lecteurs) — coin plus franc que les cartes. */
    --radius-media: 6px;
    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Mode Sombre Natif */
[data-theme="dark"] {
    color-scheme: dark;
    --bg-app: #070D1C;
    --bg-page: #070D1C;
    --bg-surface: #0D1629;
    --bg-surface-elevated: #14213A;
    --bg-sidebar: #0D1629;
    --bg-chip: #14213A;
    --bg-chip-hover: #1E2F50;
    --bg-active-nav: #162B55;
    --text-primary: #F4F8FF;
    --text-secondary: #AAB8D0;
    --text-muted: #657592;
    --border-color: #253653;
    --border-subtle: #1B2942;
    --accent: #4A7CFF;
    --accent-hover: #185DFF;
    --btn-primary-bg: var(--accent);
    --btn-primary-hover: var(--accent-hover);
    --btn-primary-text: var(--accent-contrast);
    --btn-secondary-bg: #14213A;
    --btn-secondary-border: #253653;
    --btn-secondary-hover: #1E2F50;
    --btn-secondary-text: #F4F8FF;
    --card-shadow: none;
    --card-shadow-hover: none;

    --bluvy-success-bg: #0E2E20;
    --bluvy-warning-bg: #332408;
    --bluvy-error-bg: #361014;
    --bluvy-info-bg: #0F2248;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg-app: #070D1C;
        --bg-page: #070D1C;
        --bg-surface: #0D1629;
        --bg-surface-elevated: #14213A;
        --bg-sidebar: #0D1629;
        --bg-chip: #14213A;
        --bg-chip-hover: #1E2F50;
        --bg-active-nav: #162B55;
        --text-primary: #F4F8FF;
        --text-secondary: #AAB8D0;
        --text-muted: #657592;
        --border-color: #253653;
        --border-subtle: #1B2942;
        --accent: #4A7CFF;
        --accent-hover: #185DFF;
        --btn-primary-bg: var(--accent);
        --btn-primary-hover: var(--accent-hover);
        --btn-primary-text: var(--accent-contrast);
        --btn-secondary-bg: #14213A;
        --btn-secondary-border: #253653;
        --btn-secondary-hover: #1E2F50;
        --btn-secondary-text: #F4F8FF;
            --card-shadow: none;
        --card-shadow-hover: none;
    }
}

/* ==========================================================================
   Réglages d'apparence — axes synchronisés sur le PDS (app.bluvy.tube.preferences)
   Attributs posés sur <html> côté serveur (pas de FOUC) :
     data-palette  : bluesky | blacksky | mu      (absent = Bluvy, dérivée du logo)
     data-accent   : cyan | deep                  (absent = Bluvy Blue, signature)
     data-dark-style: black                       (absent = dim)
     data-font     : inter                        (absent = pile système)
     data-font-size: small | large                (absent = 100 %)
   Blocs additifs : aucun sélecteur existant n'est modifié ici.
   Ordre = cascade : palettes, puis accent (gagne sur la palette), puis OLED, puis police.
   ========================================================================== */

/* ---- Palette Bluesky ---------------------------------------------------- */
:root[data-palette="bluesky"] {
    --bg-app: #FFFFFF;
    --bg-page: #FFFFFF;
    --bg-surface: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --bg-surface-elevated: #EFF2F6;
    --bg-chip: #EFF2F6;
    --bg-chip-hover: #E4E9F0;
    --bg-active-nav: #E7F0FF;
    --text-primary: #0B0F19;
    --text-secondary: #667B99;
    --text-muted: #97A6BC;
    --border-color: #DCE2EA;
    --border-subtle: #EAEEF3;
    --accent: #0059D6;
    --accent-hover: #0048AD;
    --btn-secondary-bg: #EFF2F6;
    --btn-secondary-hover: #E4E9F0;
}
:root[data-palette="bluesky"][data-theme="dark"] {
    --bg-app: #151D28;
    --bg-page: #151D28;
    --bg-surface: #151D28;
    --bg-sidebar: #151D28;
    --bg-surface-elevated: #222E3F;
    --bg-chip: #222E3F;
    --bg-chip-hover: #2A3850;
    --bg-active-nav: #1E2C44;
    --text-primary: #FFFFFF;
    --text-secondary: #ABB8C9;
    --text-muted: #7C8AA0;
    --border-color: #2C3A4E;
    --border-subtle: #202C3C;
    --accent: #3B93FF;
    --accent-hover: #1C86FF;
    --btn-secondary-bg: #222E3F;
    --btn-secondary-hover: #2A3850;
}

/* ---- Palette Blacksky ------------------------------------------------- */
:root[data-palette="blacksky"] {
    --bg-app: #F8FAF9;
    --bg-page: #F8FAF9;
    --bg-surface: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --bg-surface-elevated: #E8EAEA;
    --bg-chip: #E8EAEA;
    --bg-chip-hover: #DDE0E0;
    --bg-active-nav: #ECECFB;
    --text-primary: #070C0C;
    --text-secondary: #6A6A6A;
    --text-muted: #9A9C9C;
    --border-color: #DFE1E1;
    --border-subtle: #ECEEEE;
    --accent: #6060E9;
    --accent-hover: #5252C3;
    --btn-secondary-bg: #E8EAEA;
    --btn-secondary-hover: #DDE0E0;
}
:root[data-palette="blacksky"][data-theme="dark"] {
    --bg-app: #161E27;
    --bg-page: #161E27;
    --bg-surface: #161E27;
    --bg-sidebar: #161E27;
    --bg-surface-elevated: #1F2936;
    --bg-chip: #1F2936;
    --bg-chip-hover: #273343;
    --bg-active-nav: #24243F;
    --text-primary: #F8FAF9;
    --text-secondary: #9C9E9E;
    --text-muted: #74777A;
    --border-color: #2B3644;
    --border-subtle: #1F2833;
    --accent: #8686FF;
    --accent-hover: #6E6EF0;
    --btn-secondary-bg: #1F2936;
    --btn-secondary-hover: #273343;
}

/* ---- Palette mu.social ---------------------------------------------------- */
:root[data-palette="mu"] {
    --bg-app: #F7F7F2;
    --bg-page: #F7F7F2;
    --bg-surface: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --bg-surface-elevated: #EDEBE5;
    --bg-chip: #EDEBE5;
    --bg-chip-hover: #E3E0D8;
    --bg-active-nav: #F7E7F1;
    --text-primary: #212121;
    --text-secondary: #797876;
    --text-muted: #A6A5A1;
    --border-color: #E0DED9;
    --border-subtle: #ECEAE4;
    --accent: #C04293;
    --accent-hover: #A73981;
    --btn-secondary-bg: #EDEBE5;
    --btn-secondary-hover: #E3E0D8;
}
:root[data-palette="mu"][data-theme="dark"] {
    --bg-app: #1A1A1A;
    --bg-page: #1A1A1A;
    --bg-surface: #1A1A1A;
    --bg-sidebar: #1A1A1A;
    --bg-surface-elevated: #1F1F1F;
    --bg-chip: #1F1F1F;
    --bg-chip-hover: #292929;
    --bg-active-nav: #2E1F2A;
    --text-primary: #FFFFFF;
    --text-secondary: #ABAAA6;
    --text-muted: #7C7B78;
    --border-color: #2C2C2C;
    --border-subtle: #202020;
    --accent: #E066B4;
    --accent-hover: #C04293;
    --btn-secondary-bg: #1F1F1F;
    --btn-secondary-hover: #292929;
}

@media (prefers-color-scheme: dark) {
    :root[data-palette="bluesky"]:not([data-theme="light"]) {
        --bg-app: #151D28;
        --bg-page: #151D28;
        --bg-surface: #151D28;
        --bg-sidebar: #151D28;
        --bg-surface-elevated: #222E3F;
        --bg-chip: #222E3F;
        --bg-chip-hover: #2A3850;
        --bg-active-nav: #1E2C44;
        --text-primary: #FFFFFF;
        --text-secondary: #ABB8C9;
        --text-muted: #7C8AA0;
        --border-color: #2C3A4E;
        --border-subtle: #202C3C;
        --accent: #3B93FF;
        --accent-hover: #1C86FF;
        --btn-secondary-bg: #222E3F;
        --btn-secondary-hover: #2A3850;
    }
    :root[data-palette="blacksky"]:not([data-theme="light"]) {
        --bg-app: #161E27;
        --bg-page: #161E27;
        --bg-surface: #161E27;
        --bg-sidebar: #161E27;
        --bg-surface-elevated: #1F2936;
        --bg-chip: #1F2936;
        --bg-chip-hover: #273343;
        --bg-active-nav: #24243F;
        --text-primary: #F8FAF9;
        --text-secondary: #9C9E9E;
        --text-muted: #74777A;
        --border-color: #2B3644;
        --border-subtle: #1F2833;
        --accent: #8686FF;
        --accent-hover: #6E6EF0;
        --btn-secondary-bg: #1F2936;
        --btn-secondary-hover: #273343;
    }
    :root[data-palette="mu"]:not([data-theme="light"]) {
        --bg-app: #1A1A1A;
        --bg-page: #1A1A1A;
        --bg-surface: #1A1A1A;
        --bg-sidebar: #1A1A1A;
        --bg-surface-elevated: #1F1F1F;
        --bg-chip: #1F1F1F;
        --bg-chip-hover: #292929;
        --bg-active-nav: #2E1F2A;
        --text-primary: #FFFFFF;
        --text-secondary: #ABAAA6;
        --text-muted: #7C7B78;
        --border-color: #2C2C2C;
        --border-subtle: #202020;
        --accent: #E066B4;
        --accent-hover: #C04293;
        --btn-secondary-bg: #1F1F1F;
        --btn-secondary-hover: #292929;
    }
}

/* ---- Axe accent (dérivé du logo) — gagne sur la palette ------------------- */
:root[data-accent="deep"],
:root[data-palette][data-accent="deep"] {
    --accent: #0040D6;
    --accent-hover: #00308F;
}
:root[data-accent="cyan"],
:root[data-palette][data-accent="cyan"] {
    /* #3BD3E7 pur échoue l'AA en fond de bouton texte blanc → cyan assombri */
    --accent: #0E9DB4;
    --accent-hover: #0B8598;
}
:root[data-theme="dark"][data-accent="deep"] {
    --accent: #3B6BFF;
    --accent-hover: #1E4FE0;
}
:root[data-theme="dark"][data-accent="cyan"] {
    --accent: #22B8CE;
    --accent-hover: #159BB0;
}

/* ---- Axe style sombre OLED — gagne sur tout en mode sombre --------------- */
:root[data-theme="dark"][data-dark-style="black"] {
    --bg-app: #05070D;
    --bg-page: #05070D;
    --bg-surface: #0A0F1A;
    --bg-sidebar: #0A0F1A;
    --bg-surface-elevated: #111827;
    --bg-chip: #111827;
    --bg-chip-hover: #1B2540;
    --border-color: #2A3A57;
    --border-subtle: #141C30;
}
@media (prefers-color-scheme: dark) {
    :root[data-dark-style="black"]:not([data-theme="light"]) {
        --bg-app: #05070D;
        --bg-page: #05070D;
        --bg-surface: #0A0F1A;
        --bg-sidebar: #0A0F1A;
        --bg-surface-elevated: #111827;
        --bg-chip: #111827;
        --bg-chip-hover: #1B2540;
        --border-color: #2A3A57;
        --border-subtle: #141C30;
    }
}

/* ---- Axe police -------------------------------------------------------- */
:root[data-font="inter"] {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
:root[data-font-size="small"] {
    font-size: 93.75%;
}
:root[data-font-size="large"] {
    font-size: 112.5%;
}

/* ==========================================================================
   Turbo Progress Bar & Transitions
   ========================================================================== */
.turbo-progress-bar {
    height: 3px !important;
    background: var(--accent) !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

turbo-frame {
    display: block;
}

turbo-frame[busy] {
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Generic keyboard-focus ring — component-specific :focus-visible rules
   elsewhere (player controls, timeline slider...) still take precedence
   where they exist; this is the fallback for everything else (sidebar/
   header links, filter chips, search tabs...). Never shown for a mouse
   click, only real keyboard/AT navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

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

/* The whole design system is rem-based off this root size — a three-step
   bump on large screens scales every component (type, spacing, radii)
   proportionally without touching each one individually. Since `rem`
   always resolves against this root regardless of nesting,
   .app-header/.app-sidebar would grow right along with everything else
   unless explicitly pinned back — see the override block further down
   ("Pin topbar/sidebar to their original size on large screens"), which
   keeps navigation chrome a stable, familiar size while the actual page
   content scales up. */
@media (min-width: 1920px) {
    html {
        font-size: 17px;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 3840px) {
    html {
        font-size: 19px;
    }
}

/* Pin topbar/sidebar to their original size on large screens — every
   value below is that selector's own rem measurement multiplied by the
   original 15px root (e.g. .brand-name's 1.25rem = 18.75px), so this
   exactly cancels the html{font-size} bump above for just these two
   regions. Keep this in sync if either bump or the pinned selectors'
   own rem values ever change. */
@media (min-width: 1920px) {
    .app-header {
        padding: 0 22.5px;
        gap: 22.5px;
    }
    .header-brand {
        gap: 9.75px;
    }
    .brand-name {
        font-size: 18.75px;
        gap: 5.25px;
    }
    .search-pill-box {
        padding: 3.75px 5.25px 3.75px 18.75px;
    }
    .search-pill-box input {
        font-size: 14.25px;
    }
    .header-actions-group {
        gap: 12.75px;
    }
    .btn-create-pill {
        gap: 6.75px;
        padding: 6.75px 15px;
        font-size: 13.5px;
    }
    .header-user-avatar {
        font-size: 12.75px;
    }
    .app-sidebar {
        padding: 18.75px 12.75px 22.5px 12.75px;
    }
    .sidebar-footer {
        padding: 15px 11.25px 7.5px 11.25px;
        font-size: 11.25px;
    }
    .sidebar-version-badge {
        font-size: 10.5px;
        padding: 2.25px 6.75px;
    }
    .sidebar-section {
        margin-bottom: 22.5px;
    }
    .sidebar-section-title {
        font-size: 11.25px;
        padding: 0 11.25px;
        margin-bottom: 7.5px;
    }
    .sidebar-list {
        gap: 3px;
    }
    .sidebar-link {
        gap: 12.75px;
        padding: 9px 12.75px;
        font-size: 13.5px;
    }
}

/* Also pin .app-content's own horizontal padding to a fixed px value on
   large screens instead of letting it grow with the bumped root font
   (rem) — every extra pixel of padding here is a pixel not available to
   the actual page content's own max-width below, and the sidebar-width
   constraint already leaves little slack to spare at the 1920px
   threshold specifically. */
@media (min-width: 1920px) {
    .app-content {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 2560px) {
    .app-content {
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media (min-width: 3840px) {
    .app-content {
        padding-left: 32px;
        padding-right: 32px;
    }
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-app);
    color: var(--text-primary);
    line-height: 1.45;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

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

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    background-color: var(--bg-page-alt, rgba(130, 144, 168, 0.14));
    color: var(--bluvy-blue);
    padding: 0.1em 0.4em;
    border-radius: 4px;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352627D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem;
    padding-right: 2.5rem !important;
    cursor: pointer;
}

[data-theme="dark"] select {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23AAB8D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) select {
        background-color: var(--bg-surface);
        color: var(--text-primary);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23AAB8D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    }
}

select option,
select optgroup {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    padding: 0.5rem;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* Accessibilité : Skip to content */
.skip-to-content {
    position: fixed;
    top: -120px;
    left: 1rem;
    background: var(--accent);
    color: var(--accent-contrast) !important;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 10000;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: top 0.2s ease-in-out;
}

.skip-to-content:focus {
    top: 1rem;
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

/* ==========================================================================
   App Layout Grid (Top Header + Left Sidebar + Main Content)
   ========================================================================== */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Top Header */
.app-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--header-height);
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    gap: 1.5rem;
}

/* Brand Logo officiel */
.header-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.brand-icon-box {
    width: 34px;
    height: 34px;
    background: var(--bluvy-blue);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.brand-icon-box svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.brand-name span.blue {
    color: var(--accent);
}

/* Search Bar (Identique aux maquettes avec bouton loupe bleu) */
.header-search-container {
    position: relative;
    flex: 1;
    max-width: 580px;
    display: flex;
    align-items: center;
}

.search-pill-box {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--bg-chip);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.35rem 0.25rem 1.25rem;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.search-pill-box:focus-within {
    background-color: var(--bg-surface);
    border-color: var(--bluvy-blue);
    box-shadow: 0 0 0 3px rgba(24, 93, 255, 0.12);
}

.search-pill-box input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.search-pill-box input::placeholder {
    color: var(--text-muted);
}

.search-submit-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--bluvy-blue);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.search-submit-btn:hover {
    background-color: var(--bluvy-deep);
}

.search-submit-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* Header search suggestions dropdown (search_suggest_controller.js) */
.search-suggest-dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 40;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(7, 13, 28, 0.18);
    padding: 0.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.search-suggest-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.4rem 0.6rem 0.25rem;
}

.search-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.search-suggest-item:hover,
.search-suggest-item:focus-visible,
.search-suggest-item.is-active {
    background-color: var(--bg-chip);
}

.search-suggest-query-icon {
    width: 1.25rem;
    text-align: center;
    color: var(--text-muted);
}

/* Login identifier field's combobox (identifier_suggest_controller.js)
   reuses this same dropdown/item styling but renders <div role="option">
   instead of links, so it needs a pointer cursor added explicitly. */
.identifier-suggest-dropdown .search-suggest-item {
    cursor: pointer;
}

.search-suggest-item img,
.search-suggest-avatar-fallback,
.search-suggest-thumb-fallback {
    flex-shrink: 0;
    background-color: var(--bg-chip);
    object-fit: cover;
}

.search-suggest-item--creator img,
.search-suggest-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.search-suggest-item--video img,
.search-suggest-thumb-fallback {
    width: 44px;
    height: 26px;
    border-radius: var(--radius-sm);
}

.search-suggest-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header Actions (+ Créer, Cloche, Profil) */
.header-actions-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

.btn-create-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-create-pill:hover {
    border-color: var(--bluvy-blue);
    background-color: var(--bg-chip);
}

.btn-create-pill svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.header-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    position: relative;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Touch screens: reach the 44px minimum tap target. */
@media (pointer: coarse) {
    .header-icon-btn {
        width: 44px;
        height: 44px;
    }
}

.header-icon-btn:hover {
    background-color: var(--bg-chip);
    color: var(--text-primary);
}

.header-icon-btn svg {
    width: 20px;
    height: 20px;
}

.notif-badge-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    background-color: var(--bluvy-error);
    border-radius: 50%;
}

.header-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    background: var(--bluvy-blue);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Layout Body avec Sidebar et Contenu */
.app-body {
    display: flex;
    flex: 1;
    min-height: calc(100vh - var(--header-height));
}

/* ==========================================================================
   Desktop Left Sidebar (Fidèle aux maquettes)
   ========================================================================== */
.app-sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    padding: 1.25rem 0.85rem 1.5rem 0.85rem;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height));
    position: sticky;
    top: var(--header-height);
    display: flex;
    flex-direction: column;
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem 0.75rem 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sidebar-version-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    background: var(--bg-chip);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.sidebar-section {
    margin-bottom: 1.5rem;
}

.sidebar-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}

.sidebar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sidebar-link:hover {
    background-color: var(--bg-chip);
    color: var(--text-primary);
}

.sidebar-link.active {
    background-color: var(--bg-active-nav);
    color: var(--accent);
    font-weight: 700;
}

.sidebar-link svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

/* "Aide" section (feedback + legal, merged) reads as tertiary next to
   Bibliothèque/Vous — same links, just visually quieter. */
.sidebar-section--muted .sidebar-link {
    font-size: 0.82rem;
    opacity: 0.8;
}

.sidebar-section--muted .sidebar-link:hover {
    opacity: 1;
}

/* Abonnements avec pastille bleue dans la sidebar */
.sub-creator-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sub-unread-dot {
    margin-left: auto;
    width: 6px;
    height: 6px;
    background-color: var(--bluvy-blue);
    border-radius: 50%;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
.app-content {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 2rem 3rem 2rem;
}

/* ==========================================================================
   En-têtes de page (remplacent le <h1 style="…"> recopié partout)
   ========================================================================== */
.page-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}
.page-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: -0.9rem 0 1.5rem;
    max-width: 62ch;
}
.page-empty {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   CTA d'accueil / erreurs / login
   ========================================================================== */
.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    background-color: var(--bluvy-blue);
    color: #FFFFFF !important;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: background-color 0.15s ease;
}

.hero-cta-btn:hover {
    background-color: var(--bluvy-deep);
}

/* ==========================================================================
   Section Headers & Video Grids
   ========================================================================== */
.content-section {
    margin-bottom: 2.25rem;
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.section-see-all {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bluvy-blue);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.section-see-all:hover {
    color: var(--bluvy-deep);
}

/* Grille de cartes vidéo (Fidèle aux maquettes).

   Nombre de colonnes FIGÉ par palier (et pas `auto-fill`) : les feeds
   paginés servent 36 vidéos par page (HomeController::PER_PAGE & co.), et
   36 est divisible par 1/2/3/4/6 — donc tant que la grille s'en tient à
   ces largeurs, la dernière ligne est toujours pleine, quelle que soit la
   résolution. `auto-fill` produisait 5, 7 ou 8 colonnes selon l'écran et
   laissait alors 2 à 4 cartes manquantes en bas. */
.video-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem 1.25rem;
}

@media (min-width: 560px) {
    .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1300px) {
    .video-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Large/2K/4K screens: pages that render .video-grid full-width (home,
   trending) have no other wrapping max-width, so without a cap the 4
   columns above would each stretch a thumbnail well past its source
   resolution (no srcset/high-DPI variant is available from the external
   thumbnail CDN). Cap the width the same way as .watch-layout-grid/
   .channel-layout-grid above 1920px, then move to 6 columns on 2K/4K so
   the extra room becomes more cards rather than oversized ones. */
@media (min-width: 1920px) {
    .video-grid {
        max-width: 1600px;
        margin: 0 auto;
    }
}

@media (min-width: 2560px) {
    .video-grid {
        /* 2200 (pas 2100) pour des cartes ~350px sur 6 colonnes ; tient
           dans l'espace réel dispo (~2264px : 2560 - sidebar 240 -
           padding 2×28). */
        max-width: 2200px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 3840px) {
    .video-grid {
        max-width: 2400px;
    }
}

/* Recherche avancée (page d'accueil) */
.advanced-search-details {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.advanced-search-details--active {
    border-color: var(--bluvy-blue);
}

.advanced-search-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.advanced-search-toggle::-webkit-details-marker {
    display: none;
}

.advanced-search-toggle-icon {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.advanced-search-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-pill);
    background-color: var(--bluvy-blue);
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 800;
}

.advanced-search-chevron {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.advanced-search-details[open] .advanced-search-chevron {
    transform: rotate(180deg);
}

.advanced-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-body);
}

.advanced-search-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 170px;
}

.advanced-search-field label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.advanced-search-field input,
.advanced-search-field select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* "Créateurs vérifiés uniquement": a checkbox row, not a labelled field. */
.advanced-search-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-end;
    padding-bottom: 0.55rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.advanced-search-field--checkbox input {
    width: auto;
}

.advanced-search-field input::placeholder {
    color: var(--text-muted);
}

.advanced-search-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-basis: 100%;
}

.advanced-search-actions a {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.video-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    border-radius: var(--radius-md);
}

.video-card:hover .video-card-title a {
    color: var(--accent);
}

.video-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-media);
    overflow: hidden;
    background-color: #070D1C;
    margin-bottom: 0.75rem;
}

.video-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-duration-tag {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background-color: rgba(7, 13, 28, 0.88);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    letter-spacing: 0.02em;
}

.video-card-watch-later-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background-color: rgba(7, 13, 28, 0.72);
    color: #FFFFFF;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.video-thumb-wrap:hover .video-card-watch-later-btn,
.video-card-watch-later-btn.is-queued {
    opacity: 1;
}

.video-card-watch-later-btn.is-queued {
    color: var(--bluvy-blue);
}

.video-progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.25);
}

.video-progress-fill {
    height: 100%;
    background-color: var(--accent);
}

.history-item-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.history-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    align-self: flex-start;
}

.history-remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--bluvy-error);
    color: var(--bluvy-error);
}

.history-remove-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Playlist Management */
.playlist-manage-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
}

.playlist-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.playlist-select-all-label input[type="checkbox"],
.playlist-item-checkbox-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bluvy-blue);
    cursor: pointer;
}

.playlist-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.playlist-selected-counter {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.playlist-btn-batch-delete {
    background: var(--card-bg);
    border-color: var(--bluvy-error) !important;
    color: var(--bluvy-error) !important;
    font-weight: 700;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.playlist-btn-batch-delete:hover:not(:disabled) {
    background: var(--bluvy-error) !important;
    color: #ffffff !important;
}

.playlist-item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.playlist-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.25rem;
}

.playlist-item-checkbox-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.playlist-item-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.playlist-item-remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--bluvy-error);
    color: var(--bluvy-error);
}

.live-banner-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #FFFFFF;
}

.live-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--bluvy-error);
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--bluvy-error);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 0.4rem;
}

.live-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--bluvy-error);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.live-banner-viewers {
    margin-left: auto;
    font-weight: 600;
    opacity: 0.9;
    font-size: 0.8rem;
}

/* Live Player Component & Creator Page Live Hero */
.live-player-component {
    position: relative;
    width: 100%;
}

.live-player-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--radius-media);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    box-shadow: var(--shadow-md);
}

.live-embed-wrapper {
    position: relative;
}

.live-embed-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.player-top-left-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
}

.live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    background: rgba(229, 72, 77, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(229, 72, 77, 0.4);
    border-radius: var(--radius-pill, 9999px);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.live-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff4757;
    animation: pulse-live 1.5s infinite ease-in-out;
}

@keyframes pulse-live {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

.live-viewers-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    background: rgba(7, 13, 28, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill, 9999px);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* Bouton DIRECT / Live Edge dans la barre de contrôle (sans aucun hover de fond) */
.player-live-edge-btn,
.media-default-skin .player-live-edge-btn,
.media-default-skin .media-button--live,
.media-button--live {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 6px !important;
    height: 36px !important;
    cursor: pointer !important;
    color: #FFFFFF !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    user-select: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    transition: opacity 0.15s ease !important;
}

.player-live-edge-btn:hover,
.player-live-edge-btn:focus,
.player-live-edge-btn:focus-visible,
.player-live-edge-btn:active,
.media-default-skin .player-live-edge-btn:hover,
.media-default-skin .player-live-edge-btn:focus,
.media-default-skin .player-live-edge-btn:active,
.media-default-skin .media-button--live:hover,
.media-default-skin .media-button--live:focus,
.media-default-skin .media-button--live:active,
.media-button--live:hover,
.media-button--live:focus,
.media-button--live:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 0.85 !important;
}

.player-live-edge-btn .live-edge-dot,
.media-default-skin .player-live-edge-btn .live-edge-dot,
.media-default-skin .media-button--live::before,
.media-button--live::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    flex-shrink: 0 !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.player-live-edge-btn[data-live-edge] .live-edge-dot,
.player-live-edge-btn.is-live-edge .live-edge-dot,
.media-default-skin .player-live-edge-btn[data-live-edge] .live-edge-dot,
.media-default-skin .player-live-edge-btn.is-live-edge .live-edge-dot,
.media-default-skin .media-button--live[data-live-edge]::before,
.media-default-skin .media-button--live.is-live-edge::before,
.media-button--live[data-live-edge]::before,
.media-button--live.is-live-edge::before {
    background-color: #ff4757 !important;
}

.player-live-edge-btn:not([data-live-edge]):not(.is-live-edge) {
    color: rgba(255, 255, 255, 0.7) !important;
}

.player-mode-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 30px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    line-height: 1;
}

.player-mode-switch-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.player-mode-switch-btn--floating {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.creator-live-hero {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid rgba(229, 72, 77, 0.35);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

@media (min-width: 900px) {
    .creator-live-hero {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        align-items: center;
        gap: 1.75rem;
        padding: 1.5rem;
    }
}

.creator-live-hero-player {
    width: 100%;
}

.creator-live-hero-player .live-player-wrapper {
    border-radius: var(--radius-media);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.creator-live-hero-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.creator-live-hero-badge-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.creator-live-viewers-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.creator-live-hero-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0;
}

.creator-live-hero-actions {
    margin-top: 0.5rem;
}

.video-info-box {
    display: flex;
    gap: 0.75rem;
}

.video-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.video-meta-body {
    flex: 1;
    min-width: 0;
}

.video-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-author-line {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.825rem;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
}

.verified-icon-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: help;
}

.verified-icon {
    width: 14px;
    height: 14px;
    color: var(--bluvy-blue);
    flex-shrink: 0;
}

.video-stats-line {
    font-size: 0.775rem;
    color: var(--text-muted);
}

/* Separator is structural, not typed into the markup. Bare <span> only —
   styled pills (.video-ai-pill etc.) keep their own spacing. */
.video-stats-line > span + span:not([class])::before,
.watch-description-head > span + span:not([class])::before {
    content: "·";
    margin: 0 0.4em;
    color: var(--text-muted);
}

/* ==========================================================================
   Creator Page (Image 2 & 4 des maquettes)
   ========================================================================== */
.creator-page-container {
    max-width: 1300px;
    margin: 0 auto;
}

.channel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.channel-identity {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.channel-avatar-large {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-surface);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    background-color: var(--bg-surface-elevated);
}

.channel-info-text h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.channel-handle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.channel-bio-line {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.channel-stats-line {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.channel-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.btn-subscribe {
    background-color: var(--bluvy-blue);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.55rem 1.4rem;
    border-radius: var(--radius-pill);
    transition: background-color 0.15s ease;
}

.btn-subscribe:hover {
    background-color: var(--bluvy-deep);
}

.btn-subscribe.is-following {
    background-color: transparent;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

.btn-subscribe.is-following:hover {
    background-color: var(--bg-chip);
    box-shadow: none;
    transform: none;
}

/* Immersive-style avatar-first subscribe button: the creator's own photo
   doubles as the button, with a small "+"/checkmark badge overlaid at the
   corner instead of a separate text pill — used wherever a follow toggle
   sits next to a creator's identity (creator page, video page, shorts). */
.btn-subscribe-avatar {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: transparent !important;
    border-radius: 50%;
    cursor: pointer;
}

.btn-subscribe-avatar img,
.btn-subscribe-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bluvy-blue);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1rem;
}

.btn-subscribe-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--bluvy-blue);
    border: 2px solid var(--bg-surface);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.btn-subscribe-badge .icon-check {
    display: none;
}

.btn-subscribe-avatar.is-following .btn-subscribe-badge {
    background-color: var(--bluvy-success);
}

.btn-subscribe-avatar.is-following .icon-plus {
    display: none;
}

.btn-subscribe-avatar.is-following .icon-check {
    display: block;
}

/* Over a video (shorts overlay), the page's --bg-surface border wouldn't
   read against near-black footage — pin it to black there instead. */
.shorts-actions .btn-subscribe-badge {
    border-color: #000;
}

/* Tabs du profil créateur */
.channel-tabs-bar {
    display: flex;
    align-items: center;
    gap: 2rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.channel-tab-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.75rem 0;
    position: relative;
    text-decoration: none;
}

.channel-tab-link.active {
    color: var(--bluvy-blue);
    font-weight: 700;
}

.channel-tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--bluvy-blue);
    border-radius: 3px 3px 0 0;
}

/* Filtres de tri des vidéos créateur */
.channel-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.filter-chip {
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background-color: var(--bg-chip);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.filter-chip.active {
    background-color: var(--bluvy-blue);
    color: #FFFFFF;
}

/* Creator Home Shelves */
.creator-shelf {
    margin-bottom: 2.5rem;
}
.creator-shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.creator-shelf-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.creator-shelf-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bluvy-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: opacity 0.15s ease;
}
.creator-shelf-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}
.creator-shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}
.creator-shorts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

/* Same "bigger cards, not just more of them" reasoning as .video-grid's
   own 1920px/2560px rules above. */
@media (min-width: 1920px) {
    .creator-shelf-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    .creator-shorts-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (min-width: 2560px) {
    .creator-shelf-grid {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
    .creator-shorts-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    }
}

@media (min-width: 3840px) {
    .creator-shelf-grid {
        grid-template-columns: repeat(auto-fill, minmax(410px, 1fr));
    }
    .creator-shorts-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}
.creator-short-card .video-thumb-wrap {
    aspect-ratio: 9 / 16 !important;
}

/* ==========================================================================
   Creator Profile - Immersive Mode
   ========================================================================== */
.creator-immersive-header {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.5rem 0.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.creator-immersive-avatar-wrap {
    width: 116px;
    height: 116px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--bg-surface-elevated);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.creator-immersive-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.creator-immersive-avatar.fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    font-weight: 800;
    background-color: var(--bluvy-blue);
    color: #FFFFFF;
}

.creator-immersive-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.creator-immersive-title-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.creator-immersive-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.2;
}

.creator-immersive-handle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.creator-immersive-stats-row {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

.creator-immersive-stat {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.creator-immersive-stat .stat-num {
    font-weight: 800;
    color: var(--text-primary);
    font-size: 1.15rem;
}

.creator-immersive-stat .stat-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

.creator-immersive-actions-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.creator-immersive-btn-follow {
    background-color: var(--bluvy-blue);
    color: #FFFFFF !important;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.55rem 1.6rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.creator-immersive-btn-follow:hover {
    background-color: var(--bluvy-deep);
}

.creator-immersive-btn-follow.is-following {
    background-color: var(--bg-chip);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

.creator-immersive-btn-follow.is-following:hover {
    background-color: var(--bg-surface-elevated);
}

.creator-immersive-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background-color: var(--bg-chip);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.55rem 1.25rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.creator-immersive-btn-secondary:hover {
    background-color: var(--bg-surface-elevated);
}

.creator-immersive-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-chip);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    padding: 0;
}

.creator-immersive-btn-icon:hover {
    background-color: var(--bg-surface-elevated);
    color: var(--text-primary);
}

.creator-immersive-btn-icon.is-muted,
.creator-immersive-btn-icon.is-blocking {
    background-color: rgba(229, 72, 77, 0.15);
    color: var(--bluvy-error);
    border-color: rgba(229, 72, 77, 0.35);
}

.creator-immersive-bio {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 700px;
}

.creator-immersive-bio p {
    margin: 0;
}

.creator-immersive-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.creator-immersive-tabs {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.creator-immersive-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.85rem 0.25rem;
    position: relative;
    transition: color 0.15s ease;
}

.creator-immersive-tab:hover {
    color: var(--text-primary);
}

.creator-immersive-tab.active {
    color: var(--bluvy-blue);
    font-weight: 700;
}

.creator-immersive-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2.5px;
    background-color: var(--bluvy-blue);
    border-radius: 2px 2px 0 0;
}

.creator-immersive-sort-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.creator-immersive-sort-btn {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.35rem 0.95rem;
    border-radius: var(--radius-pill);
    background-color: var(--bg-chip);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.creator-immersive-sort-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface-elevated);
}

.creator-immersive-sort-btn.active {
    background-color: var(--bluvy-blue);
    color: #FFFFFF;
    font-weight: 700;
}

.creator-immersive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 0 0.5rem;
}

.creator-immersive-card {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    overflow: hidden;
    background-color: #121212;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.creator-immersive-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.creator-immersive-card-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.creator-immersive-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.creator-immersive-card .video-card-watch-later-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.creator-immersive-card:hover .video-card-watch-later-btn,
.creator-immersive-card:focus-within .video-card-watch-later-btn,
.creator-immersive-card .video-card-watch-later-btn.is-queued {
    opacity: 1;
}

.creator-immersive-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.2rem 0.65rem 0.65rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
}

.creator-immersive-view-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.creator-immersive-duration {
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .creator-immersive-header {
        flex-direction: row;
        gap: 1.25rem;
        align-items: flex-start;
    }

    .creator-immersive-avatar-wrap {
        width: 80px;
        height: 80px;
    }

    .creator-immersive-avatar.fallback {
        font-size: 2rem;
    }

    .creator-immersive-name {
        font-size: 1.35rem;
    }

    .creator-immersive-stats-row {
        gap: 1.15rem;
    }

    .creator-immersive-stat .stat-num {
        font-size: 1.05rem;
    }

    .creator-immersive-stat .stat-desc {
        font-size: 0.85rem;
    }

    .creator-immersive-nav-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .creator-immersive-tabs {
        width: 100%;
        gap: 1.25rem;
        overflow-x: auto;
    }

    .creator-immersive-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 0.6rem;
    }
}

.channel-content-full {
    width: 100%;
}

/* Disposition 2 colonnes avec Widgets (Image 3 des maquettes) */
.channel-layout-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

.widget-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.widget-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
}

/* Shared empty-state card (see _empty_state.html.twig) */
.empty-state-card {
    text-align: center;
    padding: 4rem 1.5rem;
    max-width: 600px;
    margin: 2rem auto;
}

.empty-state-icon {
    margin: 0 auto 1rem auto;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.empty-state-body {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.widget-about-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.widget-meta-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
}

.widget-meta-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

/* ==========================================================================
   Generic content wrapper for listing pages (favorites, history, admin
   grids, etc.) — replaces the old dead `.watch-layout` class (which had
   no CSS rule of its own; every page set its own max-width inline).
   Each caller sets --content-max-width inline to keep its own current
   desktop width unchanged; only the 1920px/2560px surplus is added here,
   proportionally, via calc() — see app.css audit notes.
   ========================================================================== */
.content-container {
    max-width: var(--content-max-width, 1100px);
    margin: 0 auto;
}

@media (min-width: 1920px) {
    .content-container {
        max-width: calc(var(--content-max-width, 1100px) + 500px);
    }
}

@media (min-width: 2560px) {
    .content-container {
        max-width: calc(var(--content-max-width, 1100px) + 1000px);
    }
}

@media (min-width: 3840px) {
    .content-container {
        max-width: calc(var(--content-max-width, 1100px) + 1300px);
    }
}

/* ==========================================================================
   Watch Page Layout (Image 5 des maquettes - 2 colonnes avec "À suivre")
   ========================================================================== */
.watch-layout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    max-width: 1560px;
    margin: 0 auto;
}

.watch-main-column {
    min-width: 0;
}

/* Large/2K/4K screens: the player column stays a fixed 1560px-derived
   width no matter how much horizontal space is available otherwise —
   raise the cap in three steps instead of letting it track the viewport
   unbounded. Each target below is hand-checked to actually fit within
   (viewport − 240px sidebar − .app-content's pinned padding, see the
   padding-pin block near :root) at the exact breakpoint threshold, with
   comfortable margin to spare — CSS Grid/flex would otherwise just
   silently overflow into a horizontal scrollbar if a target were too
   ambitious for the real available space. */
@media (min-width: 1920px) {
    .watch-layout-grid,
    .channel-layout-grid {
        max-width: 1600px;
        margin: 0 auto;
    }
}

@media (min-width: 2560px) {
    .watch-layout-grid,
    .channel-layout-grid {
        max-width: 2100px;
    }
}

@media (min-width: 3840px) {
    .watch-layout-grid,
    .channel-layout-grid {
        max-width: 2400px;
    }
}

/* ==========================================================================
   Bluvy Tube — Video.js v10 Custom Skin Overrides & High-Fidelity UI
   ========================================================================== */
video-player,
live-video-player,
media-i18n {
    display: contents;
}

.bluvy-video-player {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-media);
    overflow: hidden;
    margin-bottom: 1.25rem;
    background-color: #070D1C;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.media-default-skin {
    --media-accent-color: #185DFF;
    --media-accent-contrast-color: #FFFFFF;
    --media-accent-background-color: rgba(24, 93, 255, 0.22);
    --media-surface-background-color: rgba(7, 13, 28, 0.85);
    --media-surface-backdrop-filter: blur(16px) saturate(1.4);
    --media-container-border-radius: var(--radius-media);
    --media-focus-ring-color: #3BD3E7;
    --media-icon-size: 22px;
}

/* Large/2K/4K screens, non-fullscreen: the vendor skin's own --scale
   variable only steps up inside :fullscreen (see video-player-skin.css),
   never for the normal embedded player — but the player column itself
   now grows well beyond its original ~1148px width above 1920px (see
   .watch-layout-grid's own breakpoints), so its controls should grow
   too. Every value bumped here is already a flat !important override
   below, so this just adds more steps to that same existing pattern. */
@media (min-width: 1920px) {
    .media-default-skin {
        --media-icon-size: 24px;
    }
}

@media (min-width: 2560px) {
    .media-default-skin {
        --media-icon-size: 28px;
    }
}

@media (min-width: 3840px) {
    .media-default-skin {
        --media-icon-size: 32px;
    }
}

/* 1. Overlay Supérieur (Hint plein écran, Actions Mobile Haut Droite) */
.player-top-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 25;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(7, 13, 28, 0.85) 0%, rgba(7, 13, 28, 0.35) 60%, transparent 100%);
    opacity: 1;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Top overlay : visible au repos/pause/survol, s'efface lors de la lecture sans survol */
.media-default-skin--video[data-playing]:not(:hover):not([data-paused]) .player-top-overlay,
video-player[data-playing]:not(:hover):not([data-paused]) .player-top-overlay {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

video-player:hover .player-top-overlay,
video-player:not([data-playing]) .player-top-overlay,
video-player[data-paused] .player-top-overlay,
.media-default-skin--video:hover .player-top-overlay,
.media-default-skin--video:not([data-playing]) .player-top-overlay,
.media-default-skin--video[data-paused] .player-top-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Surcouche "Lecture automatique" — voir autoplay_controller.js */
.autoplay-overlay {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    max-width: min(90%, 380px);
    padding: 0.85rem;
    border-radius: var(--radius-md);
    background: rgba(7, 13, 28, 0.92);
    color: #F4F8FF;
}

.autoplay-overlay-thumb {
    width: 72px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

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

.autoplay-overlay-countdown {
    margin: 0 0 0.15rem;
    font-size: 0.8rem;
    color: #AAB8D0;
}

.autoplay-overlay-title {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autoplay-overlay-toggle-off {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #AAB8D0;
    cursor: pointer;
}

.player-fullscreen-hint {
    pointer-events: none;
    background: rgba(11, 23, 54, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(59, 211, 231, 0.2);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #FFFFFF;
    display: none;
}

.bluvy-video-player:fullscreen .player-fullscreen-hint {
    display: block;
}

.player-fullscreen-hint kbd {
    background: rgba(59, 211, 231, 0.2);
    color: var(--bluvy-cyan);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.75rem;
}

.player-top-right-actions {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.player-top-btn {
    background: rgba(7, 13, 28, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

.player-top-btn:hover {
    background: rgba(24, 93, 255, 0.35) !important;
    border-color: var(--bluvy-cyan) !important;
    color: var(--bluvy-cyan) !important;
    transform: scale(1.08);
}

@media (min-width: 769px) {
    .player-top-right-actions {
        display: none !important;
    }
}

/* 2. Bouton Central Play Épuré (Sans fond / sans rond) - Mobile Uniquement */
.player-center-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    margin: 0 !important;
    cursor: pointer;
    z-index: 15;
    color: #FFFFFF !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
    opacity: 1;
    pointer-events: auto;
    box-sizing: border-box !important;
}

.player-center-play-btn .center-play-icon {
    width: 44px !important;
    height: 44px !important;
    fill: currentColor !important;
    color: #FFFFFF !important;
    display: block !important;
    margin: auto !important;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Masqué sur bureau (desktop), actif uniquement sur mobile */
@media (min-width: 769px) {
    .player-center-play-btn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .player-center-play-btn {
        display: flex !important;
    }

    .player-center-play-btn .center-play-icon {
        width: 44px !important;
        height: 44px !important;
    }
}

.player-center-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.12);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.player-center-play-btn:active {
    transform: translate(-50%, -50%) scale(0.92) !important;
}

/* Disparaît complètement dès que la vidéo est en cours de lecture */
video-player[data-playing] .player-center-play-btn,
.player-center-play-btn[data-started]:not([data-paused]):not([data-ended]),
.media-default-skin:has(.media-button--play[data-started]:not([data-paused]):not([data-ended])) .player-center-play-btn,
.media-default-skin:has(video:not([paused])) .player-center-play-btn,
.media-default-skin:has(.media-controls--root[data-playing]) .player-center-play-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translate(-50%, -50%) scale(0.85) !important;
}

/* Reste affiché quand la vidéo est en pause, terminée ou avant démarrage */
video-player:not([data-playing]) .player-center-play-btn,
.player-center-play-btn:not([data-started]),
.player-center-play-btn[data-paused],
.player-center-play-btn[data-ended],
.media-default-skin:has(video[paused]) .player-center-play-btn,
.media-default-skin:has(.media-controls--root:not([data-playing])) .player-center-play-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* 3. Zone Desktop : Dégradé Continu YouTube + Timeline + Contrôles */
.player-desktop-layer {
    position: absolute !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 20 !important;
    background: linear-gradient(to top, rgba(7, 13, 28, 0.94) 0%, rgba(7, 13, 28, 0.6) 45%, rgba(7, 13, 28, 0.15) 80%, transparent 100%) !important;
    padding-top: 2.5rem !important;
    padding-bottom: 0.25rem !important;
    padding-inline: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

/* S'efface UNIQUEMENT en cours de lecture lorsque le lecteur n'est pas survolé */
.media-default-skin--video[data-playing]:not(:hover):not([data-paused]) .player-desktop-layer:not(:hover):not(:focus-within),
video-player[data-playing]:not(:hover):not([data-paused]) .player-desktop-layer:not(:hover):not(:focus-within) {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
}

/* 100% visible au repos, au survol, en pause, ou au focus */
video-player:hover .player-desktop-layer,
video-player:not([data-playing]) .player-desktop-layer,
video-player[data-paused] .player-desktop-layer,
.media-default-skin--video:hover .player-desktop-layer,
.media-default-skin--video:not([data-playing]) .player-desktop-layer,
.media-default-skin--video[data-paused] .player-desktop-layer,
.player-desktop-layer:hover,
.player-desktop-layer:focus-within,
.player-desktop-layer[data-visible] {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Scrubber / Barre de Progression YouTube Style (Desktop) */
.player-timeline-outer {
    position: relative;
    width: 100%;
    padding: 0 12px;
    margin-bottom: 2px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    z-index: 22;
    pointer-events: auto;
}

.player-timeline-outer media-time-slider.media-slider {
    width: 100% !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    --track-size: 4px;
    --track-highlighted-size: 6px;
    --thumb-size: 14px;
}

.player-timeline-outer .media-slider__track {
    width: 100% !important;
    height: 4px !important;
    border-radius: 2px !important;
    background-color: rgba(255, 255, 255, 0.28) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: height 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.player-timeline-outer:hover .media-slider__track,
.player-timeline-outer media-time-slider[data-dragging] .media-slider__track,
.player-timeline-outer media-time-slider[data-seeking] .media-slider__track,
.player-timeline-outer media-time-slider[data-pointing] .media-slider__track {
    height: 6px !important;
}

.player-timeline-outer .media-slider__buffer {
    background-color: rgba(255, 255, 255, 0.45) !important;
    border-radius: inherit !important;
}

.player-timeline-outer .media-slider__fill {
    background-color: var(--bluvy-cyan, #3BD3E7) !important;
    box-shadow: 0 0 8px rgba(59, 211, 231, 0.5) !important;
    border-radius: inherit !important;
}

.player-timeline-outer .media-slider__thumb {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.player-timeline-outer:hover .media-slider__thumb,
.player-timeline-outer media-time-slider[data-dragging] .media-slider__thumb,
.player-timeline-outer media-time-slider[data-seeking] .media-slider__thumb,
.player-timeline-outer media-time-slider[data-pointing] .media-slider__thumb,
.player-timeline-outer media-time-slider:focus-visible .media-slider__thumb {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Carte d'aperçu au survol (Thumbnail preview). Ces classes remplacent
   celles du skin vendor (.media-slider__preview / .media-slider__thumbnail)
   qui portaient le masquage par défaut et le plafond de taille — sans ces
   règles, l'image s'affiche à sa taille naturelle non contrainte et
   recouvre en permanence tout le lecteur, contrôles compris. */
.player-thumbnail-preview {
    bottom: 100%;
    margin-bottom: 10px;
    z-index: 30;
    opacity: 0;
    transform: translateY(4px) scale(0.97);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.player-timeline-outer media-time-slider:hover .player-thumbnail-preview,
.player-timeline-outer media-time-slider[data-dragging] .player-thumbnail-preview,
.player-timeline-outer media-time-slider[data-pointing] .player-thumbnail-preview,
.player-timeline-outer media-time-slider:focus-visible .player-thumbnail-preview {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.preview-thumb-card {
    position: relative;
    width: 160px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.preview-thumb-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.preview-thumb-time {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
}

/* Barre de Contrôles YouTube Style — Alignement Vertical Parfait */
.media-default-skin .media-controls--root.player-controls-bar,
.media-default-skin .media-controls--root.player-desktop-controls-bar {
    position: relative !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.player-controls-bottom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}

.player-controls-left-group,
.player-controls-right-group {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Volume Group avec slider horizontal YouTube */
.player-volume-group {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.player-inline-volume-slider {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    height: 18px !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.player-volume-group:hover .player-inline-volume-slider,
.player-inline-volume-slider:focus-within,
.player-inline-volume-slider[data-dragging] {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    opacity: 1 !important;
    margin-left: 6px !important;
    margin-right: 8px !important;
    pointer-events: auto !important;
}

.player-time-display {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    line-height: 1 !important;
    gap: 4px !important;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    white-space: nowrap;
    user-select: none;
    box-sizing: border-box !important;
    transition: margin 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}



.media-time-separator {
    margin-inline: 2px;
    opacity: 0.5;
}

.player-chapter-separator {
    margin-inline: 6px;
    opacity: 0.4;
}

.player-chapter-btn {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    line-height: 1 !important;
    gap: 4px;
    background: none;
    border: none;
    padding: 0 6px !important;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    max-width: 220px;
    box-sizing: border-box !important;
}

.player-chapter-btn:hover {
    color: var(--bluvy-cyan);
    background-color: rgba(255, 255, 255, 0.08);
}

.player-chapter-current-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Boutons de contrôle circulaires — Dimensionnement et centrage strict */
.media-default-skin .media-button,
.media-default-skin .media-button--icon,
.media-default-skin .media-button--subtle,
.media-default-skin button.media-button,
.media-default-skin media-play-button,
.media-default-skin media-mute-button,
.media-default-skin media-fullscreen-button,
.media-default-skin media-pip-button,
.media-default-skin media-airplay-button,
.media-default-skin media-cast-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background: transparent;
    color: #FFFFFF;
    border: 1px solid transparent;
    line-height: 1 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

@media (min-width: 1920px) {
    .media-default-skin .media-button,
    .media-default-skin .media-button--icon,
    .media-default-skin .media-button--subtle,
    .media-default-skin button.media-button,
    .media-default-skin media-play-button,
    .media-default-skin media-mute-button,
    .media-default-skin media-fullscreen-button,
    .media-default-skin media-pip-button,
    .media-default-skin media-airplay-button,
    .media-default-skin media-cast-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }
}

.media-default-skin .media-button:hover,
.media-default-skin .media-button:focus-visible,
.media-default-skin .media-button[aria-expanded="true"] {
    background-color: rgba(24, 93, 255, 0.28) !important;
    border-color: rgba(59, 211, 231, 0.35) !important;
    color: var(--bluvy-cyan) !important;
    transform: scale(1.06);
    box-shadow: 0 0 10px rgba(59, 211, 231, 0.25);
}

.media-default-skin .media-button svg,
.media-default-skin .media-button .media-icon,
.media-default-skin .media-button--icon .media-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin: auto !important;
    padding: 0 !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Gestion stricte de l'icône active Video.js */
.media-default-skin .media-button .media-icon {
    display: none !important;
}

.media-default-skin .media-button--play[data-ended] .media-icon--restart,
.media-default-skin .media-button--play:not([data-ended])[data-paused] .media-icon--play,
.media-default-skin .media-button--play:not([data-ended]):not([data-started]) .media-icon--play,
.media-default-skin .media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause {
    display: block !important;
}

.media-default-skin .media-button--mute[data-muted] .media-icon--volume-off,
.media-default-skin .media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low,
.media-default-skin .media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high {
    display: block !important;
}

.media-default-skin .media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
.media-default-skin .media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit {
    display: block !important;
}

.media-default-skin .media-button--pip:not([data-pip]) .media-icon--pip-enter,
.media-default-skin .media-button--pip[data-pip] .media-icon--pip-exit {
    display: block !important;
}

.media-default-skin .media-button--cast:not([data-cast-state="connected"]) .media-icon--cast-enter,
.media-default-skin .media-button--cast[data-cast-state="connected"] .media-icon--cast-exit {
    display: block !important;
}

.media-default-skin .media-button--airplay:not([data-airplay-state="connected"]) .media-icon--airplay-enter,
.media-default-skin .media-button--airplay[data-airplay-state="connected"] .media-icon--airplay-exit {
    display: block !important;
}

/* 4. Zone Mobile : Scrubber à bottom: 0 + Bulle Temps/Titre et Fullscreen au-dessus */
.player-mobile-layer {
    position: absolute !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 20 !important;
    background: linear-gradient(to top, rgba(7, 13, 28, 0.92) 0%, rgba(7, 13, 28, 0.5) 50%, rgba(7, 13, 28, 0.1) 80%, transparent 100%) !important;
    padding-top: 1.5rem !important;
    padding-bottom: 0 !important;
    padding-inline: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

/* S'efface sur mobile en lecture inactive */
.media-default-skin--video[data-playing]:not([data-paused]) .player-mobile-layer:not([data-visible]),
video-player[data-playing]:not([data-paused]) .player-mobile-layer:not([data-visible]) {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
}

video-player:not([data-playing]) .player-mobile-layer,
video-player[data-paused] .player-mobile-layer,
.media-default-skin--video:not([data-playing]) .player-mobile-layer,
.media-default-skin--video[data-paused] .player-mobile-layer,
.player-mobile-layer[data-visible] {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.player-mobile-bottom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 10px 4px 10px !important;
    box-sizing: border-box !important;
}

.player-mobile-pills-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: calc(100% - 44px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.player-mobile-time-pill {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    padding: 0 8px !important;
    background: rgba(7, 13, 28, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(59, 211, 231, 0.25);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem !important;
    font-weight: 600;
    color: #FFFFFF;
    flex-shrink: 0 !important;
    white-space: nowrap;
    box-sizing: border-box !important;
}

.player-mobile-title-pill {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    padding: 0 10px !important;
    background: rgba(7, 13, 28, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
    font-size: 0.75rem !important;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    max-width: clamp(80px, 32vw, 150px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.player-mobile-title-text {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.player-mobile-fullscreen-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    background: rgba(7, 13, 28, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
}

.player-mobile-fullscreen-btn .media-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex-shrink: 0 !important;
    color: #FFFFFF !important;
}

.player-mobile-fullscreen-btn:not([data-fullscreen]) .media-icon--fullscreen-enter,
.player-mobile-fullscreen-btn[data-fullscreen] .media-icon--fullscreen-exit {
    display: block !important;
    opacity: 1 !important;
}

.player-mobile-fullscreen-btn:not([data-fullscreen]) .media-icon--fullscreen-exit,
.player-mobile-fullscreen-btn[data-fullscreen] .media-icon--fullscreen-enter {
    display: none !important;
    opacity: 0 !important;
}

.player-mobile-layer::before,
.player-mobile-layer::after,
.player-mobile-bottom-row::before,
.player-mobile-bottom-row::after,
.player-mobile-timeline::before,
.player-mobile-timeline::after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
    border: none !important;
}

.player-mobile-timeline {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-end !important;
}

.player-mobile-time-slider {
    width: 100% !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    display: flex !important;
    align-items: flex-end !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

.player-mobile-time-slider .media-slider__track {
    width: 100% !important;
    height: 3px !important;
    border-radius: 0 !important;
    background-color: rgba(255, 255, 255, 0.28) !important;
    position: relative !important;
    overflow: hidden !important;
}

.player-mobile-time-slider:active .media-slider__track,
.player-mobile-time-slider[data-dragging] .media-slider__track,
.player-mobile-time-slider[data-seeking] .media-slider__track {
    height: 5px !important;
}

.player-mobile-time-slider .media-slider__buffer {
    background-color: rgba(255, 255, 255, 0.45) !important;
}

.player-mobile-time-slider .media-slider__fill {
    background-color: var(--bluvy-cyan, #3BD3E7) !important;
    box-shadow: 0 0 8px rgba(59, 211, 231, 0.5) !important;
}

.player-mobile-time-slider .media-slider__thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
}

/* Responsive Mobile (< 768px) */
@media (max-width: 768px) {
    /* Sur mobile : Barre de contrôle desktop complètement masquée */
    .player-desktop-layer,
    .media-default-skin .player-desktop-layer {
        display: none !important;
    }

    .player-mobile-layer,
    .media-default-skin .player-mobile-layer {
        display: flex !important;
    }

    .player-thumbnail-preview {
        display: none !important;
    }

    .media-default-skin--video::after,
    .media-default-skin::after {
        display: none !important;
        content: none !important;
        box-shadow: none !important;
    }
}

/* Responsive Desktop (>= 769px) */
@media (min-width: 769px) {
    .player-mobile-layer,
    .media-default-skin .player-mobile-layer {
        display: none !important;
    }

    .player-desktop-layer,
    .media-default-skin .player-desktop-layer {
        display: flex !important;
    }
}

/* Pastille bleue sur l'engrenage Paramètres */
.has-notification-dot {
    position: relative;
}

.settings-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bluvy-cyan);
    box-shadow: 0 0 6px var(--bluvy-cyan);
}

/* 4. Menu Paramètres Flottant */
.player-settings-popup {
    min-width: 240px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: rgba(7, 13, 28, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 6px 0 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
    box-sizing: border-box !important;
}

.settings-menu-list {
    display: flex;
    flex-direction: column;
}

.settings-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: #FFFFFF;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.12s ease;
}

.settings-menu-row:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.settings-menu-back {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 4px;
    padding-bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.settings-menu-back:hover {
    color: #FFFFFF;
}

.settings-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.settings-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    font-weight: 600;
}

.settings-val-blue {
    color: var(--bluvy-cyan);
    font-weight: 800;
}

.settings-switch {
    width: 32px;
    height: 18px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.25);
    position: relative;
    transition: background-color 0.2s ease;
}

.settings-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #FFFFFF;
    transition: transform 0.2s ease;
}

.settings-switch.is-active {
    background-color: var(--bluvy-blue);
}

.settings-switch.is-active::after {
    transform: translateX(14px);
}

.settings-menu-row--action {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
}

.settings-menu-row--action.is-active {
    color: var(--bluvy-cyan);
    font-weight: 700;
}

.settings-menu-row--action.is-active .is-active-check {
    color: var(--bluvy-cyan);
    display: flex;
}

.chapters-menu-popup {
    max-height: 320px;
    overflow-y: auto;
}

/* 5. Menu Contextuel Clic Droit Lecteur */
.video-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 260px;
    background: rgba(7, 13, 28, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    padding: 6px 0 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
    display: flex;
    flex-direction: column;
}

.video-context-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #FFFFFF;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.12s ease;
}

.video-context-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.video-context-menu-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.12);
    margin: 4px 0;
}

.video-context-menu-check {
    color: var(--bluvy-cyan);
    display: inline-flex;
    align-items: center;
}

/* 6. Horodatages Cliquables dans Description & Commentaires */
.timestamp-link {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 2px;
    font-size: inherit;
    font-weight: 600;
    font-family: inherit;
    color: var(--bluvy-cyan, #00d2ff);
    background: rgba(0, 210, 255, 0.08);
    border: 1px solid rgba(0, 210, 255, 0.22);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    vertical-align: baseline;
}

.timestamp-link:hover {
    background: rgba(0, 210, 255, 0.22);
    border-color: rgba(0, 210, 255, 0.5);
    color: #ffffff;
}

/* 7. Mode Cinéma (Theater Mode) */
.watch-layout-grid.is-theater-mode {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
}

.watch-layout-grid.is-theater-mode .bluvy-video-player {
    width: 100% !important;
    max-height: calc(100vh - 140px) !important;
    max-width: calc((100vh - 140px) * (16 / 9)) !important;
    aspect-ratio: 16 / 9 !important;
    margin-inline: auto !important;
    margin-bottom: 1.5rem !important;
}

.watch-layout-grid.is-theater-mode .live-player-component {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.watch-layout-grid.is-theater-mode .live-player-wrapper {
    width: 100% !important;
    max-height: calc(100vh - 140px) !important;
    max-width: calc((100vh - 140px) * (16 / 9)) !important;
    aspect-ratio: 16 / 9 !important;
    margin-inline: auto !important;
}

.watch-layout-grid.is-theater-mode .watch-main-column {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.watch-layout-grid.is-theater-mode .watch-main-column > *:not(.bluvy-video-player):not(media-i18n):not(.live-player-component) {
    width: 100% !important;
    max-width: 1200px !important;
}

.watch-layout-grid.is-theater-mode .watch-side-column,
.watch-layout-grid.is-theater-mode .watch-sidebar-column {
    margin-top: 2rem !important;
    max-width: 1200px !important;
    width: 100% !important;
    margin-inline: auto !important;
}

.watch-layout-grid.is-theater-mode .live-chat-panel {
    max-width: 1200px;
    height: 520px;
}

.media-button--theater.is-active svg {
    color: var(--bluvy-cyan);
}

.watch-video-title {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
}

.watch-creator-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.watch-creator-profile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.watch-creator-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.watch-creator-meta h3 {
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.watch-creator-meta p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Action Pills Group (Like/Dislike, Partager, Enregistrer) */
.watch-action-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pill-group {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-chip);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-chip);
    border-radius: var(--radius-pill);
    transition: background-color 0.15s ease;
}

.pill-btn:hover {
    background-color: var(--bg-chip-hover);
}

.pill-group .pill-btn {
    border-radius: 0;
}

.pill-btn.is-liked,
.pill-btn.is-queued,
.player-quick-btn.is-liked,
.player-quick-btn.is-favorited {
    color: var(--bluvy-blue);
}

/* AI Generated Badges */
.video-ai-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(7, 13, 28, 0.82);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.video-ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-chip);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
}

.btn-create-pill.is-muted,
.btn-create-pill.is-blocking {
    color: var(--bluvy-error) !important;
    border-color: var(--bluvy-error) !important;
}

/* Vertical feed ("Shorts") */
/* .shorts-feed sizes itself against the viewport directly (height calc
   below) rather than flowing with the page — .app-content's usual padding
   would only shrink the box it renders in without .shorts-feed's own calc
   ever accounting for it, clipping its bottom edge. Zero that padding out
   specifically on this page instead of chasing the exact padding figure
   (which also differs by breakpoint) in every height formula below.
   Plain class on <body> (set from base.html.twig's currentRoute), not
   :has() — :has() support can't be assumed on every mobile browser still
   in use, and this rule is exactly the kind of thing that fails silently
   (no error, just the old padding quietly winning) when it isn't. */
body.is-shorts-page .app-content,
body.is-feed-mode-immersive .app-content:has(.shorts-feed-wrapper),
body.is-feed-mode-immersive .app-content:has(.watch-immersive-container) {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    height: 100%;
}

body.is-shorts-page,
body.is-shorts-page .app-container,
body.is-feed-mode-immersive:has(.shorts-feed-wrapper),
body.is-feed-mode-immersive:has(.watch-immersive-container),
body.is-feed-mode-immersive:has(.shorts-feed-wrapper) .app-container,
body.is-feed-mode-immersive:has(.watch-immersive-container) .app-container {
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
}

body.is-shorts-page .app-body,
body.is-feed-mode-immersive:has(.shorts-feed-wrapper) .app-body,
body.is-feed-mode-immersive:has(.watch-immersive-container) .app-body {
    min-height: calc(100dvh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    overflow: hidden;
}

body.is-shorts-page {
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.shorts-feed-wrapper {
    position: relative;
    width: 100%;
    height: calc(100dvh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-canvas);
    overflow: hidden;
}

@media (max-width: 768px) {
    .shorts-feed-wrapper {
        height: calc(100dvh - var(--header-height) - var(--mobile-tabbar-height, 60px) - env(safe-area-inset-bottom, 0px));
    }
}

/*
 * Flex sibling of the comments panel (.watch-immersive-panel, reused here —
 * see _comments_panel.html.twig): shrinks to make room for it when it opens,
 * exactly like .watch-immersive-main does on the video page. .shorts-feed,
 * the nav arrows, and the shortcuts hint all live inside this non-scrolling
 * wrapper so they track its (possibly shrunk) box instead of staying pinned
 * to the full-width .shorts-feed-wrapper and ending up under the panel.
 */
.shorts-feed-main {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shorts-feed {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    background-color: transparent;
    scrollbar-width: none;
}

.shorts-feed::-webkit-scrollbar {
    display: none;
}

[data-shorts-batch] {
    display: contents;
}

.shorts-feed-item {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    /*
     * Deliberately NOT overflow: hidden / content-visibility: auto here
     * (both were tried and reverted): .shorts-card already clips its own
     * video/blur-background box, and this element also hosts the share-menu
     * popover (see share_menu_controller.js), which must be able to render
     * above the card's edge. `content-visibility: auto` implies `contain:
     * paint` unconditionally (even while the card is on-screen), which
     * clipped that popover the same way overflow: hidden would have —
     * confirmed as the cause of it rendering half cut-off on /home and
     * /explore.
     */
}

.shorts-item-inner {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 1.25rem;
    height: calc(100% - 1.25rem);
    max-height: calc(100dvh - var(--header-height) - 1.25rem);
}

.shorts-card {
    --media-border-radius: 16px;
    --media-object-fit: cover;
    position: relative;
    flex: 0 0 auto;
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: 9 / 16;
    width: auto;
    min-width: min(280px, calc(100vw - 80px));
    max-width: min(580px, calc((100dvh - var(--header-height) - 1.25rem) * 9 / 16));
    border-radius: 16px;
    background-color: var(--bg-surface-elevated, var(--bg-chip));
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.shorts-card.is-letterboxed {
    --media-object-fit: contain;
    aspect-ratio: 9 / 16;
}

.shorts-card.is-letterboxed .shorts-video-player video,
.shorts-card.is-letterboxed .shorts-video-player hlsjs-video {
    object-fit: contain;
}

@media (min-width: 1024px) {
    .shorts-item-inner {
        height: calc(100% - 1rem);
        max-height: calc(100dvh - var(--header-height) - 1rem);
        gap: 1.5rem;
    }
    .shorts-card {
        max-width: min(600px, calc((100dvh - var(--header-height) - 1rem) * 9 / 16));
    }
}

@media (min-width: 1440px) {
    .shorts-card {
        max-width: min(660px, calc((100dvh - var(--header-height) - 1rem) * 9 / 16));
    }
}

@media (min-width: 1920px) {
    .shorts-card {
        max-width: min(740px, calc((100dvh - var(--header-height) - 1rem) * 9 / 16));
    }
}

.shorts-video-player {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
}

.shorts-video-player video,
.shorts-video-player hlsjs-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shorts-bg-blur {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: blur(30px) brightness(0.55);
    transform: scale(1.15);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.shorts-card.is-letterboxed .shorts-bg-blur {
    opacity: 1;
}

.shorts-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.8) 100%);
}

.shorts-info {
    pointer-events: auto;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 90%;
}

.shorts-creator-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    max-width: 100%;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    transition: opacity 0.15s ease;
}

.shorts-creator-link:hover {
    opacity: 0.85;
    color: #fff;
}

/*
 * Stacked on their own line each (display name above handle, see
 * shorts/_card.html.twig) instead of joined inline — a long handle and a
 * long display name together on one line could overflow/wrap awkwardly;
 * each now wraps independently, and overflow-wrap guards against a single
 * very long unbroken string doing the same on its own line.
 */
.shorts-creator-name,
.shorts-creator-subname {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.shorts-creator-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
}

.shorts-creator-subname {
    font-weight: 500;
    font-size: 0.85rem;
    opacity: 0.85;
    color: rgba(255, 255, 255, 0.9);
}

.shorts-caption {
    font-size: 0.9rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    word-break: break-word;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.shorts-music-info {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.15rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.shorts-music-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Side Actions Column (Clean, authentic social player design) */
.shorts-side-actions,
.watch-immersive-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 0.5rem;
    flex-shrink: 0;
    z-index: 10;
}

.shorts-action-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

/*
 * The share button reuses .share-menu-wrapper (position: relative,
 * display: inline-flex — see the block further down) so its popover from
 * /video/:id works here too. Pin flex-direction/display explicitly rather
 * than relying on cascade order between the two class blocks.
 */
.shorts-action-group.share-menu-wrapper {
    display: flex;
    flex-direction: column;
}

/*
 * The share trigger sits at the right edge of the screen in the immersive
 * feed (unlike the classic page's inline pill bar), so the popover's
 * default left-anchor would push it off-screen — anchor from the right
 * instead, same fix as .player-quick-actions below. The action column also
 * sits flush against the bottom of the screen (.shorts-item-inner has
 * align-items: flex-end), so the default downward-opening popover was
 * rendering with its lower half past the bottom edge of the scrolling
 * .shorts-feed — clipped there since that container's overflow-y: scroll
 * can't be removed (it's the feed's own scroll-snap mechanism). Open
 * upward instead, which always has room above.
 */
.shorts-side-actions .share-menu-popover,
.shorts-side-actions .quote-compose-panel,
.watch-immersive-actions .share-menu-popover,
.watch-immersive-actions .quote-compose-panel {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 6px);
}

.shorts-action-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shorts-action-circle svg {
    width: 28px;
    height: 28px;
    stroke: #FFFFFF;
    stroke-width: 2;
    fill: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.75));
    transition: transform 0.18s ease, fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
}

.shorts-action-circle:hover {
    transform: scale(1.15);
}

.shorts-action-circle:active {
    transform: scale(0.92);
}

.shorts-action-circle.is-liked svg {
    fill: #ff2b55;
    stroke: #ff2b55;
    filter: drop-shadow(0 2px 8px rgba(255, 43, 85, 0.7));
}

.shorts-action-circle.is-favorited svg {
    fill: #face15;
    stroke: #face15;
    filter: drop-shadow(0 2px 8px rgba(250, 206, 21, 0.7));
}

.shorts-action-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.6);
    text-align: center;
    user-select: none;
    letter-spacing: 0.01em;
}

/* Avatar with follow plus button */
.shorts-action-avatar-group {
    position: relative;
    margin-bottom: 0.5rem;
}

.shorts-avatar-anchor {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #FFFFFF;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: transform 0.15s ease;
}

.shorts-avatar-anchor:hover {
    transform: scale(1.06);
}

.shorts-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shorts-avatar-fallback {
    width: 100%;
    height: 100%;
    background: var(--bluvy-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.shorts-action-avatar-group .btn-subscribe-avatar {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent !important;
    color: #fff;
    border: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: none !important;
}

.shorts-action-avatar-group .btn-subscribe-avatar:hover {
    transform: translateX(-50%) scale(1.18);
}

.shorts-action-avatar-group .btn-subscribe-avatar.is-following {
    background: transparent !important;
    color: #fff;
}

.shorts-action-avatar-group .btn-subscribe-avatar .btn-subscribe-badge {
    position: static;
    width: 20px;
    height: 20px;
    background-color: var(--bluvy-blue);
    border: 2px solid #000;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.shorts-action-avatar-group .btn-subscribe-avatar.is-following .btn-subscribe-badge {
    background-color: var(--bluvy-success);
}

.shorts-action-avatar-group .btn-subscribe-avatar .icon-check {
    display: none;
}

.shorts-action-avatar-group .btn-subscribe-avatar.is-following .icon-plus {
    display: none;
}

.shorts-action-avatar-group .btn-subscribe-avatar.is-following .icon-check {
    display: block;
}

/* Floating Navigation Arrows */
/*
 * Always nested inside a non-scrolling, position: relative "main" wrapper
 * that shrinks when the comments panel opens — .shorts-feed-main on
 * /home, /shorts, /explore; .watch-immersive-main on the video page.
 * position: absolute (not fixed) anchors the arrows to that wrapper's own
 * box, so they move out of the way instead of ending up on top of the
 * panel once it takes space on the right.
 */
.shorts-nav-arrows {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    z-index: 20;
}

/* Tighter right inset on the video page, which has less side padding than the generic feed. */
.watch-immersive-main .shorts-nav-arrows {
    right: 0.5rem;
}

.shorts-nav-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    padding: 0;
}

.shorts-nav-arrow:hover {
    background: rgba(24, 93, 255, 0.35);
    border-color: var(--bluvy-cyan);
    color: var(--bluvy-cyan);
    transform: scale(1.08);
}

.shorts-nav-arrow:active {
    transform: scale(0.95);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Per-card HLS playback error state */
.shorts-error-overlay {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    padding: 0 2rem;
    background: rgba(0, 0, 0, 0.65);
    color: #FFFFFF;
}

/* `display: flex` above has the same specificity as the UA stylesheet's
   `[hidden] { display: none }` and, being an author rule, wins the tie —
   without this override the overlay stays visible despite the hidden
   attribute being set. Same fix applied to .shorts-loadmore-error below. */
.shorts-error-overlay[hidden] {
    display: none;
}

.shorts-error-overlay p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.shorts-error-retry-btn {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 0.45rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.shorts-error-retry-btn:hover {
    background: rgba(24, 93, 255, 0.35);
    border-color: var(--bluvy-cyan);
}

/* Inline banner shown when the next batch fails to load (infinite scroll) */
.shorts-loadmore-error {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.75);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    font-size: 0.85rem;
}

.shorts-loadmore-error button {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.shorts-loadmore-error[hidden] {
    display: none;
}

/*
 * Discoverable keyboard-shortcuts hint. Positioned `absolute` (not `fixed`)
 * so it's anchored within its own reel container (.shorts-feed-wrapper on
 * /home, /shorts, /explore; .watch-immersive-main on the video page) rather
 * than the viewport — a fixed position on the left would sit on top of the
 * app's own left sidebar, and on the right would sit on top of the video
 * page's comments panel when it's open by default on desktop.
 */
.reel-shortcuts-toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    font-weight: 700;
    cursor: pointer;
}

.reel-shortcuts-hint {
    position: absolute;
    right: 1rem;
    bottom: 3.5rem;
    z-index: 40;
    max-width: 240px;
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.reel-shortcuts-hint-dismiss {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    cursor: pointer;
}

.reel-shortcuts-hint p {
    margin: 0;
    padding-right: 1rem;
}

@media (max-width: 900px) {
    .reel-shortcuts-toggle,
    .reel-shortcuts-hint {
        display: none;
    }
}

/* TikTok-style "Pour vous" / "Normal" feed switcher, immersive Home only */
.reel-feed-tabs {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.reel-feed-tab {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.reel-feed-tab:hover {
    color: rgba(255, 255, 255, 0.85);
}

.reel-feed-tab.active {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

/* Shorts Loading Skeleton */
.shorts-skeleton {
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: var(--bg-canvas);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 1;
    visibility: visible;
}

.shorts-skeleton.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.shorts-skeleton-inner {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 1.25rem;
    height: calc(100% - 1.25rem);
    max-height: calc(100dvh - var(--header-height) - 1.25rem);
}

.shorts-skeleton-card {
    position: relative;
    flex: 0 0 auto;
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: 9 / 16;
    width: auto;
    max-width: min(580px, calc((100dvh - var(--header-height) - 1.25rem) * 9 / 16));
    border-radius: 16px;
    background-color: var(--bg-surface-elevated, var(--bg-chip));
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.shorts-skeleton-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shortsSkeletonShimmer 1.8s infinite;
}

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

.shorts-skeleton-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1.25rem;
}

.shorts-skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.shorts-skeleton-creator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.shorts-skeleton-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--border-color);
}

.shorts-skeleton-line {
    border-radius: var(--radius-pill);
    background-color: var(--border-color);
    animation: shortsPulse 1.5s ease-in-out infinite alternate;
}

.shorts-skeleton-line-title {
    width: 140px;
    height: 16px;
}

.shorts-skeleton-line-desc {
    width: 80%;
    height: 12px;
}

.shorts-skeleton-line-desc-short {
    width: 50%;
    height: 12px;
}

.shorts-skeleton-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    padding-bottom: 0.5rem;
    flex-shrink: 0;
}

.shorts-skeleton-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--border-color);
    animation: shortsPulse 1.5s ease-in-out infinite alternate;
}

.shorts-skeleton-btn-avatar {
    width: 48px;
    height: 48px;
}

@keyframes shortsPulse {
    0% { opacity: 0.4; }
    100% { opacity: 0.85; }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .shorts-feed-wrapper {
        height: calc(100dvh - var(--header-height) - var(--mobile-tabbar-height, 60px) - env(safe-area-inset-bottom, 0px));
    }

    .shorts-item-inner {
        width: 100%;
        height: 100%;
        max-height: 100%;
        display: block;
        gap: 0;
    }

    .shorts-card {
        --media-border-radius: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        box-shadow: none;
    }

    .shorts-overlay {
        padding: 1rem;
        padding-bottom: 1.25rem;
    }

    .shorts-info {
        max-width: 75%;
    }

    .shorts-side-actions {
        position: absolute;
        right: 0.75rem;
        bottom: 1.25rem;
        gap: 1rem;
        z-index: 10;
        padding-bottom: 0;
    }

    .shorts-action-circle {
        width: 42px;
        height: 42px;
    }

    .shorts-action-avatar-group {
        margin-bottom: 0.25rem;
    }

    .shorts-avatar-anchor {
        width: 44px;
        height: 44px;
    }

    .shorts-nav-arrows {
        display: none;
    }

    .shorts-skeleton-inner {
        width: 100%;
        height: 100%;
        max-height: 100%;
        display: block;
    }

    .shorts-skeleton-card {
        width: 100%;
        height: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        border-radius: 0;
    }

    .shorts-skeleton-actions {
        position: absolute;
        right: 0.75rem;
        bottom: 1.25rem;
        z-index: 10;
    }
}

.pill-btn:disabled,
.player-quick-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pill-btn:disabled:hover,
.player-quick-btn:disabled:hover {
    background-color: inherit;
    color: inherit;
    transform: none;
}

/* Share menu popover */
.share-menu-wrapper {
    position: relative;
    display: inline-flex;
}

.share-menu-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 0.4rem;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(11, 23, 54, 0.18);
}

.share-menu-popover[hidden],
.quote-compose-panel[hidden] {
    display: none;
}

/* Triggers living in the player's top-right quick-actions cluster sit flush
   against the player's right edge — anchoring their popover from the left
   (the default above) pushes it past the edge, where the player's own
   overflow:hidden clips it. Anchor from the right there instead. */
.player-quick-actions .share-menu-popover,
.player-quick-actions .quote-compose-panel {
    left: auto;
    right: 0;
}

.share-menu-item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.7rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: none;
    border: none;
    border-radius: calc(var(--radius-md) - 4px);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.share-menu-item:hover {
    background-color: var(--bg-chip);
}

.playlist-item-row {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    width: auto;
}

.playlist-menu-empty {
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.playlist-menu-new-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 0.2rem 0.1rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--border-color);
}

.playlist-menu-new-row input {
    flex: 1;
    min-width: 0;
}

.quote-compose-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 280px;
    padding: 0.75rem;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(11, 23, 54, 0.18);
}

.quote-compose-panel textarea {
    resize: vertical;
    min-height: 70px;
}

.quote-compose-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.pill-divider {
    width: 1px;
    height: 18px;
    background-color: var(--border-color);
}

/* Description Box */
.watch-description-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.15rem;
    margin-bottom: 1.75rem;
}

.watch-description-head {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.watch-description-tags {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.watch-hashtag {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bluvy-blue);
}

.watch-description-body {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-line;
}

/* Espace Commentaires */
.watch-comments-section {
    margin-top: 1.5rem;
}

.comment-mention-link {
    color: var(--bluvy-blue);
    font-weight: 600;
    text-decoration: none;
}
.comment-mention-link:hover {
    text-decoration: underline;
}

.comment-hashtag-link {
    color: var(--bluvy-blue);
    font-weight: 600;
    text-decoration: none;
}
.comment-hashtag-link:hover {
    text-decoration: underline;
}

.comment-external-link {
    color: var(--bluvy-blue);
    word-break: break-all;
    text-decoration: none;
}
.comment-external-link:hover {
    text-decoration: underline;
}

.comment-media-image-anchor:hover {
    opacity: 0.9;
    transform: scale(1.01);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.comment-media-external-card:hover {
    background: var(--bg-hover) !important;
}

.watch-bsky-source-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.watch-bsky-source-link:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

.comments-header-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.comment-input-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.comment-input-field {
    flex: 1;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    padding: 0.5rem 0;
    outline: none;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.comment-input-field:focus {
    border-bottom-color: var(--bluvy-blue);
}

/* Colonne "À suivre" (Up Next) */
.watch-sidebar-column {
    min-width: 0;
}

.up-next-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.up-next-title {
    font-size: 1.1rem;
    font-weight: 800;
}

.autoplay-toggle-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.compact-video-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.compact-video-card {
    display: flex;
    gap: 0.75rem;
    text-decoration: none;
}

.compact-thumb-wrap {
    width: 140px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-media);
    overflow: hidden;
    position: relative;
    background-color: #070D1C;
    flex-shrink: 0;
}

.compact-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.compact-video-title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.compact-video-author {
    font-size: 0.775rem;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
}

.compact-video-stats {
    font-size: 0.725rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Mobile Bottom Tab Bar (PWA & Ionic Ready)
   ========================================================================== */
.mobile-tabbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    z-index: 1000;
    align-items: center;
    justify-content: space-around;
}

.tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.tabbar-item.active {
    color: var(--bluvy-blue);
}

.tabbar-item svg {
    width: 22px;
    height: 22px;
}

.tabbar-create-btn {
    width: 44px;
    height: 44px;
    background-color: var(--bluvy-blue);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(11, 23, 54, 0.2);
    margin-top: -6px;
}

.tabbar-create-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.5;
}

.mobile-more-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(11, 23, 54, 0.45);
    z-index: 1010;
}

.mobile-more-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1011;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 1rem 1rem calc(env(safe-area-inset-bottom) + 1rem) 1rem;
    box-shadow: 0 -8px 24px rgba(11, 23, 54, 0.18);
}

.mobile-more-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.mobile-more-sheet-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.5rem;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
}

.mobile-more-sheet-link.active {
    color: var(--bluvy-blue);
}

.mobile-more-sheet-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mobile-more-sheet-search {
    display: flex;
    gap: 0.5rem;
}

.mobile-more-sheet-search input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* ==========================================================================
   Forms, Login & Admin Cards
   ========================================================================== */
.form-page-container {
    max-width: 520px;
    margin: 2rem auto;
}

.form-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--card-shadow);
}

.form-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-card-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.form-control {
    width: 100%;
    padding: 0.65rem 0.9rem;
    background-color: var(--bg-chip);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--bluvy-blue);
    background-color: var(--bg-surface);
    box-shadow: 0 0 0 3px rgba(24, 93, 255, 0.15);
}

.form-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.form-divider hr {
    flex: 1;
    border: none;
    border-top: 1px solid var(--border-color);
}

/* ==========================================================================
   Modern Login Page (AT Protocol / Bluvy Tube)
   ========================================================================== */
body.is-auth-page {
    background-color: var(--bg-page);
}

body.is-auth-page .app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.is-auth-page .app-body {
    margin-top: 0;
    min-height: 100vh;
    display: flex;
    flex: 1;
}

body.is-auth-page .app-content {
    margin-left: 0;
    padding: 2rem 1rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.login-page-container {
    width: 100%;
    max-width: 460px;
    margin: auto;
    padding: 2.5rem 1rem;
}

.login-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.75rem 2.25rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .login-card {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.08);
}

.login-brand-header {
    text-align: center;
    margin-bottom: 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.login-brand-link:hover {
    transform: scale(1.04);
}

.login-brand-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.login-card-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.login-card-subtitle {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* AT Protocol Ecosystem Apps — Infinite Marquee */
.login-apps-carousel {
    width: 100%;
    overflow: hidden;
    margin-top: 1.15rem;
    position: relative;
    user-select: none;
    mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

.login-apps-track {
    display: flex;
    width: max-content;
    animation: marquee-infinite 30s linear infinite;
    will-change: transform;
}

.login-apps-carousel:hover .login-apps-track {
    animation-play-state: paused;
}

.login-apps-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.5rem;
}

.login-app-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.26rem 0.65rem;
    background-color: var(--bg-chip);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    cursor: pointer;
}

.login-app-chip:hover {
    background-color: var(--bg-chip-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

.login-app-img {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

@keyframes marquee-infinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-apps-track {
        animation: none;
    }
    .login-apps-carousel {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }
}

.login-atmosphere-hint {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
}

.login-atmosphere-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(var(--accent-rgb, 10, 122, 255), 0.35);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.login-atmosphere-link:hover {
    color: var(--accent-hover, var(--accent));
    text-decoration-color: currentColor;
}

.login-card .flash-message {
    margin-bottom: 1.5rem;
    padding: 0.85rem 1.15rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.86rem;
    font-weight: 500;
}

/* Login: Main Action Buttons */
.login-main-actions {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.login-btn-bluesky {
    min-height: 52px;
    height: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: var(--bg-chip);
    border: 1.5px solid #1185FE;
    color: var(--text-primary);
    box-shadow: 0 2px 6px rgba(17, 133, 254, 0.12);
}

.login-btn-bluesky:hover {
    background-color: rgba(17, 133, 254, 0.08);
    border-color: #1185FE;
}

.login-btn-label-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    line-height: 1.25;
}

.login-btn-main-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.login-btn-main-label {
    font-size: 0.96rem;
    font-weight: 700;
}

.login-btn-sub-label {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.9;
}

/* Subtle Secondary Action Button (e.g. Create Account) */
.login-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 0.45rem 1.25rem;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
    user-select: none;
    text-decoration: none;
}

.login-btn-secondary:hover {
    background-color: var(--bg-chip);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.login-btn-secondary:active {
    transform: scale(0.99);
}

.login-btn-signup {
    margin-top: 0;
}

/* Provider Action Buttons */
.login-providers-group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.login-provider-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    height: 48px;
    padding: 0 1.25rem;
    background-color: var(--bg-chip);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
    user-select: none;
    text-decoration: none;
}

.login-provider-btn:hover {
    background-color: var(--bg-chip-hover);
    border-color: var(--text-muted);
}

.login-provider-btn:active {
    transform: scale(0.99);
}

/* Platform Brand Logos — Aligned with Button Text */
.login-provider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    pointer-events: none;
}

.login-provider-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.login-provider-icon--bluesky {
    color: #1185FE;
}

.login-provider-icon--eurosky {
    color: #2D72D9;
}

.login-provider-icon--blacksky {
    color: #7C65F8;
}

.login-provider-icon--atpassport {
    color: var(--accent, #3B82F6);
}

/* Handle Input Field */
.login-form-group {
    margin-bottom: 1rem;
}

.login-input-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.45rem;
}

.login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon {
    position: absolute;
    left: 0.9rem;
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.login-input-wrapper .form-control {
    width: 100%;
    height: 44px;
    padding-left: 2.5rem;
    padding-right: 0.9rem;
    background-color: var(--bg-chip);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.login-input-wrapper .form-control:focus {
    outline: none;
    border-color: var(--accent);
    background-color: var(--bg-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Primary Action Submit Button */
.login-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    margin-top: 0.75rem;
    background-color: var(--accent, var(--bluvy-blue));
    color: #FFFFFF !important;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease, opacity 0.15s ease;
}

.login-submit-btn:hover {
    background-color: var(--accent-hover, var(--bluvy-deep));
}

.login-submit-btn:active {
    transform: scale(0.99);
}

.login-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Login: AT Protocol Info Collapsible Section */
.login-atproto-accordion {
    margin-top: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    background-color: var(--bg-chip);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.login-atproto-accordion[open] {
    border-color: var(--accent);
}

.login-atproto-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color 0.15s ease;
}

.login-atproto-summary:hover {
    color: var(--text-primary);
}

.login-atproto-summary::-webkit-details-marker {
    display: none;
}

.login-atproto-summary-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-atproto-icon {
    flex-shrink: 0;
    color: var(--bluvy-blue, #1A8CD8);
}

.login-atproto-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.login-atproto-accordion[open] .login-atproto-chevron {
    transform: rotate(180deg);
}

.login-atproto-body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
    padding-top: 0.85rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.login-atproto-point {
    margin: 0 0 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed var(--border-color);
}

.login-atproto-point:last-of-type {
    border-bottom: none;
    margin-bottom: 0.4rem;
    padding-bottom: 0;
}

.login-atproto-point strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.84rem;
    font-weight: 700;
}

.login-atproto-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bluvy-blue, #1A8CD8);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.login-atproto-link:hover {
    text-decoration: underline;
}

/* Dev Mode Collapsible Section */
.login-dev-accordion {
    margin-top: 1.5rem;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-chip);
    overflow: hidden;
}

.login-dev-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.login-dev-summary::-webkit-details-marker {
    display: none;
}

.login-dev-summary-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-dev-badge {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background-color: rgba(229, 154, 22, 0.15);
    color: var(--bluvy-warning, #E59A16);
    border: 1px solid rgba(229, 154, 22, 0.3);
}

.login-dev-chevron {
    transition: transform 0.2s ease;
}

.login-dev-accordion[open] .login-dev-chevron {
    transform: rotate(180deg);
}

.login-dev-body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
    padding-top: 0.85rem;
}

.login-dev-notice {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
    line-height: 1.45;
}

.login-dev-notice a {
    color: var(--bluvy-blue);
    text-decoration: underline;
}

.login-dev-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    margin-top: 0.5rem;
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.login-dev-submit-btn:hover {
    border-color: var(--bluvy-blue);
    color: var(--bluvy-blue);
}

/* Legal Footer */
.login-legal-footer {
    margin-top: 1.75rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.login-legal-footer a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.login-legal-footer a:hover {
    color: var(--text-primary);
}

/* Settings → Advanced → Technical information */
.settings-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.advanced-intro {
    margin: 0 0 1.5rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.advanced-facts {
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.advanced-fact {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.advanced-fact:last-child {
    border-bottom: 0;
}

.advanced-fact dt {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.advanced-fact dd {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.advanced-fact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.advanced-fact .account-did-code {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.advanced-fact-help {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.advanced-fact summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.86rem;
}

.advanced-scopes {
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.75rem;
    line-height: 1.6;
}

.advanced-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

/* One-time "your account works elsewhere too" card (_atmosphere_intro) */
.atmosphere-intro {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.atmosphere-intro-text {
    flex: 1;
    min-width: 0;
}

.atmosphere-intro-title {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.atmosphere-intro-body {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.atmosphere-intro-close {
    flex: none;
    width: 44px;
    height: 44px;
    margin: -0.6rem -0.6rem -0.6rem 0;
    border: none;
    background: none;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
}

/* Login: the two first-level choices */
.login-primary-choice {
    margin-top: 0;
    height: 48px;
    font-size: 1rem;
}

.login-provider-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-existing-link {
    margin-top: 0.75rem;
    min-height: 48px;
}

.login-back-link {
    margin: -0.75rem 0 0.25rem -0.25rem;
}

.login-input-help {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.login-divider {
    display: flex;
    align-items: center;
    margin: 1.75rem 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}

.login-divider span {
    padding: 0 1rem;
}

/* Login: "or with your username" — the divider is the collapse toggle */
.login-username-summary {
    list-style: none;
    cursor: pointer;
}

.login-username-summary::-webkit-details-marker {
    display: none;
}

.login-username-summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.login-username-summary:hover {
    color: var(--text-secondary);
}

.login-username-chevron {
    transition: transform 0.15s ease;
}

.login-username[open] .login-username-chevron {
    transform: rotate(180deg);
}

.login-standalone-hint {
    margin: -0.5rem 0 1.25rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* Login: "you'll be right back" screen covering the redirect */
.login-transition {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--bg-page);
}

.login-transition[hidden] {
    display: none;
}

.login-transition-card {
    max-width: 340px;
    text-align: center;
}

.login-transition-title {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.login-transition-note {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Shared loading spinner — one look for every "please wait" in the app */
.bluvy-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.bluvy-spinner--sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bluvy-spinner {
        animation-duration: 2.4s;
    }
}

/* Toast */
.toast-notice {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: var(--bluvy-ink);
    color: #FFFFFF;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toast-notice.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-notice svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.toast-notice.toast-success { background-color: var(--bluvy-ink); color: #FFFFFF; }
.toast-notice.toast-error { background-color: var(--bluvy-error); color: #FFFFFF; }
.toast-notice.toast-warning { background-color: var(--bluvy-warning); color: var(--bluvy-ink); }
.toast-notice.toast-info { background-color: var(--bluvy-info); color: #FFFFFF; }

/* Flash messages (inline, contextual — e.g. login page, video status notice) */
.flash-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
}

.flash-message svg {
    flex-shrink: 0;
}

.flash-success {
    background-color: var(--bluvy-success-bg);
    color: var(--bluvy-success);
    border-color: var(--bluvy-success);
}

.flash-error {
    background-color: var(--bluvy-error-bg);
    color: var(--bluvy-error);
    border-color: var(--bluvy-error);
}

.flash-warning {
    background-color: var(--bluvy-warning-bg);
    color: var(--bluvy-warning);
    border-color: var(--bluvy-warning);
}

.flash-info {
    background-color: var(--bluvy-info-bg);
    color: var(--bluvy-info);
    border-color: var(--bluvy-info);
}

/* ==========================================================================
   Responsive Adaptations (PWA Mobile First)
   ========================================================================== */
@media (max-width: 1100px) {
    .watch-layout-grid {
        grid-template-columns: 1fr;
    }

    .channel-layout-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .app-sidebar {
        display: none !important;
    }

    body:not(.embed-player-body) {
        padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px)) !important;
    }

    .app-content {
        padding: 1rem 1rem calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 1.25rem) 1rem !important;
    }

    .mobile-tabbar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background-color: var(--bg-surface) !important;
        border-top: 1px solid var(--border-color) !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06) !important;
        z-index: 9999 !important;
    }

    .header-search-container {
        display: none;
    }

    .header-create-link {
        display: none;
    }

    .channel-avatar-large {
        width: 72px;
        height: 72px;
    }

    .channel-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .watch-creator-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .watch-action-buttons {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .watch-action-buttons .pill-group,
    .watch-action-buttons .pill-btn,
    .watch-action-buttons .share-menu-wrapper {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 120px;
    }

    .watch-action-buttons .pill-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Bluvy Studio — Creator Dashboard & Upload Wizard Styles
   ========================================================================== */

.studio-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.5rem 0 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Header */
.studio-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.studio-header-info {
    flex: 1;
    min-width: 260px;
}

.studio-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem 0;
}

.studio-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

.studio-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-studio-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.btn-studio-outline:hover {
    border-color: var(--bluvy-blue);
    color: var(--bluvy-blue);
    background: var(--bg-chip);
}

.btn-studio-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--bluvy-blue);
    background: var(--bluvy-blue);
    color: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-studio-primary:hover {
    background: var(--bluvy-deep);
    border-color: var(--bluvy-deep);
}

/* KPI Cards Grid */
.studio-kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1024px) {
    .studio-kpis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .studio-kpis-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

.studio-kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    overflow: hidden;
}

.kpi-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.kpi-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background: var(--bg-chip);
    color: var(--bluvy-blue);
    flex-shrink: 0;
}

.kpi-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.kpi-main-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.kpi-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.kpi-trend {
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.kpi-trend.positive {
    color: var(--bluvy-success);
}

.kpi-trend.neutral {
    color: var(--text-muted);
}

.kpi-subtext {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.kpi-sparkline {
    width: 100%;
    height: 34px;
    margin-top: auto;
}

/* Studio Section Card */
.studio-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.studio-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.studio-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.studio-card-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bluvy-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.studio-card-link:hover {
    text-decoration: underline;
}

/* Filter & Tabs Bar */
.studio-tabs-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.35rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    overflow-x: auto;
    scrollbar-width: none;
}

.studio-tabs-nav::-webkit-scrollbar {
    display: none;
}

.studio-tab-btn {
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.studio-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-chip);
}

.studio-tab-btn.active {
    background: var(--bg-active-nav);
    color: var(--bluvy-blue);
    border-color: rgba(24, 93, 255, 0.2);
    font-weight: 700;
}

.studio-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.35rem;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.studio-search-box {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 380px;
}

.studio-search-box svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.studio-search-input {
    width: 100%;
    padding: 0.45rem 0.85rem 0.45rem 2.2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.studio-search-input:focus {
    outline: none;
    border-color: var(--bluvy-blue);
}

/* Studio Video Table */
.studio-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.studio-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.85rem;
}

.studio-table th {
    padding: 0.85rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    background: var(--bg-surface);
}

.studio-table td {
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}

.studio-table tr:last-child td {
    border-bottom: none;
}

.studio-table tr:hover td {
    background: var(--bg-surface-elevated);
}

/* Video Cell */
.studio-video-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 280px;
}

.studio-thumb-wrapper {
    position: relative;
    width: 110px;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-chip);
}

.studio-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.studio-thumb-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1.2;
}

.studio-video-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.studio-video-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.studio-video-title:hover {
    color: var(--bluvy-blue);
}

.studio-video-id-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Visibility Pills */
.visibility-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.visibility-pill.public {
    color: var(--bluvy-success);
}

.visibility-pill.hidden {
    color: var(--text-secondary);
}

.visibility-pill.pending {
    color: var(--bluvy-warning);
}

.visibility-pill svg {
    flex-shrink: 0;
}

/* Studio Actions Cell */
.studio-actions-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}

.btn-icon-action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.btn-icon-action:hover {
    background: var(--bg-chip);
    color: var(--text-primary);
}

/* Studio 2-Column Grid (Chart + Comments) */
.studio-grid-2col {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 960px) {
    .studio-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* Studio Chart */
.studio-chart-body {
    padding: 1.25rem;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
}

.legend-dot.views {
    background: var(--bluvy-blue);
}

.legend-dot.watchtime {
    background: var(--bluvy-success);
}

.chart-svg-container {
    width: 100%;
    height: 200px;
}

/* Comments Widget */
.studio-comments-list {
    display: flex;
    flex-direction: column;
}

.studio-comment-row {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.studio-comment-row:last-child {
    border-bottom: none;
}

.comment-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-chip);
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-author-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.comment-author-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.comment-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.comment-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    margin: 0 0 0.35rem 0;
    line-height: 1.4;
}

.comment-video-ref {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-video-ref:hover {
    color: var(--bluvy-blue);
}

.comment-thumb-side {
    width: 48px;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

/* ==========================================================================
   Studio Upload Wizard Styles
   ========================================================================== */

.upload-wizard-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

.upload-wizard-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.wizard-top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.wizard-title-block h1 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
}

.wizard-title-block p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.wizard-stepper-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.stepper-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.stepper-step.active {
    color: var(--bluvy-blue);
    font-weight: 700;
}

.stepper-step.completed {
    color: var(--bluvy-success);
}

.stepper-num {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.stepper-step.active .stepper-num {
    background: var(--bluvy-blue);
    border-color: var(--bluvy-blue);
    color: #FFFFFF;
}

.stepper-step.completed .stepper-num {
    background: var(--bluvy-success-bg);
    border-color: var(--bluvy-success);
    color: var(--bluvy-success);
}

.stepper-divider {
    width: 40px;
    height: 2px;
    background: var(--border-subtle);
}

/* Split Form + Preview Layout */
.wizard-body-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    padding: 2rem 2rem;
}

@media (max-width: 860px) {
    .wizard-body-layout {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }
}

/* Back on the left, Next/Publish on the right — one row at every step.
   (Accidentally dropped in 6f640e4, which stacked the buttons.) */
.wizard-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

@media (max-width: 860px) {
    .wizard-footer-bar {
        padding: 1rem 1.25rem;
    }
}

/* Dropzone */
.wizard-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--bg-body);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.wizard-dropzone.is-invalid {
    border-color: var(--bluvy-error);
}

.wizard-field-error {
    margin: 0.4rem 0 0;
    color: var(--bluvy-error);
    font-size: 0.8rem;
    font-weight: 600;
}

.wizard-field-error[hidden] {
    display: none;
}

.wizard-dropzone:hover,
.wizard-dropzone.dragover {
    border-color: var(--bluvy-blue);
    background: var(--bg-active-nav);
}

.dropzone-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    color: var(--bluvy-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--card-shadow);
}

/* Upload Progress Pill */
.wizard-file-progress {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
}

.progress-bar-track {
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--bluvy-blue);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}

/* Form Input Groups */
.form-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
}

.form-field-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.char-counter {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.wizard-input,
.wizard-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.wizard-input:focus,
.wizard-textarea:focus {
    outline: none;
    border-color: var(--bluvy-blue);
    box-shadow: 0 0 0 3px rgba(24, 93, 255, 0.1);
}

/* Preview Card */
.wizard-preview-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: sticky;
    top: 5rem;
}

.preview-thumb-box {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    background: #000000;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-meta-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.preview-meta-row strong {
    color: var(--text-primary);
}

/* Visibility Option Cards */
.visibility-options-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.visibility-radio-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    background: var(--bg-body);
}

.visibility-radio-card:hover {
    border-color: var(--bluvy-blue);
}

.visibility-radio-card.active {
    border-color: var(--bluvy-blue);
    background: var(--bg-active-nav);
}

.visibility-radio-card input[type="radio"] {
    margin-top: 0.25rem;
}

.radio-card-content h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
}

.radio-card-content p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Video Edit Studio Layout */
.video-edit-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
}

.video-edit-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 5rem;
}

.video-edit-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

.video-edit-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.video-edit-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 900px) {
    .video-edit-layout {
        grid-template-columns: 1fr;
    }
    .video-edit-sidebar {
        position: static;
    }
}

/* ==========================================================================
   Account Dashboard Hub Styles
   ========================================================================== */

.account-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
}

.account-profile-main {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1 1 300px;
}

.account-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

.account-avatar-placeholder {
    background: var(--bluvy-blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
}

.account-identity-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.account-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.account-display-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.account-handle-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.account-handle {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
}

.account-bio {
    margin: 0.35rem 0 0;
    max-width: 60ch;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-line;
}

.account-did-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
    flex-wrap: wrap;
}

.account-did-code {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-body);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-did-copy-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.account-did-copy-btn:hover {
    background: var(--bg-active-nav);
    color: var(--bluvy-blue);
    border-color: var(--bluvy-blue);
}

.account-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.account-btn-public {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.account-btn-upload {
    background: var(--accent);
    color: #ffffff !important;
    border-color: var(--accent);
}

.account-btn-upload:hover {
    background: var(--accent-hover);
    color: #ffffff !important;
}

/* Stats Grid */
.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.account-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.account-stat-card:hover {
    border-color: var(--text-muted);
}

.account-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-stat-data {
    display: flex;
    flex-direction: column;
}

.account-stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.account-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

/* Hub Grid */
.account-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.account-hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.account-hub-card:hover {
    border-color: var(--text-muted);
}

.account-hub-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.account-hub-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-hub-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.account-hub-card-desc {
    font-size: 0.825rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Category Pills & Tag Buttons */
.category-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-pill-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    user-select: none;
}

.category-pill-checkbox input {
    margin: 0;
    cursor: pointer;
}

.category-pill-checkbox:hover {
    border-color: var(--bluvy-blue);
    color: var(--text-primary);
}

.category-pill-checkbox.active {
    background: rgba(24, 93, 255, 0.1);
    border-color: var(--bluvy-blue);
    color: var(--bluvy-blue);
    font-weight: 600;
}

.btn-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-tag-pill:hover {
    border-color: var(--bluvy-blue);
    color: var(--bluvy-blue);
}

.btn-tag-pill.active {
    background: var(--bluvy-blue);
    border-color: var(--bluvy-blue);
    color: #ffffff;
}

/* Home Categories Filter Bar */
.home-categories-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.5rem 0 1.25rem 0;
    margin-bottom: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-categories-bar::-webkit-scrollbar {
    display: none;
}

.home-category-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    flex-shrink: 0;
}

.home-category-chip:hover {
    background: var(--bg-active-nav);
    border-color: var(--bluvy-blue);
    color: var(--bluvy-blue);
}

.home-category-chip.active {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-surface);
}

/* Search results page (search/index.html.twig) */
.search-toolbar {
    margin-bottom: 1.5rem;
}

.search-toolbar .page-title {
    margin-bottom: 1rem;
    word-break: break-word;
}

.search-correction {
    margin: -0.5rem 0 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    word-break: break-word;
}

.search-correction a {
    color: var(--accent);
}

.search-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-creator-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-creator-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 150px;
    padding: 1.25rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.search-creator-card:hover {
    border-color: var(--bluvy-blue);
}

.search-creator-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.25rem;
}

.search-creator-name-line {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.search-creator-handle {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.search-creator-followers {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Admin — Tableau de bord Statistiques (/admin/stats)
   Aucune règle inline : toute la mise en forme de la page vit ici.
   ========================================================================== */
.stats-page {
    padding-bottom: 3rem;
}

/* En-tête via .page-title / .page-subtitle partagés — l'intro déroge juste
   sur la largeur (elle porte un lien d'action). */
.stats-page__intro {
    max-width: none;
    line-height: 1.6;
}

/* Onglets entre les pages de statistiques (une route par section) —
   défile horizontalement sur mobile plutôt que de passer à la ligne. */
.stats-nav {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-color);
    margin: 0.5rem 0 1.5rem;
}

.stats-nav::-webkit-scrollbar {
    display: none;
}

.stats-nav__link {
    flex-shrink: 0;
    padding: 0.65rem 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.stats-nav__link:hover {
    color: var(--text-primary);
}

.stats-nav__link.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 700;
}

/* Bloc générique espacé : courbe, modération, panneau Matomo */
.stats-block {
    margin-bottom: 1.5rem;
}

.stats-block__note {
    margin-top: 0.75rem;
}

/* ---- KPIs ---- */
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stats-kpi-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.stats-kpi {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
}

.stats-kpi__label {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stats-kpi__value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin-top: 0.35rem;
}

.stats-kpi__sub {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

/* ---- Courbe ApexCharts ---- */
.stats-chart {
    min-height: 250px;
    width: 100%;
    margin-top: 0.75rem;
}

/* ---- Top listes ---- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stats-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.9;
}

.stats-list__empty {
    list-style: none;
    margin-left: -1.25rem;
    color: var(--text-muted);
}

/* ---- Tags hashtags : wrap, jamais de débordement de la carte ---- */
.stats-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
    min-width: 0;
}

.stats-tag {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bluvy-blue);
    word-break: break-word;
}

.stats-tags__empty {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ---- Modération ---- */
.stats-mod-line {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

/* ---- Panneau Matomo ---- */
.stats-sparkline {
    height: 40px;
    margin-top: 0.75rem;
}

.stats-matomo-unavailable {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

.stats-matomo-tables {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.25rem;
}

.stats-matomo-table {
    flex: 1 1 240px;
    min-width: 0;
}

.stats-matomo-table__title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.stats-table tr {
    border-bottom: 1px solid var(--border-color);
}

.stats-table__label {
    padding: 0.3rem 0.5rem 0.3rem 0;
    color: var(--text-secondary);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-table__value {
    padding: 0.3rem 0;
    text-align: right;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* `.info-box` n'avait aucune règle CSS — surface neutre, partagée avec /admin/import */
.info-box {
    background-color: var(--bg-chip);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .stats-kpi-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Dialogue "Connectez-vous" partagé — voir auth_prompt_controller.js */
.auth-prompt-dialog {
    position: fixed;
    margin: auto;
    max-width: 320px;
    width: calc(100% - 2.5rem);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.auth-prompt-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.auth-prompt-dialog p {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.auth-prompt-dialog .btn-create-pill {
    display: inline-flex;
    text-decoration: none;
}

.auth-prompt-dialog-close {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
}

/* Rappel de pause (bien-être) — voir break_reminder_controller.js */
.break-reminder-dialog {
    position: fixed;
    margin: auto;
    max-width: 380px;
    width: calc(100% - 2rem);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.break-reminder-dialog::backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.break-reminder-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.break-reminder-dialog p {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.break-reminder-dialog .break-reminder-countdown {
    font-size: 2.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    text-align: center;
}

.break-reminder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.break-reminder-actions > button {
    flex: 1 1 auto;
    justify-content: center;
}

/* ==========================================================================
   Immersive Single-Video Watch Mode (Bluvy Tube Theater)
   ========================================================================== */
.watch-immersive-container {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(100vh - var(--header-height, 64px));
    max-height: calc(100vh - var(--header-height, 64px));
    background-color: var(--bg-canvas);
    overflow: hidden;
}

.watch-immersive-close-btn {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 30;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.watch-immersive-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

.watch-immersive-main {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-canvas);
    overflow: hidden;
    padding: 1rem 1.5rem;
}

.watch-immersive-stage-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 1.25rem;
    height: 100%;
    max-height: calc(100vh - var(--header-height, 64px) - 2rem);
}

.watch-immersive-player-stage {
    position: relative;
    height: 100%;
    max-height: calc(100vh - var(--header-height, 64px) - 2rem);
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--bg-surface-elevated, #0c0c0c);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1440px) {
    .watch-immersive-player-stage {
        max-width: min(640px, calc((100vh - var(--header-height, 64px) - 2rem) * 9 / 16));
    }
}

.watch-immersive-bg-blur {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(0.4);
    transform: scale(1.2);
    z-index: 1;
    pointer-events: none;
}

.watch-immersive-video-player {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watch-immersive-video-player media-container {
    width: 100%;
    height: 100%;
    background: transparent;
}

.watch-immersive-video-player hlsjs-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.watch-immersive-overlay-info {
    position: absolute;
    bottom: 3.5rem;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #FFFFFF;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.watch-immersive-creator-tag {
    pointer-events: auto;
    text-decoration: none;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
}

.watch-immersive-creator-tag:hover {
    text-decoration: underline;
}

.watch-immersive-creator-name {
    font-weight: 700;
}

.watch-immersive-creator-subname {
    font-weight: 500;
    opacity: 0.85;
    font-size: 0.85rem;
}

.watch-immersive-caption {
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    max-height: 4.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    pointer-events: auto;
}

.watch-immersive-music-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
}

.watch-immersive-controls-bar {
    position: absolute;
    bottom: 0.85rem;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.watch-immersive-autoscroll-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.55);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    user-select: none;
    backdrop-filter: blur(8px);
}

.watch-immersive-autoscroll-toggle input {
    display: none;
}

.autoscroll-switch-pill {
    position: relative;
    width: 32px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 9px;
    transition: background-color 0.2s ease;
}

.autoscroll-switch-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #FFFFFF;
    transition: transform 0.2s ease;
}

.watch-immersive-autoscroll-toggle input:checked + .autoscroll-switch-pill {
    background-color: var(--bluvy-blue);
}

.watch-immersive-autoscroll-toggle input:checked + .autoscroll-switch-pill::after {
    transform: translateX(14px);
}

.watch-immersive-chevrons {
    position: absolute;
    right: -4.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    z-index: 15;
}

@media (max-width: 1200px) {
    .watch-immersive-chevrons {
        right: -3.5rem;
    }
}

.watch-immersive-chevron {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    padding: 0;
}

.watch-immersive-chevron:hover {
    background: rgba(24, 93, 255, 0.35);
    border-color: var(--bluvy-cyan);
    color: var(--bluvy-cyan);
    transform: scale(1.08);
}

.watch-immersive-chevron.is-disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.watch-immersive-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    padding-bottom: 0.5rem;
    flex-shrink: 0;
    z-index: 10;
}

.watch-immersive-panel {
    width: 380px;
    flex-shrink: 0;
    background-color: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: width 0.25s ease;
    position: relative;
    z-index: 20;
}

.watch-immersive-panel.is-collapsed {
    width: 0;
    border-left: none;
    overflow: hidden;
}

.watch-immersive-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-surface);
}

.watch-immersive-tabs {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.watch-immersive-tab {
    border: none;
    background: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.4rem 0.2rem;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
}

.watch-immersive-tab:hover {
    color: var(--text-primary);
}

.watch-immersive-tab.active {
    color: var(--bluvy-blue);
    font-weight: 700;
}

.watch-immersive-tab.active::after {
    content: '';
    position: absolute;
    bottom: -0.85rem;
    left: 0;
    right: 0;
    height: 2.5px;
    background-color: var(--bluvy-blue);
    border-radius: 2px 2px 0 0;
}

.watch-immersive-panel-close {
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.watch-immersive-panel-close:hover {
    background-color: var(--bg-chip);
    color: var(--text-primary);
}

.watch-immersive-panel-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.watch-immersive-pane {
    display: none !important;
}

.watch-immersive-pane.is-active,
.watch-immersive-pane.active {
    display: flex !important;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden; /* contain children so inner scroll works */
}

.watch-immersive-comments-count {
    flex-shrink: 0;
    padding: 0.85rem 1rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.watch-immersive-comments-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 1rem;
    min-height: 0;
}

.watch-immersive-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: var(--text-secondary);
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
}

.watch-immersive-empty-state .empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0.25rem 0 0;
}

.watch-immersive-empty-state .empty-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 260px;
}

.watch-immersive-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #3b82f6);
}

.watch-immersive-loading-spinner .spin {
    animation: spin 0.85s linear infinite;
}

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

.watch-immersive-comments-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.watch-immersive-comment-input-wrap {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-surface);
}

.watch-immersive-comment-input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.watch-immersive-comment-input-row .btn-create-pill {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
}

/* ==========================================================================
   Comments & Thread Replies (Standard + Immersive)
   ========================================================================== */

.watch-comments-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.comments-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.comment-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.comment-input-field {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill, 9999px);
    background-color: var(--bg-chip);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-input-field:focus {
    border-color: var(--bluvy-blue);
    background-color: var(--bg-surface);
    box-shadow: 0 0 0 2px rgba(2, 133, 255, 0.15);
}

.comment-input-field::placeholder {
    color: var(--text-muted);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment-thread {
    display: flex;
    flex-direction: column;
}

.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.comment-item.is-nested {
    gap: 0.6rem;
}

.comment-avatar-link {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.comment-avatar.is-nested {
    width: 28px;
    height: 28px;
}

.comment-avatar.fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-chip);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.comment-avatar.fallback.is-nested {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

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

.comment-meta {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.comment-author-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.2;
}

.comment-author-name:hover {
    text-decoration: underline;
    color: var(--bluvy-blue);
}

.comment-author-handle {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.comment-dot-sep {
    color: var(--text-muted);
    font-size: 0.75rem;
    user-select: none;
}

.comment-timestamp {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.comment-text-content {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-primary);
    word-break: break-word;
}

.comment-text-content a {
    color: var(--bluvy-blue);
    text-decoration: none;
    font-weight: 500;
}

.comment-text-content a:hover {
    text-decoration: underline;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.comment-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0.2rem 0.45rem;
    margin-left: -0.45rem;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.comment-like-btn:hover {
    color: var(--bluvy-error, #f43f5e);
    background-color: rgba(244, 63, 94, 0.08);
}

.comment-like-btn.is-liked {
    color: var(--bluvy-error, #f43f5e);
}

.comment-like-btn.is-liked .comment-like-icon {
    fill: var(--bluvy-error, #f43f5e);
    stroke: var(--bluvy-error, #f43f5e);
}

.comment-like-btn .comment-like-icon {
    transition: transform 0.15s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

.comment-like-btn:active .comment-like-icon {
    transform: scale(0.8);
}

.heart-pop {
    animation: heart-pop 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

@keyframes heart-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.comment-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.comment-reply-btn:hover {
    color: var(--bluvy-blue, #0285FF);
    background-color: rgba(2, 133, 255, 0.08);
}

.comment-reply-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.comment-reply-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.comment-reply-buttons .btn-cancel {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill, 9999px);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.comment-reply-buttons .btn-cancel:hover {
    background-color: var(--bg-chip);
    color: var(--text-primary);
}

.comment-reply-buttons .btn-submit-reply {
    background-color: var(--bluvy-blue, #0285FF);
    border: none;
    border-radius: var(--radius-pill, 9999px);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.85rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.comment-reply-buttons .btn-submit-reply:hover {
    opacity: 0.9;
}

.comment-replies-wrapper {
    margin-top: 0.35rem;
}

.comment-replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bluvy-blue, #0285FF);
    cursor: pointer;
    user-select: none;
}

.comment-replies-toggle:hover {
    text-decoration: underline;
}

.comment-replies-toggle .replies-toggle-icon {
    transition: transform 0.2s ease;
}

.comment-replies-toggle.is-expanded .replies-toggle-icon {
    transform: rotate(180deg);
}

.comment-nested-list {
    margin-top: 0.45rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.watch-immersive-creator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

.watch-immersive-creator-card {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
}

.watch-immersive-creator-card.is-current .watch-immersive-creator-thumb-wrap {
    box-shadow: 0 0 0 2.5px var(--bluvy-blue);
}

.watch-immersive-creator-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bg-chip);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.watch-immersive-creator-card:hover .watch-immersive-creator-thumb-wrap {
    transform: translateY(-2px);
}

.watch-immersive-creator-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
}

.watch-immersive-creator-duration {
    position: absolute;
    bottom: 0.35rem;
    right: 0.35rem;
    font-size: 0.7rem;
    background-color: rgba(0, 0, 0, 0.75);
    color: #FFFFFF;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
}

.watch-immersive-creator-views {
    position: absolute;
    bottom: 0.35rem;
    left: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.watch-immersive-creator-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.1em;
}

@media (max-width: 900px) {
    .shorts-nav-arrows {
        display: none !important;
    }

    .watch-immersive-container {
        flex-direction: column;
        height: calc(100dvh - var(--header-height, 56px) - var(--mobile-tabbar-height, 60px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - var(--header-height, 56px) - var(--mobile-tabbar-height, 60px) - env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }

    .watch-immersive-main {
        padding: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .watch-immersive-stage-wrapper {
        width: 100%;
        height: 100%;
        max-height: 100%;
        gap: 0;
    }

    .watch-immersive-player-stage {
        border-radius: 0 !important;
        max-height: 100% !important;
        height: 100% !important;
        width: 100% !important;
        aspect-ratio: unset !important;
        box-shadow: none !important;
    }

    .watch-immersive-video-player {
        width: 100%;
        height: 100%;
    }

    .watch-immersive-video-player hlsjs-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .watch-immersive-overlay-info {
        bottom: 1.25rem;
        left: 1rem;
        right: 4.5rem;
    }

    .watch-immersive-actions {
        position: absolute;
        right: 0.75rem;
        bottom: 1.25rem;
        z-index: 20;
    }

    /* Flèches de navigation haut/bas masquées sur mobile (uniquement PC et tablette) */
    .watch-immersive-chevrons {
        display: none !important;
    }

    /* Backdrop modal pour mobile */
    .watch-immersive-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999;
        transition: opacity 0.2s ease;
    }

    .watch-immersive-backdrop.is-collapsed {
        display: none !important;
    }

    /* Panneau Commentaires & Vidéos affiché comme une modal centrée sur mobile */
    .watch-immersive-panel {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(92vw, 440px);
        height: min(75vh, 560px);
        max-height: calc(100dvh - 2rem);
        background-color: var(--bg-surface);
        border-radius: 16px;
        border: 1px solid var(--border-color);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .watch-immersive-panel.is-collapsed {
        display: none !important;
        opacity: 0;
        pointer-events: none;
    }

    /* Sur mobile : uniquement le contenu des commentaires, pas la liste des vidéos */
    .watch-immersive-tab[data-tab="creator-videos"],
    .watch-immersive-pane[data-pane="creator-videos"] {
        display: none !important;
    }

    .watch-immersive-tab[data-tab="comments"] {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-primary);
        cursor: default;
    }

    .watch-immersive-tab[data-tab="comments"]::after {
        display: none;
    }
}

/* ==========================================================================
   Comment Facets & RichText Mentions / Hashtags / Links
   ========================================================================== */

.comment-mention-link {
    color: var(--bluvy-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.comment-mention-link:hover {
    color: var(--bluvy-deep);
    text-decoration: underline;
}

[data-theme="dark"] .comment-mention-link {
    color: var(--accent);
}

[data-theme="dark"] .comment-mention-link:hover {
    color: #7097FF;
}

.comment-hashtag-link {
    color: var(--bluvy-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.comment-hashtag-link:hover {
    text-decoration: underline;
}

[data-theme="dark"] .comment-hashtag-link {
    color: var(--accent);
}

.comment-external-link {
    color: var(--bluvy-blue);
    text-decoration: none;
    word-break: break-all;
}

.comment-external-link:hover {
    text-decoration: underline;
}

[data-theme="dark"] .comment-external-link {
    color: var(--accent);
}

/* ==========================================================================
   Bluesky-style Creator Hovercard / Popover
   ========================================================================== */

.creator-hovercard {
    position: absolute;
    z-index: 10500;
    width: 320px;
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
}

.creator-hovercard.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.creator-hovercard.is-above {
    transform: translateY(-6px);
}

.creator-hovercard.is-above.is-visible {
    transform: translateY(0);
}

.creator-hovercard-inner {
    padding: 1rem;
}

.creator-hovercard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.creator-hovercard-avatar-wrap {
    display: inline-block;
    text-decoration: none;
    flex-shrink: 0;
}

.creator-hovercard-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid var(--border-subtle);
}

.creator-hovercard-avatar.fallback {
    background: var(--bg-chip);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.creator-hovercard-action {
    display: flex;
    align-items: center;
}

.creator-hovercard-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--text-primary);
    color: var(--bg-surface);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.creator-hovercard-follow-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.creator-hovercard-follow-btn.is-following {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.creator-hovercard-follow-btn.is-following:hover {
    border-color: var(--bluvy-error);
    color: var(--bluvy-error);
    background: var(--bluvy-error-bg);
}

.creator-hovercard-badge-self {
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-chip);
    border-radius: var(--radius-pill);
}

.creator-hovercard-identity {
    margin-bottom: 0.5rem;
}

.creator-hovercard-name-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--text-primary);
    max-width: 100%;
}

.creator-hovercard-name-row:hover .creator-hovercard-name {
    text-decoration: underline;
}

.creator-hovercard-name {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-hovercard-handle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-hovercard-stats {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
}

.creator-hovercard-stat strong {
    color: var(--text-primary);
    font-weight: 700;
    margin-right: 0.15rem;
}

.creator-hovercard-stats .stat-sep {
    color: var(--text-muted);
}

.creator-hovercard-bio {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
    overflow-wrap: break-word;
    word-break: break-word;
    max-height: 4.35em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.creator-hovercard-bio a {
    color: var(--bluvy-blue);
    text-decoration: none;
}

.creator-hovercard-bio a:hover {
    text-decoration: underline;
}

[data-theme="dark"] .creator-hovercard-bio a {
    color: var(--accent);
}

/* Skeleton loader for hovercard */
.creator-hovercard .skeleton {
    background: linear-gradient(90deg, var(--bg-chip) 25%, var(--bg-chip-hover) 50%, var(--bg-chip) 25%);
    background-size: 200% 100%;
    animation: hovercard-shimmer 1.5s infinite;
}

.creator-hovercard .skeleton-btn {
    width: 78px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--bg-chip) 25%, var(--bg-chip-hover) 50%, var(--bg-chip) 25%);
    background-size: 200% 100%;
    animation: hovercard-shimmer 1.5s infinite;
}

.creator-hovercard .skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-chip) 25%, var(--bg-chip-hover) 50%, var(--bg-chip) 25%);
    background-size: 200% 100%;
    animation: hovercard-shimmer 1.5s infinite;
    margin-bottom: 6px;
}

.creator-hovercard .skeleton-line.title {
    width: 65%;
    height: 16px;
}

.creator-hovercard .skeleton-line.handle {
    width: 45%;
}

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


/* Creator mode — tier badge (hub + studio) and progress towards Confirmé */
.creator-tier-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    vertical-align: middle;
}

.creator-tier-badge--confirmed {
    border-color: var(--bluvy-success);
    color: var(--bluvy-success);
}

.creator-tier-badge--partner {
    border-color: var(--accent);
    color: var(--accent);
}

.creator-tier-intro {
    margin: 0;
    padding: 1rem 1.35rem 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.creator-tier-card > .creator-tier-intro:last-child {
    padding-bottom: 1.15rem;
}

.creator-tier-progress {
    list-style: none;
    margin: 0;
    padding: 0.25rem 1.35rem 1.15rem;
    display: grid;
    gap: 0.4rem;
}

.creator-tier-condition {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.creator-tier-condition.is-met {
    color: var(--text-primary);
}

.creator-tier-check {
    width: 1rem;
    flex-shrink: 0;
    text-align: center;
    color: var(--text-muted);
}

.creator-tier-condition.is-met .creator-tier-check {
    color: var(--bluvy-success);
}

/* "Créer ma chaîne" page */
.creator-mode-features {
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.creator-mode-features li {
    padding-left: 1rem;
    border-left: 2px solid var(--accent);
}

.creator-mode-features strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.creator-mode-features span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.creator-mode-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.75rem 0 0;
}

/* "Spectateur ou créateur ?" choice screen */
.form-page-container.creator-mode-choice-page {
    max-width: 820px;
    padding: 0 16px;
}

.creator-mode-lead {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.creator-mode-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.creator-mode-choice {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.creator-mode-choice.is-recommended {
    border-color: var(--accent);
}

.creator-mode-choice h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.creator-mode-choice .creator-mode-features {
    flex: 1;
    margin: 1rem 0;
}

.creator-mode-tier {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

.creator-mode-choice-btn {
    width: 100%;
    justify-content: center;
}

/* "Mes envois" — the viewers' basic upload list */
.uploads-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.uploads-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.35rem;
    border-top: 1px solid var(--border-subtle);
}

.uploads-item:first-child {
    border-top: none;
}

.uploads-item-thumb {
    width: 96px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-hover);
    flex-shrink: 0;
}

.uploads-item-title {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploads-empty {
    margin: 0;
    padding: 1.15rem 1.35rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Upload form — "Programmer": the date picker only shows once chosen */
.visibility-radio-card .schedule-picker {
    display: none;
    margin-top: 0.6rem;
    max-width: 16rem;
}

.visibility-radio-card:has(input[type="radio"]:checked) .schedule-picker {
    display: block;
}

/* Studio — schedule form on a processed draft */
.publication-schedule-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.publication-schedule-form input[type="datetime-local"] {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
}

/* Studio — "Modèles" (metadata presets) */
.presets-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.presets-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.15rem 1.35rem;
}

.presets-form .form-field-header {
    margin-top: 0.5rem;
}

.presets-secondary {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-size: 0.85rem;
}

.presets-item-sub {
    color: var(--text-secondary);
    font-weight: 400;
}

.preset-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Completeness score (studio list + edit page checklist) */
.completeness-pill {
    display: inline-flex;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-decoration: none;
}

.completeness-pill--high {
    border-color: var(--bluvy-success);
    color: var(--bluvy-success);
}

.completeness-pill--mid {
    border-color: var(--bluvy-warning);
    color: var(--bluvy-warning);
}

.completeness-card {
    padding: 1.1rem 1.25rem;
}

.completeness-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.completeness-title {
    font-size: 0.95rem;
    font-weight: 700;
}

.completeness-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3rem;
    font-size: 0.84rem;
    color: var(--text-secondary);
}

.completeness-list li {
    display: flex;
    gap: 0.5rem;
}

.completeness-list li.is-met {
    color: var(--text-primary);
}

.completeness-list li.is-met > span:first-child {
    color: var(--bluvy-success);
}

.completeness-note {
    margin: 0.7rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Upload form — hashtag/category suggestions (metadata_suggest_controller.js) */
.hashtag-suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.hashtag-suggestions-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.hashtag-suggestions-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Choice screen — "Niveau de départ (?)" explanation, in a <dialog> (info_dialog_controller.js) */
.tier-help {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tier-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
}

.tier-help-icon:hover,
.tier-help-icon:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.info-dialog {
    position: fixed;
    margin: auto;
    max-width: 440px;
    width: calc(100% - 2rem);
    max-height: calc(100% - 2rem);
    overflow-y: auto;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.info-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.info-dialog-title {
    margin: 0 1.5rem 0.75rem 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.info-dialog-close {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
}

.tier-help-body {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tier-help-body p {
    margin: 0 0 0.5rem;
}

.tier-help-body p:last-child {
    margin: 0.5rem 0 0;
}

.tier-help-body dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.45rem 0.6rem;
    margin: 0;
}

.tier-help-body dt .creator-tier-badge {
    margin-left: 0;
}

.tier-help-body dd {
    margin: 0;
}

/* ==========================================================================
   In-browser video editor (video_editor_controller.js, assets/editor/*)
   ========================================================================== */
.video-editor-launch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.video-editor-launch .btn-studio-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.video-editor-launch-note,
.video-editor-unsupported {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

.video-editor-dialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--bg-body);
    color: var(--text-primary);
    display: none;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    /* Never wider than the screen: the timeline (as wide as the video is
       long) scrolls inside its own box instead of stretching the editor. */
    grid-template-columns: minmax(0, 1fr);
}

.video-editor-dialog[open] {
    display: grid;
}

.video-editor-dialog::backdrop {
    background: #000;
}

.video-editor-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.video-editor-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.video-editor-bar-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.video-editor-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    min-height: 0;
}

.video-editor-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    background: #0b0d12;
}

.video-editor-canvas {
    display: block;
    background: #000;
    touch-action: none;
}

.video-editor-canvas.is-adding-text {
    cursor: text;
}

/* On-video text editing (assets/editor/textOverlay.js) */
.editor-text-frame {
    position: absolute;
    border: 1.5px solid var(--accent);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.editor-text-frame.is-editing {
    border-style: dashed;
}

.editor-text-frame-handle {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--accent);
    cursor: nwse-resize;
    pointer-events: auto;
    touch-action: none;
}

.editor-text-frame.is-editing .editor-text-frame-handle {
    display: none;
}

.editor-guide {
    position: absolute;
    display: none;
    pointer-events: none;
    background: #ff3ea5;
}

.editor-guide--x {
    width: 1px;
}

.editor-guide--y {
    height: 1px;
}

.editor-add-text {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font: 700 1.05rem Georgia, "Times New Roman", serif;
    cursor: pointer;
}

.editor-add-text.is-active {
    background: var(--accent);
    border-color: var(--accent);
}

.editor-text-input {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    border: none;
    outline: none;
    resize: none;
    overflow: hidden;
    white-space: pre;
    background: transparent;
    color: transparent;
    box-shadow: none;
    border-radius: 0;
}

.editor-text-input:focus,
.editor-text-input:focus-visible {
    outline: none;
    box-shadow: none;
}

.editor-text-input::selection {
    background: rgba(24, 93, 255, 0.45);
    color: transparent;
}

.video-editor-source {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.video-editor-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    padding: 1rem;
}

.video-editor-overlay[hidden] {
    display: none;
}

.video-editor-progress {
    width: min(320px, 80%);
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.video-editor-progress > div {
    height: 100%;
    width: 0;
    background: var(--accent);
}

.video-editor-panels {
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.video-editor-tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.video-editor-tab {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.video-editor-tab.is-active {
    border-color: var(--accent);
    color: var(--accent);
}

.video-editor-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.video-editor-panel[hidden] {
    display: none;
}

.video-editor-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.video-editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.video-editor-field select,
.video-editor-field textarea {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.video-editor-field--block textarea {
    width: 100%;
    resize: vertical;
}

.video-editor-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.video-editor-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.video-editor-warning {
    margin: 0;
    font-size: 0.8rem;
    color: var(--bluvy-error);
}

.video-editor-danger {
    color: var(--bluvy-error);
    border-color: var(--bluvy-error);
}

.video-editor-record {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.video-editor-record-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bluvy-error);
}

.video-editor-record.is-recording .video-editor-record-dot {
    border-radius: 2px;
}

.video-editor-mic-level {
    --level: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    overflow: hidden;
}

.video-editor-mic-level span {
    display: block;
    height: 100%;
    width: calc(var(--level) * 100%);
    background: var(--accent);
}

.video-editor-audio-status {
    margin: 0;
    min-height: 1.2em;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.video-editor-subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.video-editor-aspects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.video-editor-aspects .is-active {
    border-color: var(--accent);
    color: var(--accent);
}

.video-editor-transport {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-top: 1px solid var(--border-color);
}

.video-editor-time {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}

.video-editor-transport-spacer {
    flex: 1;
}

.video-editor-status {
    margin: 0;
    padding: 0 1rem 0.4rem;
    font-size: 0.8rem;
    color: var(--bluvy-error);
    min-height: 0.4rem;
}

/* Timeline (assets/editor/timeline.js) */
.editor-timeline {
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.editor-timeline-scroller {
    overflow-x: auto;
    overflow-y: hidden;
}

.editor-timeline-content {
    position: relative;
    height: 162px;
    touch-action: pan-x;
    user-select: none;
    cursor: pointer;
}

.editor-timeline-ruler {
    position: relative;
    height: 22px;
    border-bottom: 1px solid var(--border-subtle, var(--border-color));
}

.editor-ruler-mark {
    position: absolute;
    top: 3px;
    font-size: 0.68rem;
    color: var(--text-muted);
    transform: translateX(-50%);
    white-space: nowrap;
}

.editor-track {
    position: relative;
    margin-top: 6px;
}

.editor-track--video {
    height: 64px;
}

.editor-track--text {
    height: 28px;
}

.editor-track--voice {
    height: 24px;
}

.editor-voice-block {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(229, 72, 77, 0.16);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: grab;
}

.editor-voice-block.is-selected {
    border-color: var(--accent);
}

.editor-voice-block.is-muted {
    opacity: 0.5;
}

.editor-clip,
.editor-text-block {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: grab;
}

.editor-clip {
    background: #1b2130;
}

.editor-clip.is-selected,
.editor-text-block.is-selected {
    border-color: var(--accent);
}

.editor-clip-strip {
    display: flex;
    height: 100%;
    pointer-events: none;
}

.editor-clip-strip img {
    height: 100%;
    flex: 1;
    min-width: 0;
    object-fit: cover;
}

.editor-clip-badge {
    position: absolute;
    top: 3px;
    left: 12px;
    padding: 0 0.3rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    pointer-events: none;
}

.editor-text-block {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--bg-active-nav, rgba(24, 93, 255, 0.12));
    color: var(--text-primary);
    font-size: 0.72rem;
    white-space: nowrap;
}

.editor-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
    background: rgba(255, 255, 255, 0.18);
}

.editor-handle--start {
    left: 0;
}

.editor-handle--end {
    right: 0;
}

.editor-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--bluvy-error);
    pointer-events: none;
}

@media (max-width: 900px) {
    .video-editor-dialog {
        overflow-y: auto;
        grid-template-rows: auto auto auto auto auto auto;
    }

    .video-editor-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .video-editor-stage {
        height: 34dvh;
    }

    .video-editor-panels {
        min-height: 220px;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}

/* Custom thumbnails (upload form, editor tab, edit page) */
.upload-thumbnail-box,
.video-editor-thumb {
    width: 120px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.video-editor-thumb {
    width: 100%;
}

.upload-thumbnail-box img,
.video-editor-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-editor-file {
    display: inline-flex;
    justify-content: center;
    cursor: pointer;
}

.thumbnail-card {
    padding: 1.1rem 1.25rem;
}

.thumbnail-card-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8rem;
}

/* Admin — custom thumbnails waiting for moderation */
.admin-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.admin-thumb-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
}

.admin-thumb-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    border-radius: var(--radius-md, 8px);
}

.admin-thumb-title {
    font-size: 0.85rem;
    font-weight: 700;
}

.admin-thumb-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.admin-thumb-actions {
    display: flex;
    gap: 0.4rem;
}

.thumbnail-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    border-radius: var(--radius-md, 8px);
    margin-top: 0.5rem;
}

/* ==========================================================================
   Developer docs (templates/developers/*) — two-column shell: sticky page
   nav + table of contents on the left, prose on the right; stacks on
   narrow screens. Flat like the rest of the UI (no shadows, no lift).
   ========================================================================== */
.dev-docs {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    padding: 1.5rem 0 4rem;
}

.dev-docs-nav {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
    font-size: 0.875rem;
}

.dev-docs-nav-title,
.dev-docs-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dev-docs-pages,
.dev-docs-toc {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dev-docs-page {
    display: block;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
}

.dev-docs-page:hover {
    background: var(--bg-chip);
    color: var(--text-primary);
}

.dev-docs-page.active {
    background: var(--bg-active-nav);
    color: var(--accent);
}

.dev-docs-toc {
    margin: 0.3rem 0 0.6rem 0.65rem;
    border-left: 1px solid var(--border-color);
}

.dev-docs-toc a {
    display: block;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
}

.dev-docs-toc a:hover {
    color: var(--text-primary);
}

.dev-docs-content {
    min-width: 0;
    max-width: 780px;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.dev-docs-header {
    margin-bottom: 2.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.dev-docs-eyebrow {
    color: var(--accent);
}

.dev-docs-header h1 {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-primary);
}

.dev-docs-content .dev-docs-lead {
    margin: 0;
    font-size: 1.0625rem;
}

.dev-docs-content section {
    margin-bottom: 2.75rem;
}

.dev-docs-h2 {
    margin: 0 0 0.85rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.dev-docs-content .dev-docs-anchor {
    color: inherit;
    text-decoration: none;
}

.dev-docs-anchor:hover::after {
    content: " #";
    color: var(--text-muted);
}

.dev-docs-content h3 {
    margin: 1.75rem 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dev-docs-content p {
    margin: 0 0 1rem;
}

.dev-docs-content ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.dev-docs-content li {
    margin-bottom: 0.35rem;
}

.dev-docs-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dev-docs-content strong {
    color: var(--text-primary);
}

.dev-docs-content .dev-docs-note {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    background: var(--bg-surface);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.dev-docs kbd {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 4px;
}

/* Code samples (developers/_macros.html.twig → code()) */
.dev-code {
    margin: 0 0 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.dev-code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.45rem 0.3rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.dev-code-lang {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dev-code-copy {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.dev-code-copy:hover {
    color: var(--text-primary);
    background: var(--bg-chip);
}

.dev-code pre {
    margin: 0;
    padding: 0.9rem 1rem;
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.dev-code pre code {
    padding: 0;
    font-size: inherit;
    color: var(--text-primary);
    background: none;
    border-radius: 0;
    white-space: pre;
}

/* Reference tables */
.dev-docs-table-wrap {
    margin: 0 0 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.dev-docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.dev-docs-table th,
.dev-docs-table td {
    padding: 0.6rem 0.85rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color);
}

.dev-docs-table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-surface);
}

.dev-docs-table tbody th {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.dev-docs-table tr:last-child > * {
    border-bottom: 0;
}

.dev-docs-table td code {
    overflow-wrap: anywhere;
}

.dev-docs-table--compact th,
.dev-docs-table--compact td {
    padding: 0.45rem 0.75rem;
}

/* Hub cards */
.dev-docs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.dev-docs-content .dev-docs-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease;
}

.dev-docs-content .dev-docs-card:hover {
    border-color: var(--accent);
}

.dev-docs-card-title {
    font-weight: 700;
    color: var(--text-primary);
}

.dev-docs-card-title::after {
    content: " →";
    color: var(--accent);
}

.dev-docs-card-body {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Lexicon reference (developers/data.html.twig) */
.dev-lexicon {
    margin: 0 0 2rem;
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.dev-lexicon-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.dev-docs-content .dev-lexicon-head h3 {
    margin: 0;
}

.dev-lexicon-badge {
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-chip);
    border-radius: var(--radius-pill);
}

.dev-required {
    font-weight: 700;
    color: var(--bluvy-error);
}

.dev-lexicon-json summary {
    margin-bottom: 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

/* Live embed + postMessage demo (developers/embed.html.twig) */
.dev-embed-demo {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1rem;
    margin: 0 0 1.25rem;
}

.dev-embed-demo-frame {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border-radius: var(--radius-md);
}

.dev-embed-demo-frame.is-vertical {
    aspect-ratio: 9 / 16;
    max-height: 480px;
    justify-self: center;
}

.dev-embed-demo-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.dev-embed-demo-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.9rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.dev-embed-demo-panel p {
    margin: 0;
}

.dev-embed-demo-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dev-embed-demo-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dev-embed-demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dev-btn {
    padding: 0.35rem 0.6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-chip);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.dev-btn:hover {
    background: var(--bg-chip-hover);
}

.dev-embed-demo-log {
    min-height: 4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.dev-embed-demo-log li {
    padding: 0.2rem 0;
    border-bottom: 1px dashed var(--border-color);
}

@media (max-width: 900px) {
    .dev-docs {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        padding-top: 1rem;
    }

    .dev-docs-nav {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .dev-docs-pages {
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
    }

    .dev-docs-pages > li {
        flex: none;
    }

    .dev-docs-toc,
    .dev-docs-nav-title {
        display: none;
    }

    .dev-docs-header h1 {
        font-size: 1.6rem;
    }

    .dev-embed-demo {
        grid-template-columns: minmax(0, 1fr);
    }
}