:root { 
    --mms-red: #cc0202; 
    --mms-red-hover: #b30202;
    --mms-navy: #0f172a; 
    --mms-blue-light: #eef2ff;
    --mms-accent: #3b82f6; 
    --mms-bg: #f8fafc;
    --mms-green: #10b981;
}

body { 
    background: var(--mms-bg); 
    margin: 0; 
    padding: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}




/* 🎨 STYLING ANIMASI MEMBAL & DASHBOARD TRANSPARAN MAS ARDYAN */
        .mms-welcome-video-card {
            border: 1px solid #e2e8f0;
            border-left: 4px solid #3b82f6;
            border-radius: 8px;
            background: #ffffff;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .dashboard-grid-transparan {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
            padding: 15px 10px;
            justify-items: center;
        }
        .menu-icon-wrapper {
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            outline: none;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
        }
        /* Efek Membal Aktif saat Klik Pertama */
        .menu-icon-wrapper.mms-selected-bounce {
            transform: scale(1.35);
            z-index: 10;
        }
        /* Efek Meredup untuk Icon Lain yang Tidak Terpilih */
        .dashboard-grid-transparan.has-selection .menu-icon-wrapper:not(.mms-selected-bounce) {
            opacity: 0.35;
        }
        .icon-circle-avatar {
            width: 75px;
            height: 75px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 28px;
            box-shadow: 0 8px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        .icon-minimal-label {
            margin-top: 8px;
            font-weight: 700;
            font-size: 13px;
            color: var(--mms-navy);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: color 0.3s ease;
        }
        .menu-icon-wrapper.mms-selected-bounce .icon-minimal-label {
            color: #3b82f6;
        }





.mms-app-container {
    width: 100%;
    max-width: 1200px;
    margin: 140px auto 40px auto; 
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    z-index: 1; 
}

.duo-container { 
    width: 100%; 
    max-width: 550px; 
    background: #fff; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 24px; 
    box-sizing: border-box; 
    margin-bottom: 25px; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.duo-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; margin-bottom: 20px; }
.stat-item { font-weight: bold; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.stat-xp { color: var(--mms-accent); }
.stat-heart { color: var(--mms-red); }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.shake-effect { animation: shake 0.4s ease; }

.progress-container { background: #e2e8f0; height: 12px; border-radius: 10px; width: 100%; overflow: hidden; margin-bottom: 25px; position: relative; }
.progress-fill { background: var(--mms-red); height: 100%; width: 0%; transition: width 0.4s ease; }

.question-box { font-size: 18px; font-weight: 600; color: #1e293b; text-align: center; margin-bottom: 20px; line-height: 1.5; }

.visual-frame { height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: #f8fafc; border-radius: 12px; border: 2px dashed #cbd5e1; overflow: hidden; position: relative; }
.visual-frame img { max-height: 100%; width: 100%; object-fit: cover; }

.image-grid-options { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.img-option-card { background: #fff; border: 1px solid #e2e8f0; border-bottom: 4px solid #cbd5e1; border-radius: 12px; padding: 15px; text-align: center; cursor: pointer; transition: all 0.1s ease; user-select: none; }
.img-option-card:hover { border-color: var(--mms-red); background: #fff5f5; }
.img-option-card.selected { border-color: var(--mms-red); background: #fff5f5; border-bottom-width: 1px; transform: translateY(3px); }
.img-box { height: 65px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: #94a3b8; }
.img-label { font-weight: bold; color: #334155; font-size: 14px; }

.btn-check { background: var(--mms-red); color: #fff; border: none; padding: 14px; font-size: 15px; font-weight: bold; border-radius: 8px; cursor: pointer; width: 100%; margin-top: 25px; text-transform: uppercase; letter-spacing: 0.8px; transition: background 0.2s; }
.btn-check:hover { background: var(--mms-red-hover); }

.dashboard-grid { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.menu-card { display: flex; align-items: center; gap: 20px; padding: 18px; border: 1px solid #e2e8f0; border-bottom: 4px solid #cbd5e1; border-radius: 12px; cursor: pointer; text-align: left; transition: all 0.2s; background: #fff; }
.menu-card:hover { transform: translateY(-2px); border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.menu-card-icon { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; }

/* 🌟 BASE STYLE TOMBOL LEVEL 3 (DIAM) */
.btn-type-choice { 
    padding: 10px 4px; 
    background: #fff; 
    border: 1px solid #cbd5e1; 
    border-bottom: 3px solid #cbd5e1; 
    border-radius: 6px; 
    font-weight: bold; 
    color: #475569; 
    cursor: pointer; 
    text-align: center; 
    font-size: 12px; 
    transition: all 0.23s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Diubah ke cubic-bezier biar membal */
}

/* 🚀 ANIMASI HOVER POP LEVEL 3 (BAB 1 & BAB 4): Menyala biru transparan soft + mekar membal */
.btn-type-choice:hover { 
    background-color: #eff6ff !important;   
    color: #2563eb !important;              
    border-color: #bfdbfe !important;       
    transform: translateY(-2px) scale(1.02) !important; /* Efek POP mekar mengangkat */
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.08);
}
.btn-type-choice:active { transform: translateY(2px) scale(0.98); border-bottom-width: 1px; }
.btn-type-choice.mms-active-dasar { border-color: var(--mms-red); background: #fff5f5; color: var(--mms-red); }

/* Upgrade khusus hover untuk tombol rumpun nominal */
.btn-mms-nominal:hover {
    background-color: #475569 !important; 
    color: #ffffff !important;
    border-color: #334155 !important;
}

.vocab-search-box { width: 100%; padding: 10px 15px; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 15px; font-size: 14px; box-sizing: border-box; }
.vocab-list-container { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding-right: 5px; }
.vocab-item { padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }

.rank-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-weight: bold; margin-bottom: 8px; }
.rank-left { display: flex; align-items: center; gap: 12px; }
.mms-input-field { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; box-sizing: border-box; margin-bottom: 15px; text-align: center; background: #f8fafc; }
.mms-input-field:focus { outline: none; border-color: var(--mms-red); background: #fff; }

.mms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6); 
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: flex-start; 
    justify-content: center;
    padding: 150px 20px 20px 20px; 
    box-sizing: border-box;
    overflow-y: auto;
}
.mms-modal-content {
    background: #fff;
    width: 100%;
    max-width: 550px;
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    animation: modalFadeIn 0.23s ease-out;
    margin-bottom: 40px;
}
.mms-modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s;
}
.mms-modal-close-btn:hover {
    background: var(--mms-red);
    color: #fff;
}
@keyframes modalFadeIn {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.mms-vertical-layout-stack { display: flex; flex-direction: column; gap: 14px; }
.info-box-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; text-align: left; width: 100%; box-sizing: border-box; }
.info-box-header { font-weight: bold; font-size: 12px; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

.box-pre-wrap {
    white-space: pre-wrap;
    line-height: 1.6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13.5px;
    color: #1e293b;
}

.accent-box-header { color: var(--mms-accent); }
.green-box-header { color: var(--mms-green); }
.red-box-header { color: var(--mms-red); }

.mms-modal-visual-frame { height: 180px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.mms-modal-visual-frame img { max-height: 100%; width: 100%; object-fit: cover; border-radius: 6px; }

.mms-toggle-trigger-btn {
    width: 100%;
    background: #fff;
    border: 1px dashed var(--mms-green);
    color: var(--mms-green);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
}
.mms-toggle-trigger-btn:hover { background: #f0fdf4; color: #15803d; border-color: #15803d; }
.mms-dropdown-content-panel { display: none; margin-top: 10px; background: #f0fdf4; padding: 12px; border-radius: 6px; border-left: 3px solid var(--mms-green); animation: slideDownIn 0.2s ease-out; }
@keyframes slideDownIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.mms-glow-pulse-container { width: 100%; background: #fff; border: 1px solid #cbd5e1; padding: 18px 14px; border-radius: 8px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
.mms-txt-rumus-glow { font-size: 14px; font-weight: 700; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #cc0202; display: block; width: 100%; box-sizing: border-box; white-space: normal; animation: mmsNeonPulse 2.5s infinite ease-in-out; }

@keyframes mmsNeonPulse {
    0%, 100% { text-shadow: 0 0 6px rgba(204, 2, 2, 0.45), 0 0 12px rgba(204, 2, 2, 0.2); }
    50% { text-shadow: 0 0 14px rgba(204, 2, 2, 0.85), 0 0 22px rgba(204, 2, 2, 0.45); color: #ff1a1a; }
}

.mms-tips-table { width: 100%; border-collapse: collapse; margin-top: 5px; font-size: 12px; background: #fff; }
.mms-tips-table th, .mms-tips-table td { border: 1px solid #cbd5e1; padding: 6px 8px; text-align: center; }
.mms-tips-table th { background: var(--mms-navy); color: #fff; font-weight: bold; }

#leaderboard-panel { width: 100% !important; max-width: 550px !important; margin: 0 auto 25px auto !important; box-sizing: border-box; }

/* ====================================================================
   PENGATURAN GLOBAL ACCORDION LACI DAN VALIDASI TOMBOL MENU UTAMA
   ==================================================================== */

/* Base Container Rumpun Kardus BAB */
.mms-rumpun-card {
    border: 2px solid var(--mms-red);           
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(204, 2, 2, 0.04);
    overflow: hidden;
    margin-bottom: 14px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* HEADER JUDUL BAB UTAMA (LAYER 1): Langsung dipaksa MERAH SOLID sejak awal */
.mms-rumpun-header {
    padding: 16px;
    background-color: var(--mms-red) !important; 
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: all 0.23s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Mengunci teks judul bab dan ikon di dalamnya menjadi PUTIH BERSIH kontras tinggi */
.mms-rumpun-header span,
.mms-rumpun-header span i,
.mms-rumpun-header i {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* 🚀 HOVER LAYER 1 (JUDUL BAB): Ditambahkan efek POP mekar kenyal */
.mms-rumpun-header:hover {
    background-color: var(--mms-red-hover) !important; 
    transform: scale(1.015) !important; /* Efek POP mencuat membesar 1.5% */
    box-shadow: 0 6px 15px rgba(204, 2, 2, 0.1);   
}

/* AMAN KUNCI FITUR: Base display default agar tombol kembali ke menu tidak tersembunyi global */
.mms-rumpun-content { 
    display: none; 
    flex-direction: column; 
    gap: 16px; 
    padding: 16px; 
    background: #fff; 
}

/* Kondisi ketika Kardus BAB Aktif Terbuka Melipat */
.mms-bab-active-card {
    border: 2px solid var(--mms-red) !important;
    box-shadow: 0 6px 20px rgba(204, 2, 2, 0.15) !important;
}
.mms-bab-active-card .mms-rumpun-header {
    border-bottom: 2px solid var(--mms-red-hover) !important;
}

/* LAYER 2 CONTENT: Background laci pembungkus tenses tetap PINK / ROSE SOFT */
.mms-bab-active-card > .mms-rumpun-content {
    background-color: #ffe4e6 !important;       
    border-top: 1px solid #fca5a5 !important;
    padding: 16px !important;
    display: flex !important; 
}

/* ⬜ LAYER 3 (KOTAK TENSES): PAKSA WARNA DASAR PUTIH BERSIH SAAT DIAM */
#mms-bab-2-content .mms-nested-time-card,
#mms-bab-3-content .mms-nested-time-card {
    background-color: #ffffff !important;       
    border: 1px solid #cbd5e1 !important;
    border-bottom: 3px solid #cbd5e1 !important; 
    border-radius: 8px !important;
    transition: all 0.23s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Cubic-bezier biar kenyal */
}

/* Warna internal header level 3 abu-abu default saat diam */
#mms-bab-2-content .mms-nested-time-card .mms-rumpun-header,
#mms-bab-3-content .mms-nested-time-card .mms-rumpun-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 10px !important;
}
#mms-bab-2-content .mms-nested-time-card .mms-rumpun-header span,
#mms-bab-3-content .mms-nested-time-card .mms-rumpun-header span,
#mms-bab-2-content .mms-nested-time-card .mms-rumpun-header i,
#mms-bab-3-content .mms-nested-time-card .mms-rumpun-header i {
    color: #475569 !important;                  
}

/* 🚀 SINKRONISASI HOVER LEVEL 3 (BAB 2 & 3): Ditambahkan Efek POP Mekar Membal jernih */
#mms-bab-2-content .mms-nested-time-card:hover,
#mms-bab-3-content .mms-nested-time-card:hover {
    background-color: #eff6ff !important;       
    border-color: #bfdbfe !important;           
    transform: translateY(-2px) scale(1.02) !important; /* Terangkat & POP mekar 2% */
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.1);
}
#mms-bab-2-content .mms-nested-time-card:hover .mms-rumpun-header span,
#mms-bab-3-content .mms-nested-time-card:hover .mms-rumpun-header span,
#mms-bab-2-content .mms-nested-time-card:hover .mms-rumpun-header i,
#mms-bab-3-content .mms-nested-time-card:hover .mms-rumpun-header i {
    color: #2563eb !important;                  
}

/* ⬜ LAYER 4 (LACI PALING DALAM) */
.mms-sub-laci {
    background-color: #ffffff !important;       
    border: 1px dashed #cbd5e1 !important;
    border-radius: 8px;
    padding: 8px !important;
}

/* KELAS LOCK WARNA SUB-MATERI AKTIF LAINNYA */
.mms-btn-active-laci {
    background-color: var(--mms-accent) !important;
    color: #ffffff !important;
    border-color: var(--mms-accent) !important;
    font-weight: 600 !important;
}
.mms-btn-active-laci-nominal {
    background-color: #475569 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
    font-weight: 600 !important;
}

/* STYLE TOMBOL KEMBALI KE MENU (NAVY PREMIUM) */
.materi-body-back-btn { 
    display: block !important;
    width: 100% !important;
    background-color: var(--mms-navy) !important;       
    color: #ffffff !important;
    border: none;
    border-bottom: 4px solid #020617 !important;         
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    margin-top: 30px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);   
    box-sizing: border-box;
}
.materi-body-back-btn:hover { 
    background-color: #1e293b !important;               
    border-bottom: 4px solid #0f172a !important;
    transform: translateY(-2px);                         
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.15);       
}
.materi-body-back-btn:active { 
    transform: translateY(2px);                          
    border-bottom-width: 1px !important;                 
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
}


.mms-learning-card{
    background:#fff;
    border-radius:22px;
    padding:18px;
    margin-bottom:14px;
    border:2px solid #e2e8f0;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
    animation:mmsCardBounceIn .55s cubic-bezier(.22,1.35,.36,1) both;

    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;

}
.mms-learning-card:hover{

    transform:translateY(-4px) scale(1.01);

    box-shadow:0 18px 42px rgba(15,23,42,.10);

    border-color:#cbd5e1;

}

.mms-learning-card:active{

    transform:scale(.985);

}

@keyframes mmsCardBounceIn{

    0%{

        opacity:0;

        transform:translateY(24px) scale(.96);

    }

    65%{

        opacity:1;

        transform:translateY(-5px) scale(1.015);

    }

    100%{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

.mms-learning-card:nth-child(1){ animation-delay:.03s; }

.mms-learning-card:nth-child(2){ animation-delay:.08s; }

.mms-learning-card:nth-child(3){ animation-delay:.13s; }

.mms-learning-card:nth-child(4){ animation-delay:.18s; }


.mms-learning-header .fa-chevron-down{

    transition:transform .25s ease;

}

.mms-learning-card:hover .fa-chevron-down{

    transform:translateY(2px);

}


.mms-learning-card{
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.mms-learning-card:hover{
    transform:translateY(-8px) scale(1.018);
    border-color:#2563eb;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    box-shadow:
        0 24px 55px rgba(37,99,235,.20),
        0 8px 18px rgba(15,23,42,.08);
}

.mms-learning-card:active{
    transform:translateY(-2px) scale(.985);
}

.mms-learning-active{
    border-color:#2563eb !important;
    background:linear-gradient(180deg,#eff6ff,#ffffff);
    box-shadow:
        0 0 0 4px rgba(37,99,235,.12),
        0 24px 55px rgba(37,99,235,.22);
}

.mms-learning-active .mms-learning-title{
    color:#2563eb;
}

.mms-learning-active .fa-chevron-down{
    transform:rotate(180deg);
    color:#2563eb !important;
}




.mms-learning-header{
    display:flex;
    align-items:center;
    gap:14px;
}

.mms-learning-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.mms-learning-info{
    flex:1;
    min-width:0;
}

.mms-learning-title{
    font-size:19px;
    font-weight:900;
    color:#0f172a;
    line-height:1.2;
}

.mms-learning-subtitle{
    margin-top:5px;
    font-size:13px;
    font-weight:700;
    color:#64748b;
}

.mms-dashboard-menu{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    padding:18px;
}

.mms-menu-card{
    border:none;
    border-radius:24px;
    padding:20px;
    background:#ffffff;
    box-shadow:0 10px 24px rgba(15,23,42,.10);
    border:2px solid #e2e8f0;
    display:flex;
    align-items:center;
    gap:14px;
    text-align:left;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease;
}

.mms-menu-card:hover{
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 18px 34px rgba(15,23,42,.16);
}

.mms-menu-card:active{
    transform:translateY(2px) scale(.98);
}

.mms-menu-icon{
    width:56px;
    height:56px;
    border-radius:18px;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    flex-shrink:0;
}

.mms-menu-card strong{
    display:block;
    font-size:20px;
    font-weight:900;
    color:#0f172a;
}

.mms-menu-card small{
    display:block;
    margin-top:4px;
    font-size:12px;
    font-weight:700;
    color:#64748b;
}


.mms-academy-dashboard{
    padding:110px 22px 42px;
}

.mms-dashboard-hero{
    text-align:center;
    margin-bottom:24px;
}

.mms-dashboard-hero h1{
    margin:0;
    font-size:38px;
    font-weight:900;
    color:#0f172a;
}

.mms-dashboard-hero p{
    margin:8px 0 0;
    font-size:16px;
    font-weight:700;
    color:#64748b;
}

.mms-dashboard-note{
    max-width:760px;
    margin:0 auto 24px;
    padding:16px 20px;
    border:2px solid #e2e8f0;
    border-radius:18px;
    color:#64748b;
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:12px;
}

.mms-lumia-grid{
    max-width:760px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:28px;

    padding:4px 4px 28px;
}

.mms-lumia-tile{
    min-height:240px;
    border:none;
    border-radius:18px;
    padding:28px;
    color:white;
    text-align:left;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:10px;
    box-shadow:0 16px 35px rgba(15,23,42,.16);
    transition:transform .18s ease, box-shadow .18s ease;
    overflow:hidden;
}

.mms-lumia-tile:hover{
    transform:translateY(-4px) scale(1.015);
    box-shadow:0 22px 45px rgba(15,23,42,.22);
}

.mms-lumia-tile:active{
    transform:scale(.97);
}

.mms-lumia-tile i{
    font-size:58px;
    margin-bottom:auto;
}

.mms-lumia-tile strong{
    font-size:25px;
    font-weight:900;
    text-transform:uppercase;
}

.mms-lumia-tile span{
    font-size:15px;
    font-weight:700;
    line-height:1.45;
    opacity:.95;
}

.tile-materi{ background:linear-gradient(135deg,#2563eb,#3b82f6); }
.tile-ensiklopedia{ background:linear-gradient(135deg,#059669,#10b981); }
.tile-latihan{ background:linear-gradient(135deg,#f59e0b,#f97316); }
.tile-toefl{ background:linear-gradient(135deg,#dc2626,#ef4444); }

@media(max-width:640px){
    .mms-dashboard-hero h1{
        font-size:30px;
    }

    .mms-lumia-grid{
        grid-template-columns:1fr;
    }

    .mms-lumia-tile{
        min-height:180px;
    }
}

.site-header{
    position:sticky;
    top:0;
    z-index:9999;
}

.mms-app-container{
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    overflow-x:hidden;
}

.mms-academy-dashboard{
    height:calc(100vh - 96px);
    padding:18px 22px 0;
    box-sizing:border-box;
    overflow:hidden;
}

.mms-dashboard-fixed{
    position:sticky;
    top:0;
    z-index:20;
    background:#f8fafc;
    padding:12px 0 16px;
}

.mms-dashboard-scroll{
    height:calc(100vh - 330px);
    overflow-y:auto;
    overflow-x:hidden;
    padding-bottom:32px;
    padding:10px 8px 40px;
}

#materi-body{
    padding-bottom:140px !important;
}

.site-footer{
    position:relative !important;
}

#materi-body{
    padding:24px 18px 120px !important;
    box-sizing:border-box;
}

.mms-materi-page{
    max-width:820px;
    margin:0 auto;
    overflow:visible;
}

.mms-materi-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
}

.mms-materi-header h2{
    margin:0;
    font-size:30px;
    font-weight:900;
    color:#0f172a;
}

.mms-materi-header p{
    margin:4px 0 0;
    font-size:14px;
    font-weight:700;
    color:#64748b;
}

.mms-materi-back-mini{
    width:46px;
    height:46px;
    border:none;
    border-radius:16px;
    background:#f1f5f9;
    color:#0f172a;
    font-size:18px;
    cursor:pointer;
}

#mms-materi-dynamic-menu{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.mms-learning-card{
    margin-bottom:0 !important;
}

.mms-bab-content{
    margin-top:16px;
    display:grid;
    gap:10px;
    padding-bottom:72px;
    animation:mmsDropOpen .32s ease both;
}

@keyframes mmsDropOpen{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.mms-detail-loading{
    min-height:60vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    color:#2563eb;
    font-weight:900;
}

.mms-detail-loading i{
    font-size:34px;
    animation:mmsSpin .7s linear infinite;
}

@keyframes mmsSpin{
    to{ transform:rotate(360deg); }
}

.mms-materi-item{
    border:2px solid #e2e8f0;
    background:#fff;
    border-radius:16px;
    padding:14px 16px;
    text-align:left;
    font-size:14px;
    font-weight:800;
    color:#0f172a;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.mms-materi-item:hover{
    background:#f8fafc;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    transform:translateX(8px);

    border-color:#2563eb;

    box-shadow:0 10px 24px rgba(37,99,235,.12);
}

.mms-materi-item:active{

    transform:scale(.97);

}

.mms-materi-detail-card{
    background:white;
    border:2px solid #e2e8f0;
    border-radius:24px;
    padding:22px;
    box-shadow:0 10px 28px rgba(15,23,42,.08);
}

.mms-materi-detail-card h3{
    margin:0 0 10px;
    font-size:24px;
    font-weight:900;
    color:#0f172a;
}

.mms-materi-detail-card p{
    margin:0;
    font-size:15px;
    font-weight:700;
    color:#64748b;
}

.mms-formula-box{
    margin-top:18px;
    padding:16px 18px;
    border-radius:18px;
    background:#fef3c7;
    border:2px solid #f59e0b;
    color:#92400e;
    font-size:18px;
    font-weight:900;
}

.mms-example-box{
    margin-top:18px;
}

.mms-example-box h4{
    margin:0 0 10px;
    font-size:18px;
    font-weight:900;
    color:#0f172a;
}

.mms-example-item{
    padding:12px 14px;
    margin-bottom:8px;
    border-radius:14px;
    background:#f8fafc;
    border:2px solid #e2e8f0;
    font-size:15px;
    font-weight:700;
    color:#334155;
}


.mms-notes-box{
    margin-top:18px;
    padding:16px;
    border-radius:18px;
    background:#ecfdf5;
    border:2px solid #22c55e;
}

.mms-notes-box h4{
    margin:0 0 10px;
    font-size:18px;
    font-weight:900;
    color:#166534;
}

.mms-note-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:8px;
    font-size:14px;
    font-weight:800;
    color:#334155;
}

.mms-note-item i{
    color:#22c55e;
    margin-top:2px;
}

.mms-pattern-section{
    margin-top:24px;
}

.mms-pattern-section h4{
    font-size:26px;
    font-weight:800;
    margin-bottom:14px;
    color:#0f172a;
}

.mms-pattern-card{
    background:#ffffff;
    border:2px solid #cbd5e1;
    border-radius:18px;
    padding:18px;
    margin-bottom:14px;
}

.mms-pattern-label{
    font-size:18px;
    font-weight:800;
    color:#2563eb;
    margin-bottom:8px;
}

.mms-pattern-formula{
    font-size:22px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:8px;
}

.mms-pattern-example{
    color:#64748b;
    font-size:18px;
}

.mms-pattern-chip-row{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:12px;

    margin:18px 0 20px;

}



.mms-pattern-chip-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin:18px 0 22px;
}

.mms-pattern-chip{
    width:100%;
    min-width:0;
    border:2px solid transparent;
    border-radius:999px;
    padding:13px 10px;
    background:linear-gradient(180deg,#f8fbff,#eef5ff);
    color:#2563eb;
    font-size:15px;
    font-weight:950;
    text-align:center;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(37,99,235,.08);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.mms-pattern-chip:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(37,99,235,.14);
}

.mms-pattern-chip-active{
    border-color:#f59e0b;
    background:linear-gradient(180deg,#fff7ed,#fff);
    color:#2563eb;
    box-shadow:0 10px 24px rgba(245,158,11,.18);
}

.mms-pattern-chip:active{
    transform:scale(.96);
}

@media (max-width:480px){
    .mms-pattern-group-row{
        grid-template-columns:1fr;
        gap:10px;
    }

    .mms-pattern-group-chip{
        width:100%;
        min-height:58px;
        font-size:15px;
    }

    .mms-pattern-chip-row{
        gap:8px;
    }

    .mms-pattern-chip{
        font-size:13px;
        padding:11px 6px;
    }

    .mms-quiz-card{
        padding-top:58px;
    }

    .mms-quiz-type{
        top:16px;
        right:16px;
    }
}


.mms-pattern-detail-card{
    margin-top:14px;
    padding:18px;
    border-radius:18px;
    background:#fff;
    border:2px solid #cbd5e1;
}

.mms-example-detail{
    margin:8px 0 12px;
    padding:14px;
    border-radius:16px;
    background:#f8fafc;
    border:2px solid #e2e8f0;
}

.mms-example-translation{
    font-size:14px;
    font-weight:800;
    color:#64748b;
}

.mms-breakdown-list{
    margin-top:12px;
    display:grid;
    gap:8px;
}

.mms-breakdown-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:12px;
    background:white;
    border:1px solid #e2e8f0;
}

.mms-breakdown-item strong{
    color:#0f172a;
}

.mms-breakdown-item span{
    color:#2563eb;
    font-weight:900;
}

.mms-example-item{
    cursor:pointer;
}

.mms-example-item:hover{
    background:#eef2ff;
    border-color:#2563eb;
}

.mms-example-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.mms-example-item i{
    color:#94a3b8;
    font-size:13px;
}


.mms-example-item{
    outline:none;
    border:2px solid #e2e8f0;
}

.mms-example-item:focus{
    outline:none;
}

.mms-example-item:active{
    transform:scale(.98);
}

.mms-example-item:hover{
    background:#eef2ff;
    border-color:#93c5fd;
}

.mms-example-item.mms-example-active{
    background:#eff6ff;
    border-color:#2563eb;
    color:#1e3a8a;
}

.mms-example-item.mms-example-active i{
    color:#2563eb;
    transform:rotate(180deg);
}

.mms-video-box{
    margin-top:18px;
    border-radius:20px;
    overflow:hidden;
    background:#000;
    border:2px solid #e2e8f0;
}

.mms-video-box iframe,
.mms-video-box video{
    width:100%;
    aspect-ratio:16/9;
    display:block;
    border:0;
}

.mms-video-trigger{
    margin-top:18px;
    padding:20px;
    border-radius:20px;
    background:#eff6ff;
    border:2px solid #2563eb;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:18px;
}

.mms-video-trigger i{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#2563eb;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}

.mms-video-trigger-text{
    display:block;
}

.mms-video-trigger-text strong{
    display:block;
    font-size:22px;
    font-weight:900;
    color:#0f172a;
    line-height:1.1;
}

.mms-video-trigger-text span{
    display:block;
    margin-top:6px;
    font-size:14px;
    font-weight:800;
    color:#64748b;
}

.mms-pattern-detail-card{
    margin-top:18px;
    padding:20px;
    border-radius:22px;
    background:#ffffff;
    border:2px solid #dbe3ef;
}

.mms-pattern-label{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:#eff6ff;
    color:#2563eb;
    font-size:15px;
    font-weight:900;
    margin-bottom:14px;
}

.mms-pattern-formula{
    padding:16px 18px;
    border-radius:16px;
    background:#f8fafc;
    border:2px solid #e2e8f0;
    font-size:20px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:18px;
}

.mms-pattern-examples h5{
    margin:0 0 10px;
    font-size:18px;
    font-weight:900;
    color:#0f172a;
}

.mms-pattern-examples .mms-example-item{
    margin-bottom:10px;
    padding:14px 16px;
    border-radius:16px;
    background:#f8fafc;
    border:2px solid #e2e8f0;
    font-size:15px;
    font-weight:800;
    color:#334155;
}


.mms-pattern-detail-card{
    position:relative;
}

.mms-pattern-chip{
    border:2px solid transparent;
}

.mms-pattern-chip-active{
    border-color:#f59e0b;
    background:#fff7ed;
    color:#2563eb;
}

.mms-mini-quiz{
    margin-top:28px;
    padding:22px;
    border-radius:28px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
    border:2px solid #e2e8f0;
    box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.mms-mini-quiz-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    cursor:pointer;
    padding-bottom:16px;
    border-bottom:2px solid #edf2f7;
}

.mms-mini-quiz h4{
    margin:0;
    font-size:28px;
    font-weight:950;
    letter-spacing:-.5px;
    color:#0f172a;
}

.mms-mini-quiz > p,
.mms-mini-quiz-head p{
    margin:6px 0 0;
    font-size:14px;
    font-weight:800;
    color:#64748b;
}

.mms-mini-quiz-head i{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    color:#2563eb;
}

.mms-mini-quiz-content{
    margin-top:18px;
    display:grid;
    gap:16px;
}

.mms-quiz-card{
    padding:26px 28px;
    border-radius:22px;
    background:#ffffff;
    position:relative;
    padding-top:54px;
    border:2px solid #e2e8f0;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
    min-height: auto;
    padding:22px 28px;
}

.mms-quiz-question{
    padding-right:170px;
    display:grid;

    grid-template-columns:40px 1fr;

    gap:14px;

    align-items:center;
    margin-bottom:12px;

}

.mms-quiz-number{

    width:40px;

    height:40px;

    min-width:40px;

    background:#f1f5f9;

    color:#0f172a;

    border-radius:999px;

    font-size:18px;

    font-weight:800;

    display:flex;

    align-items:center;

    justify-content:center;

}

.mms-quiz-options{

    margin-left:54px;

    margin-top:10px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.mms-quiz-options button{
    border:2px solid transparent;
    border-radius:999px;
    padding:10px 18px;
    background:#eff6ff;
    color:#2563eb;
    font-size:14px;
    font-weight:950;
    min-height:44px;
    cursor:pointer;
    transition:.18s ease;
}

.mms-quiz-options button:hover:not(:disabled){
    transform:translateY(-1px);
    border-color:#93c5fd;
}

.mms-quiz-options button:disabled{
    cursor:not-allowed;
}

.mms-quiz-correct{
    background:#dcfce7 !important;
    border-color:#22c55e !important;
    color:#166534 !important;
}

.mms-quiz-wrong{
    background:#fee2e2 !important;
    border-color:#ef4444 !important;
    color:#991b1b !important;
}

.mms-quiz-explanation{
    margin-top:14px;
    padding:14px 16px;
    border-radius:18px;
    background:#f8fafc;
    border:2px solid #e2e8f0;
    font-size:14px;
    font-weight:800;
    line-height:1.45;
    color:#334155;
}

.mms-quiz-explanation-correct{
    background:#ecfdf5;
    border-color:#22c55e;
}

.mms-quiz-explanation-correct strong{
    color:#166534;
}

.mms-quiz-explanation-wrong{
    background:#fef2f2;
    border-color:#ef4444;
}

.mms-quiz-explanation-wrong strong{
    color:#991b1b;
}

.mms-quiz-explanation span{
    display:block;
    margin-top:4px;
}

.mms-mini-quiz-score{
    margin-top:20px;
    padding:20px;
    border-radius:22px;
    text-align:center;
    background:linear-gradient(135deg,#eff6ff,#f8fafc);
    border:2px solid #2563eb;
}

.mms-score-title{
    font-size:15px;
    font-weight:800;
    color:#64748b;
}

.mms-score-number{
    margin-top:4px;
    font-size:42px;
    font-weight:900;
    color:#2563eb;
}

.mms-score-message{
    margin-top:8px;
    font-size:15px;
    font-weight:800;
    color:#334155;
}

.mms-mini-quiz-score{
    animation:mmsScorePop .45s ease both;
}

@keyframes mmsScorePop{
    0%{
        opacity:0;
        transform:translateY(18px) scale(.94);
    }
    70%{
        opacity:1;
        transform:translateY(-4px) scale(1.03);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.mms-score-number{
    animation:mmsScorePulse .8s ease both;
}

@keyframes mmsScorePulse{
    0%{
        transform:scale(.7);
        opacity:0;
    }
    60%{
        transform:scale(1.12);
        opacity:1;
    }
    100%{
        transform:scale(1);
    }
}

.mms-quiz-explanation{
    animation:mmsExplainSlide .28s ease both;
}

@keyframes mmsExplainSlide{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.mms-quiz-correct{
    animation:mmsCorrectPop .28s ease both;
}

.mms-quiz-wrong{
    animation:mmsWrongShake .28s ease both;
}

@keyframes mmsCorrectPop{
    0%{ transform:scale(.95); }
    60%{ transform:scale(1.08); }
    100%{ transform:scale(1); }
}

@keyframes mmsWrongShake{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-4px); }
    50%{ transform:translateX(4px); }
    75%{ transform:translateX(-3px); }
}







.mms-mini-quiz-score{
    animation:mmsBounceIn .65s cubic-bezier(.22,1.35,.36,1) both;
}

@keyframes mmsBounceIn{
    0%{
        opacity:0;
        transform:scale(.75) translateY(24px);
    }
    55%{
        opacity:1;
        transform:scale(1.06) translateY(-8px);
    }
    75%{
        transform:scale(.98) translateY(3px);
    }
    100%{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}
.mms-quiz-explanation{
    animation:mmsSmallBounceIn .45s cubic-bezier(.22,1.35,.36,1) both;
}

@keyframes mmsSmallBounceIn{
    0%{
        opacity:0;
        transform:scale(.9) translateY(12px);
    }
    65%{
        opacity:1;
        transform:scale(1.03) translateY(-3px);
    }
    100%{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

.mms-reset-quiz-btn{
    margin-top:16px;
    border:none;
    border-radius:999px;
    padding:12px 18px;
    background:#2563eb;
    color:white;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.mms-reset-quiz-btn:active{
    transform:scale(.96);
}

.mms-next-materi-btn{
    margin-top:10px;
    border:2px solid #2563eb;
    border-radius:999px;
    padding:12px 18px;
    background:white;
    color:#2563eb;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.mms-next-materi-btn:active{
    transform:scale(.96);
}


.mms-pattern-group-chip{
    border:2px solid transparent;
    border-radius:999px;
    padding:12px 20px;
    background:#eff6ff;
    color:#2563eb;
    font-weight:900;
    cursor:pointer;
}

.mms-pattern-group-content{
    margin-top:14px;
}

.mms-pattern-group-chip{
    border:2px solid transparent;
}

.mms-pattern-group-active{
    border-color:#f59e0b;
    background:#fff7ed;
    color:#2563eb;
}

.mms-quiz-type{
    display:inline-flex;
    align-items:center;
    margin-bottom:10px;
    padding:8px 14px;
    border-radius:999px;
    background:#eff6ff;
    color:#2563eb;
    font-size:14px;
    font-weight:900;
    border:2px solid #dbeafe;
    position:absolute;
    display:inline-flex;
    top:22px;
    gap:8px;
    right:28px;
    white-space:nowrap;
    margin:0;
}

.mms-quiz-type::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#2563eb;
    margin-right:8px;
}

.mms-pattern-group-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-bottom:18px;
}

.mms-pattern-group-chip{
    width:100%;
    min-height:72px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    border-radius:999px;
}

.mms-pattern-group-active{

    background:linear-gradient(180deg,#fff7ed,#fff);

    border:2px solid #f59e0b;

    color:#d97706;

    box-shadow:0 10px 24px rgba(245,158,11,.18);

}
.mms-pattern-group-chip:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(37,99,235,.14);

}
.mms-pattern-group-active::before{

    content:"● ";

    font-size:12px;

    vertical-align:middle;

}

.mms-pattern-group-chip i{
    margin-right:8px;
    opacity:.9;
}

.mms-quiz-type i{
    margin-right:8px;
    font-size:13px;
}

.mms-quiz-type::before{
    content:none;
}

.mms-quiz-progress-wrap{
    margin-top:16px;
    padding:14px;
    border-radius:18px;
    background:#f8fafc;
    border:2px solid #e2e8f0;
}

.mms-quiz-progress-info{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    font-weight:900;
    color:#64748b;
    margin-bottom:10px;
}

.mms-quiz-progress-bar{
    height:10px;
    border-radius:999px;
    background:#e2e8f0;
    overflow:hidden;
}

#mms-quiz-progress-fill{
    height:100%;
    width:0%;
    border-radius:999px;
    background:#2563eb;
    transition:width .35s ease;
}

.mms-score-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
    padding:9px 16px;
    border-radius:999px;
    background:#eff6ff;
    color:#2563eb;
    font-size:14px;
    font-weight:950;
}

.mms-mini-quiz-score{

    position:relative;

    overflow:hidden;

}

.mms-confetti-box{

    position:absolute;

    left:50%;

    top:45%;

    z-index:5;

    pointer-events:none;

}

.mms-confetti-box span{
    position:absolute;
    width:10px;
    height:14px;
    border-radius:3px;
    background:#2563eb;
    animation:mmsConfettiFly 2s ease-out var(--d) both;
}

.mms-confetti-box span:nth-child(3n){
    background:#22c55e;
}

.mms-confetti-box span:nth-child(3n+1){
    background:#f59e0b;
}

@keyframes mmsConfettiFly{
    0%{
        opacity:1;
        transform:translate(0,0) rotate(0);
    }
    100%{
        opacity:0;
        transform:translate(var(--x),var(--y)) rotate(var(--r));
    }
}


    

.mms-item-progress{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:#dcfce7;
    color:#166534;
    font-size:12px;
    font-weight:900;
    flex-shrink:0;
}


.mms-bab-progress{
    margin-top:8px;
    width:160px;
    height:8px;
    border-radius:999px;
    background:#e2e8f0;
    overflow:hidden;
}

.mms-bab-progress div{
    height:100%;
    border-radius:999px;
    background:#2563eb;
    transition:width .35s ease;
}

.mms-bab-progress div[style*="100"]{
    background:#22c55e;
}


.mms-bab-status-empty{
    background:#f1f5f9;
    color:#64748b;
}

.mms-bab-status-progress{
    background:#eff6ff;
    color:#2563eb;
}

.mms-bab-status-complete{
    background:#dcfce7;
    color:#166534;
}

.mms-bab-progress-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
    max-width:260px;
}

.mms-bab-progress{
    flex:1;
    height:8px;
    border-radius:999px;
    background:#e2e8f0;
    overflow:hidden;
}

.mms-bab-percent{
    font-size:12px;
    font-weight:900;
    color:#64748b;
    min-width:34px;
}

.mms-materi-item.locked{
    opacity:.55;
    cursor:not-allowed;
    filter:grayscale(.25);
}

.mms-item-lock{
    color:#94a3b8;
    font-size:14px;
}

.mms-materi-item.locked:hover{
    transform:none;
}

.mms-item-next{
    background:#dbeafe;
    color:#2563eb;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}

.mms-total-progress-card{
    margin:18px 0 22px;
    padding:22px;
    border-radius:24px;
    background:linear-gradient(180deg,#eff6ff,#ffffff);
    border:2px solid #dbeafe;
    box-shadow:0 16px 35px rgba(37,99,235,.10);
}

.mms-total-progress-card h3{
    margin:0;
    font-size:24px;
    font-weight:900;
    color:#0f172a;
}

.mms-total-progress-card p{
    margin:6px 0 0;
    color:#64748b;
    font-weight:800;
}

.mms-total-progress-card strong{
    display:block;
    margin-top:12px;
    font-size:34px;
    font-weight:950;
    color:#2563eb;
}

.mms-total-progress-bar{
    margin-top:10px;
    height:10px;
    border-radius:999px;
    background:#dbeafe;
    overflow:hidden;
}

.mms-total-progress-bar div{
    height:100%;
    border-radius:999px;
    background:#2563eb;
    transition:width .35s ease;
}

.mms-resume-card{

    position:sticky;

    top: 70px;

    z-index:999;

    margin:18px 0 24px;

    padding:22px 26px;

    border-radius:28px;

    background:#0f172a;

    color:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    box-sizing:border-box;

    width:100%;

    max-width:100%;

    cursor:pointer;

    box-shadow:0 18px 40px rgba(15,23,42,.18);

}

.mms-resume-card span{
    color:#93c5fd;
    font-size:13px;
    font-weight:900;
}

.mms-resume-card h3{
    margin:6px 0;
    font-size:22px;
    font-weight:900;
}

.mms-resume-card p{
    margin:0;
    color:#cbd5e1;
    font-weight:800;
}

.mms-resume-card i{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mms-resume-info h3{
    display:block;
    margin:10px 0 8px;
    color:white;
    font-size:24px;
    font-weight:950;
    line-height:1.15;
}

.mms-resume-info{
    min-width:0;
}

.mms-achievement-card{
    margin-bottom:24px;
    padding:22px;
    border-radius:24px;
    border:2px solid #dbeafe;
    background:#fff;
}

.mms-achievement-card h3{
    margin:0 0 16px;
}

.mms-achievement-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.mms-achievement-item{
    padding:10px 16px;
    border-radius:999px;
    background:#f1f5f9;
    color:#94a3b8;
    font-weight:800;
}

.mms-achievement-item.unlocked{
    background:#dcfce7;
    color:#166534;
}

.mms-achievement-toast{
    position:fixed;
    left:50%;
    top:50%;
    z-index:40000;
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px 24px;
    border-radius:24px;
    background:#0f172a;
    color:white;
    box-shadow:0 24px 60px rgba(15,23,42,.35);
    transform:translate(-50%, -42%) scale(.92);
    opacity:0;
    transition:all .32s cubic-bezier(.22,1.35,.36,1);
}

.mms-achievement-toast.show{
    transform:translate(-50%, -50%) scale(1);
    opacity:1;
}

.mms-achievement-toast-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.mms-achievement-toast strong{
    display:block;
    font-size:14px;
    font-weight:900;
}

.mms-achievement-toast span{
    display:block;
    margin-top:3px;
    color:#bfdbfe;
    font-size:13px;
    font-weight:800;
}

.mms-achievement-overlay{
    position:fixed;
    inset:0;
    z-index:40000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.28);
    backdrop-filter:blur(8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}

.mms-achievement-overlay.show{
    opacity:1;
}

.mms-achievement-toast{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;

    display:flex;
    align-items:center;
    gap:14px;
    padding:20px 24px;
    border-radius:24px;
    background:#0f172a;
    color:white;
    box-shadow:0 24px 60px rgba(15,23,42,.35);
    transform:scale(.92);
    opacity:1 !important;
    transition:transform .32s cubic-bezier(.22,1.35,.36,1);
}

.mms-achievement-overlay.show .mms-achievement-toast{
    transform:scale(1);
}

#materi-body{
    position:relative;
}

.mms-achievement-overlay{
    position:fixed;
    inset:0;
    z-index:40000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.28);
    backdrop-filter:blur(8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}

.mms-level-card{
    margin-bottom:24px;
    padding:22px;
    border-radius:24px;
    border:2px solid #dbeafe;
    background:linear-gradient(180deg,#ffffff,#eff6ff);
}

.mms-level-card span{
    color:#2563eb;
    font-size:13px;
    font-weight:900;
}

.mms-level-card h3{
    margin:8px 0 4px;
    font-size:26px;
    font-weight:950;
    color:#0f172a;
}

.mms-level-card p{
    margin:0;
    color:#64748b;
    font-weight:800;
}

.mms-level-card strong{
    display:block;
    margin-top:12px;
    font-size:28px;
    font-weight:950;
    color:#2563eb;
}

.mms-level-progress{
    margin-top:12px;
    height:10px;
    border-radius:999px;
    background:#dbeafe;
    overflow:hidden;
}

.mms-level-progress div{
    height:100%;
    border-radius:999px;
    background:#2563eb;
    transition:width .35s ease;
}

.mms-learning-flow{

    position:relative;

    overflow:visible;

}

.mms-learning-card.mms-bab-locked{
    opacity:.55;
    filter:grayscale(.35);
}

.mms-learning-card.mms-bab-locked .mms-learning-header{
    cursor:not-allowed;
}

.mms-bab-lock-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 13px;
    border-radius:999px;
    background:#f1f5f9;
    color:#94a3b8;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.mms-bab-lock-badge i{
    font-size:13px;
}

.mms-streak-card{
    margin-bottom:24px;
    padding:22px;
    border-radius:24px;
    border:2px solid #fed7aa;
    background:linear-gradient(180deg,#fff7ed,#ffffff);
}

.mms-streak-card span{
    color:#ea580c;
    font-size:13px;
    font-weight:900;
}

.mms-streak-card h3{
    margin:8px 0 4px;
    font-size:28px;
    font-weight:950;
    color:#0f172a;
}

.mms-streak-card p{
    margin:0;
    color:#64748b;
    font-weight:800;
}

.mms-achievement-float-btn{
    position:fixed;
    
    z-index:30000;

     width:58px;

    height:58px;

    right:18px;

    bottom:18px;

    font-size:26px;

    border:none;
    border-radius:50%;
    background:#2563eb;
    color:white;
    
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 18px 45px rgba(37,99,235,.35);
    transition:transform .25s ease, box-shadow .25s ease;
}

.mms-achievement-float-btn:hover{
    transform:translateY(-4px) scale(1.04);
    box-shadow:0 22px 55px rgba(37,99,235,.45);
}

.mms-achievement-panel-overlay{
    position:fixed;
    inset:0;
    z-index:40000;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(15,23,42,.35);
    backdrop-filter:blur(10px);

    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
}

.mms-achievement-panel-overlay.show{
    opacity:1;
    pointer-events:auto;
}

.mms-achievement-panel{
    width:min(92vw, 560px);
    max-height:82vh;
    overflow:auto;

    padding:22px;
    border-radius:28px;
    background:white;
    box-shadow:0 30px 80px rgba(15,23,42,.35);

    transform:scale(.94) translateY(16px);
    transition:transform .32s cubic-bezier(.22,1.35,.36,1);
}

.mms-achievement-panel-overlay.show .mms-achievement-panel{
    transform:scale(1) translateY(0);
}

.mms-achievement-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.mms-achievement-panel-head h3{
    margin:0;
    font-size:28px;
    font-weight:950;
    color:#0f172a;
}

.mms-achievement-panel-head button{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#f1f5f9;
    color:#0f172a;
    cursor:pointer;
    font-size:18px;
}

.mms-achievement-row{
    display:grid;
    grid-template-columns:64px 1fr auto;
    align-items:center;
    gap:14px;

    padding:16px;
    border-radius:22px;
    border:2px solid #e2e8f0;
    background:white;
    margin-bottom:12px;

    cursor:pointer;
    transition:all .25s ease;
}

.mms-achievement-row:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.mms-achievement-row-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#f1f5f9;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;
}

.mms-achievement-row-info strong{
    display:block;
    font-size:17px;
    font-weight:950;
    color:#0f172a;
}

.mms-achievement-row-info span{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:13px;
    font-weight:800;
}

.mms-achievement-row-info small{
    display:block;
    margin-top:5px;
    color:#2563eb;
    font-size:12px;
    font-weight:900;
}

.mms-achievement-status{
    padding:8px 12px;
    border-radius:999px;
    background:#f1f5f9;
    color:#94a3b8;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.mms-achievement-row.unlocked .mms-achievement-status{
    background:#dcfce7;
    color:#166534;
}

.mms-achievement-row.locked{
    opacity:.78;
}

.mms-achievement-mini-progress{
    margin-top:8px;
    height:8px;
    width:160px;
    border-radius:999px;
    background:#dbeafe;
    overflow:hidden;
}

.mms-achievement-mini-progress div{
    height:100%;
    border-radius:999px;
    background:#2563eb;
}

.mms-achievement-row.blurred{
    filter:blur(3px);
    opacity:.45;
    transform:scale(.98);
}

.mms-achievement-row.focused{
    filter:none;
    opacity:1;
    border-color:#2563eb;
    box-shadow:0 14px 35px rgba(37,99,235,.18);
}

@media(max-width:600px){
    .mms-achievement-float-btn{
        width:58px;
        height:58px;
        right:18px;
        bottom:18px;
        font-size:28px;
    }

    .mms-achievement-row{
        grid-template-columns:52px 1fr;
    }

    .mms-achievement-status{
        grid-column:2;
        width:max-content;
    }

    .mms-achievement-row-icon{
        width:50px;
        height:50px;
        font-size:26px;
    }
}

.mms-total-progress-head{
    display:flex;
    align-items:center;
    gap:18px;
}

.mms-total-progress-head strong{
    color:#2563eb;
    font-size:56px;
    font-weight:950;
    line-height:1;
}

.mms-progress-separator{
    width:3px;
    height:58px;
    border-radius:999px;
    background:#dbeafe;
    flex-shrink:0;
}

.mms-total-progress-head h3{
    margin:0;
    font-size:30px;
    font-weight:950;
    color:#0f172a;
}

.mms-total-progress-head p{
    margin:6px 0 0;
    color:#64748b;
    font-size:18px;
    font-weight:900;
}

.mms-level-card{
    position:relative;
}

.mms-level-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.mms-level-streak-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    max-width:max-content;

    padding:8px 14px !important;
    border-radius:16px !important;

    background:#fff7ed;
    color:#ea580c;
    border:2px solid #fed7aa;

    font-size:14px;
    font-weight:950;
    white-space:nowrap;
    line-height:1;
    aspect-ratio:auto !important;
}

.mms-level-streak-text{
    color:#ea580c;
    font-size:16px;
    font-weight:900;
    opacity:.9;
}

.mms-daily-mission-box{
    margin-top:18px;
    padding:14px 16px;
    border-radius:18px;
    background:#f8fafc;
    border:2px solid #e2e8f0;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.mms-daily-mission-box strong{
    display:block;
    font-size:15px;
    font-weight:950;
    color:#0f172a;
}

.mms-daily-mission-box span{
    display:block;
    margin-top:3px;
    font-size:13px;
    font-weight:800;
    color:#64748b;
}

.mms-daily-mission-box button{
    border:none;
    border-radius:999px;
    padding:10px 14px;
    background:#2563eb;
    color:white;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
}

.mms-daily-mission-box button.locked{
    background:#f1f5f9;
    color:#94a3b8;
    cursor:not-allowed;
}

.mms-daily-mission-box button.claimed{
    background:#dcfce7;
    color:#166534;
    cursor:default;
}

.mms-summary-badges{
    position:absolute;
    top:34px;
    right:48px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.mms-level-streak-text,
.mms-level-mission-text{
    font-size:15px;
    font-weight:900;
    line-height:1.1;
}

.mms-level-streak-text{

    color:#ea580c;

}

.mms-level-mission-text{

    color:#2563eb;

    cursor:pointer;

}

.mms-mission-badge{
    padding:8px 14px;
    border-radius:999px;
    background:#f8fafc;
    border:2px solid #e2e8f0;
    color:#64748b;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
}

.mms-mission-badge.ready{
    background:#eff6ff;
    border-color:#bfdbfe;
    color:#2563eb;
    cursor:pointer;
    transition:.2s;
}

.mms-mission-badge.ready:hover{
    transform:translateY(-1px);
}

.mms-mission-badge.claimed{
    background:#dcfce7;
    border-color:#bbf7d0;
    color:#166534;
}





.mms-learning-summary-card{
    margin:18px 0 24px;
    padding:22px;
    border-radius:28px;
    border:2px solid #dbeafe;
    background:linear-gradient(180deg,#f8fbff,#ffffff);
    position:relative;
}

.mms-summary-top{
    display:flex;
    justify-content:space-between;
    gap:14px;
}

.mms-summary-label{
    color:#2563eb;
    font-weight:950;
}

.mms-summary-top h3{
    margin:10px 0 4px;
    font-size:34px;
    font-weight:950;
}

.mms-summary-top p{
    margin:0;
    color:#64748b;
    font-weight:900;
}

.mms-summary-xp{
    margin-top:18px;
    font-size:42px;
    font-weight:950;
    color:#2563eb;
}

.mms-summary-divider{
    height:2px;
    background:#dbeafe;
    margin:24px 0;
    border-radius:999px;
}

.mms-summary-bottom{
    display:flex;
    align-items:center;
    gap:18px;
}

.mms-summary-bottom strong{
    font-size:54px;
    font-weight:950;
    color:#2563eb;
}

.mms-summary-bottom > span{
    width:3px;
    height:54px;
    background:#dbeafe;
    border-radius:999px;
}

.mms-summary-bottom h3{
    margin:0;
    font-size:30px;
    font-weight:950;
}

.mms-summary-bottom p{
    margin:4px 0 0;
    color:#64748b;
    font-weight:900;
}

.mms-level-mission-text.ready{

    color:#2563eb;

    cursor:pointer;

    text-decoration:none;

    animation:mmsMissionBlink 1.35s ease-in-out infinite;

}

@keyframes mmsMissionBlink{

    0%, 100%{

        opacity:1;

        transform:scale(1);

        text-shadow:0 0 0 rgba(37,99,235,0);

    }

    50%{

        opacity:.72;

        transform:scale(1.04);

        text-shadow:0 0 12px rgba(37,99,235,.35);

    }

}

.mms-level-mission-text.ready:hover{

    transform:translateY(-1px);

    text-decoration:none;

}

.mms-level-mission-text.claimed{

    color:#16a34a;

    cursor:default;

}

.mms-complete-materi-box{
    margin:24px 0;
    padding:18px;
    border-radius:22px;
    border:2px solid #bbf7d0;
    background:#f0fdf4;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.mms-complete-materi-box strong{
    display:block;
    font-size:16px;
    font-weight:950;
    color:#166534;
}

.mms-complete-materi-box span{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:13px;
    font-weight:800;
}

.mms-complete-materi-box button{
    border:none;
    border-radius:999px;
    padding:12px 16px;
    background:#16a34a;
    color:white;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
}

.mms-complete-materi-box button:hover{
    transform:translateY(-1px);
}




.mms-complete-actions{
    margin-top:16px;
}

.mms-complete-actions-main{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.mms-complete-actions button{
    border:none;
    border-radius:999px;
    padding:12px 16px;
    background:#f1f5f9;
    color:#334155;
    font-weight:950;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.mms-complete-actions button.primary{
    background:#2563eb;
    color:white;
}

.mms-complete-actions button.back-menu{
    width:100%;
    margin-top:10px;
    background:#0f172a;
    color:white;
}

@media(max-width:520px){
    .mms-complete-actions-main{
        grid-template-columns:1fr;
    }
}

.mms-quiz-question span{
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
    
}

   .mms-quiz-progress-wrap {

        padding: 12px !important;

    }

    .mms-quiz-progress-info span,

    .mms-quiz-progress-info strong {

        font-size: 14px !important;

    }

    .mms-quiz-card {

        padding: 14px !important;

        border-radius: 22px !important;

    }

    .mms-quiz-question {

        display: grid !important;

        grid-template-columns: 44px 1fr !important;

        align-items: center !important;

        column-gap: 14px !important;

    }

    .mms-quiz-question span {

        font-size: 16px !important;

        line-height: 1.15 !important;

        font-weight: 900 !important;

     

    }
mms-quiz-number {

        font-size: 0.8rem;

}
.mms-quiz-options {

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 8px !important;

    }

    .mms-quiz-options button {

        font-size: 14px !important;

        padding: 9px 10px !important;

        min-height: 38px !important;

        border-radius: 18px !important;

        line-height: 1.15 !important;

        white-space: normal !important;

    }


.mms-lesson-intro{
    margin-top:14px;
    padding:18px 20px;
    border-radius:22px;
    background:linear-gradient(135deg,#f8fbff,#eef6ff);
    border:2px solid #dbeafe;

    display:flex;
    align-items:flex-start;
    gap:14px;
}

.mms-lesson-intro-icon{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:16px;
    background:#2563eb;
    color:white;

    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.mms-lesson-intro p{
    margin:0;
    color:#334155;
    font-size:17px;
    line-height:1.55;
    font-weight:800;
}






.mms-quiz-overlay{
    position:fixed;
    inset:0;
    z-index:999999;
    background:rgba(15,23,42,.38);
    backdrop-filter:blur(10px);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:24px;
}

.mms-quiz-result-card{
    width:min(620px,95vw);
    background:#fff;
    border-radius:32px;
    padding:38px;
    text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,.18);
    animation:mmsQuizResultPop .28s ease-out both;
}

.mms-quiz-result-icon{
    width:74px;
    height:74px;
    margin:0 auto 14px;
    border-radius:50%;
    background:#eff6ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
}

.mms-quiz-result-title{
    font-size:32px;
    font-weight:950;
    color:#0f172a;
}

.mms-quiz-result-score{
    margin:10px 0;
    font-size:64px;
    font-weight:950;
    color:#2563eb;
    line-height:1;
}

.mms-quiz-result-subtitle{
    color:#64748b;
    font-size:17px;
    font-weight:800;
    line-height:1.45;
}

.mms-quiz-result-question{
    margin-top:22px;
    font-size:20px;
    font-weight:950;
    color:#0f172a;
}

.mms-quiz-result-actions{
    margin-top:22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.mms-quiz-result-actions.three{
    grid-template-columns:1fr 1fr 1.2fr;
}

.mms-quiz-result-actions button{
    border:none;
    border-radius:999px;
    padding:13px 16px;
    background:#f1f5f9;
    color:#334155;
    font-weight:950;
    cursor:pointer;
}

.mms-quiz-result-actions button.primary{
    background:#2563eb;
    color:#fff;
}

@keyframes mmsQuizResultPop{
    from{
        opacity:0;
        transform:scale(.94) translateY(12px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

@media(max-width:560px){
    .mms-quiz-result-actions,
    .mms-quiz-result-actions.three{
        grid-template-columns:1fr;
    }
}

.mms-quiz-options button.correct{
    background:#dcfce7;
    color:#166534;
    border:2px solid #22c55e;
}

.mms-quiz-options button.wrong{
    background:#fee2e2;
    color:#991b1b;
    border:2px solid #ef4444;
}

.mms-quiz-options button:disabled{
    cursor:not-allowed;
    opacity:1;
}

.mms-quiz-explanation{
    margin-top:18px;
    padding:16px 18px;
    border-radius:18px;
    background:#f8fafc;
    border:2px solid #e2e8f0;
    color:#334155;
    font-weight:800;
}

.mms-quiz-explanation strong{
    display:block;
    margin-bottom:6px;
    color:#0f172a;
    font-weight:950;
}

.mms-quiz-correct-card .mms-quiz-explanation{
    background:#ecfdf5;
    border-color:#22c55e;
}

.mms-quiz-card:not(.mms-quiz-correct-card).mms-quiz-answered .mms-quiz-explanation{
    background:#fef2f2;
    border-color:#ef4444;
}


.mms-video-card {
    margin: 18px 0;
    padding: 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.mms-video-title {
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mms-video-title i {
    color: #2563eb;
}

.mms-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
}

.mms-video-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.mms-video-empty {
    margin: 18px 0;
    padding: 16px;
    border-radius: 16px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    display: flex;
    gap: 8px;
    align-items: center;
}

.mms-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(10px);
}

.mms-video-modal {
    position: relative;
    width: min(960px, 96vw);
    border-radius: 22px;
    background: #0f172a;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    overflow: hidden;
}

.mms-video-modal-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.mms-video-modal-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.mms-video-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #0f172a;
    cursor: pointer;
}

body.mms-video-open {
    overflow: hidden;
}

.mms-video-player {
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
}

.mms-pattern-group-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

.mms-pattern-group-chip {
    width: 100% !important;
    min-height: 96px !important;
    justify-content: center !important;
    text-align: center !important;
}