/*Listening Studio CSS*/
            :root {
                --navy: #002147;
                --gold: #d4af77;
                --cream: #fdfdfb;
                --text: #0f172a;
                --border: #e2dfd5;
            }
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body {
                font-family: 'Inter', sans-serif;
                background-color: #f5f4f0;
                color: var(--text);
                padding-bottom: 60px;
            }
            nav {
                background: var(--navy); color: white; padding: 18px 5%;
                display: flex; align-items: center; justify-content: space-between;
                position: sticky; top: 0; z-index: 1000;
                border-bottom: 3px solid var(--gold);
            }
            .logo-area { display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif; font-size: 1.4rem; }
            
            .container { max-width: 850px; margin: 40px auto; padding: 0 20px; }
            .header-block { text-align: center; margin-bottom: 30px; }
            .header-block h1 { font-family: 'Playfair Display', serif; color: var(--navy); font-size: 2.4rem; margin-bottom: 8px; }
            
            /* FILTER LEVEL PANEL */
            .filter-panel {
                background: white; padding: 20px; border-radius: 8px;
                border: 1px solid var(--border); margin-bottom: 25px;
                display: flex; align-items: center; gap: 15px;
            }
            .filter-label { font-weight: 600; color: var(--navy); font-size: 0.95rem; }
            .select-cefr {
                padding: 10px 15px; border: 2px solid var(--border); border-radius: 6px;
                font-size: 1rem; font-weight: 600; color: var(--navy); outline: none;
                flex-grow: 1; cursor: pointer; transition: 0.2s;
            }
            .select-cefr:focus { border-color: var(--gold); }

            /* TOPIC SELECTION CARDS */
            .topic-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 30px; }
            .topic-item-card {
                background: white; border-radius: 8px; padding: 20px;
                border: 1px solid var(--border); display: flex; justify-content: space-between;
                align-items: center; cursor: pointer; transition: 0.2s;
            }
            .topic-item-card:hover { transform: translateX(5px); border-color: var(--gold); background: #fffdf9; }
            .topic-info h3 { color: var(--navy); font-size: 1.15rem; margin-bottom: 4px; }
            .badge { padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
            .badge.type { background: var(--navy); color: white; }
            .badge.cefr { background: var(--gold); color: var(--navy); margin-left: 5px; }

            .btn-start {
                background: var(--navy); color: white; border: none; padding: 10px 20px;
                border-radius: 4px; font-weight: 700; cursor: pointer; font-size: 0.9rem;
            }

            /* TOEFL PASAGE CARD STYLE */
            .studio-card {
                background: var(--cream); border-radius: 12px; padding: 40px;
                box-shadow: 0 10px 30px rgba(0,33,71,0.05);
                border: 1px solid var(--border); margin-bottom: 35px;
                animation: fadeIn 0.3s ease;
            }

            .audio-panel {
                background: #f1efe9; padding: 20px; border-radius: 8px;
                display: flex; gap: 15px; margin-bottom: 30px; align-items: center;
                border-left: 5px solid var(--gold);
            }
            .audio-label { font-size: 0.9rem; font-weight: 600; color: var(--navy); flex-grow: 1; }
            .btn-audio {
                padding: 10px 20px; border: none; border-radius: 4px;
                font-weight: 700; font-size: 0.9rem; cursor: pointer;
                display: flex; align-items: center; gap: 8px; transition: 0.2s;
            }
            .btn-audio.uk { background: var(--navy); color: white; }
            .btn-audio.us { background: #c8102e; color: white; }
            .btn-audio.stop { background: #475569; color: white; }

            /* QUESTION DESIGN SYSTEM */
            .assessment-section { margin-top: 40px; border-top: 2px dashed var(--border); padding-top: 30px; }
            .section-title { font-family: 'Playfair Display', serif; color: var(--navy); font-size: 1.4rem; margin-bottom: 25px; }
            .question-block { margin-bottom: 25px; background: white; padding: 20px; border-radius: 8px; border: 1px solid var(--border); }
            .question-text { font-weight: 600; font-size: 1rem; margin-bottom: 12px; color: var(--navy); }
            
            .option-label { display: block; padding: 10px; margin-top: 6px; border: 1px solid #f1efe9; border-radius: 4px; cursor: pointer; font-size: 0.95rem; }
            .option-label:hover { background: #fffdf5; border-color: var(--gold); }
            .option-label input { margin-right: 10px; }
            
            .input-short { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem; background: var(--cream); }
            .input-essay { width: 100%; padding: 15px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem; min-height: 120px; resize: vertical; background: var(--cream); font-family: inherit; }

            .btn-report {
                background: var(--navy); color: white; border: none; padding: 16px 35px;
                border-radius: 4px; font-weight: 700; font-size: 1.1rem; cursor: pointer;
                width: 100%; text-transform: uppercase; letter-spacing: 1px; margin-top: 20px;
                display: flex; align-items: center; justify-content: center; gap: 10px;
            }
            .btn-report:hover { background: var(--gold); color: var(--navy); }
            
            @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
            
            /* =========================================================
               MODERN ACADEMIC CEFR FILTER & EMPTY STATE
            ========================================================= */
            .level-selection-wrapper {
                margin: 30px 0 40px;
                padding: 35px 20px;
                background: white;
                border-radius: 12px;
                box-shadow: 0 10px 30px rgba(0,33,71,0.06);
                border-top: 4px solid var(--gold);
            }
            
            .selection-title {
                text-align: center;
                color: var(--navy);
                margin-bottom: 25px;
                font-family: 'Playfair Display', serif;
                font-size: 1.5rem;
            }
            
            .cefr-grid {
                display: flex;
                flex-wrap: wrap;
                gap: 15px;
                justify-content: center;
            }
            
            .cefr-btn {
                background: var(--cream);
                border: 1px solid var(--border);
                border-radius: 8px;
                padding: 15px 25px;
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
                transition: all 0.3s ease;
                min-width: 140px;
            }
            
            .cefr-btn:hover, .cefr-btn.active {
                border-color: var(--navy);
                background: var(--navy);
                color: white;
                transform: translateY(-4px);
                box-shadow: 0 8px 20px rgba(0,33,71,0.15);
            }
            
            .cefr-badge {
                background: var(--navy);
                color: white;
                font-size: 1.2rem;
                font-weight: 700;
                padding: 8px 20px;
                border-radius: 6px;
                margin-bottom: 8px;
                transition: all 0.3s;
            }
            
            .cefr-btn:hover .cefr-badge, .cefr-btn.active .cefr-badge {
                background: var(--gold);
                color: var(--navy);
            }
            
            .cefr-desc {
                font-size: 0.85rem;
                font-weight: 600;
                color: inherit;
            }
            
            /* Tampilan Saat Member Belum Memilih Materi */
            .empty-state-welcome {
                grid-column: 1 / -1;
                text-align: center;
                padding: 60px 20px;
                background: white;
                border-radius: 8px;
                border: 1px dashed var(--border);
                color: var(--navy);
            }
            
            .empty-state-welcome i {
                font-size: 3.5rem;
                color: var(--gold);
                margin-bottom: 20px;
                opacity: 0.6;
            }