diff --git a/simulasi-mk.html b/simulasi-mk.html
index e10770f..519c91f 100644
--- a/simulasi-mk.html
+++ b/simulasi-mk.html
@@ -3,726 +3,741 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simulasi KRS & Student Journey</title>
+    <title>Simulasi KRS Dinamis - Berbasis IPS</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
         body { font-family: 'Inter', sans-serif; }
-        .chart-container { 
-            position: relative; 
-            width: 100%; 
-            max-width: 600px; 
-            margin-left: auto; 
-            margin-right: auto; 
-            height: 300px; 
-            max-height: 400px; 
-        }
-        @media (min-width: 768px) { .chart-container { height: 350px; } }
-        .course-card { transition: all 0.2s ease; cursor: grab; user-select: none; }
+        
+        /* Chart Sizing */
+        .chart-container { position: relative; width: 100%; height: 250px; }
+        
+        /* Card Styles */
+        .course-card { transition: all 0.2s ease; cursor: grab; position: relative; overflow: hidden; user-select: none; }
         .course-card:active { cursor: grabbing; }
-        .course-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
+        .course-card:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 10; }
         .course-card.dragging { opacity: 0.5; border: 2px dashed #a8a29e; background-color: #f5f5f4; }
         
-        /* Drop Zone Styles */
-        .semester-list { min-height: 120px; transition: background-color 0.2s, opacity 0.2s; }
-        
-        /* Valid Drop Target */
-        .semester-list.valid-target { background-color: #f0fdf4; border: 2px dashed #4ade80; }
-        
-        /* Invalid Drop Target (Wrong Parity) */
-        .semester-list.invalid-target { opacity: 0.3; background-color: #e5e5e5; pointer-events: none; border: 2px solid #d4d4d4; }
-        
-        /* Warning States */
+        /* Grade Badges */
+        .grade-badge { position: absolute; right: 0.5rem; top: 0.5rem; font-size: 0.7rem; font-weight: bold; padding: 0.1rem 0.4rem; border-radius: 0.25rem; }
+        .grade-A { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
+        .grade-B { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
+        .grade-C { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
+        .grade-D { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }
+        .grade-E { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
+
+        /* Semester Styles */
         .semester-container { transition: all 0.3s; }
-        .semester-container.overload { border-color: #ef4444; background-color: #fef2f2; }
-        .semester-container.overload .header-bg { background-color: #fee2e2; border-bottom-color: #fca5a5; }
-        .semester-container.overload .sks-badge { background-color: #ef4444; color: white; border-color: #ef4444; }
+        .semester-container.overload { border-color: #ef4444; background-color: #fff1f2; }
+        .semester-list { min-height: 120px; transition: background-color 0.2s; border-radius: 0.5rem; border: 2px dashed #e2e8f0; }
+        .semester-list.drag-over { background-color: #f0fdf4; border-color: #4ade80; }
 
-        .track-btn.active { background-color: #44403c; color: white; border-color: #44403c; }
-        .track-btn { background-color: #f5f5f4; color: #78716c; border: 1px solid #e7e5e4; }
+        /* Sidebar */
+        #catalog-sidebar { transition: transform 0.3s ease-in-out; }
+        #catalog-sidebar.closed { transform: translateX(-100%); }
+        .custom-scroll::-webkit-scrollbar { width: 6px; }
+        .custom-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
+        .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
+
+        /* Context Menu */
+        #context-menu {
+            display: none; position: absolute; z-index: 100;
+            background: white; border: 1px solid #e2e8f0;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            border-radius: 0.5rem; min-width: 180px; overflow: hidden;
+        }
+        #context-menu button { display: block; width: 100%; text-align: left; padding: 0.6rem 1rem; font-size: 0.875rem; color: #475569; transition: bg 0.1s; }
+        #context-menu button:hover { background-color: #f8fafc; color: #0f172a; }
+        #context-menu .menu-header { padding: 0.5rem 1rem; font-size: 0.7rem; font-weight: bold; color: #94a3b8; background: #f8fafc; letter-spacing: 0.05em; }
         
-        .fade-in { animation: fadeIn 0.5s ease-in-out; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        /* Retake Button Style */
+        #btn-retake { background-color: #eff6ff; color: #1d4ed8; font-weight: 600; border-bottom: 1px solid #dbeafe; }
+        #btn-retake:hover { background-color: #dbeafe; }
 
-        /* Range Slider Styling */
-        input[type=range] {
-            -webkit-appearance: none; width: 100%; background: transparent;
-        }
-        input[type=range]::-webkit-slider-thumb {
-            -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #44403c; cursor: pointer; margin-top: -6px;
-        }
-        input[type=range]::-webkit-slider-runnable-track {
-            width: 100%; height: 4px; cursor: pointer; background: #d6d3d1; border-radius: 2px;
+        .cat-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
+        
+        /* Toast Notification */
+        #toast {
+            visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 8px; padding: 12px;
+            position: fixed; z-index: 100; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 14px; opacity: 0; transition: opacity 0.3s;
         }
+        #toast.show { visibility: visible; opacity: 1; }
     </style>
 </head>
-<body class="bg-stone-50 text-stone-800">
+<body class="bg-slate-50 text-slate-800 overflow-x-hidden">
 
-    <!-- Chosen Palette: Warm Neutrals with Logic Alerts -->
-    <!-- Application Structure Plan: 
-         - Updated Drag & Drop Logic: Enforce Odd/Even semester constraints.
-         - Visual Feedback: Grey out invalid semesters when dragging.
-    -->
-    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
+    <!-- Catalog Sidebar -->
+    <div id="catalog-sidebar" class="fixed top-0 left-0 h-full w-80 bg-white shadow-xl z-40 border-r border-slate-200 flex flex-col closed">
+        <div class="p-4 border-b border-slate-200 bg-slate-50 flex justify-between items-center">
+            <div>
+                <h2 class="font-bold text-slate-800">Katalog Mata Kuliah</h2>
+                <p class="text-xs text-slate-500">Tarik ke semester untuk mengambil.</p>
+            </div>
+            <button onclick="toggleCatalog()" class="text-slate-400 hover:text-slate-600"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="p-2 border-b border-slate-100">
+            <input type="text" id="search-catalog" placeholder="Cari mata kuliah..." class="w-full text-sm p-2 border rounded bg-slate-50 focus:outline-none focus:border-blue-400" onkeyup="filterCatalog()">
+        </div>
+        <div id="catalog-list" class="flex-1 overflow-y-auto p-3 space-y-2 custom-scroll"></div>
+    </div>
 
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <!-- Toggle Button -->
+    <button onclick="toggleCatalog()" class="fixed left-0 top-24 bg-blue-600 text-white p-2 rounded-r-lg shadow-lg z-30 hover:bg-blue-700 transition-all flex items-center gap-2 pr-4 font-semibold text-sm">
+        <i class="fas fa-book-open"></i> Katalog
+    </button>
+    
+    <!-- Toast -->
+    <div id="toast">Notifikasi</div>
+
+    <!-- Context Menu -->
+    <div id="context-menu">
+        <div class="menu-header">OPSI AKADEMIK</div>
+        <!-- Retake Button (Hidden by default) -->
+        <button id="btn-retake" onclick="retakeCourse()" style="display:none;">
+            <i class="fas fa-redo-alt mr-2"></i> Ulang di Tahun Depan
+        </button>
         
-        <!-- Header -->
-        <header class="mb-10 text-center">
-            <h1 class="text-3xl md:text-4xl font-bold text-stone-900 mb-4">Simulasi Perjalanan Mahasiswa & KRS</h1>
-            <p class="text-lg text-stone-600 max-w-3xl mx-auto">
-                Atur strategi studimu. <span class="font-bold text-orange-600">Simulasikan IP rendah</span>, lihat dampak batas SKS, dan geser mata kuliah untuk menyusun ulang rencana.
-                <br>
-                <span class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded mt-2 inline-block font-bold">Aturan Baru: MK Ganjil hanya bisa ke Sem Ganjil, Genap ke Genap.</span>
+        <div class="menu-header mt-1">SET NILAI (SIMULASI)</div>
+        <button onclick="setCourseGrade(4)"><span class="w-6 inline-block text-center font-bold text-green-600">A</span> (4.0) - Sangat Baik</button>
+        <button onclick="setCourseGrade(3)"><span class="w-6 inline-block text-center font-bold text-blue-600">B</span> (3.0) - Baik</button>
+        <button onclick="setCourseGrade(2)"><span class="w-6 inline-block text-center font-bold text-yellow-600">C</span> (2.0) - Cukup</button>
+        <button onclick="setCourseGrade(1)"><span class="w-6 inline-block text-center font-bold text-orange-600">D</span> (1.0) - Kurang</button>
+        <button onclick="setCourseGrade(0)" class="text-red-600 bg-red-50 hover:bg-red-100"><span class="w-6 inline-block text-center font-bold">E</span> (0.0) - Gagal/Ulang</button>
+        <div class="border-t border-slate-100 my-1"></div>
+        <button onclick="deleteCourse()" class="text-slate-500 hover:text-red-600"><i class="fas fa-trash w-6 mr-2"></i> Hapus dari KRS</button>
+    </div>
+
+    <!-- Main Content -->
+    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-8 transition-all duration-300 ml-0 md:ml-12">
+        
+        <header class="mb-8 text-center pl-8">
+            <h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-2">Simulasi Studi Berbasis IPS</h1>
+            <p class="text-slate-600 max-w-2xl mx-auto text-sm md:text-base">
+                Simulasi nyata: <strong>IPS Semester lalu menentukan jatah SKS semester depan.</strong><br>
+                Jika nilai <strong>E</strong>, gunakan opsi <em>"Ulang di Tahun Depan"</em> (Klik Kanan) untuk memperbaiki.
             </p>
             
-            <div class="mt-6 flex flex-wrap justify-center gap-4 text-sm">
-                <div class="flex items-center gap-2 bg-white px-3 py-1.5 rounded border border-stone-200 shadow-sm">
-                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                    <span>IP &ge; 3.00 (Max 24 SKS)</span>
+            <div class="mt-6 flex flex-wrap justify-center gap-3 text-xs font-semibold opacity-80">
+                <div class="flex items-center gap-2"><span class="w-3 h-3 bg-pink-400 rounded-sm"></span> MKWU</div>
+                <div class="flex items-center gap-2"><span class="w-3 h-3 bg-green-500 rounded-sm"></span> Science</div>
+                <div class="flex items-center gap-2"><span class="w-3 h-3 bg-blue-400 rounded-sm"></span> Fund</div>
+                <div class="flex items-center gap-2"><span class="w-3 h-3 bg-orange-400 rounded-sm"></span> Core</div>
+                <div class="flex items-center gap-2"><span class="w-3 h-3 bg-purple-400 rounded-sm"></span> Adv</div>
+                <div class="flex items-center gap-2"><span class="w-3 h-3 bg-yellow-400 rounded-sm"></span> Pilihan</div>
+            </div>
+
+            <!-- Global Stats -->
+            <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
+                <div class="bg-white p-3 rounded-xl shadow-sm border border-slate-200">
+                    <div class="text-2xl font-bold text-slate-800" id="total-sks-passed">0</div>
+                    <div class="text-[10px] text-slate-500 uppercase tracking-wider">Total SKS Lulus</div>
                 </div>
-                <div class="flex items-center gap-2 bg-white px-3 py-1.5 rounded border border-stone-200 shadow-sm">
-                    <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
-                    <span>2.50 &le; IP < 3.00 (Max 21 SKS)</span>
+                <div class="bg-white p-3 rounded-xl shadow-sm border border-slate-200">
+                    <div class="text-2xl font-bold text-blue-600" id="ipk-global">0.00</div>
+                    <div class="text-[10px] text-slate-500 uppercase tracking-wider">IPK Kumulatif</div>
                 </div>
-                <div class="flex items-center gap-2 bg-white px-3 py-1.5 rounded border border-stone-200 shadow-sm">
-                    <div class="w-3 h-3 rounded-full bg-orange-400"></div>
-                    <span>2.00 &le; IP < 2.50 (Max 18 SKS)</span>
+                <div class="bg-white p-3 rounded-xl shadow-sm border border-slate-200">
+                    <div class="text-2xl font-bold text-slate-800" id="predikat-ipk">-</div>
+                    <div class="text-[10px] text-slate-500 uppercase tracking-wider">Predikat</div>
                 </div>
-                <div class="flex items-center gap-2 bg-white px-3 py-1.5 rounded border border-stone-200 shadow-sm">
-                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                    <span>IP < 2.00 (Max 15 SKS)</span>
+                <div class="bg-white p-3 rounded-xl shadow-sm border border-slate-200">
+                     <div class="text-2xl font-bold text-red-500" id="total-fail">0</div>
+                    <div class="text-[10px] text-slate-500 uppercase tracking-wider">SKS Gagal (E)</div>
                 </div>
             </div>
         </header>
 
-        <!-- Phase 1: Generalist (Sem 1-4) -->
-        <section class="mb-12">
-            <div class="flex items-center justify-between mb-6 border-b border-stone-200 pb-2">
-                <h2 class="text-2xl font-bold text-stone-800">Tahun 1 & 2 (Generalist)</h2>
-                <div class="text-xs text-stone-500 italic">Geser slider IP untuk melihat perubahan Max SKS semester depan</div>
-            </div>
+        <!-- Track Selector -->
+        <div class="flex flex-wrap justify-center mb-10 gap-2">
+            <button onclick="switchTrack('general')" class="track-btn active px-4 py-1.5 rounded-full text-xs font-bold border transition-colors bg-slate-800 text-white" id="btn-general">Umum</button>
+            <button onclick="switchTrack('ai')" class="track-btn px-4 py-1.5 rounded-full text-xs font-bold border transition-colors bg-white hover:bg-slate-50" id="btn-ai">AI</button>
+            <button onclick="switchTrack('rpl')" class="track-btn px-4 py-1.5 rounded-full text-xs font-bold border transition-colors bg-white hover:bg-slate-50" id="btn-rpl">RPL</button>
+            <button onclick="switchTrack('net')" class="track-btn px-4 py-1.5 rounded-full text-xs font-bold border transition-colors bg-white hover:bg-slate-50" id="btn-net">Jaringan</button>
+            <button onclick="switchTrack('si')" class="track-btn px-4 py-1.5 rounded-full text-xs font-bold border transition-colors bg-white hover:bg-slate-50" id="btn-si">SI & GIS</button>
+        </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <!-- Generate Semester Containers dynamically to handle logic easier -->
-                <div id="container-sem-1"></div>
-                <div id="container-sem-2"></div>
-                <div id="container-sem-3"></div>
-                <div id="container-sem-4"></div>
-            </div>
-        </section>
+        <!-- Semesters Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-10 mb-12" id="semester-grid">
+            <!-- Semesters 1-8 will be injected here -->
+        </div>
 
-        <!-- Phase 2: Specialist (Sem 5-8) -->
-        <section class="mb-16">
-            <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-6">
-                <div class="mb-4 md:mb-0">
-                    <h2 class="text-2xl font-bold text-stone-800">Tahun 3 & 4 (Specialist)</h2>
-                    <p class="text-stone-500 text-sm">Pilih jalur, lalu atur beban studi jika terkena dampak IP rendah.</p>
-                </div>
-                <div class="flex flex-wrap gap-2">
-                    <button onclick="switchTrack('ai')" id="btn-ai" class="track-btn active px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Komputasi & AI</button>
-                    <button onclick="switchTrack('rpl')" id="btn-rpl" class="track-btn px-4 py-2 rounded-lg text-sm font-semibold transition-colors">RPL</button>
-                    <button onclick="switchTrack('net')" id="btn-net" class="track-btn px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Jaringan</button>
-                    <button onclick="switchTrack('si')" id="btn-si" class="track-btn px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Sistem Informasi</button>
-                </div>
-            </div>
-
-            <div id="specialist-content" class="bg-stone-100 p-6 rounded-2xl border border-stone-200">
-                <!-- Injected via JS -->
-            </div>
-        </section>
-
-        <!-- Analytics -->
-        <section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
-            <div class="bg-white p-6 rounded-xl border border-stone-200 shadow-sm">
-                <h3 class="text-lg font-bold text-stone-800 mb-2">Monitor Beban SKS</h3>
-                <p class="text-xs text-stone-500 mb-4">Batang merah menandakan beban melebihi jatah SKS akibat IP semester sebelumnya.</p>
+        <!-- Charts -->
+        <section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12 bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
+            <div>
+                <h3 class="text-sm font-bold text-slate-800 mb-4 border-b pb-2">Tren IPS (Indeks Prestasi Semester)</h3>
                 <div class="chart-container">
-                    <canvas id="sksChart"></canvas>
+                    <canvas id="ipsChart"></canvas>
                 </div>
             </div>
-             <div class="bg-white p-6 rounded-xl border border-stone-200 shadow-sm flex flex-col justify-center items-center text-center">
-                <h3 class="text-lg font-bold text-stone-800 mb-2">Total SKS Terambil</h3>
-                <div class="text-5xl font-bold text-stone-800 my-4" id="grand-total-sks">146</div>
-                <p class="text-sm text-stone-500">Target Kelulusan: 144 SKS</p>
-                <div id="graduation-status" class="mt-4 px-4 py-2 rounded-full text-sm font-bold bg-green-100 text-green-700">Siap Lulus</div>
+            <div>
+                <h3 class="text-sm font-bold text-slate-800 mb-4 border-b pb-2">Komposisi Bidang Ilmu</h3>
+                <div class="chart-container">
+                    <canvas id="domainChart"></canvas>
+                </div>
             </div>
         </section>
-        
-        <footer class="text-center text-stone-400 text-sm pt-8 border-t border-stone-200 pb-8">
-            <p>© 2026 Curriculum Simulator. Based on Verified Student Journey Map.</p>
-        </footer>
 
     </div>
 
-    <!-- TEMPLATE FOR SEMESTER CARD -->
-    <template id="semester-template">
-        <div class="semester-container bg-white rounded-xl shadow-sm border border-stone-200 overflow-hidden flex flex-col h-full">
-            <div class="header-bg bg-stone-100 px-4 py-3 border-b border-stone-200">
-                <div class="flex justify-between items-center mb-2">
-                    <h3 class="font-bold text-stone-800 text-lg sem-title">Semester X</h3>
-                    <span class="sks-badge text-xs bg-white px-2 py-1 rounded border border-stone-300 font-bold">0 / 24 SKS</span>
-                </div>
-                
-                <!-- GPA Simulator Control -->
-                <div class="bg-white/50 rounded p-2 border border-stone-200/50">
-                    <div class="flex justify-between text-xs text-stone-600 mb-1">
-                        <span>Simulasi IP: <strong class="gpa-value">3.50</strong></span>
-                        <span class="text-[10px] text-stone-400">Efek ke Sem Selanjutnya</span>
-                    </div>
-                    <input type="range" min="0" max="4" step="0.01" value="3.50" class="gpa-slider w-full h-1 bg-stone-200 rounded-lg appearance-none cursor-pointer">
-                </div>
-            </div>
-
-            <div class="semester-list p-3 space-y-2 flex-grow relative" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
-                <!-- Course Cards go here -->
-            </div>
-            
-            <div class="status-footer px-4 py-2 bg-stone-50 text-[10px] text-stone-400 border-t border-stone-100 italic text-right">
-                Max SKS Next: <span class="next-max-sks">24</span>
-            </div>
-        </div>
-    </template>
-
     <script>
-        // --- DATA ---
-        
-        const generalistSemestersBlueprint = {
+        // --- Data Definitions ---
+        const categories = {
+            MKWU: { color: 'bg-pink-400' },
+            BSC:  { color: 'bg-green-500' },
+            FND:  { color: 'bg-blue-400' },
+            CORE: { color: 'bg-orange-400' },
+            ADV:  { color: 'bg-purple-400' },
+            PROF: { color: 'bg-slate-400' },
+            CAP:  { color: 'bg-fuchsia-600' },
+            EL:   { color: 'bg-yellow-400' },
+            RES:  { color: 'bg-red-500' }
+        };
+
+        const baseCurriculum = {
             1: [
-                {code: "MK06", name: "Dasar Pemrograman*", sks: 3, priority: "core"},
-                {code: "MK07", name: "Algoritma & Logika", sks: 2, priority: "core"},
-                {code: "MK04", name: "Kalkulus", sks: 3, priority: "core"},
-                {code: "MK05", name: "Pengantar Informatika", sks: 2, priority: "standard"},
-                {code: "MK01", name: "Pendidikan Pancasila", sks: 2, priority: "standard"},
-                {code: "MK02", name: "Pendidikan Agama", sks: 3, priority: "standard"},
-                {code: "MK03", name: "Bahasa Inggris", sks: 2, priority: "support"},
-                {code: "MK08", name: "Kom. Profesional", sks: 2, priority: "support"}
+                { id: "M1", name: "Pend. Pancasila", sks: 2, cat: "MKWU" },
+                { id: "M2", name: "B. Inggris", sks: 2, cat: "MKWU" },
+                { id: "M3", name: "Pend. Agama", sks: 3, cat: "MKWU" },
+                { id: "M4", name: "Kalkulus", sks: 3, cat: "BSC" },
+                { id: "M5", name: "Matematika Diskrit", sks: 3, cat: "BSC" },
+                { id: "M6", name: "Pengantar Informatika", sks: 2, cat: "FND" },
+                { id: "M7", name: "Logika Komputasional", sks: 2, cat: "FND" },
+                { id: "M8", name: "Kom. Profesional", sks: 2, cat: "PROF" }
             ],
             2: [
-                {code: "MK15", name: "Struktur Data & Algo*", sks: 3, priority: "core"},
-                {code: "MK12", name: "Matematika Diskrit", sks: 3, priority: "core"},
-                {code: "MK11", name: "Sistem Digital", sks: 2, priority: "core"},
-                {code: "MK13", name: "Org. & Ars. Komputer", sks: 3, priority: "core"},
-                {code: "MK14", name: "Sistem Operasi*", sks: 3, priority: "core"},
-                {code: "MK16", name: "Literasi Digital", sks: 2, priority: "support"},
-                {code: "MK10", name: "Bahasa Indonesia", sks: 2, priority: "support"},
-                {code: "MK09", name: "Kewarganegaraan", sks: 2, priority: "support"}
+                { id: "M9", name: "Kewarganegaraan", sks: 2, cat: "MKWU" },
+                { id: "M10", name: "B. Indonesia", sks: 2, cat: "MKWU" },
+                { id: "M11", name: "Aljabar Linier", sks: 3, cat: "BSC" },
+                { id: "M12", name: "Sistem Digital", sks: 2, cat: "FND" },
+                { id: "M13", name: "Sistem Operasi", sks: 3, cat: "FND" },
+                { id: "M14", name: "Dasar Pemrograman", sks: 3, cat: "FND" },
+                { id: "M15", name: "Org. Komputer", sks: 3, cat: "FND" },
+                { id: "M16", name: "Literasi Digital", sks: 2, cat: "PROF" }
             ],
             3: [
-                {code: "MK20", name: "Basis Data*", sks: 3, priority: "core"},
-                {code: "MK21", name: "Jaringan Komputer*", sks: 3, priority: "core"},
-                {code: "MK27", name: "PBO*", sks: 3, priority: "core"},
-                {code: "MK22", name: "Strategi Algoritma*", sks: 3, priority: "core"},
-                {code: "MK17", name: "Aljabar Linier", sks: 3, priority: "core"},
-                {code: "MK24", name: "IMK", sks: 2, priority: "support"},
-                {code: "MK19", name: "Sistem Informasi", sks: 2, priority: "support"},
-                {code: "MK18", name: "Etika & Keberlanjutan", sks: 2, priority: "support"}
+                { id: "M17", name: "Metode Numerik", sks: 3, cat: "BSC" },
+                { id: "M18", name: "Basis Data", sks: 3, cat: "FND" },
+                { id: "M19", name: "Struktur Data", sks: 3, cat: "FND" },
+                { id: "M20", name: "Jaringan Komputer", sks: 3, cat: "FND" },
+                { id: "M21", name: "Sistem Informasi", sks: 2, cat: "CORE" },
+                { id: "M22", name: "RPL", sks: 3, cat: "CORE" },
+                { id: "M23", name: "Etika Komputasi", sks: 2, cat: "PROF" }
             ],
             4: [
-                {code: "MK23", name: "RPL*", sks: 3, priority: "core"},
-                {code: "MK32", name: "Probstat", sks: 3, priority: "core"},
-                {code: "MK31", name: "Pemrograman Web*", sks: 3, priority: "core"},
-                {code: "MK30", name: "Kecerdasan Buatan", sks: 3, priority: "core"},
-                {code: "MK25", name: "APSI", sks: 3, priority: "standard"},
-                {code: "MK29", name: "Pemrog. Jaringan*", sks: 3, priority: "standard"},
-                {code: "MK26", name: "Sis. Paralel", sks: 2, priority: "standard"}
+                { id: "M24", name: "Probstat", sks: 3, cat: "BSC" },
+                { id: "M25", name: "PBO", sks: 3, cat: "FND" },
+                { id: "M26", name: "Analsis SI", sks: 3, cat: "CORE" },
+                { id: "M27", name: "Strategi Algoritma", sks: 3, cat: "CORE" },
+                { id: "M28", name: "Pemrog. Jaringan", sks: 3, cat: "CORE" },
+                { id: "M29", name: "Sis. Terdistribusi", sks: 2, cat: "CORE" },
+                { id: "M30", name: "IMK", sks: 2, cat: "CORE" }
+            ],
+            5: [
+                { id: "M31", name: "Manajemen Jaringan", sks: 3, cat: "CORE" },
+                { id: "M32", name: "Pemrog. Web", sks: 3, cat: "CORE" },
+                { id: "M33", name: "Machine Learning", sks: 3, cat: "ADV" },
+                { id: "M34", name: "IoT", sks: 3, cat: "ADV" },
+                { id: "M35", name: "Kecerdasan Artifisial", sks: 3, cat: "ADV" },
+                { id: "M36", name: "Sistem Enterprise", sks: 3, cat: "ADV" },
+                { id: "M37", name: "Metpen", sks: 2, cat: "RES" }
+            ],
+            6: [
+                { id: "M38", name: "Keamanan Info", sks: 3, cat: "CORE" },
+                { id: "M39", name: "Computer Vision", sks: 3, cat: "ADV" },
+                { id: "M40", name: "NLP", sks: 3, cat: "ADV" },
+                { id: "M41", name: "GIS", sks: 3, cat: "ADV" },
+                { id: "M42", name: "Proyek PL", sks: 3, cat: "CAP" },
+                { id: "M43", name: "Kerja Praktek", sks: 2, cat: "RES" }
+            ],
+            7: [
+                { id: "M44", name: "Testing", sks: 3, cat: "ADV" },
+                { id: "M45", name: "Teknopreneur", sks: 3, cat: "PROF" },
+                { id: "M46", name: "PMKM", sks: 2, cat: "PROF" },
+                { id: "M47", name: "Proposal Skripsi", sks: 2, cat: "RES" }
+            ],
+            8: [
+                { id: "M48", name: "Skripsi", sks: 4, cat: "RES" }
             ]
         };
 
-        const tracksBlueprint = {
-            ai: {
-                name: "Komputasi & AI",
-                color: "text-blue-800",
-                desc: "Fokus: Data, ML, Vision.",
-                sem5: [
-                    {code: "MK35", name: "Machine Learning", sks: 3, priority: "core"},
-                    {code: "MK28", name: "Metode Numerik*", sks: 3, priority: "core"},
-                    {code: "MK36", name: "Proyek PL*", sks: 3, priority: "core"},
-                    {code: "MK37", name: "Proposal TA", sks: 2, priority: "core"},
-                    {code: "MKP", name: "Data Mining", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Big Data", sks: 3, priority: "standard"},
-                    {code: "MK33", name: "IoT", sks: 3, priority: "standard"}
-                ],
-                sem6: [
-                    {code: "MK38", name: "Comp. Vision*", sks: 3, priority: "core"},
-                    {code: "MK43", name: "NLP", sks: 3, priority: "core"},
-                    {code: "MK44", name: "Kerja Praktik", sks: 2, priority: "core"},
-                    {code: "MKP", name: "Deep Learning", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "AI Ethics", sks: 2, priority: "standard"},
-                    {code: "MKP", name: "Pilihan Lintas KK", sks: 3, priority: "standard"},
-                    {code: "MK42", name: "Keamanan Info*", sks: 2, priority: "standard"}
-                ],
-                sem7: [
-                    {code: "MK48", name: "TA 1", sks: 2, priority: "core"},
-                    {code: "MK45", name: "Teknopreneur [K]", sks: 3, priority: "standard"},
-                    {code: "MK47", name: "Uji PL", sks: 3, priority: "standard"},
-                    {code: "MK42", name: "Keamanan Info", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Health Info", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Reinforcement L.", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Quantum/Bebas", sks: 5, priority: "standard"}
-                ]
-            },
-            rpl: {
-                name: "RPL",
-                color: "text-orange-800",
-                desc: "Fokus: Apps, Architecture, UX.",
-                sem5: [
-                    {code: "MK36", name: "Proyek PL*", sks: 3, priority: "core"},
-                    {code: "MKP", name: "UX/UI Design", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Secure SE", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Web Lanjut", sks: 3, priority: "standard"},
-                    {code: "MK28", name: "Metode Numerik*", sks: 3, priority: "standard"},
-                    {code: "MK37", name: "Proposal TA", sks: 2, priority: "core"},
-                    {code: "MK33", name: "IoT", sks: 3, priority: "standard"}
-                ],
-                sem6: [
-                    {code: "MK39", name: "Pemrog. Mobile*", sks: 3, priority: "core"},
-                    {code: "MKP", name: "Microservices", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Game Dev", sks: 3, priority: "standard"},
-                    {code: "MK44", name: "Kerja Praktik", sks: 2, priority: "core"},
-                    {code: "MK41", name: "Sis. Enterprise", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Pil. Lintas KK", sks: 4, priority: "standard"}
-                ],
-                sem7: [
-                    {code: "MK48", name: "TA 1", sks: 2, priority: "core"},
-                    {code: "MK45", name: "Teknopreneur [K]", sks: 3, priority: "standard"},
-                    {code: "MK47", name: "Uji PL", sks: 3, priority: "standard"},
-                    {code: "MK42", name: "Keamanan Info", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "DevOps", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Soft. Arch", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Pil. Bebas", sks: 5, priority: "standard"}
-                ]
-            },
-            net: {
-                name: "Jaringan",
-                color: "text-emerald-800",
-                desc: "Fokus: Infra, Security, IoT.",
-                sem5: [
-                    {code: "MK33", name: "IoT", sks: 3, priority: "core"},
-                    {code: "MK34", name: "Manajemen Jar.*", sks: 3, priority: "core"},
-                    {code: "MKP", name: "Embedded Sys", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Ethical Hack", sks: 3, priority: "standard"},
-                    {code: "MK36", name: "Proyek PL*", sks: 3, priority: "core"},
-                    {code: "MK28", name: "Metode Numerik*", sks: 3, priority: "standard"},
-                    {code: "MK37", name: "Proposal TA", sks: 2, priority: "core"}
-                ],
-                sem6: [
-                    {code: "MK42", name: "Keamanan Info*", sks: 3, priority: "core"},
-                    {code: "MKP", name: "Wireless Sensor", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Cryptography", sks: 3, priority: "standard"},
-                    {code: "MK44", name: "Kerja Praktik", sks: 2, priority: "core"},
-                    {code: "MK39", name: "Mobile (IoT)*", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Pil. Lintas KK", sks: 3, priority: "standard"}
-                ],
-                sem7: [
-                    {code: "MK48", name: "TA 1", sks: 2, priority: "core"},
-                    {code: "MK45", name: "Teknopreneur [K]", sks: 3, priority: "standard"},
-                    {code: "MK47", name: "Uji PL", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Cloud IoT", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Blockchain", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Pil. Bebas 1", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Pil. Bebas 2", sks: 6, priority: "standard"}
-                ]
-            },
-            si: {
-                name: "Sistem Informasi",
-                color: "text-purple-800",
-                desc: "Fokus: Business, GIS, Governance.",
-                sem5: [
-                    {code: "MKP", name: "Business Intel", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "GIS II", sks: 3, priority: "standard"},
-                    {code: "MK36", name: "Proyek PL*", sks: 3, priority: "core"},
-                    {code: "MK28", name: "Metode Numerik*", sks: 3, priority: "standard"},
-                    {code: "MK37", name: "Proposal TA", sks: 2, priority: "core"},
-                    {code: "MKP", name: "E-Business", sks: 3, priority: "standard"},
-                    {code: "MK33", name: "IoT", sks: 3, priority: "standard"}
-                ],
-                sem6: [
-                    {code: "MK41", name: "Sis. Enterprise", sks: 3, priority: "core"},
-                    {code: "MK40", name: "SIG", sks: 3, priority: "core"},
-                    {code: "MKP", name: "Enterprise Arch", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Smart City", sks: 3, priority: "standard"},
-                    {code: "MK44", name: "Kerja Praktik", sks: 2, priority: "core"},
-                    {code: "MKP", name: "Pil. Lintas KK", sks: 3, priority: "standard"}
-                ],
-                sem7: [
-                    {code: "MK48", name: "TA 1", sks: 2, priority: "core"},
-                    {code: "MK45", name: "Teknopreneur [K]", sks: 3, priority: "standard"},
-                    {code: "MK47", name: "Uji PL", sks: 3, priority: "standard"},
-                    {code: "MK42", name: "Keamanan Info", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "SCM", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "IT Governance", sks: 3, priority: "standard"},
-                    {code: "MKP", name: "Pil. Bebas", sks: 6, priority: "standard"}
-                ]
-            }
+        const electives = {
+            general: [
+                { id: "EL1", name: "MK Pilihan I", sks: 3, cat: "EL" },
+                { id: "EL2", name: "MK Pilihan II", sks: 3, cat: "EL" },
+                { id: "EL3", name: "MK Pilihan III", sks: 3, cat: "EL" },
+                { id: "EL4", name: "MK Pilihan IV", sks: 3, cat: "EL" },
+                { id: "EL5", name: "MK Pilihan V", sks: 3, cat: "EL" }
+            ],
+            ai: [
+                { id: "AI1", name: "Deep Learning", sks: 3, cat: "EL" },
+                { id: "AI2", name: "Robotics", sks: 3, cat: "EL" },
+                { id: "AI3", name: "Big Data", sks: 3, cat: "EL" },
+                { id: "AI4", name: "Info Retrieval", sks: 3, cat: "EL" },
+                { id: "AI5", name: "AI Ethics", sks: 3, cat: "EL" }
+            ],
+            rpl: [
+                { id: "SE1", name: "Backend Dev", sks: 3, cat: "EL" },
+                { id: "SE2", name: "Mobile Prog", sks: 3, cat: "EL" },
+                { id: "SE3", name: "Soft. Arch", sks: 3, cat: "EL" },
+                { id: "SE4", name: "DevOps", sks: 3, cat: "EL" },
+                { id: "SE5", name: "Game Dev", sks: 3, cat: "EL" }
+            ],
+            net: [
+                { id: "NET1", name: "Net Security", sks: 3, cat: "EL" },
+                { id: "NET2", name: "Wireless", sks: 3, cat: "EL" },
+                { id: "NET3", name: "Cloud Comp", sks: 3, cat: "EL" },
+                { id: "NET4", name: "Blockchain", sks: 3, cat: "EL" },
+                { id: "NET5", name: "Cyber Forensics", sks: 3, cat: "EL" }
+            ],
+            si: [
+                { id: "SI1", name: "Business Intel.", sks: 3, cat: "EL" },
+                { id: "SI2", name: "E-Business", sks: 3, cat: "EL" },
+                { id: "SI3", name: "Ent. Architecture", sks: 3, cat: "EL" },
+                { id: "SI4", name: "IT Governance", sks: 3, cat: "EL" },
+                { id: "SI5", name: "Smart City", sks: 3, cat: "EL" }
+            ]
         };
 
-        const mbkmData = [
-            {code: "MK46", name: "PMKM (Wajib)", sks: 2, priority: "core"},
-            {code: "MK45", name: "Teknopreneur (Konversi)", sks: 3, priority: "standard"},
-            {code: "MKP", name: "Pilihan Bebas (Ops)", sks: 3, priority: "standard"}
-        ];
-
-        // --- STATE ---
+        // --- State Management ---
         let currentPlan = {};
-        let currentTrack = 'ai';
-        let semesterStats = {
-            1: { gpa: 3.50, maxSKSNext: 24 }, // Sem 1 Max is fixed (usually paket)
-            2: { gpa: 3.50, maxSKSNext: 24 },
-            3: { gpa: 3.50, maxSKSNext: 24 },
-            4: { gpa: 3.50, maxSKSNext: 24 },
-            5: { gpa: 3.50, maxSKSNext: 24 },
-            6: { gpa: 3.50, maxSKSNext: 24 },
-            7: { gpa: 3.50, maxSKSNext: 24 },
-            8: { gpa: 4.00, maxSKSNext: 24 }
-        };
+        let currentTrackId = 'general';
+        let contextTarget = null; // { semId, index }
 
-        // --- LOGIC ---
+        // --- Core Logic ---
 
-        function calculateMaxSKS(gpa) {
-            if (gpa >= 3.00) return 24;
-            if (gpa >= 2.50) return 21;
-            if (gpa >= 2.00) return 18;
-            return 15;
-        }
-
-        function initPlan(trackKey) {
-            currentTrack = trackKey;
+        function initPlan(trackId) {
+            currentTrackId = trackId;
             currentPlan = {};
             
-            // Deep Copy Gen
-            for(let i=1; i<=4; i++) currentPlan[i] = JSON.parse(JSON.stringify(generalistSemestersBlueprint[i]));
-            // Deep Copy Spec
-            const track = tracksBlueprint[trackKey];
-            currentPlan[5] = JSON.parse(JSON.stringify(track.sem5));
-            currentPlan[6] = JSON.parse(JSON.stringify(track.sem6));
-            currentPlan[7] = JSON.parse(JSON.stringify(track.sem7));
-            currentPlan[8] = [{code: "MK49", name: "TA 2 (Sidang)", sks: 4, priority: "core"}];
-        }
-
-        function renderSem(semId, containerId) {
-            const container = document.getElementById(containerId);
-            if (!container) return;
-
-            // Determine Max SKS for THIS semester based on PREV semester GPA
-            let maxSKS = 24; 
-            if (semId > 1) {
-                const prevGPA = semesterStats[semId-1].gpa;
-                maxSKS = calculateMaxSKS(prevGPA);
-            }
-
-            // Get Current SKS Load
-            const courses = currentPlan[semId];
-            const currentSKS = courses.reduce((a,b)=>a+b.sks, 0);
-
-            // Warning State
-            const isOverload = currentSKS > maxSKS;
-
-            // Template Cloning
-            const template = document.getElementById('semester-template');
-            const clone = template.content.cloneNode(true);
-
-            // Populate Header
-            const titleEl = clone.querySelector('.sem-title');
-            titleEl.textContent = `Semester ${semId}`;
-            
-            const badgeEl = clone.querySelector('.sks-badge');
-            badgeEl.textContent = `${currentSKS} / ${maxSKS} SKS`;
-            
-            const containerDiv = clone.querySelector('.semester-container');
-            if (isOverload) {
-                containerDiv.classList.add('overload');
-                badgeEl.textContent += " (OVER!)";
-            }
-
-            // GPA Control
-            const gpaValEl = clone.querySelector('.gpa-value');
-            const gpaSlider = clone.querySelector('.gpa-slider');
-            const nextMaxEl = clone.querySelector('.next-max-sks');
-
-            gpaSlider.value = semesterStats[semId].gpa;
-            gpaValEl.textContent = parseFloat(semesterStats[semId].gpa).toFixed(2);
-            
-            // Calc next sem limit based on current slider
-            const nextLimit = calculateMaxSKS(semesterStats[semId].gpa);
-            if (semId < 8) {
-                nextMaxEl.textContent = nextLimit;
-            } else {
-                nextMaxEl.parentElement.style.display = 'none';
-            }
-
-            // Event Listener for Slider
-            gpaSlider.addEventListener('input', (e) => {
-                const val = parseFloat(e.target.value);
-                semesterStats[semId].gpa = val;
-                gpaValEl.textContent = val.toFixed(2);
-                
-                if(semId < 8) nextMaxEl.textContent = calculateMaxSKS(val);
-            });
-            gpaSlider.addEventListener('change', () => {
-                renderAll(); 
-            });
-
-            // Populate List
-            const listContainer = clone.querySelector('.semester-list');
-            listContainer.id = `list-sem-${semId}`; 
-            
-            // --- NEW: Parity Enforcement Logic ---
-            const isOddSem = semId % 2 !== 0;
-            const parityClass = isOddSem ? 'odd-semester' : 'even-semester';
-            listContainer.classList.add(parityClass);
-            listContainer.dataset.parity = isOddSem ? 'odd' : 'even';
-            // -------------------------------------
-
-            listContainer.setAttribute('ondrop', `drop(event, ${semId})`);
-
-            courses.forEach((c, idx) => {
-                const el = document.createElement('div');
-                el.className = 'course-card bg-white p-2 rounded border border-stone-200 shadow-sm flex justify-between items-center';
-                el.setAttribute('draggable', 'true');
-                el.setAttribute('ondragstart', `drag(event, ${semId}, ${idx})`);
-                
-                // Styling
-                if(c.name.includes('KONVERSI')) el.classList.add('bg-green-50', 'border-green-200');
-                
-                let badgeHTML = '';
-                if(c.priority === 'core') {
-                    el.classList.add('border-l-4', 'border-l-blue-500');
-                    badgeHTML = '<span class="text-[9px] bg-blue-100 text-blue-700 px-1 rounded ml-1 border border-blue-200" title="Pondasi Wajib">PONDASI</span>';
-                } else if(c.priority === 'support') {
-                    el.classList.add('bg-stone-50', 'opacity-90');
-                    badgeHTML = '<span class="text-[9px] bg-stone-200 text-stone-600 px-1 rounded ml-1 border border-stone-300" title="Bisa Ditunda">TUNDA?</span>';
+            // Populate Plan
+            for(let i=1; i<=8; i++) {
+                currentPlan[i] = [];
+                if(baseCurriculum[i]) {
+                    // Default Grade: 4.0 (A) to encourage positive simulation
+                    currentPlan[i] = baseCurriculum[i].map(c => ({...c, grade: 4, uuid: crypto.randomUUID()}));
                 }
-
-                el.innerHTML = `
-                    <div class="overflow-hidden">
-                        <div class="flex items-center gap-1">
-                            <div class="text-[10px] text-stone-400 font-mono">${c.code}</div>
-                            ${badgeHTML}
-                        </div>
-                        <div class="text-xs font-bold text-stone-700 truncate w-32" title="${c.name}">${c.name}</div>
-                    </div>
-                    <div class="text-xs font-bold bg-stone-100 text-stone-600 px-1.5 py-0.5 rounded border border-stone-200 ml-2">${c.sks}</div>
-                `;
-                listContainer.appendChild(el);
+            }
+            
+            // Add Electives
+            const tr = electives[trackId] || electives['general'];
+            const distribute = [[5,0], [6,1], [7,2], [7,3], [8,4]];
+            distribute.forEach(([sem, idx]) => {
+                if(tr[idx]) currentPlan[sem].push({...tr[idx], grade: 4, uuid: crypto.randomUUID()});
             });
 
-            container.innerHTML = '';
-            container.appendChild(clone);
-        }
-
-        function renderAll() {
-            renderSem(1, 'container-sem-1');
-            renderSem(2, 'container-sem-2');
-            renderSem(3, 'container-sem-3');
-            renderSem(4, 'container-sem-4');
-
-            const track = tracksBlueprint[currentTrack];
-            const contentDiv = document.getElementById('specialist-content');
-            
-            contentDiv.innerHTML = `
-                <div class="mb-4">
-                    <h3 class="text-xl font-bold ${track.color}">${track.name}</h3>
-                    <p class="text-sm text-stone-500">${track.desc}</p>
-                </div>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                    <div id="container-sem-5"></div>
-                    <div class="flex flex-col gap-4">
-                        <div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl border border-green-200 p-3 shadow-sm h-auto relative">
-                             <div class="absolute top-0 right-0 bg-green-200 text-green-800 text-[9px] font-bold px-2 py-1 rounded-bl">LIBURAN</div>
-                            <h4 class="font-bold text-green-900 text-sm mb-2">MBKM (Sem Antara)</h4>
-                            <div class="space-y-2">
-                                ${mbkmData.map(c => `
-                                    <div class="bg-white/60 p-2 rounded border border-green-100 flex justify-between items-center">
-                                        <div class="flex flex-col">
-                                            <span class="text-[10px] font-bold text-green-800">${c.name}</span>
-                                            <span class="text-[8px] text-green-600">${c.priority === 'core' ? 'Wajib' : 'Opsional'}</span>
-                                        </div>
-                                        <span class="text-[9px] bg-green-200 text-green-800 px-1 rounded">${c.sks}</span>
-                                    </div>
-                                `).join('')}
-                            </div>
-                        </div>
-                        <div id="container-sem-6" class="flex-grow"></div>
-                    </div>
-                    <div id="container-sem-7"></div>
-                    <div id="container-sem-8"></div>
-                </div>
-            `;
-            
-            renderSem(5, 'container-sem-5');
-            renderSem(6, 'container-sem-6');
-            renderSem(7, 'container-sem-7');
-            renderSem(8, 'container-sem-8');
-
-            updateCharts();
-        }
-
-        function switchTrack(key) {
-            document.querySelectorAll('.track-btn').forEach(b => b.classList.remove('active'));
-            document.getElementById(`btn-${key}`).classList.add('active');
-            initPlan(key);
+            renderCatalog();
             renderAll();
         }
 
-        // --- DRAG & DROP WITH PARITY CHECK ---
-        let draggedItem = null;
+        function calculateSemStats(semId) {
+            const courses = currentPlan[semId] || [];
+            let totalSKS = 0;
+            let totalPoints = 0;
+            let loadSKS = 0; // Termasuk yang E
 
-        function drag(ev, semId, idx) {
-            draggedItem = { semId, idx };
-            ev.dataTransfer.effectAllowed = "move";
-            ev.target.style.opacity = '0.4';
-            
-            // Set global parity state for visual feedback
-            const isOddSource = semId % 2 !== 0;
-            document.body.classList.add(isOddSource ? 'dragging-odd' : 'dragging-even');
-            
-            // Visual Update: Dim invalid targets
-            document.querySelectorAll('.semester-list').forEach(el => {
-                const targetIsOdd = el.dataset.parity === 'odd';
-                if(isOddSource !== targetIsOdd) {
-                    el.classList.add('invalid-target');
-                } else {
-                    el.classList.add('valid-target-hint'); // Optional hint style
+            courses.forEach(c => {
+                loadSKS += c.sks;
+                // Hanya hitung IP dari sks yang diambil dan bukan yang ditandai mengulang (retake)
+                // Note: Jika mengulang di semester baru, grade awal akan fresh.
+                if(c.grade > 0) {
+                    totalSKS += c.sks;
+                    totalPoints += (c.sks * c.grade);
                 }
             });
+
+            const ips = totalSKS > 0 ? (totalPoints / totalSKS) : 0;
+            return { ips, loadSKS };
         }
 
-        function dragEndCleanup() {
-            document.body.classList.remove('dragging-odd', 'dragging-even');
-            document.querySelectorAll('.semester-list').forEach(el => {
-                el.classList.remove('drag-over', 'valid-target', 'invalid-target', 'valid-target-hint');
-            });
-            if(draggedItem) {
-                // Reset opacity if drag failed/cancelled
-                // Ideally found by element ref, but re-render fixes it anyway
+        function getMaxSKS(prevIPS) {
+            if (prevIPS >= 3.00) return 24;
+            if (prevIPS >= 2.50) return 22;
+            if (prevIPS >= 2.00) return 20;
+            return 18; 
+        }
+
+        function renderAll() {
+            const grid = document.getElementById('semester-grid');
+            grid.innerHTML = '';
+
+            for(let i=1; i<=8; i++) {
+                let maxSKS = 20;
+                let prevIPS = 0;
+                
+                if (i > 1) {
+                    const prevStats = calculateSemStats(i-1);
+                    prevIPS = prevStats.ips;
+                    maxSKS = getMaxSKS(prevIPS);
+                }
+
+                const currentStats = calculateSemStats(i);
+                const currentLoad = currentStats.loadSKS;
+                const isOverload = currentLoad > maxSKS;
+
+                const semDiv = document.createElement('div');
+                semDiv.className = `semester-container bg-white rounded-xl shadow-sm border ${isOverload ? 'overload' : 'border-slate-200'} overflow-hidden flex flex-col`;
+                
+                let headerContent = `
+                    <div class="flex justify-between items-center mb-1">
+                        <h3 class="font-bold text-slate-700">Semester ${i}</h3>
+                        <span class="text-xs font-bold ${isOverload ? 'text-red-600' : 'text-slate-500'}">
+                            ${currentLoad} / ${maxSKS} SKS
+                        </span>
+                    </div>
+                `;
+                
+                if (i > 1) {
+                    headerContent += `
+                        <div class="flex justify-between text-[10px] text-slate-400 border-t border-slate-100 pt-1 mt-1">
+                            <span>IPS Lalu: <strong class="${prevIPS < 2 ? 'text-red-500' : 'text-slate-600'}">${prevIPS.toFixed(2)}</strong></span>
+                            <span>Jatah: <strong>${maxSKS}</strong></span>
+                        </div>
+                    `;
+                } else {
+                     headerContent += `
+                        <div class="flex justify-between text-[10px] text-slate-400 border-t border-slate-100 pt-1 mt-1">
+                            <span>Mahasiswa Baru</span>
+                            <span>Paket Awal</span>
+                        </div>
+                    `;
+                }
+                
+                if (isOverload) {
+                     headerContent += `<div class="mt-1 text-[10px] text-red-600 font-bold bg-red-100 px-2 py-0.5 rounded text-center animate-pulse">OVERLOAD! Kurangi mata kuliah.</div>`;
+                }
+
+                semDiv.innerHTML = `
+                    <div class="bg-slate-50 px-4 py-3 border-b ${isOverload ? 'border-red-200 bg-red-50' : 'border-slate-200'}">
+                        ${headerContent}
+                    </div>
+                    <div class="semester-list p-3 space-y-2 flex-grow" ondrop="drop(event, ${i})" ondragover="allowDrop(event)">
+                    </div>
+                    <div class="px-4 py-2 bg-slate-50 border-t ${isOverload ? 'border-red-200' : 'border-slate-100'} text-right">
+                        <span class="text-[10px] uppercase font-bold text-slate-400">IPS: ${currentStats.ips.toFixed(2)}</span>
+                    </div>
+                `;
+
+                const listContainer = semDiv.querySelector('.semester-list');
+                currentPlan[i].forEach((c, idx) => {
+                    listContainer.appendChild(createCard(c, i, idx));
+                });
+
+                grid.appendChild(semDiv);
             }
-            draggedItem = null;
+
+            updateGlobalStats();
         }
 
-        function allowDrop(ev) { 
-            ev.preventDefault(); 
+        function createCard(c, semId, index) {
+            const card = document.createElement('div');
+            const catData = categories[c.cat] || { color: 'bg-gray-400' };
+            const isFailed = c.grade === 0;
+            const isRetake = c.isRetake === true;
+            
+            card.className = `course-card bg-white p-2 pl-4 rounded shadow-sm border border-slate-200 relative ${isFailed ? 'border-red-300 bg-red-50' : ''}`;
+            card.draggable = true;
+            card.setAttribute('ondragstart', `dragSemester(event, ${semId}, ${index})`);
+            card.oncontextmenu = (e) => { e.preventDefault(); showContextMenu(e, semId, index); };
+
+            let gradeClass = 'grade-A';
+            let gradeLabel = 'A';
+            if(c.grade === 3) { gradeClass = 'grade-B'; gradeLabel = 'B'; }
+            if(c.grade === 2) { gradeClass = 'grade-C'; gradeLabel = 'C'; }
+            if(c.grade === 1) { gradeClass = 'grade-D'; gradeLabel = 'D'; }
+            if(c.grade === 0) { gradeClass = 'grade-E'; gradeLabel = 'E'; }
+
+            card.innerHTML = `
+                <div class="cat-bar ${catData.color}"></div>
+                <div class="pr-6">
+                    <div class="text-xs font-bold text-slate-700 leading-tight mb-1 flex items-center">
+                        ${c.name}
+                        ${isRetake ? '<i class="fas fa-redo-alt text-[10px] text-blue-500 ml-2" title="Mengulang"></i>' : ''}
+                    </div>
+                    <div class="flex items-center gap-2">
+                         <span class="text-[10px] text-slate-500 bg-slate-100 px-1 rounded border">${c.sks} SKS</span>
+                    </div>
+                </div>
+                <div class="grade-badge ${gradeClass}">${gradeLabel}</div>
+            `;
+            return card;
         }
 
-        function dragEnter(ev) { 
-            ev.preventDefault();
-            const target = ev.currentTarget;
-            
-            // Check parity match visual
-            if(!draggedItem) return;
-            const sourceParity = draggedItem.semId % 2 !== 0 ? 'odd' : 'even';
-            const targetParity = target.dataset.parity;
-            
-            if(sourceParity === targetParity) {
-                target.classList.add('valid-target');
+        // --- Context Menu Logic ---
+        function showContextMenu(e, semId, index) {
+            contextTarget = { semId, index };
+            const menu = document.getElementById('context-menu');
+            const course = currentPlan[semId][index];
+            const btnRetake = document.getElementById('btn-retake');
+
+            // Show Retake button ONLY if Grade is E (0)
+            if (course.grade === 0) {
+                btnRetake.style.display = 'block';
+            } else {
+                btnRetake.style.display = 'none';
             }
+
+            menu.style.display = 'block';
+            
+            let x = e.pageX;
+            let y = e.pageY;
+            if(x + 200 > window.innerWidth) x -= 200;
+            
+            menu.style.left = `${x}px`;
+            menu.style.top = `${y}px`;
         }
 
-        function dragLeave(ev) { 
-            ev.currentTarget.classList.remove('valid-target');
+        function hideContextMenu() {
+            document.getElementById('context-menu').style.display = 'none';
         }
 
+        function setCourseGrade(grade) {
+            if(contextTarget) {
+                const { semId, index } = contextTarget;
+                currentPlan[semId][index].grade = grade;
+                
+                // Jika E, beri notifikasi untuk opsi ulang
+                if(grade === 0) {
+                    showToast("Mata kuliah Gagal (E). Klik kanan > 'Ulang di Tahun Depan' untuk memperbaiki.");
+                }
+                
+                renderAll();
+            }
+            hideContextMenu();
+        }
+
+        function retakeCourse() {
+            if(contextTarget) {
+                const { semId, index } = contextTarget;
+                const course = currentPlan[semId][index];
+                
+                // Target: 2 semester berikutnya (Tahun depan, semester ganjil/genap yang sama)
+                const targetSem = parseInt(semId) + 2;
+
+                if (targetSem > 8) {
+                    showToast("Maaf, semester tujuan ("+targetSem+") di luar jangkauan simulasi (Max Sem 8).");
+                } else {
+                    // Cek apakah course sudah ada di target
+                    const exists = currentPlan[targetSem].some(c => c.id === course.id);
+                    if (exists) {
+                        showToast("Mata kuliah ini sudah ada di Semester " + targetSem + ".");
+                    } else {
+                        // Copy course
+                        const newCourse = {
+                            ...course,
+                            grade: 4, // Default A saat mengambil ulang
+                            uuid: crypto.randomUUID(),
+                            isRetake: true
+                        };
+                        currentPlan[targetSem].push(newCourse);
+                        showToast(`Mata kuliah ditambahkan ke Semester ${targetSem}.`);
+                        renderAll();
+                    }
+                }
+            }
+            hideContextMenu();
+        }
+
+        function deleteCourse() {
+             if(contextTarget) {
+                const { semId, index } = contextTarget;
+                currentPlan[semId].splice(index, 1);
+                renderAll();
+            }
+            hideContextMenu();
+        }
+        
+        function showToast(msg) {
+            const el = document.getElementById("toast");
+            el.innerText = msg;
+            el.className = "show";
+            setTimeout(function(){ el.className = el.className.replace("show", ""); }, 4000);
+        }
+
+        document.addEventListener('click', (e) => {
+            // Close context menu if clicking outside
+            if(!e.target.closest('#context-menu') && !e.target.closest('.course-card')) {
+                hideContextMenu();
+            }
+        });
+
+        // --- Drag & Drop ---
+        let dragSource = null;
+
+        function dragCatalog(ev, id, name, sks, cat) {
+            dragSource = { type: 'catalog', course: { id, name, sks: parseInt(sks), cat, grade: 4, uuid: crypto.randomUUID() } };
+            ev.dataTransfer.effectAllowed = "copy";
+        }
+
+        function dragSemester(ev, semId, index) {
+            dragSource = { type: 'semester', semId, index };
+            ev.dataTransfer.effectAllowed = "move";
+            ev.target.classList.add('dragging');
+        }
+
+        function allowDrop(ev) { ev.preventDefault(); }
+
         function drop(ev, targetSem) {
             ev.preventDefault();
-            
-            if (!draggedItem) {
-                dragEndCleanup();
-                return;
-            }
+            document.querySelectorAll('.course-card').forEach(el => el.classList.remove('dragging'));
 
-            const { semId, idx } = draggedItem;
-            
-            // --- VALIDATION: PARITY CHECK ---
-            const sourceParity = semId % 2;
-            const targetParity = targetSem % 2;
+            if(!dragSource) return;
 
-            if (sourceParity !== targetParity) {
-                // Invalid Drop
-                // alert("Mata kuliah Ganjil hanya bisa diambil di Semester Ganjil, dan Genap di Genap.");
-                dragEndCleanup();
-                renderAll(); // Reset visual state
-                return;
-            }
-            // --------------------------------
-
-            if (semId !== targetSem) {
-                // Move logic
-                const course = currentPlan[semId][idx];
-                currentPlan[semId].splice(idx, 1);
-                currentPlan[targetSem].push(course);
-                
-                dragEndCleanup();
-                renderAll(); 
+            if(dragSource.type === 'catalog') {
+                currentPlan[targetSem].push(dragSource.course);
             } else {
-                dragEndCleanup();
-                renderAll(); 
+                const { semId, index } = dragSource;
+                if(semId === targetSem) return;
+                const item = currentPlan[semId][index];
+                currentPlan[semId].splice(index, 1);
+                currentPlan[targetSem].push(item);
             }
+
+            renderAll();
+            dragSource = null;
         }
+
+        // --- Sidebar & Catalog ---
+        function toggleCatalog() { document.getElementById('catalog-sidebar').classList.toggle('closed'); }
         
-        // Add global dragend listener to ensure cleanup happens even if dropped outside
-        document.addEventListener('dragend', dragEndCleanup);
+        function renderCatalog() {
+            const list = document.getElementById('catalog-list');
+            list.innerHTML = '';
+            
+            let allCourses = [];
+            for(let i=1; i<=8; i++) if(baseCurriculum[i]) allCourses.push(...baseCurriculum[i]);
+            allCourses.push(...(electives[currentTrackId] || []));
 
-        // --- CHARTS ---
-        let sksChart = null;
+            const unique = [];
+            const seen = new Set();
+            allCourses.forEach(c => { if(!seen.has(c.id)){ seen.add(c.id); unique.push(c); } });
 
-        function updateCharts() {
-            // Calc SKS
-            let dataSKS = [];
-            let bgColors = [];
+            unique.forEach(c => {
+                const el = document.createElement('div');
+                const catData = categories[c.cat] || {color: 'bg-gray-400'};
+                el.className = 'bg-white border border-slate-200 p-2 rounded cursor-grab hover:bg-slate-50 flex items-center justify-between text-sm shadow-sm transition-transform hover:scale-[1.02]';
+                el.draggable = true;
+                el.setAttribute('ondragstart', `dragCatalog(event, '${c.id}', '${c.name}', ${c.sks}, '${c.cat}')`);
+                el.innerHTML = `
+                    <div class="flex items-center gap-2">
+                        <div class="w-1.5 h-8 ${catData.color} rounded-sm"></div>
+                        <div>
+                            <div class="font-bold text-slate-700 text-xs">${c.name}</div>
+                            <div class="text-[10px] text-slate-400">${c.cat} | ${c.sks} SKS</div>
+                        </div>
+                    </div>
+                    <i class="fas fa-plus text-slate-300"></i>
+                `;
+                list.appendChild(el);
+            });
+        }
+
+        function filterCatalog() {
+            const term = document.getElementById('search-catalog').value.toLowerCase();
+            document.querySelectorAll('#catalog-list > div').forEach(item => {
+                item.style.display = item.innerText.toLowerCase().includes(term) ? 'flex' : 'none';
+            });
+        }
+
+        function switchTrack(trackId) {
+            document.querySelectorAll('.track-btn').forEach(b => {
+                b.classList.remove('bg-slate-800', 'text-white');
+                b.classList.add('bg-white', 'text-slate-800');
+            });
+            const btn = document.getElementById(`btn-${trackId}`);
+            btn.classList.remove('bg-white', 'text-slate-800');
+            btn.classList.add('bg-slate-800', 'text-white');
+            
+            initPlan(trackId);
+        }
+
+        // --- Analytics ---
+        let ipsChart = null;
+        let domainChart = null;
+
+        function updateGlobalStats() {
             let totalSKS = 0;
+            let totalPoints = 0;
+            let failedSKS = 0;
+            let semIPS = [];
+            let catCounts = { MKWU:0, BSC:0, FND:0, CORE:0, ADV:0, PROF:0, EL:0 };
 
             for(let i=1; i<=8; i++) {
-                const s = currentPlan[i].reduce((a,b)=>a+b.sks, 0);
-                dataSKS.push(s);
-                totalSKS += s;
-
-                // Color logic: Red if overload
-                let limit = 24;
-                if(i > 1) limit = calculateMaxSKS(semesterStats[i-1].gpa);
+                const stats = calculateSemStats(i);
+                semIPS.push(stats.ips);
                 
-                if (s > limit) bgColors.push('#ef4444');
-                else bgColors.push('#d6d3d1');
+                currentPlan[i].forEach(c => {
+                    // SKS yang dihitung di Global Stats adalah yang LULUS (Grade > 0)
+                    if (c.grade > 0) {
+                        totalSKS += c.sks;
+                        totalPoints += (c.sks * c.grade);
+                        const cat = c.cat === 'CAP' || c.cat === 'RES' ? 'PROF' : c.cat; 
+                        if(catCounts[cat] !== undefined) catCounts[cat] += c.sks;
+                    } else {
+                        failedSKS += c.sks;
+                    }
+                });
             }
 
-            // Update Total Display
-            document.getElementById('grand-total-sks').textContent = totalSKS;
-            const statusEl = document.getElementById('graduation-status');
-            if(totalSKS >= 144) {
-                statusEl.textContent = "Siap Lulus";
-                statusEl.className = "mt-4 px-4 py-2 rounded-full text-sm font-bold bg-green-100 text-green-700";
-            } else {
-                statusEl.textContent = `Kurang ${144 - totalSKS} SKS`;
-                statusEl.className = "mt-4 px-4 py-2 rounded-full text-sm font-bold bg-red-100 text-red-700";
-            }
+            const ipk = totalSKS > 0 ? (totalPoints / totalSKS) : 0;
+            document.getElementById('total-sks-passed').innerText = totalSKS;
+            document.getElementById('ipk-global').innerText = ipk.toFixed(2);
+            document.getElementById('total-fail').innerText = failedSKS;
 
-            // Chart
-            const ctx = document.getElementById('sksChart').getContext('2d');
-            if(sksChart) sksChart.destroy();
+            let predikat = "Memuaskan";
+            if (ipk >= 3.51) predikat = "Cum Laude";
+            else if (ipk >= 3.01) predikat = "Sangat Memuaskan";
+            else if (ipk < 2.00) predikat = "Nasakom";
+            document.getElementById('predikat-ipk').innerText = predikat;
 
-            sksChart = new Chart(ctx, {
-                type: 'bar',
+            // Chart 1: IPS Trend
+            const ctx1 = document.getElementById('ipsChart').getContext('2d');
+            if(ipsChart) ipsChart.destroy();
+            ipsChart = new Chart(ctx1, {
+                type: 'line',
                 data: {
                     labels: ['S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8'],
                     datasets: [{
-                        label: 'SKS',
-                        data: dataSKS,
-                        backgroundColor: bgColors,
-                        borderRadius: 4
+                        label: 'IPS',
+                        data: semIPS,
+                        borderColor: '#2563eb',
+                        backgroundColor: 'rgba(37, 99, 235, 0.1)',
+                        fill: true,
+                        tension: 0.3
                     }]
                 },
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
-                    scales: { y: { beginAtZero: true, max: 28 } },
+                    scales: { y: { min: 0, max: 4 } },
                     plugins: { legend: { display: false } }
                 }
             });
+
+            // Chart 2: Domain
+            const ctx2 = document.getElementById('domainChart').getContext('2d');
+            if(domainChart) domainChart.destroy();
+            domainChart = new Chart(ctx2, {
+                type: 'doughnut',
+                data: {
+                    labels: Object.keys(catCounts),
+                    datasets: [{
+                        data: Object.values(catCounts),
+                        backgroundColor: ['#f472b6', '#22c55e', '#60a5fa', '#fb923c', '#c084fc', '#94a3b8', '#facc15'],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { position: 'right', labels: { boxWidth: 10, font: {size: 9} } } }
+                }
+            });
         }
 
-        // Init
-        window.addEventListener('DOMContentLoaded', () => {
-            switchTrack('ai');
+        document.addEventListener('DOMContentLoaded', () => {
+            initPlan('general');
         });
 
     </script>
