:root {
    --pixel-violet: #8b5cf6;
    --pixel-violet-hover: #7c3aed;
    --pixel-violet-glow: rgba(139, 92, 246, 0.4);
    --pixel-green: #64ffda;
    --pixel-green-hover: #10b981;
    --pixel-green-glow: rgba(100, 255, 218, 0.35);
    --pixel-gold: #fbbf24;
    --pixel-gold-glow: rgba(251, 191, 36, 0.4);
    --pixel-red: #ef4444;
    --pixel-red-hover: #dc2626;
    --pixel-blue: #5865F2;
    --pixel-orange: #f59e0b;
    --pixel-dark: #09090b;
    --pixel-card: #0f0f13;
    --pixel-gray: #18181b;
    --pixel-gray-light: #27272a;
    --zevent-green: #51c41b;
}

html {
    background-color: var(--pixel-dark);
}

body {
    color: #fff;
    font-family: 'VT323', monospace;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 16px 16px, 16px 16px;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 2px),
        radial-gradient(circle at 85% 30%, rgba(245, 158, 11, 0.15) 1.5px, transparent 2.5px),
        radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.06) 1.5px, transparent 2px),
        radial-gradient(circle at 25% 15%, rgba(229, 57, 53, 0.15) 1.5px, transparent 2.5px),
        radial-gradient(circle at 75% 85%, rgba(255, 255, 255, 0.03) 1px, transparent 2px);
    background-size: 80px 80px, 120px 120px, 64px 64px, 96px 96px, 72px 72px;
    animation: twinkle 3s ease-in-out infinite alternate;
    will-change: opacity, transform;
}

@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.02); }
}

.font-pixel {
    font-family: 'Silkscreen', cursive;
    text-transform: uppercase;
}

.font-text {
    font-family: 'VT323', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   UNIFIED PIXEL DESIGN SYSTEM (Boutons, Cartes, Dropdowns)
   ============================================================ */
.pixel-card {
    background: var(--pixel-gray);
    border: 2px solid #27272a;
    position: relative;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.85);
}

.pixel-card:not(.stream-card)::before {
    content: '+';
    position: absolute;
    top: 10px;
    right: 15px;
    color: rgba(255, 255, 255, 0.1);
    font-size: 24px;
    font-family: monospace;
    pointer-events: none;
    z-index: 10;
}

.pixel-header-violet {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, transparent 100%);
    border-bottom: 2px solid var(--pixel-violet);
}

/* Boutons Pixel Standardisés */
.pixel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    font-family: 'Silkscreen', cursive;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--pixel-gray);
    border: 2px solid var(--pixel-violet);
    color: var(--pixel-violet);
    border-radius: 4px;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.85);
    transition: all 0.15s ease;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.pixel-btn:hover {
    background: var(--pixel-violet);
    color: #ffffff;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.85), 0 0 10px var(--pixel-violet-glow);
}

.pixel-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.85);
}

.pixel-btn-green {
    border-color: var(--pixel-green);
    color: var(--pixel-green);
}

.pixel-btn-green:hover {
    background: var(--pixel-green);
    color: #09090b;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.85), 0 0 10px var(--pixel-green-glow);
}

.pixel-btn-gold {
    border-color: var(--pixel-gold);
    color: var(--pixel-gold);
}

.pixel-btn-gold:hover {
    background: var(--pixel-gold);
    color: #09090b;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.85), 0 0 10px var(--pixel-gold-glow);
}

.pixel-btn-danger {
    border-color: var(--pixel-red);
    color: var(--pixel-red);
}

.pixel-btn-danger:hover {
    background: var(--pixel-red);
    color: #ffffff;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.85), 0 0 10px rgba(239, 68, 68, 0.4);
}

/* Dropdowns Pixel Standardisés */
.pixel-dropdown-menu {
    background: rgba(15, 15, 19, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--pixel-violet);
    border-radius: 4px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.95), 0 0 15px var(--pixel-violet-glow);
}

.pixel-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid #27272a;
    font-family: 'Silkscreen', cursive;
    font-size: 11px;
    text-transform: uppercase;
}

.pixel-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-family: 'Silkscreen', cursive;
    font-size: 11px;
    color: #e4e4e7;
    border-radius: 3px;
    transition: all 0.15s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    box-sizing: border-box;
}

.pixel-dropdown-item:hover {
    background: rgba(139, 92, 246, 0.2);
    color: #ffffff;
}

/* Scrollbars Pixel Universelles */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #09090b;
}

::-webkit-scrollbar-thumb {
    background: #27272a;
    border: 1px solid var(--pixel-violet);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pixel-violet);
}

/* Notifications toast (remplacent les alert() natifs) */
.toast-item {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: opacity, transform;
}

.toast-item.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Réduction du logo vers MT.NET / MZ.NET si la fenêtre est inférieure à 960px */
.logo-text-full {
    display: none;
}

.logo-text-short {
    display: inline;
}

@media (min-width: 960px) {
    .logo-text-full {
        display: inline;
    }

    .logo-text-short {
        display: none;
    }
}

/* Ajustements pour que la hotbar s'adapte sans débordement sur très petits écrans */
@media (max-width: 480px) {
    #add-stream-input {
        min-width: 65px;
    }
}

/* Cases ZEVENT du header (ticker associations + lien + cagnotte) : réduites de 14% de manière standard. */
#zevent-header-container {
    transform: scale(0.88);
    transform-origin: left center;
}

/* Défilement façon machine à sous des associations bénéficiaires ZEVENT (bas -> haut, boucle infinie) */
@keyframes zevent-assoc-scroll {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

#zevent-assoc-ticker {
    animation: zevent-assoc-scroll 44s linear infinite;
}

/* Défilement horizontal fluide du message d'annonce ZEVENT */
@keyframes zevent-banner-marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.zevent-banner-marquee-inner {
    display: inline-flex;
    white-space: nowrap;
    animation: zevent-banner-marquee 22s linear infinite;
    will-change: transform;
}

.zevent-banner-marquee-inner:hover {
    animation-play-state: paused;
}

:root {
    --mt-chat-width: 340px;
}

@media (min-width: 1024px) {
    #mt-chat {
        width: var(--mt-chat-width) !important;
        flex-shrink: 0;
    }

    #mt-videos {
        width: calc(100% - var(--mt-chat-width)) !important;
        /* Sans ça, un élément flex refuse par défaut de rétrécir sous la taille min-content de
           son contenu (cartes vidéo/iframes) : en agrandissant le tchat via le slider, la zone
           vidéo déborde alors sur le tchat au lieu de se réduire (bug classique min-width:auto). */
        min-width: 0;
    }
}

/* Mode Sans Tchat (chat-hidden) */
body.chat-hidden #mt-chat,
body.chat-hidden #chat-resize-handle {
    display: none !important;
}

body.chat-hidden #mt-videos {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* Sous 1024px, #mt-videos n'avait aucune hauteur définie (seul #mt-chat a un h-[520px] fixe en
   mobile) : les lignes de la grille en fr ne peuvent pas se résoudre sans hauteur de référence,
   et les cartes s'effondrent à la hauteur de leur en-tête (le lecteur vidéo, en position absolute,
   ne compte pas dans la hauteur naturelle du parent).
   Exclu en mode focus (.has-focus) : la carte focus mobile se dimensionne déjà elle-même via
   aspect-ratio 16/9 + height:auto, une hauteur fixe ici créerait un vide sous le contenu. */
@media (max-width: 1023px) {
    #mt-videos:not(.has-focus) {
        height: 60vh;
        height: 60dvh;
        min-height: 320px;
    }

    /* À partir de 7 flux, la grille mobile monte à 4 ou 5 rangées : les répartir dans une
       hauteur fixe de 60vh écraserait chaque lecteur à quelques dizaines de pixels. On passe
       en hauteur automatique avec un plancher par rangée et c'est la page qui défile
       (body a déjà overflow-y: auto). Hors plein écran, où la hauteur est imposée. */
    #mt-videos:not(.has-focus).layout-7,
    #mt-videos:not(.has-focus).layout-8,
    #mt-videos:not(.has-focus).layout-9 {
        height: auto;
        min-height: 0;
        grid-template-rows: none;
        grid-auto-rows: minmax(140px, auto);
    }
}



/* Feedback global pendant le glisser-déposer du redimensionneur de tchat */
body.is-resizing-chat {
    cursor: col-resize !important;
    user-select: none !important;
}

body.is-resizing-chat * {
    user-select: none !important;
    pointer-events: none;
}

body.is-resizing-chat #chat-resize-handle {
    pointer-events: auto;
}

body.is-resizing-chat iframe {
    pointer-events: none !important;
}

/* Pendant le drag, on désactive la transition de largeur : sinon #mt-videos et #mt-chat
   (deux transitions indépendantes sur deux formules différentes de --mt-chat-width)
   peuvent se désynchroniser image par image et le tchat semble "passer" par-dessus le lecteur. */
body.is-resizing-chat #mt-videos,
body.is-resizing-chat #mt-chat {
    transition: none !important;
}

#chat-iframes-container {
    overflow: hidden !important;
    position: relative !important;
    border: none !important;
}

#chat-iframes-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    outline: none !important;
}

/* Fond sombre pour les cartes Twitch afin d'éviter le flash blanc lors du hors ligne */
.stream-card,
.stream-card iframe {
    background-color: #09090b !important;
}


html.is-fullscreen,
body.is-fullscreen {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    /* 100dvh après 100vh (fallback) : sur mobile, 100vh inclut la zone masquée par la barre
       d'adresse et coupe le bas de la page ; 100dvh s'ajuste à la hauteur réellement visible. */
    height: 100vh !important;
    height: 100dvh !important;
    width: 100vw !important;
}

body.is-fullscreen footer {
    display: none !important;
}

body.is-fullscreen main {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

body.is-fullscreen #mt-layout {
    flex-direction: column !important;
    gap: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    align-items: stretch !important;
}

@media (min-width: 1024px) {
    body.is-fullscreen #mt-layout {
        flex-direction: row !important;
    }
}

body.is-fullscreen #mt-videos,
body.mode-cinema #mt-videos {
    width: 100vw !important;
    height: 60vh !important;
    height: 60dvh !important;
    margin: 0 !important;
    display: grid !important;
    gap: 0 !important;
}

@media (min-width: 1024px) {
    body.is-fullscreen #mt-videos {
        width: calc(100vw - var(--mt-chat-width)) !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
}

body.is-fullscreen.chat-hidden #mt-videos {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
}

body.is-fullscreen #mt-chat {
    width: 100vw !important;
    height: 40vh !important;
    height: 40dvh !important;
    border: none !important;
    margin: 0 !important;
    position: static !important;
}

@media (min-width: 1024px) {
    body.is-fullscreen #mt-chat {
        width: var(--mt-chat-width) !important;
        max-width: calc(100vw - 300px) !important;
        min-width: 200px !important;
        height: 100vh !important;
        height: 100dvh !important;
        position: relative !important;
        border-left: 1px solid rgba(145, 71, 255, 0.4) !important;
    }
}

body.is-fullscreen .pixel-card {
    border: none !important;
    border-radius: 0 !important;
    background-color: #000000 !important;
}

body.is-fullscreen .pixel-card>div {
    background-color: #000000 !important;
    padding: 0 !important;
}

body.is-fullscreen .pixel-card::before,
body.is-fullscreen .pixel-card::after,
body.is-fullscreen .pixel-card>div::before,
body.is-fullscreen .pixel-card>div::after {
    display: none !important;
}

/* Boutons de sortie de mode dans l'en-tête principal (#main-header) & barre du tchat */
#cinema-exit-btn-header,
#fullscreen-exit-btn-header,
#chat-exit-cinema-btn {
    display: none !important;
}

body.mode-cinema #cinema-exit-btn-header,
body.mode-cinema #chat-exit-cinema-btn {
    display: inline-flex !important;
}

body.is-fullscreen #fullscreen-exit-btn-header {
    display: inline-flex !important;
}

/* Le bouton de bascule #fullscreen-btn retourne lui aussi son libellé en
   « QUITTER PLEIN ÉCRAN » (renderFullscreenLabel), ce qui affichait deux
   commandes de sortie côte à côte dès que l'en-tête était révélé au survol.
   En plein écran, la sortie dédiée ci-dessus suffit. */
body.is-fullscreen #fullscreen-btn {
    display: none !important;
}

/* Zone réactive tout en haut de l'écran (20px) pour révéler l'en-tête principal au survol */
body.mode-cinema #main-header::after,
body.is-fullscreen #main-header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    pointer-events: auto;
}

body.mode-cinema #main-header,
body.is-fullscreen #main-header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    margin-bottom: 0 !important;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    z-index: 55;
}

body.mode-cinema #main-header:hover,
body.mode-cinema #main-header:focus-within,
body.is-fullscreen #main-header:hover,
body.is-fullscreen #main-header:focus-within {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95);
}

/* En Mode Cinéma et Plein Écran : les en-têtes des vignettes vidéo s'effacent complètement (opacity 0) et apparaissent au survol de la carte */
body.mode-cinema .stream-card > header,
body.is-fullscreen .stream-card > header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 25 !important;
    display: flex !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.mode-cinema .stream-card,
body.is-fullscreen .stream-card {
    position: relative !important;
}

body.mode-cinema .stream-card > div,
body.is-fullscreen .stream-card > div {
    height: 100% !important;
}

body.mode-cinema .stream-card:hover > header,
body.mode-cinema .stream-card > header:focus-within,
body.is-fullscreen .stream-card:hover > header,
body.is-fullscreen .stream-card > header:focus-within {
    opacity: 1;
    pointer-events: auto;
}

body.mode-cinema footer {
    display: none !important;
}

body.mode-cinema main {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

body.mode-cinema #mt-layout {
    flex-direction: column !important;
    gap: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    align-items: stretch !important;
}

@media (min-width: 1024px) {
    body.mode-cinema #mt-layout {
        flex-direction: row !important;
    }
}

body.mode-cinema #mt-videos {
    width: 100vw !important;
    height: 60vh !important;
    height: 60dvh !important;
    margin: 0 !important;
}

@media (min-width: 1024px) {
    body.mode-cinema #mt-videos {
        width: calc(100vw - var(--mt-chat-width)) !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
}

body.mode-cinema.chat-hidden #mt-videos {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
}

body.mode-cinema #mt-chat {
    width: 100vw !important;
    height: 40vh !important;
    height: 40dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border-top: 2px solid var(--pixel-violet) !important;
    border-bottom: none !important;
    border-right: none !important;
    border-left: 2px solid var(--pixel-violet) !important;
}

@media (min-width: 1024px) {
    body.mode-cinema #mt-chat {
        width: var(--mt-chat-width) !important;
        max-width: calc(100vw - 300px) !important;
        min-width: 200px !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-top: none !important;
    }
}

/* ============================================================
   DRAG & DROP REORDERING (Glisser-Déposer perfectionné)
   ============================================================ */
.stream-card header {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.stream-card header:active {
    cursor: grabbing;
}

body.is-dragging-card iframe {
    pointer-events: none !important;
}

.stream-card.is-dragging-source {
    opacity: 0.35 !important;
    transform: scale(0.98);
    border-style: dashed !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.stream-card.drag-target-over {
    transform: scale(1.015);
    box-shadow: 0 0 20px var(--pixel-violet), inset 0 0 15px rgba(139, 92, 246, 0.3) !important;
    border-color: var(--pixel-green) !important;
    border-style: solid !important;
    z-index: 30 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ============================================================
   FAVORIS & RÉCENTS (Dropdown & Star Toggle)
   ============================================================ */
.stream-card header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.stream-card header button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.stream-card header button:active {
    transform: scale(0.9);
}

.fav-star-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 13px;
    line-height: 1;
    transition: transform 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.fav-star-btn:hover {
    transform: scale(1.25);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}

.fav-star-btn.is-favorite {
    color: #fbbf24;
}

.fav-star-btn:not(.is-favorite) {
    color: #71717a;
}

.fav-star-btn:not(.is-favorite):hover {
    color: #fbbf24;
}

#favorites-channels-list::-webkit-scrollbar,
#recent-channels-list::-webkit-scrollbar {
    width: 4px;
}

#favorites-channels-list::-webkit-scrollbar-thumb,
#recent-channels-list::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 2px;
}

/* Transitions fluides pour le Mode Focus et redimensionnement :
   Pas de transition sur grid-template-columns/rows pour préserver la stabilité du décodage vidéo matériel des iframes */

.stream-card {
    min-width: 0;
    contain: layout paint style;
    will-change: transform;
}

.stream-card::before {
    content: none !important;
    display: none !important;
}

/* Optimisation des View Transitions Natives */
::view-transition-group(*) {
    animation-duration: 0.28s;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-old(*),
::view-transition-new(*) {
    mix-blend-mode: normal;
    animation-duration: 0.28s;
}

/* Dynamic Grid Layouts using ResizeObserver classes (.container-sm, .container-md, .container-lg) */
.layout-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

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

.container-lg.layout-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.container-lg.layout-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-lg.layout-3:not(.has-focus)>.stream-card.is-visual-first {
    grid-column: span 2;
}

.container-lg.layout-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-lg.layout-5 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-lg.layout-6 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* 7 à 9 streams : grille 3x3 sur grand écran (la dernière rangée reste partielle à 7 et 8) */
.container-lg.layout-7,
.container-lg.layout-8,
.container-lg.layout-9 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-md.layout-3 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-md.layout-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-md.layout-5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-md.layout-6 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-md.layout-7,
.container-md.layout-8 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
}

.container-md.layout-9 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
}

.container-sm.layout-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-sm.layout-5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-sm.layout-5:not(.has-focus)>.stream-card.is-visual-first {
    grid-column: span 2;
}

.container-sm.layout-6 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-sm.layout-7,
.container-sm.layout-8 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
}

.container-sm.layout-9 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
}

/* Compact layout for laptop screens (1366x768 or smaller heights) */
@media (max-height: 800px) and (min-width: 1024px) {
    #main-header {
        margin-bottom: 1rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    #stream-controls {
        margin-bottom: 1rem !important;
    }

    .stream-card header {
        padding: 0.15rem 0.5rem !important;
    }

    #mt-videos,
    #mt-chat {
        /* 100vh, et surtout pas plus : Twitch mesure la part de son lecteur réellement visible
           dans le viewport (detectVisibilityViolation) et coupe la lecture sous son seuil.
           L'ancien 105vh poussait délibérément le bas de la grille hors de la fenêtre, ce qui
           jouait contre nous en permanence sur les écrans de 800 px et moins. */
        height: calc(100vh - 210px) !important;
    }
}

/* Allow slight scrolling but page content barely exceeds viewport */
html,
body {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #09090b;
}


/* Layouts Grilles Optimisés selon le nombre de streams (Plein Écran & Mode Cinéma) */
body.is-fullscreen #mt-videos.layout-1:not(.has-focus),
body.mode-cinema #mt-videos.layout-1:not(.has-focus) {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
}

/* 2 Streams : 2 colonnes x 1 ligne */
body.is-fullscreen #mt-videos.container-sm.layout-2:not(.has-focus),
body.is-fullscreen #mt-videos.container-md.layout-2:not(.has-focus),
body.mode-cinema #mt-videos.container-sm.layout-2:not(.has-focus),
body.mode-cinema #mt-videos.container-md.layout-2:not(.has-focus) {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-2:not(.has-focus),
body.mode-cinema #mt-videos.container-lg.layout-2:not(.has-focus) {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
}

/* 3 Streams : 1 principal en haut (span 2) + 2 secondaires en bas */
body.is-fullscreen #mt-videos.container-sm.layout-3:not(.has-focus),
body.is-fullscreen #mt-videos.container-md.layout-3:not(.has-focus),
body.mode-cinema #mt-videos.container-sm.layout-3:not(.has-focus),
body.mode-cinema #mt-videos.container-md.layout-3:not(.has-focus) {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-3:not(.has-focus),
body.mode-cinema #mt-videos.container-lg.layout-3:not(.has-focus) {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-3:not(.has-focus) > .stream-card.is-visual-first,
body.mode-cinema #mt-videos.container-lg.layout-3:not(.has-focus) > .stream-card.is-visual-first {
    grid-column: span 2 !important;
}

/* 4 Streams : Grille 2x2 parfaite */
body.is-fullscreen #mt-videos.layout-4:not(.has-focus),
body.mode-cinema #mt-videos.layout-4:not(.has-focus) {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

/* 5 Streams : 1 principal (span 2) + 4 secondaires dans grille 3x2 */
body.is-fullscreen #mt-videos.container-sm.layout-5:not(.has-focus),
body.is-fullscreen #mt-videos.container-md.layout-5:not(.has-focus),
body.mode-cinema #mt-videos.container-sm.layout-5:not(.has-focus),
body.mode-cinema #mt-videos.container-md.layout-5:not(.has-focus) {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-sm.layout-5:not(.has-focus) > .stream-card.is-visual-first,
body.is-fullscreen #mt-videos.container-md.layout-5:not(.has-focus) > .stream-card.is-visual-first,
body.mode-cinema #mt-videos.container-sm.layout-5:not(.has-focus) > .stream-card.is-visual-first,
body.mode-cinema #mt-videos.container-md.layout-5:not(.has-focus) > .stream-card.is-visual-first {
    grid-column: span 2 !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-5:not(.has-focus),
body.mode-cinema #mt-videos.container-lg.layout-5:not(.has-focus) {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-5:not(.has-focus) > .stream-card.is-visual-first,
body.mode-cinema #mt-videos.container-lg.layout-5:not(.has-focus) > .stream-card.is-visual-first {
    grid-column: span 2 !important;
}

/* 6 Streams : Grille 3x2 parfaite */
body.is-fullscreen #mt-videos.container-sm.layout-6:not(.has-focus),
body.is-fullscreen #mt-videos.container-md.layout-6:not(.has-focus),
body.mode-cinema #mt-videos.container-sm.layout-6:not(.has-focus),
body.mode-cinema #mt-videos.container-md.layout-6:not(.has-focus) {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-6:not(.has-focus),
body.mode-cinema #mt-videos.container-lg.layout-6:not(.has-focus) {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

/* 7, 8 et 9 Streams : Grille 3x3 parfaite avec centrage de la 3ème rangée pour 7 et 8 streams */
body.is-fullscreen #mt-videos.container-sm.layout-7:not(.has-focus),
body.is-fullscreen #mt-videos.container-md.layout-7:not(.has-focus),
body.is-fullscreen #mt-videos.container-sm.layout-8:not(.has-focus),
body.is-fullscreen #mt-videos.container-md.layout-8:not(.has-focus),
body.mode-cinema #mt-videos.container-sm.layout-7:not(.has-focus),
body.mode-cinema #mt-videos.container-md.layout-7:not(.has-focus),
body.mode-cinema #mt-videos.container-sm.layout-8:not(.has-focus),
body.mode-cinema #mt-videos.container-md.layout-8:not(.has-focus) {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: repeat(4, 1fr) !important;
}

body.is-fullscreen #mt-videos.container-sm.layout-9:not(.has-focus),
body.is-fullscreen #mt-videos.container-md.layout-9:not(.has-focus),
body.mode-cinema #mt-videos.container-sm.layout-9:not(.has-focus),
body.mode-cinema #mt-videos.container-md.layout-9:not(.has-focus) {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: repeat(5, 1fr) !important;
}

/* 7 Streams : Grille 6 colonnes (3 en haut, 3 au milieu, 1 centré au milieu en bas) */
#mt-videos.container-lg.layout-7:not(.has-focus),
body.is-fullscreen #mt-videos.container-lg.layout-7:not(.has-focus),
body.mode-cinema #mt-videos.container-lg.layout-7:not(.has-focus) {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
}

#mt-videos.container-lg.layout-7:not(.has-focus) > .stream-card,
body.is-fullscreen #mt-videos.container-lg.layout-7:not(.has-focus) > .stream-card,
body.mode-cinema #mt-videos.container-lg.layout-7:not(.has-focus) > .stream-card {
    grid-column: span 2 !important;
}

#mt-videos.container-lg.layout-7:not(.has-focus) > .stream-card.is-layout7-last,
body.is-fullscreen #mt-videos.container-lg.layout-7:not(.has-focus) > .stream-card.is-layout7-last,
body.mode-cinema #mt-videos.container-lg.layout-7:not(.has-focus) > .stream-card.is-layout7-last {
    grid-column: 3 / span 2 !important;
}

/* 8 Streams : Grille 6 colonnes (3 en haut, 3 au milieu, 2 centrés au milieu en bas) */
#mt-videos.container-lg.layout-8:not(.has-focus),
body.is-fullscreen #mt-videos.container-lg.layout-8:not(.has-focus),
body.mode-cinema #mt-videos.container-lg.layout-8:not(.has-focus) {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
}

#mt-videos.container-lg.layout-8:not(.has-focus) > .stream-card,
body.is-fullscreen #mt-videos.container-lg.layout-8:not(.has-focus) > .stream-card,
body.mode-cinema #mt-videos.container-lg.layout-8:not(.has-focus) > .stream-card {
    grid-column: span 2 !important;
}

#mt-videos.container-lg.layout-8:not(.has-focus) > .stream-card.is-layout8-penultimate,
body.is-fullscreen #mt-videos.container-lg.layout-8:not(.has-focus) > .stream-card.is-layout8-penultimate,
body.mode-cinema #mt-videos.container-lg.layout-8:not(.has-focus) > .stream-card.is-layout8-penultimate {
    grid-column: 2 / span 2 !important;
}

#mt-videos.container-lg.layout-8:not(.has-focus) > .stream-card.is-layout8-last,
body.is-fullscreen #mt-videos.container-lg.layout-8:not(.has-focus) > .stream-card.is-layout8-last,
body.mode-cinema #mt-videos.container-lg.layout-8:not(.has-focus) > .stream-card.is-layout8-last {
    grid-column: 4 / span 2 !important;
}

/* 9 Streams : Grille 3x3 parfaite */
#mt-videos.container-lg.layout-9:not(.has-focus),
body.is-fullscreen #mt-videos.container-lg.layout-9:not(.has-focus),
body.mode-cinema #mt-videos.container-lg.layout-9:not(.has-focus) {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: repeat(3, 1fr) !important;
}

/* Focus Layout Support & Smooth Transitions */
#mt-videos {
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mt-videos iframe {
    view-transition-name: none !important;
}

#mt-videos.has-focus {
    display: grid !important;
}

/* Halo de mise en évidence : reprend la couleur propre à chaque stream */
#mt-videos.has-focus .stream-card.is-focused {
    box-shadow: 0 0 25px 2px color-mix(in srgb, var(--card-accent, var(--pixel-violet)) 50%, transparent),
        6px 6px 0px rgba(0, 0, 0, 0.8);
    z-index: 5;
}

#mt-videos.has-focus .stream-card.is-focused .focus-stream-btn {
    color: white;
    transform: scale(1.15);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

[id^="title-stream-"] {
    transition: all 0.3s ease;
}

#mt-videos.has-focus .stream-card.is-focused [id^="title-stream-"] {
    font-size: 1.1rem !important;
    text-shadow: 0 0 6px color-mix(in srgb, currentColor 50%, transparent);
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

#mt-videos.has-focus .stream-card:not(.is-focused) header {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

#mt-videos.has-focus.container-sm .stream-card:not(.is-focused) [id^="title-stream-"],
#mt-videos.has-focus.container-md .stream-card:not(.is-focused) [id^="title-stream-"] {
    font-size: 0.65rem !important;
}

#mt-videos.has-focus.container-lg .stream-card.is-focused [id^="title-stream-"] {
    font-size: 1.15rem !important;
}

#mt-videos.has-focus.container-lg .stream-card:not(.is-focused) [id^="title-stream-"] {
    font-size: 0.75rem !important;
}

#mt-videos.has-focus.layout-1,
body.is-fullscreen #mt-videos.has-focus.layout-1,
body.mode-cinema #mt-videos.has-focus.layout-1 {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
}

#mt-videos.has-focus.layout-1 .stream-card,
#mt-videos.has-focus.layout-1 .stream-card.is-focused {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
}

/* Barre latérale des streams non-focus :
   La carte focus est explicitement fixée en colonne 1 (.is-focused), donc les cartes secondaires
   se répartissent dans les colonnes restantes (auto-placement CSS Grid).
   Les colonnes s'adaptent selon le nombre de streams actifs pour occuper 100% de la largeur sans trou à droite. */
#mt-videos.has-focus.container-lg {
    grid-template-columns: 3fr 1fr !important;
}

#mt-videos.has-focus.container-lg.layout-2,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-2,
body.mode-cinema #mt-videos.has-focus.container-lg.layout-2 {
    grid-template-columns: 3fr 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

#mt-videos.has-focus.container-lg.layout-3,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-3,
body.mode-cinema #mt-videos.has-focus.container-lg.layout-3 {
    grid-template-columns: 3fr 1fr !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

#mt-videos.has-focus.container-lg.layout-4,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-4,
body.mode-cinema #mt-videos.has-focus.container-lg.layout-4 {
    grid-template-columns: 3fr 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

#mt-videos.has-focus.container-lg.layout-5,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-5,
body.mode-cinema #mt-videos.has-focus.container-lg.layout-5 {
    grid-template-columns: 3fr 1fr 1fr !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

#mt-videos.has-focus.container-lg.layout-6,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-6,
body.mode-cinema #mt-videos.has-focus.container-lg.layout-6 {
    grid-template-columns: 3fr 1fr 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

/* En mode focus, la carte mise en avant occupe la colonne 1 sur toute la hauteur : les
   rangées sont dimensionnées pour les N-1 vignettes réparties sur les 2 colonnes restantes. */
#mt-videos.has-focus.container-lg.layout-7,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-7,
body.mode-cinema #mt-videos.has-focus.container-lg.layout-7 {
    grid-template-columns: 3fr 1fr 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

#mt-videos.has-focus.container-lg.layout-8,
#mt-videos.has-focus.container-lg.layout-9,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-8,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-9,
body.mode-cinema #mt-videos.has-focus.container-lg.layout-8,
body.mode-cinema #mt-videos.has-focus.container-lg.layout-9 {
    grid-template-columns: 3fr 1fr 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}

#mt-videos.has-focus.container-lg .stream-card {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
}

#mt-videos.has-focus.container-lg .stream-card.is-focused {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    /* S'étend dynamiquement sur toute la hauteur exacte */
}

#mt-videos.has-focus.container-sm,
#mt-videos.has-focus.container-md,
body.is-fullscreen #mt-videos.has-focus.container-sm,
body.is-fullscreen #mt-videos.has-focus.container-md,
body.mode-cinema #mt-videos.has-focus.container-sm,
body.mode-cinema #mt-videos.has-focus.container-md {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)) !important;
    grid-auto-rows: max-content !important;
    grid-template-rows: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#mt-videos.has-focus.container-sm .stream-card,
#mt-videos.has-focus.container-md .stream-card {
    height: 120px !important;
}

#mt-videos.has-focus.container-sm .stream-card.is-focused,
#mt-videos.has-focus.container-md .stream-card.is-focused {
    grid-column: 1 / -1 !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    order: -1 !important;
}

/* Utility to hide elements without using display: none, to keep iframes/media alive */
/* Pour les tchats, on a juste besoin de les cacher sans display: none pour éviter qu'ils ne se rechargent. */
.keep-alive-hidden {
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    left: 0 !important;
    top: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Stabilize Chat Header to avoid Layout Shift when tabs appear */
#mt-chat header {
    min-height: 85px;
    /* Empêche le saut de l'iframe quand les onglets s'affichent */
    align-content: flex-start;
}

@media (min-width: 1024px) {
    #mt-chat header {
        min-height: 95px;
    }
}

.keep-alive-visible {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
}

/* Styling des Onglets de Tchat */
.chat-tab-btn {
    position: relative;
    background-color: #0f0f13 !important;
    color: #94a3b8 !important;
    border: 1px solid #27272a !important;
    border-radius: 6px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    /* Jusqu'à 9 onglets peuvent cohabiter : on borne la largeur d'un pseudo long pour qu'il
       ne monopolise pas une ligne entière, et on garde un minimum lisible après retour à la ligne. */
    min-width: 4.5rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-tab-btn:hover {
    background-color: #27272a !important;
    color: #ffffff !important;
    border-color: #3f3f46 !important;
    transform: translateY(-1px);
}

.chat-tab-btn.is-active {
    background-color: var(--pixel-violet) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) scale(1.02);
}


#chat-resize-handle {
    touch-action: none;
}

/* Mobile : sans ça, un double-tap sur l'en-tête (raccourci Focus) ou un bouton déclenche aussi
   le zoom natif du navigateur / un délai de ~300ms avant que le tap ne soit pris en compte. */
.stream-card header,
button {
    touch-action: manipulation;
}

/* Sélecteur de langue (FR/EN) */
.lang-btn {
    background-color: transparent;
    color: #94a3b8;
    border: none;
    cursor: pointer;
}

.lang-btn:not(:first-child) {
    border-left: 2px solid var(--pixel-violet);
}

.lang-btn:hover:not(.is-active) {
    background-color: #27272a;
    color: #ffffff;
}

.lang-btn.is-active {
    background-color: var(--pixel-violet);
    color: #ffffff;
    font-weight: 700;
}

/* ==========================================================================
   MODALES ET OVERLAYS GLOBAUX (STACKING CONTEXT ROBUSTE & CENTRAGE FIABLE)
   ========================================================================== */

#fix-help-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    background: rgba(5, 5, 8, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

#fix-help-modal:not(.hidden) {
    display: flex !important;
}

#fix-help-card {
    max-width: 600px !important;
    width: 100% !important;
    margin: auto !important;
    background: #0f0f13 !important;
    border: 2px solid var(--pixel-violet) !important;
    box-shadow: 0 0 35px rgba(139, 92, 246, 0.4), 0 25px 50px -12px rgba(0, 0, 0, 0.95) !important;
    border-radius: 0.85rem !important;
    position: relative !important;
    z-index: 10001 !important;
    animation: fixModalAppear 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fixModalAppear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#confirm-overlay {
    z-index: 10500 !important;
}

#toast-container {
    z-index: 11000 !important;
}

/* ==========================================================================
   BADGES D'ÉTAT & ZEVENT DANS L'EN-TÊTE DES STREAMS (TAILLE & ALIGNEMENT HARMONISÉS)
   ========================================================================== */

.stream-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    box-sizing: border-box !important;
    padding: 0 5px !important;
    gap: 3.5px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 3px !important;
    font-family: 'Silkscreen', monospace !important;
    font-size: 8px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

@media (min-width: 768px) {
    .stream-status-badge {
        height: 19px !important;
        min-height: 19px !important;
        max-height: 19px !important;
        font-size: 8.5px !important;
        padding: 0 5.5px !important;
    }
}

.stream-status-badge-offline {
    border-color: rgba(71, 85, 105, 0.6) !important;
    background-color: rgba(30, 41, 59, 0.5) !important;
    color: #94a3b8 !important;
}

.stream-status-badge-live {
    border-color: rgba(239, 68, 68, 0.6) !important;
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    font-weight: 700 !important;
}

.stream-status-badge-game {
    border-color: #3f3f46 !important;
    background-color: #18181b !important;
    color: #cbd5e1 !important;
}

.stream-status-badge-zevent {
    border-color: rgba(81, 196, 27, 0.6) !important;
    background-color: rgba(81, 196, 27, 0.15) !important;
    color: var(--zevent-green) !important;
    font-weight: 700 !important;
}

.stream-status-badge-donate {
    border-color: rgba(81, 196, 27, 0.8) !important;
    background-color: var(--zevent-green) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 0 6px rgba(81, 196, 27, 0.3) !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.stream-status-badge-donate:hover {
    background-color: #34d399 !important;
    border-color: #34d399 !important;
    color: #000000 !important;
}

.stream-status-badge .badge-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 8.5px !important;
    width: 9px !important;
    height: 9px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}