/* Premium Glassmorphism for Panels */

#main article {
    /* Multi-layer translucent background */
    background: linear-gradient(
        135deg, 
        rgba(30, 32, 38, 0.6) 0%, 
        rgba(20, 22, 26, 0.4) 100%
    ) !important;
    
    /* Backdrop blur (macOS Ventura style) */
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    
    /* Refined border radius for premium feel */
    border-radius: 16px !important;
    
    /* Remove default background to prevent conflicts */
    border: none !important;
    
    /* Depth shadows & soft inner highlight */
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4), /* Deep outer shadow */
        0 10px 20px rgba(0, 0, 0, 0.2), /* Mid outer shadow */
        inset 0 1px 1px rgba(255, 255, 255, 0.15), /* Top inner highlight */
        inset 0 -1px 1px rgba(255, 255, 255, 0.05) !important; /* Bottom inner highlight */
        
    position: relative;
    overflow: hidden;
    
    /* Smooth transitions for interactive hover (active state handled by main.css) */
    transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out, box-shadow 0.3s ease !important;
}

/* Subtle border gradient using mask compositing */
#main article::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(255, 255, 255, 0.02) 40%, 
        rgba(255, 255, 255, 0.02) 60%, 
        rgba(255, 255, 255, 0.08) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Smooth hover lighting (cursor tracking) */
#main article::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.06), 
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

#main article:hover::before {
    opacity: 1;
}

/* Ensure the text and inner content stays above the hover highlight */
#main article > * {
    position: relative;
    z-index: 1;
}

/* Refine the close button for glass look */
#main article .close {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50% !important;
    top: 1rem !important;
    right: 1rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

#main article .close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

#main article .close:before {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}