/* Discord Theme Fixes - Correcciones específicas para alineación y estructura */

/* Fuerza ocultamiento del sidebar de pruebas salvo opt-in explícito */
#sidebar-draft:not(.allow-draft),
.sidebar-draft:not(.allow-draft),
.sidebar-draft-body:not(.allow-draft) {
    display: none !important;
}

/* Animación pulse para botones importantes */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(87, 242, 135, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(87, 242, 135, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(87, 242, 135, 0);
    }
}

/* Logo fixes - Controlar tamaño del logo en diferentes contextos */
.discord-sidebar .discord-logo img,
.discord-sidebar-header .discord-logo img {
    max-height: 40px !important;
    max-width: 300px !important;
    width: auto !important;
    height: 40px !important;
    object-fit: contain !important;
}

/* Reglas específicas para logos se manejan en media queries */

.logo img,
nav .logo img {
    max-height: 36px !important;
    max-width: 120px !important;
    width: auto !important;
    height: 36px !important;
    object-fit: contain !important;
}

.discord-card-title img {
    max-height: 24px !important;
    max-width: 80px !important;
    width: auto !important;
    height: 24px !important;
    object-fit: contain !important;
}

/* Fix para enlaces que salen del diseño */
a, a:hover, a:focus, a:active {
    color: inherit !important;
    text-decoration: none !important;
}

/* Asegurar que todos los enlaces en la navegación mantengan el estilo */
.discord-nav-item, .discord-nav-item:hover, .discord-nav-item:focus, .discord-nav-item:active {
    color: var(--discord-light-gray) !important;
    text-decoration: none !important;
}

.discord-nav-item:hover {
    color: var(--discord-white) !important;
}

.discord-nav-item.active {
    color: var(--discord-white) !important;
}

/* Fix específico para el avatar - centrado perfecto */
.discord-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important; /* Asegura recorte circular incluso si el <img> no aplica radius */
    background-color: var(--discord-blurple) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: var(--spacing-md) !important;
    font-weight: 600 !important;
    color: var(--discord-white) !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    position: relative !important;
}

/* Asegurar que la letra del avatar esté perfectamente centrada */
/* En el panel de usuario del sidebar, centrar el texto usando grid para texto plano */
/* Sidebar user avatar: replicar centrado como en tarjetas de usuarios */
.discord-user-panel .discord-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    font-size: 14px !important; /* igual que base */
    line-height: 1 !important;
}

/* No pseudo-element hacks */
.discord-user-panel .discord-avatar::before { content: none !important; }

/* Fix para iconos desalineados */
.discord-nav-item i {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: var(--spacing-md) !important;
    flex-shrink: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    overflow: visible !important;
}

/* Fix para el logo */
.discord-logo {
    font-weight: 800 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    width: auto !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

.discord-logo:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.1) !important;
}

.discord-logo i {
    color: #4c8bf5 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    text-shadow: 0 2px 8px rgba(76, 139, 245, 0.3) !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
}

.discord-logo:hover i {
    transform: scale(1.1) !important;
    text-shadow: 0 4px 12px rgba(76, 139, 245, 0.5) !important;
}

/* Fix para botones desalineados */
.discord-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-sm) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.discord-btn:hover {
    text-decoration: none !important;
}

/* Fix para cards con contenido desalineado */
.discord-card {
    display: flex;
    flex-direction: column;
}

.discord-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-md) !important;
}

.discord-card-title {
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Fix para el header del contenido */
.discord-content-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--spacing-sm) !important;
}

.discord-content-title {
    font-weight: 800 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.discord-content-title:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.1) !important;
}

.discord-content-title i {
    color: #4c8bf5 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    text-shadow: 0 2px 8px rgba(76, 139, 245, 0.3) !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.discord-content-title:hover i {
    transform: scale(1.1) !important;
    text-shadow: 0 4px 12px rgba(76, 139, 245, 0.5) !important;
}

/* Fix para el panel de usuario */
.discord-user-info {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
}

.discord-user-details {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.discord-username {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.discord-status {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

/* Fix para formularios */
.discord-form-group {
    margin-bottom: var(--spacing-md) !important;
}

.discord-label {
    display: block !important;
    margin-bottom: var(--spacing-xs) !important;
}

.discord-input, .discord-select, .discord-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix para alertas */
.discord-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--spacing-sm) !important;
}

.discord-alert i {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

/* Fix para grids responsivos */
.discord-grid {
    display: grid !important;
    gap: var(--spacing-lg) !important;
}

/* Fix para mobile toggle */
.discord-mobile-toggle {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: none !important;
    color: var(--discord-white) !important;
    cursor: pointer !important;
    border-radius: var(--radius-sm) !important;
    transition: background-color 0.15s ease !important;
}

@media (max-width: 768px) {
    .discord-mobile-toggle {
    display: flex !important;
    position: relative !important;
    z-index: 1004 !important;
    pointer-events: auto !important;
    }
}

/* Fix para overflow en sidebar */
.discord-sidebar {
    width: 240px !important;
    background-color: var(--discord-darker) !important;
    border-right: 1px solid var(--discord-border) !important;
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    height: 100vh !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    box-sizing: border-box !important;
}

.discord-nav {
    flex: 1 !important;
    padding: var(--spacing-md) 0 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
}

/* Fix para texto que se sale de contenedores */
* {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Fix para imágenes que se salen */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Forzar imagen circular del avatar en el panel de usuario del sidebar (mayor especificidad) */
nav.discord-sidebar .discord-user-panel .discord-user-info .discord-avatar img,
.discord-sidebar .discord-user-panel .discord-user-info .discord-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Refuerzo extra para cualquier avatar dentro de la navegación del sidebar */
nav.discord-sidebar .discord-nav .discord-avatar,
.discord-sidebar .discord-nav .discord-avatar,
nav.discord-sidebar .discord-nav .discord-avatar img,
.discord-sidebar .discord-nav .discord-avatar img {
    border-radius:50% !important;
    overflow:hidden !important;
    width:32px !important;
    height:32px !important;
    object-fit:cover !important;
    display:block !important;
}

/* Refuerzo específico avatar panel inferior */
.discord-user-panel .discord-avatar {
    border-radius:50% !important;
    overflow:hidden !important;
    width:32px !important;
    height:32px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.discord-user-panel .discord-avatar img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    border-radius:50% !important;
}

/* Mascara circular extra (fallback) */
.discord-user-panel .discord-avatar img {
    clip-path:circle(50% at 50% 50%) !important;
    -webkit-clip-path:circle(50% at 50% 50%) !important;
}

/* Fix para tablas responsivas */
.table-responsive {
    overflow-x: auto !important;
}

/* Fix para badges en navegación */
.discord-nav-item .badge {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    min-width: 18px !important;
    text-align: center !important;
}

/* Fix para espaciado consistente */
.discord-nav-section:last-child {
    margin-bottom: 0 !important;
}

/* Fix para hover states */
.discord-nav-item:hover,
.discord-user-info:hover,
.discord-btn:hover,
.discord-card:hover {
    transition: all 0.15s ease !important;
}

/* Fix para focus states */
.discord-input:focus,
.discord-select:focus,
.discord-textarea:focus {
    outline: none !important;
    border-color: var(--discord-blurple) !important;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2) !important;
}

/* Fix para scrollbars consistentes */
::-webkit-scrollbar {
    width: 8px !important;
}

::-webkit-scrollbar-track {
    background: var(--discord-dark) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--discord-gray) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--discord-light-gray) !important;
}

/* Fix para z-index apropiado */
.discord-mobile-toggle {
    z-index: 1001 !important;
}

/* Notif badges: force styles in prod */
.discord-nav-item .notif-badge {
    margin-left: 8px !important;
    background: linear-gradient(135deg, #ed4245 0%, #ff6b6b 100%) !important;
    color: #fff !important;
    padding: 2px 6px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    box-shadow: 0 2px 6px rgba(237,66,69,0.35) !important;
}

/* Ocultar totalmente cuando no hay notificaciones */
.discord-nav-item .notif-badge.d-none {
    display: none !important;
    visibility: hidden !important;
    padding: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
}

.discord-nav-item.has-notification:not(.active) {
    background: linear-gradient(90deg, rgba(237,66,69,0.18), rgba(237,66,69,0)) !important;
}

/* Red dot indicator appended to links with notifications */
.discord-nav-item.has-notification::after {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background: #ed4245 !important;
    border-radius: 50% !important;
    margin-left: 6px !important;
    box-shadow: 0 0 0 2px var(--discord-darker) !important;
    vertical-align: middle !important;
}

/* Hide mobile close button on desktop; only show on mobile when sidebar open */
#mobile-close-btn { display: none !important; }
@media (max-width: 768px) {
    #mobile-close-btn {
        display: none !important;
        background: none !important;
        border: none !important;
        color: var(--discord-text-muted) !important;
        cursor: pointer !important;
        padding: 6px 10px !important;
        font-size: 22px !important;
        line-height: 1 !important;
        border-radius: 6px !important;
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        z-index: 10 !important;
    }
    .discord-sidebar.mobile-open #mobile-close-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--discord-light-gray) !important;
    }
    .discord-sidebar.mobile-open #mobile-close-btn:hover {
        background-color: var(--discord-hover) !important;
        color: var(--discord-white) !important;
    }
}

/* Fix para animaciones suaves */
* {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important;
}

/* Fix para contenido que se desborda */
.discord-content-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Evitar doble scrollbar: el scroll se maneja solo dentro del layout Discord */
body.discord-ui,
html body.discord-ui {
    overflow: hidden !important;
}

/* Fix para flexbox en IE/Edge */
.discord-layout,
.discord-sidebar,
.discord-main,
.discord-nav,
.discord-nav-item,
.discord-user-info,
.discord-content-header,
.discord-content-title,
.discord-card-header,
.discord-btn,
.discord-alert {
    -ms-flex-align: center;
    -ms-flex-pack: justify;
}

/* Fix para compatibilidad con navegadores antiguos */
.discord-grid-2,
.discord-grid-3,
.discord-grid-4 {
    display: -ms-grid;
    display: grid;
}

/* Fix final para asegurar que nada se salga del diseño */
.discord-layout * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix para el header del sidebar - evitar overflow */
.discord-sidebar-header {
    padding: var(--spacing-lg) var(--spacing-md) !important;
    border-bottom: 1px solid var(--border) !important;
    background-color: var(--discord-darkest) !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Fix específico para iconos de navegación - evitar overflow */
.discord-nav-item {
    display: flex !important;
    align-items: center !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    margin: 2px var(--spacing-sm) !important;
    border-radius: var(--radius-sm) !important;
    text-decoration: none !important;
    color: var(--discord-light-gray) !important;
    transition: all 0.15s ease !important;
    position: relative !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-height: 36px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Fix para títulos de sección - asegurar que no se corten */
.discord-nav-title {
    padding: 0 var(--spacing-md) var(--spacing-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: var(--discord-text-muted) !important;
    letter-spacing: 0.5px !important;
    margin-bottom: var(--spacing-xs) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    line-height: 1.2 !important;
}

/* ========================================
   FIXES PARA LOGO Y MOBILE HEADER - MAYOR ESPECIFICIDAD
======================================== */

/* Fix para el logo - SOBRESCRIBIR reglas del tema original con mayor especificidad */
nav.discord-sidebar .discord-sidebar-header .discord-logo,
.discord-sidebar .discord-sidebar-header .discord-logo,
.discord-layout .discord-sidebar .discord-logo,
.discord-layout nav.discord-sidebar .discord-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    transition: all 0.3s ease !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    gap: 12px !important;
    position: relative !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix específico para el icono del joystick - MÁXIMA ESPECIFICIDAD */
nav.discord-sidebar .discord-sidebar-header .discord-logo i,
.discord-sidebar .discord-sidebar-header .discord-logo i,
.discord-layout .discord-sidebar .discord-logo i,
.discord-layout nav.discord-sidebar .discord-logo i {
    color: #4c8bf5 !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    text-shadow: 0 2px 8px rgba(76, 139, 245, 0.3) !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix para sidebar header - MÁXIMA ESPECIFICIDAD */
nav.discord-sidebar .discord-sidebar-header,
.discord-sidebar .discord-sidebar-header,
.discord-layout .discord-sidebar .discord-sidebar-header,
.discord-layout nav.discord-sidebar .discord-sidebar-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid var(--discord-border) !important;
    background-color: var(--discord-darkest) !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* ========================================
   FIXES MOBILE RESPONSIVENESS
======================================== */

/* Fix para header mobile - evitar superposición - MAYOR ESPECIFICIDAD */
.discord-layout .discord-main .discord-content-header,
main.discord-main .discord-content-header,
.discord-layout main.discord-main .discord-content-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    background-color: var(--discord-darker) !important;
    border-bottom: 1px solid var(--discord-border) !important;
    position: relative !important;
    min-height: 60px !important;
    gap: 16px !important;
}

/* Fix para botón mobile toggle - MÁXIMA ESPECIFICIDAD */
.discord-layout .discord-main .discord-content-header .discord-mobile-toggle,
main.discord-main .discord-content-header .discord-mobile-toggle,
header.discord-content-header .discord-mobile-toggle {
    background: none !important;
    border: none !important;
    color: var(--discord-white) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: var(--radius-sm) !important;
    transition: background-color 0.15s ease !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.discord-layout .discord-main .discord-content-header .discord-mobile-toggle:hover,
main.discord-main .discord-content-header .discord-mobile-toggle:hover,
header.discord-content-header .discord-mobile-toggle:hover {
    background-color: var(--discord-hover) !important;
}

/* Fix para title mobile - asegurar espacio */
.discord-content-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--discord-white) !important;
    margin: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Media queries para mobile - MÁXIMA ESPECIFICIDAD */
@media (max-width: 768px) {
    /* Ocultar sidebar por defecto en mobile */
    .discord-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        position: fixed !important;
        z-index: 1001 !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
        background: var(--discord-dark) !important;
    }
    
    /* Mostrar sidebar cuando tiene clase mobile-open */
    .discord-sidebar.mobile-open {
        transform: translateX(0) !important;
    }
    
    /* El contenido principal NO debe moverse en mobile */
    .discord-main {
        margin-left: 0 !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Layout principal en mobile */
    .discord-layout {
        position: relative !important;
    }
    
    .discord-layout .discord-main .discord-content-header .discord-mobile-toggle,
    main.discord-main .discord-content-header .discord-mobile-toggle,
    header.discord-content-header .discord-mobile-toggle {
        display: flex !important;
    }
    
    .discord-layout .discord-main .discord-content-header,
    main.discord-main .discord-content-header {
        padding: 12px 16px !important;
        gap: 12px !important;
    }
    
    .discord-layout .discord-main .discord-content-header .discord-content-title,
    main.discord-main .discord-content-header .discord-content-title,
    header.discord-content-header .discord-content-title {
        font-size: 18px !important;
        margin-left: 0 !important;
    }
    
    /* Asegurar que el logo se vea bien en sidebar mobile */
    nav.discord-sidebar .discord-sidebar-header .discord-logo,
    .discord-sidebar .discord-sidebar-header .discord-logo,
    .discord-layout .discord-sidebar .discord-logo {
        font-size: 16px !important;
        gap: 10px !important;
    }
    
    nav.discord-sidebar .discord-sidebar-header .discord-logo i,
    .discord-sidebar .discord-sidebar-header .discord-logo i,
    .discord-layout .discord-sidebar .discord-logo i {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    nav.discord-sidebar .discord-sidebar-header,
    .discord-sidebar .discord-sidebar-header,
    .discord-layout .discord-sidebar .discord-sidebar-header {
        padding: 16px 18px !important;
        min-height: 65px !important;
    }
    
    /* Remover overlay problemático - el sidebar usa toda la pantalla */
    .discord-sidebar.mobile-open::before {
        display: none !important;
    }
    
    /* El sidebar abierto debe estar encima de todo */
    .discord-sidebar.mobile-open {
        z-index: 1002 !important;
        position: fixed !important;
    }
    
    /* Ocultar header actions (botón Explorar Catálogo) en mobile */
    .discord-content-actions {
        display: none !important;
    }
    
    /* Logo del header en mobile - 200px de ancho y centrado */
    .discord-content-title {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .header-logo-mobile {
        width: 200px !important;
        height: auto !important;
        max-width: 200px !important;
        object-fit: contain !important;
    }
}

/* Logo del header en desktop - 200px y centrado */
@media (min-width: 769px) {
    .discord-content-title {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .header-logo-mobile {
        width: 200px !important;
        height: auto !important;
        max-width: 200px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 480px) {
    .discord-layout .discord-main .discord-content-header,
    main.discord-main .discord-content-header {
        padding: 10px 12px !important;
    }
    
    .discord-layout .discord-main .discord-content-header .discord-content-title,
    main.discord-main .discord-content-header .discord-content-title {
        font-size: 16px !important;
    }
    
    .discord-layout .discord-main .discord-content-header .discord-mobile-toggle,
    main.discord-main .discord-content-header .discord-mobile-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
}