/* MODERN & FLAT UI REHAUL */

/* 1. Global Rounding & Modern Font */
:root {
    --modern-radius: 24px;
    --card-radius: 18px;
    --pill-radius: 50px;
    --soft-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    --hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 2. Content & Page Layout */
.page__main, 
#content, 
.resizable-container {
    border-radius: var(--modern-radius) !important;
    border: none !important;
    box-shadow: var(--soft-shadow);
    background: #fff;
    padding: 20px !important;
    transition: var(--transition);
}

/* 3. The "Bento" Card Look */
.wds-card, 
.portable-infobox, 
.fandom-community-header__top-container {
    border-radius: var(--card-radius) !important;
    border: none !important;
    box-shadow: var(--soft-shadow) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px); /* Glassmorphism */
    margin-bottom: 20px !important;
    transition: var(--transition) !important;
}

.wds-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow) !important;
}

/* 4. Modern Pill-Shaped Buttons & Inputs */
.wds-button, 
.wds-search__input, 
.wds-tabs__tab-label {
    border-radius: var(--pill-radius) !important;
    text-transform: none !important;
    letter-spacing: 0.5px;
    transition: var(--transition) !important;
}

.wds-button:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

/* 5. Smooth Scroll & Modern Scrollbar */
html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* 6. Entrance Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page__main, .wds-card {
    animation: fadeInUp 0.6s ease forwards;
}

/* 7. Hide Clunky Borders */
.wds-tabs__wrapper, 
.fandom-community-header {
    border-bottom: none !important;
}