/* --- GAMOFILE POP THEME --- */
:root {
    /* Base Colors */
    --primary: #1b1c1d;
    --accent: #00d2ff;
    --accent-alt: #9d50bb;
    --bg-light: #f4f7f6;
    --bg-white: #ffffff;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-glass-heavy: rgba(255, 255, 255, 0.95);

    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #666666;
    --text-light: #999999;
    --text-xlight: #bbbbbb;
    --text-dark: #222222;
    --text-on-accent: #ffffff;

    /* Semantic Colors */
    --color-primary: #6366f1;
    --color-secondary: #a855f7;
    --color-success: #21ba45;
    --color-info: #2185d0;
    --color-warning: #f2711c;
    --color-danger: #db2828;
    --color-violet: #6435c9;
    --color-purple: #a333c8;
    --color-teal: #00b5ad;
    --color-brown: #a5673f;
    --color-gold: #fbbd08;
    --color-indigo: #4338ca;

    /* Message Boxes (Info) */
    --msg-info-bg: rgba(59, 130, 246, 0.1);
    --msg-info-border: rgba(59, 130, 246, 0.2);
    --msg-info-text: #1e40af;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6a11cb, #2575fc);
    --gradient-secondary: linear-gradient(135deg, #232526, #414345);
    --gradient-success: linear-gradient(135deg, #00b09b, #96c93d);
    --gradient-blue: linear-gradient(135deg, #00d2ff, #3a7bd5);
    --gradient-teal: linear-gradient(135deg, #00d2ff, #34e89e);
    --gradient-orange: linear-gradient(135deg, #f37335, #fdc830);
    --gradient-red: linear-gradient(135deg, #cb2d3e, #ef473a);
    --gradient-yellow: linear-gradient(135deg, #f8d800, #fdeb71);
    --gradient-olive: linear-gradient(135deg, #b1d433, #96c93d);
    --gradient-violet: linear-gradient(135deg, #7f00ff, #e100ff);
    --gradient-purple: linear-gradient(135deg, #834d9b, #d04ed6);
    --gradient-pink: linear-gradient(135deg, #ec008c, #fc6767);
    --gradient-brown: linear-gradient(135deg, #a5673f, #804e32);
    --gradient-grey: linear-gradient(135deg, #767676, #333333);
    --gradient-black: linear-gradient(135deg, #1b1c1d, #000000);
    --gradient-default: linear-gradient(135deg, #e0e0e0, #bdbdbd);
    --gradient-forum-header: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --gradient-profile-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Shadows & Borders */
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-small: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-pop: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    --shadow-card-hover: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
    --shadow-text: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-tiny: 0 -5px 10px rgba(0, 0, 0, 0.05);
    --shadow-menu: var(--shadow);
    --border-light: 1px solid rgba(0, 0, 0, 0.05);
    --border-xlight: 1px solid #eeeeee;
    --border-input: 1px solid #dddddd;
    --border-menu: none;

    /* Overlays & Specific Gradients */
    --overlay-dark: rgba(0, 0, 0, 0.75);
    --overlay-light: rgba(255, 255, 255, 0.15);
    --bg-hover-light: rgba(0, 0, 0, 0.03);
    --gradient-event: linear-gradient(135deg, #e0f2f1 0%, #ffffff 100%);
    --gradient-welcome: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    --color-primary-rgb: 99, 102, 241;
    --color-violet-rgb: 100, 53, 201;
    --color-accent-rgb: 0, 210, 255;
}

body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--bg-light);
    background-image:
        radial-gradient(at 0% 0%, hsla(197, 100%, 82%, 0.2) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(282, 100%, 82%, 0.2) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(160, 100%, 82%, 0.2) 0, transparent 50%);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
}

/* --- HEADER / MENU --- */
#mainMenu {
    position: sticky !important;
    top: 0;
    z-index: 1000;
    border-radius: 0 0 20px 20px !important;
    box-shadow: var(--shadow-menu) !important;
    border: var(--border-menu) !important;
    padding: 0 10px;
}

#mainMenu>.item,
#mainMenu>.menu>.item {
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative;
    color: #ffffff !important;
    opacity: 0.9;
}

#mainMenu>.item:hover,
#mainMenu>.menu>.item:hover {
    background: var(--overlay-light) !important;
    color: var(--accent) !important;
    opacity: 1 !important;
}

#mainMenu>.active.item,
#mainMenu>.active-page.item {
    background: var(--overlay-light) !important;
    color: var(--accent) !important;
    opacity: 1 !important;
}

#mainMenu .item:hover::after,
#mainMenu .active.item::after,
#mainMenu .active-page.item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 4px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    border-radius: 10px 10px 0 0;
}

/* --- MOBILE MENU RESPONSIVE --- */
@media only screen and (max-width: 991px) {
    #mainMenu {
        min-height: 0 !important;
        max-height: 60px;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden !important;
        flex-direction: column !important;
    }

    #mainMenu.mobile-open {
        max-height: 100vh;
        overflow-y: auto !important;
    }

    #menuHeader {
        width: 100% !important;
        height: 60px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 1.5em !important;
    }

    #mobileToggle {
        display: block !important;
    }

    #mainMenu .item:not(#menuHeader) {
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
    }

    #mainMenu.mobile-open .item:not(#menuHeader) {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Accordion dropdowns on mobile */
    #mainMenu .dropdown {
        flex-wrap: wrap !important;
    }

    #mainMenu .dropdown .menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        padding: 0 !important;
        margin: 5px 0 0 0 !important;
        border-radius: 10px !important;
    }

    #mainMenu .dropdown .menu .item {
        color: #ffffff !important;
        padding: 12px 20px !important;
        background: transparent !important;
    }

    #mainMenu .dropdown .menu .item i.icon {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    #mainMenu .dropdown .menu .item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--accent) !important;
    }

    #mainMenu .dropdown .menu .item:hover i.icon {
        color: var(--accent) !important;
    }

    /* Right menu (search, etc.) on mobile */
    #mainMenu .right.menu {
        width: 100% !important;
        padding: 10px 1.5em !important;
    }

    #mainMenu .right.menu .item,
    #mainMenu .right.menu form,
    #mainMenu .right.menu .input {
        width: 100% !important;
    }

    /* Buttons inside dropdowns on mobile */
    #mainMenu .dropdown .menu .button {
        width: 100% !important;
        margin: 10px 0 0 0 !important;
        display: block !important;
        text-align: center !important;
    }
}

@media only screen and (min-width: 992px) {
    #mobileToggle {
        display: none !important;
    }
}

/* --- DROPDOWNS POP --- */
@media only screen and (min-width: 992px) {
    #mainMenu .dropdown .menu {
        border-radius: 15px !important;
        border: none !important;
        box-shadow: var(--shadow-pop) !important;
        background: var(--bg-white) !important;
        padding: 10px 0 !important;
        margin-top: 5px !important;
        transition: all 0.3s ease !important;
    }

    #mainMenu .dropdown .menu .item {
        font-family: 'Poppins', sans-serif !important;
        font-weight: 600 !important;
        padding: 12px 20px !important;
        color: var(--text-dark) !important;
        /* Force le texte en sombre */
        background: transparent !important;
    }

    #mainMenu .dropdown .menu .item i.icon {
        color: var(--text-muted) !important;
    }

    #mainMenu .dropdown .menu .item:hover {
        background: var(--bg-light) !important;
        color: var(--accent) !important;
    }

    #mainMenu .dropdown .menu .item:hover i.icon {
        color: var(--accent) !important;
    }
}

/* Indicateur de dropdown permanent */
#mainMenu .item>.dropdown.icon {
    margin-left: 8px !important;
    color: var(--accent) !important;
    opacity: 1 !important;
}

/* --- CARDS & SEGMENTS --- */
.ui.card,
.ui.segment {
    border-radius: 15px !important;
    border: var(--border-light) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary);
}

/* En mode sombre (inverted), on utilise le fond de carte qui devrait être sombre */
.ui.inverted.segment,
.ui.inverted.card {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.ui.card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: var(--shadow-card-hover) !important;
    z-index: 10;
}

.ui.card .image {
    border-radius: 15px 15px 0 0 !important;
}

/* --- BUTTONS POP --- */
.ui.button {
    border-radius: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

/* Boutons classiques (pleins) */
.ui.button:not(.basic) {
    color: var(--text-on-accent) !important;
    text-shadow: var(--shadow-text) !important;
}

/* Gradients Pop pour toutes les couleurs */
.ui.primary.button:not(.basic) {
    background: var(--gradient-primary) !important;
}

.ui.secondary.button:not(.basic) {
    background: var(--gradient-secondary) !important;
}

.ui.green.button:not(.basic) {
    background: var(--gradient-success) !important;
}

.ui.blue.button:not(.basic) {
    background: var(--gradient-blue) !important;
}

.ui.teal.button:not(.basic) {
    background: var(--gradient-teal) !important;
}

.ui.orange.button:not(.basic) {
    background: var(--gradient-orange) !important;
}

.ui.red.button:not(.basic) {
    background: var(--gradient-red) !important;
}

.ui.yellow.button:not(.basic) {
    background: var(--gradient-yellow) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

.ui.olive.button:not(.basic) {
    background: var(--gradient-olive) !important;
}

.ui.violet.button:not(.basic) {
    background: var(--gradient-violet) !important;
}

.ui.purple.button:not(.basic) {
    background: var(--gradient-purple) !important;
}

.ui.pink.button:not(.basic) {
    background: var(--gradient-pink) !important;
}

.ui.brown.button:not(.basic) {
    background: var(--gradient-brown) !important;
}

.ui.grey.button:not(.basic) {
    background: var(--gradient-grey) !important;
}

.ui.black.button:not(.basic) {
    background: var(--gradient-black) !important;
}

/* Bouton Standard (par défaut) */
.ui.button:not(.primary):not(.secondary):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black):not(.basic) {
    background: var(--gradient-default) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

/* Boutons BASIC (Creux ou dans menus) */
.ui.basic.button {
    background: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border: var(--border-input) !important;
    box-shadow: none !important;
}

.ui.basic.button:hover,
.ui.inverted.basic.button:hover {
    transform: scale(1.05) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
    border: none !important;
    background: var(--gradient-default) !important;
}

.ui.basic.primary.button:hover,
.ui.inverted.basic.primary.button:hover {
    background: var(--gradient-primary) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.secondary.button:hover,
.ui.inverted.basic.secondary.button:hover {
    background: var(--gradient-secondary) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.green.button:hover,
.ui.inverted.basic.green.button:hover {
    background: var(--gradient-success) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.blue.button:hover,
.ui.inverted.basic.blue.button:hover {
    background: var(--gradient-blue) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.teal.button:hover,
.ui.inverted.basic.teal.button:hover {
    background: var(--gradient-teal) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.orange.button:hover,
.ui.inverted.basic.orange.button:hover {
    background: var(--gradient-orange) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.red.button:hover,
.ui.inverted.basic.red.button:hover {
    background: var(--gradient-red) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.yellow.button:hover,
.ui.inverted.basic.yellow.button:hover {
    background: var(--gradient-yellow) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

.ui.basic.olive.button:hover,
.ui.inverted.basic.olive.button:hover {
    background: var(--gradient-olive) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.violet.button:hover,
.ui.inverted.basic.violet.button:hover {
    background: var(--gradient-violet) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.purple.button:hover,
.ui.inverted.basic.purple.button:hover {
    background: var(--gradient-purple) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.pink.button:hover,
.ui.inverted.basic.pink.button:hover {
    background: var(--gradient-pink) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.brown.button:hover,
.ui.inverted.basic.brown.button:hover {
    background: var(--gradient-brown) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.grey.button:hover,
.ui.inverted.basic.grey.button:hover {
    background: var(--gradient-grey) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.black.button:hover,
.ui.inverted.basic.black.button:hover {
    background: var(--gradient-black) !important;
    color: var(--text-on-accent) !important;
}

/* --- TABS --- */
.ui.tabular.menu {
    border-bottom: none !important;
}

.ui.tabular.menu .item {
    border-radius: 12px 12px 0 0 !important;
    border: none !important;
    margin-right: 5px !important;
}

.ui.tabular.menu .active.item {
    background-color: var(--bg-white) !important;
    box-shadow: var(--shadow-tiny) !important;
}

/* --- FORMS --- */
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="url"] {
    border-radius: 8px !important;
    border: var(--border-input) !important;
    transition: border-color 0.2s ease !important;
}

.ui.form input:focus {
    border-color: var(--accent) !important;
}

.ui.buttons .or:before {
    content: "ou";
}

/* --- GAMOTHEQUE MENU POP --- */
#gamothequeMenu {
    background: var(--bg-white) !important;
    border: none !important;
    border-radius: 15px !important;
    box-shadow: var(--shadow) !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
}

#gamothequeMenu .item {
    font-weight: 600 !important;
    padding: 15px 20px !important;
    transition: all 0.2s ease !important;
    border-bottom: 4px solid transparent !important;
    color: var(--text-secondary) !important;
}

#gamothequeMenu .item:first-child {
    border-radius: 15px 0 0 15px !important;
}

#gamothequeMenu .item:last-child {
    border-radius: 0 15px 15px 0 !important;
}

#gamothequeMenu .item::after {
    display: none !important;
}

#gamothequeMenu .item:hover {
    background: var(--bg-hover-light) !important;
}

/* Couleurs de la barre du bas pour l'état actif/hover */
#gamothequeMenu .item.brown:hover,
#gamothequeMenu .item.brown.active,
#gamothequeMenu .item.brown.active-page {
    border-bottom-color: var(--color-brown) !important;
    color: var(--color-brown) !important;
}

#gamothequeMenu .item.green:hover,
#gamothequeMenu .item.green.active,
#gamothequeMenu .item.green.active-page {
    border-bottom-color: var(--color-success) !important;
    color: var(--color-success) !important;
}

#gamothequeMenu .item.teal:hover,
#gamothequeMenu .item.teal.active,
#gamothequeMenu .item.teal.active-page {
    border-bottom-color: var(--color-teal) !important;
    color: var(--color-teal) !important;
}

#gamothequeMenu .item.blue:hover,
#gamothequeMenu .item.blue.active,
#gamothequeMenu .item.blue.active-page {
    border-bottom-color: var(--color-info) !important;
    color: var(--color-info) !important;
}

#gamothequeMenu .item.violet:hover,
#gamothequeMenu .item.violet.active,
#gamothequeMenu .item.violet.active-page {
    border-bottom-color: var(--color-violet) !important;
    color: var(--color-violet) !important;
}

#gamothequeMenu .item.purple:hover,
#gamothequeMenu .item.purple.active,
#gamothequeMenu .item.purple.active-page {
    border-bottom-color: var(--color-purple) !important;
    color: var(--color-purple) !important;
}

#gamothequeMenu .item.orange:hover,
#gamothequeMenu .item.orange.active,
#gamothequeMenu .item.orange.active-page {
    border-bottom-color: var(--color-warning) !important;
    color: var(--color-warning) !important;
}

#gamothequeMenu .item.red:hover,
#gamothequeMenu .item.red.active,
#gamothequeMenu .item.red.active-page {
    border-bottom-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
}

/* Cas particulier du dropdown Ajouter */
#gamothequeMenu .dropdown.item .menu {
    border-radius: 15px !important;
    margin-top: 10px !important;
}

/* Custom hover for modification button */
.ui.basic.inverted.purple.button:hover {
    background-color: var(--color-warning) !important;
    /* Orange */
    color: var(--bg-white) !important;
    box-shadow: var(--shadow-pop) !important;
}

/* --- LIGHTBOX / GALLERY --- */
.ui.dimmer.blurring.active {
    backdrop-filter: blur(10px) !important;
    background-color: var(--overlay-dark) !important;
}

#gamoGalleryModal {
    background: transparent !important;
}

#gamoGalleryModal .content {
    background: transparent !important;
}

/* --- SHARED POP CLASSES (Extracted from HTML) --- */
.info-message-pop {
    border-radius: 15px !important;
    background: var(--msg-info-bg) !important;
    border: 1px solid var(--msg-info-border) !important;
    color: var(--msg-info-text) !important;
}

.segment-glass-pop {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: var(--shadow) !important;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(10px) !important;
}

.forum-header-gradient {
    background: var(--gradient-forum-header) !important;
    padding: 1.5em !important;
    border-radius: 20px 20px 0 0 !important;
}

.forum-main-header {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.8em !important;
    font-weight: 800 !important;
    color: var(--color-indigo) !important;
    letter-spacing: -1px !important;
    text-shadow: none !important;
    margin-bottom: 1rem !important;
}

.forum-item-row {
    padding: 1.5em 1em !important;
    border-bottom: var(--border-light) !important;
}

.forum-link-header {
    font-size: 1.3em !important;
    font-family: 'Poppins', sans-serif !important;
    color: var(--color-indigo) !important;
}

.text-indigo {
    color: var(--color-primary) !important;
}

.text-muted-pop {
    color: var(--text-muted) !important;
}

.text-light-pop {
    color: var(--text-light) !important;
}

.text-xlight-pop {
    color: var(--text-xlight) !important;
}

.bg-white-pop {
    background: var(--bg-white) !important;
}

.rounded-xl {
    border-radius: 15px !important;
}

.rounded-2xl {
    border-radius: 20px !important;
}

.pill-label {
    border-radius: 50px !important;
    padding: 10px 20px !important;
}

.shadow-pop-avg {
    box-shadow: var(--shadow) !important;
}

.profile-header-bg {
    height: 300px;
    width: 100%;
    position: relative;
    background: var(--gradient-profile-header);
}

.avatar-profile {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 5px solid var(--bg-white);
    box-shadow: var(--shadow);
}

.vitrine-segment {
    border-radius: 24px !important;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(251, 189, 8, 0.15) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    padding: 2.5em 2em !important;
    position: relative;
    overflow: hidden;
}

.vitrine-segment::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 150px;
    background: radial-gradient(circle, rgba(251, 189, 8, 0.12) 0%, rgba(251, 189, 8, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.vitrine-title {
    text-align: center !important;
    margin-bottom: 2rem !important;
    color: var(--text-primary) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    position: relative !important;
    z-index: 1;
}

.vitrine-star-icon {
    color: var(--color-gold) !important;
    animation: pulseGlow 2.5s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(251, 189, 8, 0.4);
    }
    50% {
        transform: scale(1.15);
        text-shadow: 0 0 15px rgba(251, 189, 8, 0.8);
    }
}

.vitrine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    justify-content: center;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .vitrine-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1.5rem;
        padding: 1rem 0.5rem 2rem 0.5rem;
        justify-content: flex-start;
        scrollbar-width: thin;
        scrollbar-color: rgba(251, 189, 8, 0.3) transparent;
    }
    .vitrine-grid::-webkit-scrollbar {
        height: 6px;
    }
    .vitrine-grid::-webkit-scrollbar-track {
        background: transparent;
    }
    .vitrine-grid::-webkit-scrollbar-thumb {
        background: rgba(251, 189, 8, 0.3);
        border-radius: 10px;
    }
    .vitrine-item-wrapper {
        scroll-snap-align: center;
        flex: 0 0 170px;
    }
}

.vitrine-item-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vitrine-glow-back {
    position: absolute;
    top: 15%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 189, 8, 0.4) 0%, rgba(251, 189, 8, 0) 70%);
    filter: blur(15px);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
    z-index: 0;
}

.vitrine-item-wrapper:hover .vitrine-glow-back {
    opacity: 1;
    transform: scale(1.3);
}

.vitrine-item-container {
    position: relative;
    width: 100%;
    height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    perspective: 800px;
    z-index: 1;
}

.vitrine-image-holder {
    width: 120px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-origin: bottom center;
    z-index: 2;
}

.vitrine-image-holder img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.3));
    transition: all 0.4s ease;
}

.vitrine-item-wrapper:hover .vitrine-image-holder {
    transform: translateY(-15px) rotateY(10deg);
}

.vitrine-item-wrapper:hover .vitrine-image-holder img {
    filter: drop-shadow(0 15px 25px rgba(251, 189, 8, 0.45));
}

.vitrine-podium {
    width: 130px;
    height: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50% / 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 
                inset 0 1px 1px rgba(255, 255, 255, 0.3),
                0 0 15px rgba(251, 189, 8, 0.2);
    transform: rotateX(60deg) translateY(10px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
}

.vitrine-item-wrapper:hover .vitrine-podium {
    background: linear-gradient(90deg, rgba(251, 189, 8, 0.2) 0%, rgba(251, 189, 8, 0.6) 50%, rgba(251, 189, 8, 0.2) 100%);
    border-color: rgba(251, 189, 8, 0.5);
    box-shadow: 0 8px 20px rgba(251, 189, 8, 0.4), 
                inset 0 1px 2px rgba(255, 255, 255, 0.5),
                0 0 25px rgba(251, 189, 8, 0.6);
    transform: rotateX(60deg) translateY(15px) scale(1.1);
}

.vitrine-info-capsule {
    margin-top: 1.2rem;
    text-align: center;
    width: 100%;
    padding: 0.4rem 0.8rem;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 2;
}

.dark-mode-native .vitrine-info-capsule {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.vitrine-item-wrapper:hover .vitrine-info-capsule {
    background: var(--gradient-primary, linear-gradient(135deg, var(--color-indigo), var(--color-purple)));
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(251, 189, 8, 0.25);
    transform: translateY(2px);
}

.vitrine-item-name {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.4s ease;
}

.vitrine-item-wrapper:hover .vitrine-item-name {
    color: var(--text-on-accent, #ffffff);
}

.vitrine-item-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    transition: color 0.4s ease;
}

.vitrine-item-wrapper:hover .vitrine-item-meta {
    color: rgba(255, 255, 255, 0.8);
}

/* --- COMPACT SHOWCASE DESIGN --- */
.vitrine-compact-segment {
    border-radius: 20px !important;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(251, 189, 8, 0.15) !important;
    box-shadow: var(--shadow) !important;
    padding: 1.2rem 2rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.vitrine-compact-segment:hover {
    border-color: rgba(251, 189, 8, 0.5) !important;
    box-shadow: 0 10px 30px rgba(251, 189, 8, 0.15) !important;
    transform: translateY(-4px) !important;
}

.vitrine-compact-segment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(251, 189, 8, 0.05) 0%, rgba(251, 189, 8, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.vitrine-compact-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

.vitrine-compact-header h3 {
    margin: 0 !important;
    color: var(--text-primary) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
}

.vitrine-compact-expand-btn {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.vitrine-compact-segment:hover .vitrine-compact-expand-btn {
    color: var(--color-gold);
}

.vitrine-compact-covers {
    display: flex;
    align-items: center;
    padding-left: 20px;
    z-index: 1;
}

.vitrine-compact-cover {
    width: 44px;
    height: 60px;
    margin-left: -18px; /* Negative margin for overlapping hand-of-cards effect */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-white);
    border: 1px solid rgba(251, 189, 8, 0.2);
    box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom center;
}

/* Fan-out card animations by default */
.vitrine-compact-cover:nth-child(1) { transform: rotate(-10deg); z-index: 10; }
.vitrine-compact-cover:nth-child(2) { transform: rotate(-5deg); z-index: 20; }
.vitrine-compact-cover:nth-child(3) { transform: rotate(0deg); z-index: 30; }
.vitrine-compact-cover:nth-child(4) { transform: rotate(5deg); z-index: 40; }
.vitrine-compact-cover:nth-child(5) { transform: rotate(10deg); z-index: 50; }

/* Fan-out on segment hover */
.vitrine-compact-segment:hover .vitrine-compact-cover {
    margin-left: 6px; /* Expand card gap */
    border-color: rgba(251, 189, 8, 0.6);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.vitrine-compact-segment:hover .vitrine-compact-cover:nth-child(1) { transform: translateY(-10px) rotate(-6deg) scale(1.15); }
.vitrine-compact-segment:hover .vitrine-compact-cover:nth-child(2) { transform: translateY(-10px) rotate(-3deg) scale(1.15); }
.vitrine-compact-segment:hover .vitrine-compact-cover:nth-child(3) { transform: translateY(-10px) rotate(0deg) scale(1.15); }
.vitrine-compact-segment:hover .vitrine-compact-cover:nth-child(4) { transform: translateY(-10px) rotate(3deg) scale(1.15); }
.vitrine-compact-segment:hover .vitrine-compact-cover:nth-child(5) { transform: translateY(-10px) rotate(6deg) scale(1.15); }

.vitrine-compact-cover img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 2px;
}

/* --- SHOWCASE MODAL OVERLAYS --- */
#gamoVitrineModal {
    background: transparent !important;
    box-shadow: none !important;
}

#gamoVitrineModal > .content {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(251, 189, 8, 0.25) !important;
    border-radius: 28px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
    padding: 3rem 2.5rem !important;
    position: relative;
    overflow: visible;
}

#gamoVitrineModal .close.icon {
    color: var(--text-primary) !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    font-size: 1.25rem;
    z-index: 100;
}

#gamoVitrineModal .vitrine-segment {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- HOME PAGE CLASSES --- */
.segment-home-welcome {
    border-radius: 20px !important;
    background: var(--gradient-welcome) !important;
    padding: 3em !important;
    text-align: center !important;
    margin-bottom: 3em !important;
}

.home-section-header {
    border-bottom: 2px solid var(--accent) !important;
    padding-bottom: 5px !important;
    margin-bottom: 1em !important;
}

.feed-item-actu {
    padding: 8px 0 !important;
    border-bottom: var(--border-light) !important;
}

.card-mini-pop {
    box-shadow: none !important;
    border: var(--border-xlight) !important;
    background: var(--bg-white) !important;
}

.event-card-home {
    border-radius: 20px !important;
    margin-bottom: 1.5em !important;
    background: var(--gradient-event) !important;
    border-left: 5px solid var(--color-teal) !important;
    padding: 1em !important;
}

/* --- UTILITY CLASSES FOR MIGRATION --- */
.bg-glass {
    background: var(--bg-glass) !important;
}

.bg-glass-heavy {
    background: var(--bg-glass-heavy) !important;
}

.bg-white {
    background: var(--bg-white) !important;
}

.text-indigo {
    color: var(--color-indigo) !important;
}

.text-primary-color {
    color: var(--color-primary) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.text-accent-alt {
    color: var(--accent-alt) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-light {
    color: var(--text-light) !important;
}

.text-white {
    color: var(--bg-white) !important;
}

.border-none {
    border: none !important;
}

.shadow-none {
    box-shadow: none !important;
}

.rounded-20 {
    border-radius: 20px !important;
}

.rounded-15 {
    border-radius: 15px !important;
}

.shadow-medium {
    box-shadow: var(--shadow) !important;
}

.shadow-pop {
    box-shadow: var(--shadow-pop) !important;
}

.gradient-forum {
    background: var(--gradient-forum-header) !important;
}

.gradient-profile {
    background: var(--gradient-profile-header) !important;
}

/* --- STATS KPI CARDS --- */
.stats-kpi-card {
    border-radius: 18px !important;
    padding: 1.5em !important;
    color: var(--text-on-accent) !important;
    text-align: center !important;
    transition: transform 0.3s !important;
}

.stats-kpi-card:hover {
    transform: translateY(-6px) !important;
}

.kpi-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}

.kpi-orange {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
    box-shadow: 0 8px 25px rgba(247, 151, 30, 0.4) !important;
}

.kpi-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4) !important;
}

.kpi-green {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
    box-shadow: 0 8px 25px rgba(67, 233, 123, 0.4) !important;
}

.kpi-red {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    box-shadow: 0 8px 25px rgba(245, 87, 108, 0.4) !important;
}

.kpi-indigo {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%) !important;
    box-shadow: 0 8px 25px rgba(48, 207, 208, 0.4) !important;
}

.kpi-yellow {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
    box-shadow: 0 8px 25px rgba(250, 112, 154, 0.35) !important;
}

.kpi-teal {
    background: linear-gradient(135deg, #21ba45 0%, #00d2ff 100%) !important;
    box-shadow: 0 8px 25px rgba(33, 186, 69, 0.4) !important;
}

.stats-chart-card {
    background: var(--bg-white) !important;
    border-radius: 18px !important;
    padding: 1.8em !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07) !important;
    border: 1px solid rgba(92, 107, 192, 0.1) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

.stats-chart-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
}

/* --- DARK MODE FIXES & REFINEMENTS --- */
.ui.inverted.segment .ui.header,
.ui.inverted.card .header {
    color: var(--text-dark) !important;
}

.ui.card .meta,
.ui.segment .meta {
    color: var(--text-secondary) !important;
}

.ui.inverted.segment .meta,
.ui.inverted.card .meta {
    color: var(--text-muted) !important;
}

.ui.card .description,
.ui.segment .description {
    color: var(--text-primary);
}

.ui.inverted.form label {
    color: var(--text-primary) !important;
}

/* Custom Buttons for Welcome Segment */
.btn-join-pop {
    background: var(--gradient-primary) !important;
    color: var(--text-on-accent) !important;
    padding: 1.2em 3em !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 25px rgba(var(--color-primary-rgb), 0.4) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: none !important;
    display: inline-block;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-join-pop:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(var(--color-primary-rgb), 0.6) !important;
    filter: brightness(1.1);
    color: var(--text-on-accent) !important;
}

.btn-login-pop {
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 1.2em 2.5em !important;
    border-radius: 50px !important;
    border: 2px solid var(--accent) !important;
    transition: all 0.3s ease !important;
    display: inline-block;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-login-pop:hover {
    background: var(--gradient-blue) !important;
    color: var(--text-on-accent) !important;
    border-color: transparent !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(var(--color-accent-rgb), 0.3) !important;
}

/* --- ACHIEVEMENTS POP --- */
.achievement-badge-container {
    perspective: 1000px;
}

.achievement-badge {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: help;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Hybrid Badge Style */
.achievement-badge.hybrid {
    background-size: cover;
    background-position: center;
    border: none;
    /* The image already has the border effect */
    background-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    /* The image has its own shadow */
}

.achievement-icon-svg {
    width: 35px !important;
    height: 35px !important;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
    z-index: 2;
}

.achievement-badge.hybrid:hover .achievement-icon-svg {
    transform: scale(1.15);
}

.achievement-badge img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    transition: transform 0.4s ease;
}

/* Hover effects */
.achievement-badge:hover {
    transform: translateY(-8px) rotateY(10deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(var(--color-primary-rgb), 0.3);
    border-color: var(--accent);
}

.achievement-badge:hover img {
    transform: scale(1.1);
}

/* Specific glows based on common colors */
.achievement-badge.gold:hover {
    box-shadow: 0 15px 30px rgba(251, 189, 8, 0.4), 0 0 25px rgba(251, 189, 8, 0.2);
    border-color: #fbbd08;
}

.achievement-badge.teal:hover {
    box-shadow: 0 15px 30px rgba(0, 181, 173, 0.4), 0 0 25px rgba(0, 181, 173, 0.2);
    border-color: #00b5ad;
}

.achievement-badge.purple:hover {
    box-shadow: 0 15px 30px rgba(163, 51, 200, 0.4), 0 0 25px rgba(163, 51, 200, 0.2);
    border-color: #a333c8;
}

.achievement-badge.indigo:hover {
    box-shadow: 0 15px 30px rgba(67, 56, 202, 0.4), 0 0 25px rgba(67, 56, 202, 0.2);
    border-color: #4338ca;
}

.achievement-badge.blue:hover {
    box-shadow: 0 15px 30px rgba(33, 133, 208, 0.4), 0 0 25px rgba(33, 133, 208, 0.2);
    border-color: #2185d0;
}

.achievement-badge.orange:hover {
    box-shadow: 0 15px 30px rgba(242, 113, 28, 0.4), 0 0 25px rgba(242, 113, 28, 0.2);
    border-color: #f2711c;
}

.achievement-badge.cyan:hover {
    box-shadow: 0 15px 30px rgba(0, 210, 255, 0.4), 0 0 25px rgba(0, 210, 255, 0.2);
    border-color: #00d2ff;
}

.achievement-badge.red:hover {
    box-shadow: 0 15px 30px rgba(219, 40, 40, 0.4), 0 0 25px rgba(219, 40, 40, 0.2);
    border-color: #db2828;
}

.achievement-badge.green:hover {
    box-shadow: 0 15px 30px rgba(33, 186, 69, 0.4), 0 0 25px rgba(33, 186, 69, 0.2);
    border-color: #21ba45;
}

.achievement-badge.yellow:hover {
    box-shadow: 0 15px 30px rgba(248, 216, 0, 0.4), 0 0 25px rgba(248, 216, 0, 0.2);
    border-color: #f8d800;
}

.achievement-badge.pink:hover {
    box-shadow: 0 15px 30px rgba(236, 0, 140, 0.4), 0 0 25px rgba(236, 0, 140, 0.2);
    border-color: #ec008c;
}

.achievement-badge.grey:hover {
    box-shadow: 0 15px 30px rgba(118, 118, 118, 0.4), 0 0 25px rgba(118, 118, 118, 0.2);
    border-color: #767676;
}

/* Levitation animation for unlocked achievements */
@keyframes levitate {
    0% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-3px);
    }

    20% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

.achievement-badge.unlocked {
    animation: levitate 3s ease-in-out infinite;
}

/* --- GLOBAL IMAGE RESPONSIVENESS IN USER CONTENT --- */
.markdown-content img,
.markdown-body img,
.forum-post-content img,
.editor-preview img,
.editor-preview-side img,
.markdown-rendered img {
    max-width: 100% !important;
    height: auto !important;
}

/* --- TABLET/MEDIUM SCREENS NAVIGATION OPTIMIZATION (992px - 1350px) --- */
@media only screen and (min-width: 992px) and (max-width: 1350px) {
    #mainMenu {
        padding: 0 5px !important;
    }

    #mainMenu>.item,
    #mainMenu>.menu>.item {
        padding-left: 0.75em !important;
        padding-right: 0.75em !important;
        font-size: 0.9em !important;
    }

    /* Make search input collapsible to save space */
    #mainMenu .right.menu .input {
        width: 120px !important;
        transition: width 0.3s ease !important;
    }

    #mainMenu .right.menu .input:focus-within {
        width: 180px !important;
    }

    #mainMenu .right.menu .input input {
        width: 100% !important;
    }
}

/* --- MODALS OVERLAY Z-INDEX FIX FOR FLOATING MOBILE DOCK --- */
.ui.dimmer.modals.page.active {
    z-index: 10050 !important;
}

/* --- ITEM DETAIL MODAL RESPONSIVE COMPACT SIZE FOR MOBILE --- */
@media only screen and (max-width: 767.98px) {
    #item-detail-modal .header {
        padding: 1em !important;
        font-size: 1.15em !important;
    }
    
    #item-detail-modal .scrolling.content {
        padding: 1em !important;
    }
    
    #item-detail-modal .actions {
        padding: 0.8em !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: space-between !important;
    }
    
    #item-detail-modal .actions .button,
    #item-detail-modal .actions a.button {
        flex: 1 1 calc(50% - 6px) !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
    }
    
    #item-detail-modal .actions form {
        display: contents !important;
    }
}

/* --- RESPONSIVE BUTTONS FOR FORMS --- */
.responsive-buttons {
    display: flex;
    gap: 10px;
    margin-top: 1em;
}

@media only screen and (max-width: 767.98px) {
    .responsive-buttons {
        flex-direction: column;
        width: 100%;
    }
    .responsive-buttons .button,
    .responsive-buttons a.button {
        width: 100% !important;
        margin: 0 !important;
        text-align: center;
    }
}

/* --- RICH MARKDOWN FORMATTING STYLES --- */
.markdown-content u,
.markdown-body u,
.forum-post-content u,
.markdown-rendered u {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

.markdown-content del,
.markdown-body del,
.forum-post-content del,
.markdown-rendered del,
.markdown-content s,
.markdown-body s,
.forum-post-content s,
.markdown-rendered s {
    text-decoration: line-through;
    opacity: 0.85;
}

.markdown-content mark,
.markdown-body mark,
.forum-post-content mark,
.markdown-rendered mark {
    background: rgba(254, 240, 138, 0.45);
    color: inherit;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(254, 240, 138, 0.25);
}

.dark-mode-native .markdown-content mark,
.dark-mode-native .markdown-body mark,
.dark-mode-native .forum-post-content mark,
.dark-mode-native .markdown-rendered mark {
    background: rgba(234, 179, 8, 0.35);
    color: #fef08a;
}

/* Spoilers (<details><summary>) */
.markdown-content details,
.markdown-body details,
.forum-post-content details,
.markdown-rendered details {
    background: var(--bg-hover-light, rgba(255, 255, 255, 0.05));
    border: var(--border-light, 1px solid rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 0.6em 1.2em;
    margin: 1em 0;
    transition: all 0.3s ease;
}

.markdown-content details[open],
.markdown-body details[open],
.forum-post-content details[open],
.markdown-rendered details[open] {
    background: var(--bg-glass-heavy, rgba(255, 255, 255, 0.08));
    border-color: var(--color-primary, #6366f1);
}

.markdown-content summary,
.markdown-body summary,
.forum-post-content summary,
.markdown-rendered summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary, #6366f1);
    user-select: none;
    outline: none;
    padding: 0.2em 0;
}

.markdown-content summary:hover,
.markdown-body summary:hover,
.forum-post-content summary:hover,
.markdown-rendered summary:hover {
    color: var(--accent, #38bdf8);
}

/* Text alignment blocks */
.markdown-content div[align="center"],
.markdown-body div[align="center"],
.forum-post-content div[align="center"],
.markdown-rendered div[align="center"] {
    text-align: center;
}

.markdown-content div[align="right"],
.markdown-body div[align="right"],
.forum-post-content div[align="right"],
.markdown-rendered div[align="right"] {
    text-align: right;
}

/* --- EASYMDE FULLSCREEN FIX (MAIN MENU OVERLAP) --- */
.EasyMDEContainer.is-fullscreen,
.EasyMDEContainer .editor-toolbar.fullscreen,
.EasyMDEContainer .CodeMirror-fullscreen,
.EasyMDEContainer .editor-preview-full,
.EasyMDEContainer .editor-preview-side,
.editor-toolbar.fullscreen,
.CodeMirror-fullscreen,
.editor-preview-full,
.editor-preview-side {
    z-index: 10010 !important;
}