.mhub-plugin-dashboard {
    *, *::before, *::after { box-sizing: border-box; }
    padding: 0;
    max-width: 100%;
    background: #f1f5f9;
    min-height: calc(100vh - 32px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    position: relative;
    padding-bottom: 80px;

    // Header Area
    .mhub-dashboard-header-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0;
        margin-bottom: 10px;

        @media (max-width: 600px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }

        .mhub-header-left {
            h1 { 
                font-size: 24px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.3; 
                @media (max-width: 600px) { font-size: 20px; }
            }
        }

        .mhub-header-right {
            display: flex; gap: 15px;

            @media (max-width: 600px) {
                width: 100%;
                flex-direction: column;
                gap: 12px;
            }

            .mhub-btn-outline, .mhub-btn-primary {
                @media (max-width: 600px) {
                    width: 100%;
                    max-width: 100%;
                    justify-content: center;
                    padding: 14px 15px; // Reduced horizontal padding for small screens
                }
            }

            .mhub-btn-outline {
                background: #fff; color: #1e293b; border: 1px solid #ccd0d4; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px;
                display: flex; align-items: center; gap: 8px;
                &:hover { background: #f8fafc; border-color: #7856fb; color: #7856fb; }
            }
            .mhub-btn-primary {
                background: #7856fb; color: #fff; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px;
                display: flex; align-items: center; gap: 8px;
                &:hover { background: #6448d1; }
                .dashicons { font-size: 18px; width: 18px; height: 18px; }
            }
        }
    }

    .mhub-dashboard-container {
        padding: 0 40px;
        max-width: 1300px;
        margin: 0 auto;
        display: block;

        @media (max-width: 768px) { padding: 0 20px; }
        @media (max-width: 480px) { padding: 0 15px; }
    }

    // Stats Grid
    .mhub-dashboard-stats-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 25px;

        @media (max-width: 1024px) { grid-template-columns: repeat(2, 1fr); }
        @media (max-width: 640px) { grid-template-columns: 1fr; }

        .mhub-stat-card {
            background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; align-items: center;
            border-bottom: 3px solid transparent; transition: all 0.3s ease;
            &:hover { transform: translateY(-3px); border-bottom-color: #7856fb; }

            .mhub-stat-value { font-size: 32px; font-weight: 800; color: #0f172a; line-height: 1; margin-bottom: 8px; }
            .mhub-stat-label { font-size: 13px; font-weight: 600; color: #64748b; }
            .mhub-stat-icon-wrap {
                width: 50px; height: 50px; background: #f5f3ff; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                .dashicons { font-size: 28px; width: 28px; height: 28px; }
            }
        }
    }

    // Platform Breakdown
    .mhub-dashboard-platform-breakdown {
        margin-bottom: 25px;
        .mhub-card {
            background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            h3 { 
                font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 20px 0; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px; line-height: 1.3; 
                @media (max-width: 600px) { font-size: 14px; }
            }
            @media (max-width: 480px) { padding: 20px; }
        }
        .mhub-platform-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px;
            @media (max-width: 768px) { gap: 20px; grid-template-columns: 1fr 1fr; }
            @media (max-width: 480px) { grid-template-columns: 1fr; }
        }
        .mhub-platform-item {
            display: flex; flex-direction: column; gap: 8px;
            .mhub-platform-name { font-size: 13px; font-weight: 700; color: #475569; }
            .mhub-platform-bar-wrap {
                height: 8px; background: #f1f5f9; border-radius: 10px; overflow: hidden;
                .mhub-platform-bar { height: 100%; border-radius: 10px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
            }
            .mhub-platform-count { font-size: 14px; font-weight: 800; color: #1e293b; align-self: flex-end; }
        }
    }

    // Middle Content Grid
    .mhub-dashboard-middle-grid {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 25px;
        margin-bottom: 40px;
        align-items: start;

        @media (max-width: 1100px) { grid-template-columns: 1fr; }

        .mhub-middle-main { display: flex; flex-direction: column; gap: 25px; }

        // Banner Card
        .mhub-dashboard-banner-card {
            background: #fff; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); padding: 40px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center;
            border: 1px solid rgba(120, 86, 251, 0.05);
            
            @media (max-width: 768px) { grid-template-columns: 1fr; padding: 25px; }

            .mhub-banner-text {
                h2 { 
                    font-size: 28px; font-weight: 800; color: #1e293b; margin: 0 0 15px 0; line-height: 1.3; 
                    @media (max-width: 600px) { font-size: 22px; }
                }
                p { font-size: 15px; color: #64748b; line-height: 1.7; margin: 0 0 25px 0; }
                .mhub-banner-link {
                    color: #7856fb; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px; font-size: 15px;
                    &:hover { text-decoration: underline; }
                    &:focus { outline: none; box-shadow: none; }
                }
            }
            .mhub-banner-vid-placeholder {
                background: #fff; aspect-ratio: 16/10; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid #e2e8f0; overflow: hidden;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

                img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; transition: transform 0.5s ease; }

                .mhub-play-button-overlay {
                    position: absolute; width: 60px; height: 60px; background: #7856fb; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
                    box-shadow: 0 10px 15px -3px rgba(120, 86, 251, 0.4);
                    transition: all 0.3s ease;
                    z-index: 2;
                    .dashicons { font-size: 28px; width: 28px; height: 28px; margin-left: 2px; }
                }

                &:hover {
                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
                    transform: translateY(-2px);
                    img { transform: scale(1.05); }
                    .mhub-play-button-overlay { transform: scale(1.1); background: #5b42d1; }
                }
            }
        }

        // Promo Card (Addons)
        .mhub-dashboard-promo-card {
            background: #fff; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); padding: 35px; display: flex; justify-content: space-between; align-items: center;
            transition: all 0.3s ease;
            position: relative;
            border-left: 4px solid transparent;

            @media (max-width: 600px) {
                flex-direction: column-reverse;
                align-items: flex-start;
                padding: 25px;
                gap: 20px;
            }

            &:hover { 
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08); 
                border-left-color: #7856fb;
                background: linear-gradient(to right, #fdfdff, #fff);
            }

            .mhub-promo-text {
                max-width: 75%;
                @media (max-width: 600px) { max-width: 100%; }
                h3 { 
                    font-size: 22px; font-weight: 800; color: #1e293b; margin: 0 0 12px 0; transition: color 0.3s; line-height: 1.3; 
                    @media (max-width: 600px) { font-size: 18px; }
                }
                &:hover h3 { color: #7856fb; }
                p { color: #64748b; margin-bottom: 25px; line-height: 1.6; font-size: 15px; }
                .mhub-btn-brand-small {
                    background: #7856fb; color: #fff; padding: 12px 26px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px;
                    @media (max-width: 480px) { display: block; text-align: center; }
                    &:hover { background: #6448d1; }
                }
            }
            .mhub-promo-image {
                @media (max-width: 600px) { align-self: center; }
                .dashicons { font-size: 110px; height: 110px; width: 110px; color: #7856fb; opacity: 0.08; transition: opacity 0.3s; }
                &:hover .dashicons { opacity: 0.15; }
            }
        }

        // Sidebar
        .mhub-middle-sidebar {
            display: flex; flex-direction: column; gap: 25px;

            .mhub-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); padding: 25px; flex-shrink: 0; }

            .mhub-pro-sidebar-card {
                position: relative; overflow: hidden;
                
                // Decorative Glow from Reference
                &::before {
                    content: ''; position: absolute; top: -50px; right: -50px; width: 180px; height: 180px; 
                    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0) 70%);
                    z-index: 0; pointer-events: none;
                }

                .mhub-pro-badge { 
                    color: #f59e0b; margin-bottom: 15px; position: relative; z-index: 1;
                    .dashicons { font-size: 32px; width: 32px; height: 32px; } 
                }
                
                h3 { font-size: 17px; font-weight: 700; color: #1e293b; margin: 0 0 20px 0; position: relative; z-index: 1; }
                
                .mhub-pro-features-simple {
                    list-style: none; padding: 0; margin: 0 0 15px 0; position: relative; z-index: 1;
                    li {
                        display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #475569; font-weight: 500; margin-bottom: 14px;
                        .dashicons-yes { color: #10b981; font-size: 20px; width: 20px; height: 20px; background: #ecfdf5; border-radius: 50%; padding: 2px; }
                    }
                }

                .mhub-upgrade-btn-wrapper {
                    position: relative; z-index: 1;
                    padding-top: 16px;
                    border-top: 1px solid #f1f5f9;
                }
                
                .mhub-btn-pro-gold {
                    background-color: #fde68a; color: #b45309; width: 100%; padding: 15px; border-radius: 10px; text-decoration: none; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 10px;
                    box-shadow: 0 4px 14px 0 rgba(180, 83, 9, 0.15); transition: all 0.3s ease; position: relative; z-index: 1;
                    text-transform: uppercase; letter-spacing: 0.5px; box-sizing: border-box;

                    &:hover { 
                        transform: translateY(-2px); 
                        box-shadow: 0 6px 20px rgba(180, 83, 9, 0.25);
                        background-color: #fcd34d;
                        color: #92400e;
                    }
                }
            }

            .mhub-whats-new-sidebar {
                h3 { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px; }
                .mhub-changelog-list {
                    list-style: none; padding: 0; margin: 0 0 20px 0;
                    li {
                        display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #475569; margin-bottom: 12px;
                        .dashicons-yes { color: #7856fb; font-size: 16px; width: 16px; height: 16px; }
                    }
                }
                .mhub-learn-more-link {
                    color: #7856fb; font-weight: 700; text-decoration: none; font-size: 13.5px; display: flex; align-items: center; gap: 6px;
                    &:hover { text-decoration: underline; }
                }
            }
        }
    }

    // Footer Resources
    .mhub-dashboard-footer-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        align-items: stretch;
        margin-top: 10px;

        @media (max-width: 1024px) { grid-template-columns: repeat(2, 1fr); }
        @media (max-width: 640px) { grid-template-columns: 1fr; }

        .mhub-footer-card {
            background: #fff; padding: 35px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); text-align: left; display: flex; flex-direction: column;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;

            &:hover { 
                transform: translateY(-5px); 
                box-shadow: 0 10px 15px -3px rgba(120, 86, 251, 0.1); 
            }

            .mhub-footer-icon { 
                margin-bottom: 25px; 
                .dashicons { font-size: 40px; width: 40px; height: 40px; opacity: 0.9; transition: transform 0.3s; }
            }
            &:hover .mhub-footer-icon .dashicons { transform: scale(1.1); color: #5b42d1 !important; }

            h4 { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 15px 0; }
            p { font-size: 14px; color: #64748b; line-height: 1.7; margin: 0 0 25px 0; flex-grow: 1; }
            .mhub-footer-link {
                color: #7856fb; font-weight: 700; text-decoration: none; font-size: 15px; display: flex; align-items: center; gap: 6px;
                &:hover { color: #5b42d1; .dashicons { transform: translateX(3px); } }
                .dashicons { transition: transform 0.2s; font-size: 18px; width: 18px; height: 18px; }
            }
        }
    }

    // Video Modal Overlay (Refined Design)
    .mhub-video-modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(4px);
        display: flex; align-items: center; justify-content: center; z-index: 999999; animation: mhubFadeIn 0.3s ease;

        .mhub-video-modal-container {
            width: 90%; max-width: 900px; position: relative; animation: mhubSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            
            .mhub-modal-close {
                position: absolute; top: -15px; right: -15px; width: 40px; height: 40px; background: #fff; border: none; border-radius: 50%; color: #1e293b; cursor: pointer;
                display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
                transition: all 0.2s ease; z-index: 10;
                &:hover { transform: scale(1.1); color: #7856fb; }
                .dashicons { font-size: 20px; width: 20px; height: 20px; font-weight: 800; }
            }

            .mhub-video-iframe-wrapper {
                background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); aspect-ratio: 16/9;
                border: 4px solid #fff;
                iframe { width: 100%; height: 100%; border: none; }
            }
        }
    }
}

@keyframes mhubFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mhubSlideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }