.mpe-dashboard{

    max-width:1200px;

    margin:40px auto;

}

.mpe-dashboard-header{

    background:#2563eb;

    color:#fff;

    border-radius:20px;

    padding:40px;

    margin-bottom:30px;

}

.mpe-dashboard-header h1{

    font-size:42px;

    margin-bottom:10px;

}

.mpe-dashboard-header p{

    font-size:18px;

    opacity:.9;

}

.mpe-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    width: 100%;
    box-sizing: border-box;
}

.mpe-dashboard-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.3s;

}

.mpe-dashboard-card:hover{

    transform:translateY(-5px);

}

.mpe-card h3{

    margin-bottom:20px;

    font-size:20px;

}

.mpe-card strong{

    display:block;

    font-size:34px;

    color:#2563eb;

    margin-bottom:12px;

}

.mpe-card span{

    color:#666;

}

/* =========================================================
   Subject Performance
   ========================================================= */

.mpe-subject-performance {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.mpe-subject-performance-header {
    margin-bottom: 22px;
}

.mpe-subject-performance-header h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
}

.mpe-subject-performance-header p {
    margin: 0;
    color: #666;
    font-size: 15px;
}

.mpe-subject-performance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.mpe-performance-column {
    padding: 20px;
    border-radius: 14px;
    background: #f8fafc;
}

.mpe-performance-column h4 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
}

.mpe-performance-item {
    padding: 15px 16px;
    margin-bottom: 12px;
    background: #ffffff;
    border-radius: 12px;
    box-sizing: border-box;
}

.mpe-performance-item:last-child {
    margin-bottom: 0;
}

.mpe-performance-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.mpe-performance-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.mpe-performance-meta strong {
    font-size: 18px;
}

.mpe-performance-meta span {
    font-size: 13px;
    color: #777;
}

.mpe-performance-bar {
    width: 100%;
    height: 7px;
    background: #e9edf2;
    border-radius: 10px;
    overflow: hidden;
}

.mpe-performance-bar-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 0.4s ease;
}

.mpe-strong-column .mpe-performance-bar-fill {
    background: #22a06b;
}

.mpe-weak-column .mpe-performance-bar-fill {
    background: #e55353;
}

.mpe-developing-column .mpe-performance-bar-fill {
    background: #e0a11a;
}

.mpe-performance-empty {
    padding: 15px;
    color: #777;
    font-size: 14px;
}

@media (max-width: 700px) {

    .mpe-subject-performance {
        padding: 20px;
    }

    .mpe-subject-performance-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MEDSTERZ DASHBOARD — MOBILE LAYOUT FIX
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* THE IMPORTANT FIX:
       Desktop is flex-row.
       Mobile must become flex-column.
    */
    .mpe-layout {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Sidebar */
    .mpe-layout .mpe-sidebar {
        flex: 0 0 auto !important;

        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 16px 20px !important;
        padding: 20px !important;

        box-sizing: border-box !important;
    }

    /* Main content */
    .mpe-layout .mpe-content {
        flex: 0 0 auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 16px !important;

        box-sizing: border-box !important;
    }

    /* Dashboard grid */
    .mpe-dashboard-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 18px !important;

        box-sizing: border-box !important;
    }

    .mpe-dashboard-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    /* Subject Performance */
    .mpe-subject-performance {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    .mpe-subject-performance-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 14px !important;

        box-sizing: border-box !important;
    }

    .mpe-performance-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    .mpe-dashboard-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }
}
/* =========================================================
   Dashboard Statistics Overview
   ========================================================= */

.mpe-dashboard-statistics {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.mpe-dashboard-statistics-header {
    margin-bottom: 22px;
}

.mpe-dashboard-statistics-header h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
}

.mpe-dashboard-statistics-header p {
    margin: 0;
    color: #666;
    font-size: 15px;
}

.mpe-dashboard-statistics-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.mpe-stat-item {
    min-width: 0;
    padding: 20px 16px;
    border-radius: 14px;
    background: #f8fafc;
    box-sizing: border-box;
}

.mpe-stat-item span {
    display: block;
    margin-bottom: 10px;
    color: #555;
    font-size: 14px;
    font-weight: 600;
}

.mpe-stat-item strong {
    display: block;
    margin-bottom: 6px;
    font-size: 30px;
    line-height: 1.1;
    color: #2563eb;
}

.mpe-stat-item small {
    display: block;
    color: #777;
    font-size: 12px;
    line-height: 1.35;
}

@media (max-width: 1100px) {
    .mpe-dashboard-statistics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .mpe-dashboard-statistics {
        padding: 20px;
    }

    .mpe-dashboard-statistics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .mpe-stat-item {
        padding: 16px 14px;
    }

    .mpe-stat-item strong {
        font-size: 26px;
    }
}


/* =========================================================
   Exam Readiness 2.0
   ========================================================= */
.mpe-exam-readiness {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.mpe-exam-readiness-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}
.mpe-exam-readiness-header h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
}
.mpe-exam-readiness-header p {
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}
.mpe-readiness-score-wrap {
    flex: 0 0 auto;
    text-align: right;
}
.mpe-readiness-score-wrap strong {
    display: block;
    font-size: 36px;
    line-height: 1;
    color: #2563eb;
}
.mpe-readiness-score-wrap span {
    display: block;
    margin-top: 7px;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
}
.mpe-readiness-bar {
    height: 12px;
    overflow: hidden;
    background: #e8edf3;
    border-radius: 999px;
}
.mpe-readiness-bar i {
    display: block;
    width: 0;
    height: 100%;
    background: #2563eb;
    border-radius: inherit;
    transition: width .35s ease;
}
.mpe-readiness-message {
    margin-top: 14px;
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
}
.mpe-readiness-factors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.mpe-readiness-factors > div {
    padding: 15px 16px;
    background: #f8fafc;
    border-radius: 12px;
}
.mpe-readiness-factors span {
    display: block;
    color: #667085;
    font-size: 12px;
    margin-bottom: 6px;
}
.mpe-readiness-factors strong {
    display: block;
    color: #1f2937;
    font-size: 20px;
}
@media (max-width: 700px) {
    .mpe-exam-readiness { padding: 20px; }
    .mpe-exam-readiness-header { align-items: flex-start; gap: 14px; }
    .mpe-exam-readiness-header h3 { font-size: 22px; }
    .mpe-exam-readiness-header p { font-size: 14px; }
    .mpe-readiness-score-wrap strong { font-size: 30px; }
    .mpe-readiness-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================
   v4.4.9 Daily Goal + Streak
   ========================================================= */
.mpe-daily-goal-dashboard {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.mpe-daily-goal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.mpe-daily-goal-header h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
}
.mpe-daily-goal-header p {
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}
.mpe-goal-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}
.mpe-goal-select-wrap select {
    min-width: 100px;
    padding: 9px 12px;
    border: 1px solid #dfe6ed;
    border-radius: 10px;
    background: #fff;
    color: #17324d;
    font-weight: 700;
    cursor: pointer;
}
.mpe-daily-goal-main {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
}
.mpe-goal-progress {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 14px;
    background: #f8fafc;
}
.mpe-goal-progress-ring {
    --mpe-goal-pct: 0deg;
    position: relative;
    flex: 0 0 118px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#2563eb var(--mpe-goal-pct), #e8edf3 0deg);
}
.mpe-goal-progress-ring::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #f8fafc;
}
.mpe-goal-progress-ring > * { position: relative; z-index: 1; }
.mpe-goal-progress-ring strong { font-size: 27px; line-height: 1; color: #17324d; }
.mpe-goal-progress-ring span { margin-top: 3px; color: #667085; font-size: 12px; }
.mpe-goal-progress-ring span i { font-style: normal; }
.mpe-goal-progress-ring small { margin-top: 5px; color: #7b8794; font-size: 10px; }
.mpe-goal-progress-copy { flex: 1; min-width: 0; }
.mpe-goal-progress-copy > strong { display:block; color:#17324d; font-size:20px; margin-bottom:5px; }
.mpe-goal-progress-copy > span { display:block; color:#667085; font-size:13px; line-height:1.45; }
.mpe-dashboard-goal-bar { height:9px; margin-top:14px; overflow:hidden; background:#e8edf3; border-radius:999px; }
.mpe-dashboard-goal-bar i { display:block; width:0; height:100%; background:#2563eb; border-radius:inherit; transition:width .35s ease; }
.mpe-streak-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.mpe-streak-grid > div { padding:14px 16px; border-radius:12px; background:#f8fafc; }
.mpe-streak-grid span { display:block; margin-bottom:5px; color:#667085; font-size:12px; }
.mpe-streak-grid strong { display:block; color:#17324d; font-size:20px; }
.mpe-streak-grid strong i { font-style:normal; }
.mpe-goal-complete .mpe-goal-progress-ring { background:conic-gradient(#22a06b 360deg, #e8edf3 0deg); }
.mpe-goal-complete .mpe-dashboard-goal-bar i { background:#22a06b; }
@media (max-width: 700px) {
    .mpe-daily-goal-dashboard { padding:20px; }
    .mpe-daily-goal-header { display:block; }
    .mpe-goal-select-wrap { margin-top:14px; }
    .mpe-goal-select-wrap select { width:100%; }
    .mpe-daily-goal-main { grid-template-columns:1fr; }
    .mpe-goal-progress { padding:16px; gap:14px; }
    .mpe-goal-progress-ring { flex-basis:104px; width:104px; height:104px; }
    .mpe-goal-progress-ring strong { font-size:24px; }
}


/* =========================================================
   Practice History & Progress Trends
   ========================================================= */
.mpe-practice-history {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 28px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.mpe-practice-history-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}
.mpe-practice-history-header h3 { margin:0 0 8px; font-size:24px; font-weight:700; }
.mpe-practice-history-header p { margin:0; color:#666; font-size:15px; }
.mpe-history-summary { text-align:right; flex:0 0 auto; }
.mpe-history-summary strong { display:block; font-size:30px; color:#2563eb; line-height:1; }
.mpe-history-summary span { color:#777; font-size:13px; }
.mpe-history-chart { background:#f8fafc; border-radius:14px; padding:18px 14px 12px; }
.mpe-history-bars { height:190px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; align-items:end; }
.mpe-history-day { min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; }
.mpe-history-bar-track { width:100%; max-width:56px; height:125px; display:flex; align-items:flex-end; justify-content:center; background:#e9eef5; border-radius:10px 10px 6px 6px; overflow:hidden; }
.mpe-history-bar-track i { display:block; width:100%; min-height:8px; background:#2563eb; border-radius:10px 10px 6px 6px; box-sizing:border-box; }
.mpe-history-day strong { font-size:13px; color:#203a59; }
.mpe-history-day span { font-size:12px; color:#777; }
.mpe-history-footer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }
.mpe-history-footer > div { background:#f8fafc; border-radius:12px; padding:14px 16px; }
.mpe-history-footer span { display:block; color:#777; font-size:13px; margin-bottom:5px; }
.mpe-history-footer strong { display:block; color:#203a59; font-size:19px; }
.mpe-history-note { margin-top:16px; color:#667085; font-size:14px; }
@media (max-width:700px) {
    .mpe-practice-history { padding:20px; }
    .mpe-practice-history-header { display:block; }
    .mpe-history-summary { text-align:left; margin-top:14px; }
    .mpe-history-bars { gap:6px; height:175px; }
    .mpe-history-bar-track { max-width:38px; height:115px; }
    .mpe-history-footer { grid-template-columns:1fr; gap:10px; }
}

/* =========================================================
   Advanced Subject Analytics — v4.5.2
   ========================================================= */
.mpe-advanced-subjects {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.mpe-advanced-subjects-header { margin-bottom: 22px; }
.mpe-advanced-subjects-header h3 { margin:0 0 8px; font-size:24px; font-weight:700; }
.mpe-advanced-subjects-header p { margin:0; color:#666; font-size:15px; line-height:1.6; }
.mpe-subject-priority, .mpe-subject-details { background:#f8fafc; border-radius:14px; padding:20px; }
.mpe-subject-priority { margin-bottom:16px; }
.mpe-advanced-block-header { display:flex; align-items:baseline; justify-content:space-between; gap:15px; margin-bottom:15px; }
.mpe-advanced-block-header h4 { margin:0; font-size:18px; font-weight:700; color:#203a59; }
.mpe-advanced-block-header span { color:#777; font-size:13px; }
.mpe-priority-list { display:grid; gap:10px; }
.mpe-priority-item { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 16px; background:#fff; border-radius:12px; }
.mpe-priority-main { min-width:0; flex:1; }
.mpe-advanced-subject-name { font-size:15px; font-weight:650; line-height:1.4; margin-bottom:7px; overflow-wrap:anywhere; }
.mpe-advanced-meta { display:flex; gap:12px; align-items:center; }
.mpe-advanced-meta strong { font-size:18px; color:#203a59; }
.mpe-advanced-meta span { font-size:13px; color:#777; }
.mpe-priority-reason { display:flex; align-items:center; gap:10px; color:#777; font-size:12px; text-align:right; white-space:nowrap; }
.mpe-advanced-badge { display:inline-flex; align-items:center; justify-content:center; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:700; background:#eef2f7; color:#52637a; }
.mpe-badge-declining { background:#fee2e2; color:#b42318; }
.mpe-badge-improving { background:#dcfce7; color:#18794e; }
.mpe-badge-stable { background:#e8eef7; color:#38516f; }
.mpe-badge-building { background:#fef3c7; color:#8a6116; }
.mpe-subject-detail-list { display:grid; gap:10px; }
.mpe-subject-detail-item { background:#fff; border-radius:12px; padding:16px; }
.mpe-detail-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.mpe-detail-top strong { font-size:15px; line-height:1.4; overflow-wrap:anywhere; }
.mpe-status-strong { background:#dcfce7; color:#18794e; }
.mpe-status-developing { background:#fef3c7; color:#8a6116; }
.mpe-status-weak { background:#fee2e2; color:#b42318; }
.mpe-status-provisional { background:#e8eef7; color:#38516f; }
.mpe-status-building { background:#fef3c7; color:#8a6116; }
.mpe-detail-stats { display:flex; flex-wrap:wrap; gap:8px 16px; color:#777; font-size:12px; margin-bottom:10px; }
.mpe-detail-stats b { color:#203a59; font-size:14px; }
.mpe-detail-stats span { white-space:nowrap; }
.mpe-trend-improving { color:#18794e !important; font-weight:700; }
.mpe-trend-declining { color:#b42318 !important; font-weight:700; }
.mpe-trend-stable { color:#38516f !important; font-weight:700; }
.mpe-trend-building { color:#8a6116 !important; font-weight:700; }
.mpe-detail-bar { height:7px; background:#e9edf2; border-radius:10px; overflow:hidden; }
.mpe-detail-bar i { display:block; height:100%; background:#2563eb; border-radius:inherit; }
.mpe-advanced-empty { padding:16px; color:#667085; font-size:14px; background:#fff; border-radius:12px; }
@media (max-width:700px) {
    .mpe-advanced-subjects { padding:20px; }
    .mpe-advanced-block-header { display:block; }
    .mpe-advanced-block-header span { display:block; margin-top:5px; }
    .mpe-priority-item { display:block; }
    .mpe-priority-reason { margin-top:10px; justify-content:space-between; text-align:left; white-space:normal; }
    .mpe-detail-stats { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; }
}


/* v4.5.5 — Daily Goal mobile layout correction
   Fix theme/native select clipping and keep the progress-ring
   count/goal comfortably inside the circle on narrow screens. */
@media (max-width: 700px) {
    .mpe-goal-select-wrap {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mpe-goal-select-wrap select {
        display: block !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 8px 42px 8px 14px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        vertical-align: middle !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-color: #fff !important;
        background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%) !important;
        background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px !important;
        background-size: 7px 7px, 7px 7px !important;
        background-repeat: no-repeat !important;
    }

    .mpe-goal-progress {
        gap: 14px !important;
        padding: 16px !important;
        align-items: center !important;
    }

    .mpe-goal-progress-ring {
        flex: 0 0 116px !important;
        width: 116px !important;
        height: 116px !important;
        min-width: 116px !important;
        min-height: 116px !important;
        overflow: hidden !important;
    }

    .mpe-goal-progress-ring strong {
        font-size: 22px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        max-width: 96px !important;
        text-align: center !important;
    }

    .mpe-goal-progress-ring span {
        display: block !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        margin-top: 4px !important;
    }

    .mpe-goal-progress-ring small {
        display: block !important;
        max-width: 92px !important;
        font-size: 8.5px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        margin-top: 5px !important;
        text-align: center !important;
    }
}


/* v4.6.0 — Performance Overview */
.mpe-performance-overview { grid-column:1 / -1 !important; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; background:#fff; border-radius:28px; padding:34px; box-shadow:0 12px 34px rgba(32,58,89,.08); }
.mpe-performance-overview-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.mpe-performance-overview-header h3 { margin:0 0 8px; font-size:28px; color:#292d35; }
.mpe-performance-overview-header p { margin:0; color:#6f747c; font-size:16px; line-height:1.6; }
.mpe-performance-period { background:#eef4ff; color:#245cc5; padding:9px 13px; border-radius:999px; font-weight:700; font-size:12px; white-space:nowrap; }
.mpe-performance-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.mpe-performance-kpi { background:#f7f9fc; border-radius:18px; padding:18px; }
.mpe-performance-kpi span,.mpe-performance-kpi small { display:block; color:#687386; }
.mpe-performance-kpi strong { display:block; color:#203a59; font-size:28px; margin:5px 0 2px; }
.mpe-performance-kpi small { font-size:12px; }
.mpe-performance-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:16px; }
.mpe-performance-panel,.mpe-mode-performance { background:#f7f9fc; border-radius:20px; padding:22px; }
.mpe-performance-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.mpe-performance-panel-head h4 { margin:0 0 5px; color:#263e5d; font-size:19px; }
.mpe-performance-panel-head span { color:#777f8b; font-size:13px; }
.mpe-performance-panel-head > strong { color:#8a6116; font-size:13px; }
.mpe-performance-chart { height:170px; display:flex; align-items:flex-end; gap:5px; padding:12px 4px 0; border-bottom:1px solid #dfe5ec; }
.mpe-performance-chart-col { height:100%; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.mpe-performance-chart-col i { display:block; width:100%; max-width:18px; min-height:3px; background:#2563eb; border-radius:5px 5px 2px 2px; }
.mpe-performance-chart-col small { height:18px; margin-top:5px; color:#8b95a3; font-size:9px; }
.mpe-quality-bar { height:12px; background:#e5eaf1; border-radius:20px; overflow:hidden; margin:24px 0 18px; }
.mpe-quality-bar i { display:block; height:100%; width:0; background:#2563eb; border-radius:inherit; }
.mpe-quality-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mpe-quality-stats div { background:#fff; border-radius:14px; padding:13px; }
.mpe-quality-stats b,.mpe-quality-stats span { display:block; }
.mpe-quality-stats b { color:#203a59; font-size:21px; }
.mpe-quality-stats span { color:#7a818b; font-size:11px; margin-top:3px; }
.mpe-performance-insight { margin-top:16px; padding:13px 14px; border-radius:13px; background:#fff; color:#5e6877; font-size:13px; line-height:1.5; }
.mpe-mode-performance { margin-top:16px; }
.mpe-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mpe-mode-stat { background:#fff; border-radius:16px; padding:17px; }
.mpe-mode-stat > div:first-child { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.mpe-mode-stat strong { color:#293c56; font-size:14px; }
.mpe-mode-stat span { color:#7b8490; font-size:12px; display:block; margin-top:4px; }
.mpe-mode-stat > b { display:block; color:#2563eb; font-size:23px; margin:10px 0 7px; }
.mpe-mode-bar { height:7px; background:#e6ebf2; border-radius:10px; overflow:hidden; }
.mpe-mode-bar i { display:block; height:100%; width:0; background:#2563eb; border-radius:inherit; }
@media (max-width:700px) {
    .mpe-performance-overview { grid-column:1 / -1 !important; width:100% !important; max-width:100% !important; min-width:0 !important; padding:22px 18px; border-radius:22px; }
    .mpe-performance-overview-header { display:block; }
    .mpe-performance-period { display:inline-block; margin-top:12px; }
    .mpe-performance-kpis { grid-template-columns:1fr 1fr; }
    .mpe-performance-grid,.mpe-mode-grid { grid-template-columns:1fr; }
    .mpe-performance-chart { height:145px; gap:3px; }
    .mpe-performance-chart-col i { max-width:12px; }
}


/* =========================================================
   v4.7.0 — Smart Study Recommendations
   ========================================================= */
.mpe-smart-recommendations {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 30px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.mpe-smart-recommendations-header { margin-bottom: 22px; }
.mpe-smart-recommendations-header h3 { margin:0 0 8px; font-size:28px; color:#292d35; }
.mpe-smart-recommendations-header p { margin:0; color:#6f747c; font-size:15px; line-height:1.6; }
.mpe-recommendation-list { display:grid; gap:14px; }
.mpe-recommendation-card {
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    padding:20px;
    background:#f7f9fc;
    border-radius:18px;
    box-sizing:border-box;
}
.mpe-recommendation-rank {
    width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#e8eef8; color:#203a59; font-weight:800; font-size:17px;
}
.mpe-recommendation-main { min-width:0; }
.mpe-recommendation-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mpe-recommendation-top h4 { margin:0; color:#29313d; font-size:18px; line-height:1.35; }
.mpe-recommendation-badge { display:inline-flex; flex:0 0 auto; padding:7px 11px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; }
.mpe-recommendation-badge.priority-review { background:#fee2e2; color:#b42318; }
.mpe-recommendation-badge.needs-review { background:#fff1c7; color:#916617; }
.mpe-recommendation-badge.maintain { background:#dcfce7; color:#18794e; }
.mpe-recommendation-badge.keep-practising { background:#e8eef8; color:#405a78; }
.mpe-recommendation-stats { display:flex; flex-wrap:wrap; gap:14px; align-items:baseline; margin:9px 0 5px; color:#6f7783; font-size:13px; }
.mpe-recommendation-stats strong { color:#203a59; font-size:22px; }
.mpe-recommendation-main p { margin:0 0 10px; color:#747c87; font-size:13px; line-height:1.45; }
.mpe-recommendation-bar { height:7px; background:#e4e9ef; border-radius:10px; overflow:hidden; }
.mpe-recommendation-bar i { display:block; height:100%; background:#2563eb; border-radius:inherit; }
.mpe-focus-subject {
    border:0; border-radius:12px; padding:12px 15px; background:#2563eb; color:#fff; font-weight:700; font-size:13px;
    cursor:pointer; white-space:nowrap; transition:transform .15s ease, opacity .15s ease;
}
.mpe-focus-subject:hover { transform:translateY(-1px); }
.mpe-focus-subject:disabled { opacity:.7; cursor:default; transform:none; }
.mpe-recommendation-note { margin-top:16px; padding:13px 15px; border-radius:13px; background:#f8fafc; color:#687386; font-size:13px; line-height:1.5; }
.mpe-recommendation-empty { padding:22px; border-radius:14px; background:#f8fafc; color:#777f8b; font-size:14px; }
@media (max-width:700px) {
    .mpe-smart-recommendations { padding:22px 18px; border-radius:22px; }
    .mpe-smart-recommendations-header h3 { font-size:23px; }
    .mpe-recommendation-card { grid-template-columns:32px minmax(0,1fr); gap:12px; padding:16px; }
    .mpe-recommendation-rank { width:32px; height:32px; font-size:14px; }
    .mpe-recommendation-top { display:block; }
    .mpe-recommendation-badge { margin-top:8px; }
    .mpe-focus-subject { grid-column:2; width:100%; }
}


/* v4.7.8 — Dashboard ad slots */
.mpe-dashboard > .mpe-ad-slot,
.mpe-dashboard-grid > .mpe-ad-slot{grid-column:1 / -1;}
.mpe-dashboard .mpe-ad-slot:empty{display:none;}
.mpe-dashboard .mpe-ad-slot:not(:empty){width:100%;margin:18px 0;min-height:40px;display:block;clear:both;}
@media (max-width:700px){.mpe-dashboard .mpe-ad-slot:not(:empty){margin:14px 0;min-height:36px;}}
/* v4.7.9 — controlled MPE ad visibility */
.mpe-dashboard .mpe-ad-slot-no-desktop{display:none !important;}
.mpe-dashboard .mpe-ad-slot-no-mobile{display:block;}
@media (max-width:700px){
  .mpe-dashboard .mpe-ad-slot-no-mobile{display:none !important;}
  .mpe-dashboard .mpe-ad-slot:not(.mpe-ad-slot-no-mobile):not(:empty){display:block;}
}