diff --git a/backend/ai_service.py b/backend/ai_service.py
index 71aaf7e..eedd460 100644
--- a/backend/ai_service.py
+++ b/backend/ai_service.py
@@ -95,9 +95,21 @@ def get_explain_prompt(code: str, lang: str) -> str:
 [Identify the primary DSA patterns, algorithms, or data structures used in this code, e.g. Sliding Window, DFS, Hash Table, Stack, Binary Search. Provide 1-2 sentences explaining why this pattern fits the problem.]
 DSA_PATTERN_END
 
-LEETCODE_PROBLEMS_START
-[Suggest 3 related LeetCode problems that practice this pattern. For each, output: Title | Link (use standard https://leetcode.com/problems/... urls). Use newlines to separate.]
-LEETCODE_PROBLEMS_END
+PLATFORM_PROBLEMS_START
+[Suggest 4-5 related practice problems for this pattern. CRITICAL ACCURACY MANDATE: You MUST include problem links ONLY for exact problem matches on that platform. Do NOT output a link if the platform does not feature that exact problem. Do NOT output generic or mismatched problem links. Mix of platforms (GeeksforGeeks, HackerRank, Codeforces, Coding Ninjas, and LeetCode). For each problem, output strictly on a new line: Platform | Title | Link (use actual valid problem URLs like https://www.geeksforgeeks.org/..., https://www.hackerrank.com/..., https://codeforces.com/..., https://leetcode.com/...).]
+PLATFORM_PROBLEMS_END
+
+OPTIMIZED_CODE_START
+[Provide the absolute most optimal version of the analyzed code in terms of time and space complexity. Do NOT use markdown code fences inside this tag. CRITICAL RULE: If the input code is ALREADY optimal in both time and space complexity, write strictly `ALREADY_OPTIMIZED` inside this block.]
+OPTIMIZED_CODE_END
+
+OPTIMIZED_TIME_COMPLEXITY_START
+[State the exact Big-O time complexity of the optimized code, e.g. O(N) linear time.]
+OPTIMIZED_TIME_COMPLEXITY_END
+
+OPTIMIZED_SPACE_COMPLEXITY_START
+[State the exact Big-O space complexity of the optimized code, e.g. O(1) constant space.]
+OPTIMIZED_SPACE_COMPLEXITY_END
 
 PRACTICE_EXERCISES_START
 [Provide 3 practice questions (Beginner, Intermediate, Advanced) that build on this concept. For each, output the difficulty, aim, and a brief sample input/output. Use clean Markdown structure.]
@@ -150,15 +162,18 @@ def get_dry_run_prompt(code: str, lang: str, test_case: str = None) -> str:
 CRITICAL VISUALIZATION RULES:
 1. If the code uses, traverses, or modifies any array, vector, list, or string (like search, sort, two-sum, reverse, sub-array, etc.), you MUST set "ds_type": "array" and "ds_data" to the current state of that array (e.g. [2, 7, 11, 15] or [0, 1, 1, 0, 1]). You MUST track the pointer indices (like i, j, k, low, mid, high, left, right, slow, fast) inside the "variables" object (e.g. {{"i": 1, "target": 9}}) so the frontend can float pointer arrows above/below the array boxes.
 2. If the code uses a map, dictionary, or set (like std::map, unordered_map, set, dict), set "ds_type": "map" or "ds_type": "set". Set "ds_data" to the key-value dictionary (e.g. {{ "2": 0, "7": 1 }}) or set element array (e.g. [2, 7]).
-3. End the array with a step representing the final return/output value.]
+3. Trace boundary cases and out-of-bound pointer index values (e.g. low > high, i = -1, i = N) inside the "variables" object when loop termination or out-of-bound checks occur so boundary conditions can be visually demonstrated.
+4. End the array with a step representing the final return/output value.]
 DRY_RUN_END
 
 FLOWCHART_START
-[Generate a beautiful, logical Mermaid.js control flow diagram (graph TD) showing the execution flow of the code. 
-Use clean shapes and semantic nodes:
-- Start/End steps: Use rounded brackets with double-quoted labels like `A("Start"):::startEnd` or `Z("End"):::startEnd`.
-- Conditionals/Decisions: Use brace nodes with double-quoted labels like `B{{"Is condition met?"}}:::decision` (write this with double curly braces) and label paths clearly using `-- Yes -->` or `-- No -->`.
-- Standard statements/process: Use square brackets with double-quoted labels like `C["Process/Action"]:::default`.
+[Generate a clean, valid Mermaid.js control flow diagram (graph TD) showing the execution flow of the code. 
+CRITICAL MERMAID SYNTAX RULES:
+1. ALWAYS wrap ALL node label texts inside double quotes, e.g. `A["Start"]:::startEnd` or `B["Initialize maxi = 0"]:::default`.
+2. NEVER put spaces before `:::` (write `:::default`, NOT ` ::: default`).
+3. DO NOT use semicolons `;` at the end of lines.
+4. If using subgraphs, ALWAYS wrap the subgraph name in double quotes, e.g. `subgraph "findi(root, &maxi)"`.
+5. Label decision paths strictly using `-->|"Yes"|`.
 
 Include these class definitions in the flowchart output to apply our custom color theme:
 classDef default fill:#122858,stroke:#3ecfb2,stroke-width:1.5px,color:#f3f5ed;
@@ -168,7 +183,12 @@ def get_dry_run_prompt(code: str, lang: str, test_case: str = None) -> str:
 FLOWCHART_END
 
 RECURSION_TREE_START
-[If the code uses recursion, generate a beautiful, logical Mermaid.js graph TD diagram representing the recursion tree of the execution with the actual arguments and values. Use custom color classes. If the code does not use recursion, write RECURSION_NONE.
+[If the code uses recursion, generate a clean, valid Mermaid.js graph TD diagram representing the recursion tree of the execution with the actual arguments and values. Use custom color classes. If the code does not use recursion, write RECURSION_NONE.
+CRITICAL MERMAID SYNTAX RULES:
+1. ALWAYS wrap ALL node label texts in double quotes, e.g. `A["solve(5)"]:::default`.
+2. NEVER put spaces before `:::`.
+3. If using subgraphs, ALWAYS wrap the title in double quotes, e.g. `subgraph "solve(n)"`.
+
 Include these class definitions in the flowchart output to apply our custom color theme:
 classDef default fill:#122858,stroke:#3ecfb2,stroke-width:1.5px,color:#f3f5ed;
 classDef decision fill:#0f2348,stroke:#c9a84c,stroke-width:1.5px,color:#c9a84c;
@@ -196,13 +216,13 @@ async def analyze_code(code: str, language: str, test_case: str = None, api_key:
     prompt2 = get_dry_run_prompt(code, language, test_case)
     
     async def call_gemini(prompt: str):
-        for attempt in range(2):
+        for attempt in range(3):
             try:
                 response = await asyncio.to_thread(client.models.generate_content, model=MODEL_NAME, contents=prompt)
                 return response.text
             except Exception as e:
-                if "429" in str(e) and attempt == 0:
-                    await asyncio.sleep(5)
+                if ("429" in str(e) or "RESOURCE_EXHAUSTED" in str(e)) and attempt < 2:
+                    await asyncio.sleep(4 * (attempt + 1))
                 else:
                     raise e
 
@@ -220,7 +240,10 @@ async def call_gemini(prompt: str):
         "space_complexity":  _extract(r1, "SPACE_COMPLEXITY_START",  "SPACE_COMPLEXITY_END"),
         "suggestions":       _extract(r1, "SUGGESTIONS_START",       "SUGGESTIONS_END"),
         "dsa_pattern":       _extract(r1, "DSA_PATTERN_START",       "DSA_PATTERN_END"),
-        "leetcode_problems": _extract(r1, "LEETCODE_PROBLEMS_START", "LEETCODE_PROBLEMS_END"),
+        "platform_problems": _extract(r1, "PLATFORM_PROBLEMS_START", "PLATFORM_PROBLEMS_END"),
+        "optimized_code":    _extract(r1, "OPTIMIZED_CODE_START",    "OPTIMIZED_CODE_END"),
+        "optimized_time_complexity": _extract(r1, "OPTIMIZED_TIME_COMPLEXITY_START", "OPTIMIZED_TIME_COMPLEXITY_END"),
+        "optimized_space_complexity": _extract(r1, "OPTIMIZED_SPACE_COMPLEXITY_START", "OPTIMIZED_SPACE_COMPLEXITY_END"),
         "practice_exercises":_extract(r1, "PRACTICE_EXERCISES_START", "PRACTICE_EXERCISES_END"),
         "interview_questions":_extract(r1, "INTERVIEW_QUESTIONS_START", "INTERVIEW_QUESTIONS_END"),
         "algorithm":         _extract(r1, "ALGORITHM_START",         "ALGORITHM_END"),
diff --git a/backend/test_features.py b/backend/test_features.py
index 471d88b..a4a0c22 100644
--- a/backend/test_features.py
+++ b/backend/test_features.py
@@ -35,7 +35,10 @@ async def test_all():
         print(f"  Time complexity: {res.get('time_complexity')}")
         print("\n--- NEW LEARNING PLATFORM FIELDS ---")
         print(f"  DSA Pattern: {res.get('dsa_pattern')}")
-        print(f"  LeetCode Problems: {res.get('leetcode_problems')}")
+        print(f"  Platform Problems: {res.get('platform_problems')}")
+        print(f"  Optimized Code: {res.get('optimized_code')}")
+        print(f"  Optimized Time Complexity: {res.get('optimized_time_complexity')}")
+        print(f"  Optimized Space Complexity: {res.get('optimized_space_complexity')}")
         print(f"  Practice Exercises: {res.get('practice_exercises')}")
         print(f"  Interview Questions: {res.get('interview_questions')}")
         print(f"  Algorithm: {res.get('algorithm')}")
diff --git a/backend/test_mock_ai.py b/backend/test_mock_ai.py
index 518683e..565c097 100644
--- a/backend/test_mock_ai.py
+++ b/backend/test_mock_ai.py
@@ -42,9 +42,23 @@
 Simple Output Pattern
 DSA_PATTERN_END
 
-LEETCODE_PROBLEMS_START
-Hello World | https://leetcode.com/problems/hello-world
-LEETCODE_PROBLEMS_END
+PLATFORM_PROBLEMS_START
+LeetCode | Hello World | https://leetcode.com/problems/hello-world
+GeeksforGeeks | Print Hello World | https://www.geeksforgeeks.org/print-hello-world
+HackerRank | Say Hello World | https://www.hackerrank.com/challenges/say-hello-world
+PLATFORM_PROBLEMS_END
+
+OPTIMIZED_CODE_START
+print('hello')
+OPTIMIZED_CODE_END
+
+OPTIMIZED_TIME_COMPLEXITY_START
+O(1) constant time
+OPTIMIZED_TIME_COMPLEXITY_END
+
+OPTIMIZED_SPACE_COMPLEXITY_START
+O(1) constant space
+OPTIMIZED_SPACE_COMPLEXITY_END
 
 PRACTICE_EXERCISES_START
 Q1. Print something else.
@@ -106,7 +120,7 @@ async def run_mock_test():
     
     # Side effect function to return different mock responses
     call_count = 0
-    def mock_generate_content(model, contents):
+    def mock_generate_content(model, contents, **kwargs):
         nonlocal call_count
         call_count += 1
         if call_count == 1:
@@ -124,6 +138,10 @@ def mock_generate_content(model, contents):
         assert result["time_complexity"] == "O(1) constant time", f"Got {result['time_complexity']}"
         assert result["recursion_tree"] == "RECURSION_NONE", f"Got {result['recursion_tree']}"
         assert "Prints hello" in result["dry_run"], f"Got {result['dry_run']}"
+        assert "GeeksforGeeks" in result["platform_problems"], f"Got {result['platform_problems']}"
+        assert result["optimized_code"] == "print('hello')", f"Got {result['optimized_code']}"
+        assert result["optimized_time_complexity"] == "O(1) constant time", f"Got {result['optimized_time_complexity']}"
+        assert result["optimized_space_complexity"] == "O(1) constant space", f"Got {result['optimized_space_complexity']}"
         
         print("[SUCCESS] Unit test passed! Parallel prompt queries executed and parsed correctly.")
 
diff --git a/frontend/index.html b/frontend/index.html
index c9919ff..4a17465 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -49,6 +49,167 @@
       --fm: 'JetBrains Mono', monospace;
     }
 
+    html[data-theme="light"] {
+      --bg: #ffffff;
+      --bg2: #f6f8fa;
+      --bg3: #eaeea2;
+      --bg3: #f0f3f6;
+      --bg4: #d0d7de;
+      --bgi: #f8fafc;
+      --tx1: #1f2328;
+      --tx2: #57606a;
+      --tx3: #8c959f;
+      --gold: #9a6700;
+      --gold2: rgba(154, 103, 0, .14);
+      --gold3: rgba(154, 103, 0, .06);
+      --blue: #0969da;
+      --blue2: rgba(9, 105, 218, .13);
+      --teal: #1a7f37;
+      --teal2: rgba(26, 127, 55, .13);
+      --red: #cf222e;
+      --red2: rgba(207, 34, 46, .13);
+      --purp: #8250df;
+      --purp2: rgba(130, 80, 223, .10);
+      --coral: #bc4c00;
+      --amber: #b08800;
+      --b1: rgba(31, 35, 40, .12);
+      --b2: rgba(31, 35, 40, .20);
+    }
+
+    html[data-theme="dimmed"] {
+      --bg: #22272e;
+      --bg2: #2d333b;
+      --bg3: #373e47;
+      --bg4: #444c56;
+      --bgi: #1c2128;
+      --tx1: #adbac7;
+      --tx2: #768390;
+      --tx3: #636e7b;
+      --gold: #c69026;
+      --gold2: rgba(198, 144, 38, .16);
+      --gold3: rgba(198, 144, 38, .08);
+      --blue: #539bf5;
+      --blue2: rgba(83, 155, 245, .15);
+      --teal: #34d058;
+      --teal2: rgba(52, 208, 88, .15);
+      --red: #f47067;
+      --red2: rgba(244, 112, 103, .15);
+      --purp: #babbf9;
+      --purp2: rgba(186, 187, 249, .12);
+      --coral: #f69d50;
+      --amber: #daaa3f;
+      --b1: rgba(205, 217, 229, .10);
+      --b2: rgba(205, 217, 229, .18);
+    }
+
+    html[data-theme="tritanopia"] {
+      --bg: #041724;
+      --bg2: #092233;
+      --bg3: #103047;
+      --bg4: #19415c;
+      --bgi: #020f18;
+      --tx1: #e0f2fe;
+      --tx2: #7dd3fc;
+      --tx3: #38bdf8;
+      --gold: #06b6d4;
+      --gold2: rgba(6, 182, 212, .18);
+      --gold3: rgba(6, 182, 212, .08);
+      --blue: #38bdf8;
+      --blue2: rgba(56, 189, 248, .18);
+      --teal: #14b8a6;
+      --teal2: rgba(20, 184, 166, .18);
+      --red: #f43f5e;
+      --red2: rgba(244, 63, 94, .18);
+      --purp: #c084fc;
+      --purp2: rgba(192, 132, 252, .15);
+      --coral: #fb7185;
+      --amber: #06b6d4;
+      --b1: rgba(56, 189, 248, .15);
+      --b2: rgba(56, 189, 248, .25);
+    }
+
+    html[data-theme="deuteranopia"] {
+      --bg: #120e24;
+      --bg2: #1c1736;
+      --bg3: #28214a;
+      --bg4: #352c61;
+      --bgi: #0a0717;
+      --tx1: #f3e8ff;
+      --tx2: #c084fc;
+      --tx3: #a855f7;
+      --gold: #f59e0b;
+      --gold2: rgba(245, 158, 11, .18);
+      --gold3: rgba(245, 158, 11, .08);
+      --blue: #3b82f6;
+      --blue2: rgba(59, 130, 246, .18);
+      --teal: #60a5fa;
+      --teal2: rgba(96, 165, 250, .18);
+      --red: #f97316;
+      --red2: rgba(249, 115, 22, .18);
+      --purp: #d946ef;
+      --purp2: rgba(217, 70, 239, .15);
+      --coral: #f97316;
+      --amber: #f59e0b;
+      --b1: rgba(192, 132, 252, .15);
+      --b2: rgba(192, 132, 252, .25);
+    }
+
+    html[data-theme="protanopia"] {
+      --bg: #1c1917;
+      --bg2: #292524;
+      --bg3: #3f3e3a;
+      --bg4: #52524e;
+      --bgi: #12100e;
+      --tx1: #fef08a;
+      --tx2: #fde047;
+      --tx3: #ca8a04;
+      --gold: #eab308;
+      --gold2: rgba(234, 179, 8, .18);
+      --gold3: rgba(234, 179, 8, .08);
+      --blue: #0284c7;
+      --blue2: rgba(2, 132, 199, .18);
+      --teal: #06b6d4;
+      --teal2: rgba(6, 182, 212, .18);
+      --red: #d97706;
+      --red2: rgba(217, 119, 6, .18);
+      --purp: #8b5cf6;
+      --purp2: rgba(139, 92, 246, .15);
+      --coral: #eab308;
+      --amber: #facc15;
+      --b1: rgba(234, 179, 8, .15);
+      --b2: rgba(234, 179, 8, .25);
+    }
+
+    html[data-theme="high-contrast"] {
+      --bg: #000000;
+      --bg2: #0d0d0d;
+      --bg3: #1a1a1a;
+      --bg4: #262626;
+      --bgi: #000000;
+      --tx1: #ffffff;
+      --tx2: #e5e5e5;
+      --tx3: #a3a3a3;
+      --gold: #ffff00;
+      --gold2: rgba(255, 255, 0, .25);
+      --gold3: rgba(255, 255, 0, .12);
+      --blue: #00ffff;
+      --blue2: rgba(0, 255, 255, .25);
+      --teal: #00ff00;
+      --teal2: rgba(0, 255, 0, .25);
+      --red: #ff0055;
+      --red2: rgba(255, 0, 85, .25);
+      --purp: #ff00ff;
+      --purp2: rgba(255, 0, 255, .22);
+      --coral: #ffaa00;
+      --amber: #ffff00;
+      --b1: rgba(255, 255, 255, .28);
+      --b2: rgba(255, 255, 255, .45);
+    }
+
+    html[data-theme="light"] body::before {
+      opacity: 0.15;
+    }
+
     *,
     *::before,
     *::after {
@@ -65,9 +226,12 @@
       background: var(--bg);
       color: var(--tx1);
       font-family: var(--fb);
+      height: 100vh;
       min-height: 100vh;
+      display: flex;
+      flex-direction: column;
       -webkit-font-smoothing: antialiased;
-      overflow-x: hidden
+      overflow: hidden
     }
 
     .hidden {
@@ -85,11 +249,11 @@
     }
 
     .hdr {
-      position: sticky;
-      top: 0;
+      position: relative;
       z-index: 100;
       height: 56px;
-      background: rgba(10, 25, 49, .95);
+      flex-shrink: 0;
+      background: var(--bg2);
       backdrop-filter: blur(20px);
       border-bottom: 1px solid var(--b1)
     }
@@ -218,14 +382,17 @@
 
     .layout {
       max-width: 1480px;
+      width: 100%;
       margin: 0 auto;
-      padding: 18px 22px;
+      padding: 14px 22px;
       display: flex;
       flex-direction: row;
-      min-height: calc(100vh - 56px);
+      flex: 1 1 0%;
+      height: calc(100vh - 56px);
       position: relative;
       z-index: 1;
       gap: 0;
+      overflow: hidden;
     }
 
     .resizer {
@@ -279,7 +446,8 @@
       gap: 12px;
       box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
       position: relative;
-      overflow: hidden
+      height: 100%;
+      overflow-y: auto;
     }
 
     .panel::before {
@@ -292,9 +460,20 @@
       background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .22), transparent)
     }
 
+    .panel::-webkit-scrollbar,
+    .pr::-webkit-scrollbar {
+      width: 4px
+    }
+
+    .panel::-webkit-scrollbar-thumb,
+    .pr::-webkit-scrollbar-thumb {
+      background: var(--b2);
+      border-radius: 2px
+    }
+
     .pr {
       overflow-y: auto;
-      max-height: calc(100vh - 56px - 36px)
+      height: 100%;
     }
 
     .pr::-webkit-scrollbar {
@@ -2090,6 +2269,100 @@
       opacity: 1;
       transform: translateY(0);
     }
+
+    /* Glassmorphic Multi-Platform Dropdown & Optimized Code Container */
+    .dsa-hdr-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 10px;
+    }
+
+    .dsa-platform-sel-wr {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .dsa-platform-select {
+      background: var(--bg3);
+      border: 1px solid var(--b2);
+      border-radius: var(--r1);
+      color: var(--tx1);
+      font-family: var(--fui);
+      font-size: 0.68rem;
+      font-weight: 600;
+      padding: 5px 26px 5px 10px;
+      outline: none;
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+      backdrop-filter: blur(8px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      transition: all 0.25s ease;
+    }
+
+    .dsa-platform-select:hover {
+      background: var(--bg4);
+      border-color: var(--gold);
+      color: var(--gold);
+      box-shadow: 0 4px 16px rgba(201, 168, 76, 0.15);
+    }
+
+    .dsa-platform-select:focus {
+      border-color: var(--blue);
+      box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.25);
+    }
+
+    .optcode-card {
+      background: var(--bg3);
+      border: 1px solid var(--b1);
+      border-radius: var(--r2);
+      padding: 14px;
+      margin-top: 14px;
+      margin-bottom: 16px;
+      transition: all 0.3s ease;
+    }
+
+    .optcode-card:hover {
+      border-color: rgba(62, 207, 178, 0.3);
+      box-shadow: 0 6px 20px rgba(62, 207, 178, 0.08);
+    }
+
+    .optcode-hdr {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+
+    .optcode-badges {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    .optcode-badge {
+      font-family: var(--fm);
+      font-size: 0.66rem;
+      padding: 3px 8px;
+      border-radius: 4px;
+      font-weight: 600;
+    }
+
+    .optcode-badge.time {
+      background: var(--gold2);
+      border: 1px solid rgba(201, 168, 76, 0.25);
+      color: var(--gold);
+    }
+
+    .optcode-badge.space {
+      background: var(--teal2);
+      border: 1px solid rgba(62, 207, 178, 0.25);
+      color: var(--teal);
+    }
   </style>
 </head>
 
@@ -2110,7 +2383,21 @@
       <span class="hdr-sub">Powered by Gemini</span>
       <div class="hdr-r">
         <div class="spill" id="spill"><span class="sdot"></span><span id="spillTxt">Checking…</span></div>
-        <button class="key-cfg-btn" id="keyCfgBtn" onclick="openKeyModal()" title="Configure Gemini API Key">
+        <div class="sel-wr" style="margin-right: 2px;">
+          <select class="lang-sel" id="themeSelHeader" onchange="setTheme(this.value)" style="padding: 4px 22px 4px 8px; font-size: 0.65rem; background: var(--bg3); border-color: var(--b2);" title="Change Theme / Appearance">
+            <option value="dark">🌙 Dark</option>
+            <option value="light">☀️ Light</option>
+            <option value="dimmed">🌫️ Dimmed</option>
+            <option value="tritanopia">👁️ Tritanopia</option>
+            <option value="deuteranopia">👁️ Deuteranopia</option>
+            <option value="protanopia">👁️ Protanopia</option>
+            <option value="high-contrast">⚡ High Contrast</option>
+          </select>
+          <svg class="sel-arr" width="9" height="9" viewBox="0 0 12 12" style="right: 6px;">
+            <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+        </div>
+        <button class="key-cfg-btn" id="keyCfgBtn" onclick="openKeyModal()" title="Configure Gemini API Key & Settings">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round">
             <path
@@ -2338,6 +2625,21 @@ <h3 class="empty-h">Ready to analyze</h3>
           <!-- Suggestions -->
           <div class="slbl"><span class="sd teal"></span>Optimization Suggestions</div>
           <div class="slist" id="slist"></div>
+
+          <!-- Optimized Code Block -->
+          <div id="optcode-card" class="optcode-card hidden">
+            <div class="optcode-hdr">
+              <span class="slbl" style="margin:0;"><span class="sd teal"></span>Optimized Version</span>
+              <button class="cpybtn" onclick="cpyOptimized()">⎘ Copy</button>
+            </div>
+            <div class="optcode-badges">
+              <span class="optcode-badge time" id="optTimeBdg">Time: O(?)</span>
+              <span class="optcode-badge space" id="optSpaceBdg">Space: O(?)</span>
+            </div>
+            <div class="cfwrap" style="margin-top:6px;">
+              <pre class="cfpre" id="optcode-pre" style="color:var(--teal)"></pre>
+            </div>
+          </div>
         </div>
         <div class="osec hidden" id="sec-bugs">
           <div class="slbl"><span class="sd red"></span>Bug &amp; Error Detection</div>
@@ -2431,7 +2733,22 @@ <h3 class="empty-h">Ready to analyze</h3>
           <div class="slbl"><span class="sd gold"></span>DSA Pattern & Concept</div>
           <div id="dsa-pattern-desc" style="font-size:0.75rem; color:var(--tx2); line-height:1.65; background:var(--bg3); padding:12px; border-radius:var(--r2); border:1px solid var(--b1); margin-bottom:12px;"></div>
           
-          <div class="slbl"><span class="sd blue"></span>LeetCode Practice Problems</div>
+          <div class="dsa-hdr-wrap">
+            <div class="slbl" style="margin:0;"><span class="sd blue"></span>Platform Practice Problems</div>
+            <div class="dsa-platform-sel-wr">
+              <select id="dsa-platform-select" class="dsa-platform-select">
+                <option value="all">⚡ All Platforms</option>
+                <option value="LeetCode">LeetCode</option>
+                <option value="GeeksforGeeks">GeeksforGeeks</option>
+                <option value="HackerRank">HackerRank</option>
+                <option value="Coding Ninjas">Coding Ninjas</option>
+                <option value="Codeforces">Codeforces</option>
+              </select>
+              <svg class="sel-arr" width="11" height="11" viewBox="0 0 12 12" style="right: 8px;">
+                <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+              </svg>
+            </div>
+          </div>
           <div id="dsa-leetcode-list" style="display:flex; flex-direction:column; gap:6px; margin-bottom:12px;"></div>
           
           <div class="slbl"><span class="sd teal"></span>Concept Practice Exercises</div>
@@ -2514,6 +2831,21 @@ <h3>⚙️ Configure Settings</h3>
           </a>
         </div>
 
+        <div class="kmodal-field" style="margin-top: 14px;">
+          <label for="themeSelModal">Appearance Mode</label>
+          <div class="key-input-container">
+            <select id="themeSelModal" onchange="setTheme(this.value)" style="width:100%; background:transparent; border:none; color:var(--tx1); font-family:var(--fui); font-size:0.78rem; padding:10px 12px; outline:none; cursor:pointer;">
+              <option value="dark" style="background:var(--bg2);">🌙 Dark Default</option>
+              <option value="light" style="background:var(--bg2);">☀️ Light Default</option>
+              <option value="dimmed" style="background:var(--bg2);">🌫️ Dark Dimmed</option>
+              <option value="tritanopia" style="background:var(--bg2);">👁️ Tritanopia (Teal & Pink Cyan)</option>
+              <option value="deuteranopia" style="background:var(--bg2);">👁️ Deuteranopia (Midnight Violet & Amber)</option>
+              <option value="protanopia" style="background:var(--bg2);">👁️ Protanopia (Charcoal Bronze & Gold)</option>
+              <option value="high-contrast" style="background:var(--bg2);">⚡ High Contrast Dark (Pitch Black & Neon)</option>
+            </select>
+          </div>
+        </div>
+
         <div class="kmodal-field hidden" style="margin-top: 18px;">
           <label for="apiUrlInput">Backend API URL</label>
           <div class="key-input-container">
@@ -2542,6 +2874,7 @@ <h3>⚙️ Configure Settings</h3>
     let mode = 'code';
     let chatH = [], drSteps = [], drIdx = 0, drTimer = null;
     let currentFlowchartGraph = '', currentRecursionTreeGraph = '';
+    let currentPlatformProblems = [];
 
     // Initialize Mermaid.js
     if (typeof mermaid !== 'undefined') {
@@ -2553,12 +2886,35 @@ <h3>⚙️ Configure Settings</h3>
       });
     }
 
+    function setTheme(t) {
+      const activeTheme = t || 'dark';
+      document.documentElement.setAttribute('data-theme', activeTheme);
+      document.body.setAttribute('data-theme', activeTheme);
+      localStorage.setItem('codeyy_theme', activeTheme);
+      const hSel = g('themeSelHeader');
+      const mSel = g('themeSelModal');
+      if (hSel) hSel.value = activeTheme;
+      if (mSel) mSel.value = activeTheme;
+    }
+
+    // Apply saved theme immediately to prevent FOUC
+    setTheme(localStorage.getItem('codeyy_theme') || 'dark');
+
     document.addEventListener('DOMContentLoaded', async () => {
+      setTheme(localStorage.getItem('codeyy_theme') || 'dark');
       const storedKey = localStorage.getItem('gemini_api_key');
       if (storedKey && (storedKey === 'YOUR_KEY_HERE' || !(storedKey.startsWith('AIzaSy') || storedKey.startsWith('AQ.')))) {
         localStorage.removeItem('gemini_api_key');
       }
 
+      // Multi-Platform selection dropdown listener
+      const dsaSel = document.getElementById('dsa-platform-select');
+      if (dsaSel) {
+        dsaSel.addEventListener('change', e => {
+          filterPlatformProblems(e.target.value);
+        });
+      }
+
       // Load language settings
       const storedLang = localStorage.getItem('codeyy_last_lang') || 'auto';
       const langSel = document.getElementById('langSel');
@@ -3098,11 +3454,15 @@ <h3>⚙️ Configure Settings</h3>
       if (cached) {
         try {
           const data = JSON.parse(cached);
-          curCode = data.extracted_code || code;
-          renderAll(data); showResults();
-          stab(document.querySelector('.otab[data-tab="explain"]'), 'explain');
-          showToast('✓ Loaded from cache');
-          return;
+          if (data.platform_problems) {
+            curCode = data.extracted_code || code;
+            renderAll(data); showResults();
+            stab(document.querySelector('.otab[data-tab="explain"]'), 'explain');
+            showToast('✓ Loaded from cache');
+            return;
+          } else {
+            sessionStorage.removeItem(cacheKey);
+          }
         } catch (e) {
           sessionStorage.removeItem(cacheKey);
         }
@@ -3138,9 +3498,10 @@ <h3>⚙️ Configure Settings</h3>
     function renderAll(d) {
       renderExplain(d.line_explanations || ''); renderBugs(d.bug_detection || ''); renderFixed(d.corrected_code || '');
       renderDryRun(d.dry_run || '', d.flowchart || '', d.recursion_tree || ''); renderCx(d.time_complexity || '', d.space_complexity || ''); renderSugg(d.suggestions || '');
+      renderOptimizedCode(d.optimized_code || '', d.optimized_time_complexity || '', d.optimized_space_complexity || '');
       
       // Render New Visual Learning Modes
-      renderDSAMode(d.dsa_pattern || '', d.leetcode_problems || '', d.practice_exercises || '');
+      renderDSAMode(d.dsa_pattern || '', d.platform_problems || d.leetcode_problems || '', d.practice_exercises || '');
       renderInterviewPrep(d.interview_questions || '');
       renderLabAssistant(d.algorithm || '', d.viva_questions || '');
     }
@@ -3301,6 +3662,38 @@ <h3>⚙️ Configure Settings</h3>
       }
     }
 
+    function sanitizeMermaidGraph(raw) {
+      if (!raw) return '';
+      let clean = raw.trim();
+
+      if (clean.startsWith('```')) {
+        clean = clean.replace(/^```[a-zA-Z]*\n/, '').replace(/\n```$/, '');
+      }
+
+      if (!clean.includes('graph ') && !clean.includes('flowchart ')) {
+        clean = 'graph TD\n' + clean;
+      }
+
+      // Quote unquoted subgraph titles e.g. subgraph findi(root, &maxi) -> subgraph "findi(root, &maxi)"
+      clean = clean.replace(/subgraph\s+(?!["\n])([^\n]+)$/gmi, (match, title) => {
+        let trimmed = title.trim();
+        if (/^[a-zA-Z0-9_]+\s*\[.*\]$/.test(trimmed)) return match;
+        return `subgraph "${trimmed.replace(/"/g, "'")}"`;
+      });
+
+      // Remove spaces before ::: (e.g. ::: default -> :::default)
+      clean = clean.replace(/\s+:::/g, ':::');
+
+      // Remove semicolons at end of lines or after :::className;
+      clean = clean.replace(/:::\s*([a-zA-Z0-9_]+);/g, ':::$1');
+      clean = clean.replace(/;\s*$/gm, '');
+
+      // Fix unquoted arrow labels e.g. -- Yes --> -> -->|"Yes"|
+      clean = clean.replace(/--\s*([^->\n]+?)\s*-->/g, '-->|"$1"|');
+
+      return clean;
+    }
+
     async function renderMermaidRecursionTree() {
       const container = g('mermaid-recursion-graph');
       if (!container) return;
@@ -3309,14 +3702,7 @@ <h3>⚙️ Configure Settings</h3>
         return;
       }
 
-      let cleanGraph = currentRecursionTreeGraph.trim();
-      if (cleanGraph.startsWith('```')) {
-        cleanGraph = cleanGraph.replace(/^```[a-zA-Z]*\n/, '').replace(/\n```$/, '');
-      }
-
-      if (!cleanGraph.includes('graph ') && !cleanGraph.includes('flowchart ')) {
-        cleanGraph = 'graph TD\n' + cleanGraph;
-      }
+      let cleanGraph = sanitizeMermaidGraph(currentRecursionTreeGraph);
 
       container.innerHTML = `<div class="thinking" style="border:none; background:transparent; margin: 20px auto;"><div class="tdot"></div><div class="tdot"></div><div class="tdot"></div></div>`;
 
@@ -3339,14 +3725,7 @@ <h3>⚙️ Configure Settings</h3>
         return;
       }
 
-      let cleanGraph = currentFlowchartGraph.trim();
-      if (cleanGraph.startsWith('```')) {
-        cleanGraph = cleanGraph.replace(/^```[a-zA-Z]*\n/, '').replace(/\n```$/, '');
-      }
-
-      if (!cleanGraph.includes('graph ') && !cleanGraph.includes('flowchart ')) {
-        cleanGraph = 'graph TD\n' + cleanGraph;
-      }
+      let cleanGraph = sanitizeMermaidGraph(currentFlowchartGraph);
 
       container.innerHTML = `<div class="thinking" style="border:none; background:transparent; margin: 20px auto;"><div class="tdot"></div><div class="tdot"></div><div class="tdot"></div></div>`;
 
@@ -3425,13 +3804,23 @@ <h3>⚙️ Configure Settings</h3>
               
               let activeTopPointers = [];
               let activeBottomPointers = [];
+              let oobLeftPointers = [];
+              let oobRightPointers = [];
+
               if (currentStep && currentStep.variables && typeof currentStep.variables === 'object') {
                 for (const [key, v] of Object.entries(currentStep.variables)) {
-                  if (pointerNames.includes(key.toLowerCase()) && (typeof v === 'number' || typeof v === 'string') && parseInt(v) === idx) {
-                    if (topGroup.includes(key.toLowerCase())) {
-                      activeTopPointers.push(key);
-                    } else {
-                      activeBottomPointers.push(key);
+                  if (pointerNames.includes(key.toLowerCase()) && (typeof v === 'number' || (typeof v === 'string' && !isNaN(parseInt(v))))) {
+                    const parsedIdx = parseInt(v);
+                    if (parsedIdx === idx) {
+                      if (topGroup.includes(key.toLowerCase())) {
+                        activeTopPointers.push(key);
+                      } else {
+                        activeBottomPointers.push(key);
+                      }
+                    } else if (idx === 0 && parsedIdx < 0) {
+                      if (!oobLeftPointers.some(p => p.name === key)) oobLeftPointers.push({ name: key, val: parsedIdx });
+                    } else if (idx === data.length - 1 && parsedIdx >= data.length) {
+                      if (!oobRightPointers.some(p => p.name === key)) oobRightPointers.push({ name: key, val: parsedIdx });
                     }
                   }
                 }
@@ -3455,6 +3844,24 @@ <h3>⚙️ Configure Settings</h3>
                 `).join('');
               }
               
+              if (idx === 0 && oobLeftPointers.length > 0) {
+                html += `
+                  <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; margin-right:6px;">
+                    <div style="height:48px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; margin-bottom:4px;">
+                      <span style="color:var(--red); font-size:0.55rem; font-family:var(--fui); font-weight:700; text-transform:uppercase; background:var(--red2); border:1px dashed rgba(240,96,96,0.4); padding:2px 6px; border-radius:4px;">
+                        ${oobLeftPointers.map(p => `${e(p.name)}=${p.val}`).join(', ')} [OOB]
+                      </span>
+                    </div>
+                    <div style="background:transparent; border: 1.5px dashed var(--red); color:var(--red); font-family:var(--fm); font-size:0.75rem; font-weight:600; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--r1); padding: 4px 8px;">
+                      ◀
+                    </div>
+                    <div style="height:58px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; margin-top:4px;">
+                      <span style="font-size:0.52rem; color:var(--tx3); font-family:var(--fui); font-weight:600; text-transform:uppercase; margin-top:auto;">&lt; 0</span>
+                    </div>
+                  </div>
+                `;
+              }
+
               html += `
                 <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;">
                   <!-- Top pointers list -->
@@ -3474,6 +3881,24 @@ <h3>⚙️ Configure Settings</h3>
                   </div>
                 </div>
               `;
+
+              if (idx === data.length - 1 && oobRightPointers.length > 0) {
+                html += `
+                  <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; margin-left:6px;">
+                    <div style="height:48px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; margin-bottom:4px;">
+                      <span style="color:var(--amber); font-size:0.55rem; font-family:var(--fui); font-weight:700; text-transform:uppercase; background:rgba(245,166,35,0.12); border:1px dashed rgba(245,166,35,0.4); padding:2px 6px; border-radius:4px;">
+                        ${oobRightPointers.map(p => `${e(p.name)}=${p.val}`).join(', ')} [OOB]
+                      </span>
+                    </div>
+                    <div style="background:transparent; border: 1.5px dashed var(--amber); color:var(--amber); font-family:var(--fm); font-size:0.75rem; font-weight:600; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--r1); padding: 4px 8px;">
+                      ▶
+                    </div>
+                    <div style="height:58px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; margin-top:4px;">
+                      <span style="font-size:0.52rem; color:var(--tx3); font-family:var(--fui); font-weight:600; text-transform:uppercase; margin-top:auto;">&ge; N</span>
+                    </div>
+                  </div>
+                `;
+              }
             } else {
               html += `
                 <div style="background:var(--bg3); border: 2px solid ${cleanType === 'stack' ? 'var(--gold)' : 'var(--blue)'}; color:var(--tx1); font-family:var(--fm); font-size:0.85rem; font-weight:600; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--r1); box-shadow: 0 4px 10px rgba(0,0,0,0.25); transition: all 0.3s; position:relative; padding: 4px 8px;">
@@ -3666,27 +4091,147 @@ <h3>⚙️ Configure Settings</h3>
       finally { g('sbtn').disabled = false; }
     }
 
-    function renderDSAMode(pattern, leetcode, exercises) {
-      g('dsa-pattern-desc').innerHTML = pattern ? (typeof marked !== 'undefined' ? marked.parse(pattern) : e(pattern)) : 'No patterns detected.';
+    function parsePlatformProblems(raw) {
+      if (!raw) return [];
+      const items = [];
+      raw.split('\n').filter(l => l.trim()).forEach(line => {
+        let cleanLine = line.replace(/^[-*•\d.\s]+/, '').trim();
+        if (!cleanLine) return;
+
+        const urlMatch = cleanLine.match(/https?:\/\/[^\s\)\]\"']+/i);
+        if (!urlMatch) return;
+        const link = urlMatch[0];
+
+        let plat = '';
+        const lowerLink = link.toLowerCase();
+        if (lowerLink.includes('geeksforgeeks') || lowerLink.includes('gfg')) plat = 'GeeksforGeeks';
+        else if (lowerLink.includes('leetcode')) plat = 'LeetCode';
+        else if (lowerLink.includes('hackerrank')) plat = 'HackerRank';
+        else if (lowerLink.includes('codeforces')) plat = 'Codeforces';
+        else if (lowerLink.includes('codingninjas') || lowerLink.includes('naukri')) plat = 'Coding Ninjas';
+        else if (lowerLink.includes('codolio')) return; // Codolio removed
+
+        const parts = cleanLine.split('|');
+        let title = '';
+
+        if (parts.length >= 3) {
+          if (!plat) {
+            let pStr = parts[0].replace(/^[-*•\d.\s]+/, '').trim().toLowerCase();
+            if (pStr.includes('geeks') || pStr.includes('gfg')) plat = 'GeeksforGeeks';
+            else if (pStr.includes('leetcode')) plat = 'LeetCode';
+            else if (pStr.includes('hackerrank')) plat = 'HackerRank';
+            else if (pStr.includes('codeforces')) plat = 'Codeforces';
+            else if (pStr.includes('ninjas')) plat = 'Coding Ninjas';
+            else if (pStr.includes('codolio')) return;
+            else plat = parts[0].replace(/^[-*•\d.\s]+/, '').trim();
+          }
+          title = parts[1].replace(/^\d+\.\s+/, '').trim();
+        } else if (parts.length === 2) {
+          title = parts[0].replace(/^\d+\.\s+/, '').trim();
+        } else {
+          let tStr = cleanLine.replace(link, '').trim();
+          title = tStr.replace(/^[-*•:\d.\s]+/, '').replace(/^(LeetCode|GeeksforGeeks|GFG|HackerRank|Codeforces|Coding Ninjas|Codolio)[-:\s]*/i, '').trim();
+        }
+
+        if (!plat) plat = 'LeetCode';
+        if (!title) title = 'Practice Problem';
+
+        items.push({ platform: plat, title: title, link: link });
+      });
+      return items;
+    }
+
+    function filterPlatformProblems(platform) {
+      const container = g('dsa-leetcode-list');
+      if (!container) return;
+      container.innerHTML = '';
       
-      const lcContainer = g('dsa-leetcode-list');
-      lcContainer.innerHTML = '';
-      if (leetcode) {
-        leetcode.split('\n').filter(l => l.trim()).forEach(line => {
-          const parts = line.split('|');
-          const title = parts[0] ? parts[0].replace(/^\d+\.\s+/, '').trim() : 'LeetCode Problem';
-          const link = parts[1] ? parts[1].trim() : 'https://leetcode.com';
-          const card = ce('div');
-          card.style = 'background:var(--bg3); border:1px solid var(--b1); border-radius:var(--r1); padding:8px 12px; display:flex; align-items:center; justify-content:space-between; margin-bottom: 4px;';
-          card.innerHTML = `
-            <span style="font-family:var(--fb); font-size:0.75rem; color:var(--tx2); flex:1; text-align:left;">${e(title)}</span>
-            <a href="${e(link)}" target="_blank" style="font-family:var(--fui); font-size:0.62rem; font-weight:700; color:var(--gold); text-decoration:none; text-transform:uppercase; border:1px solid rgba(201,168,76,0.3); padding:3px 8px; border-radius:4px; transition:all 0.2s;">Practice ↗</a>
-          `;
-          lcContainer.appendChild(card);
-        });
+      const targetPlat = (platform || 'all').toLowerCase().trim();
+      const filtered = (targetPlat === 'all') 
+        ? currentPlatformProblems 
+        : currentPlatformProblems.filter(p => {
+            const pName = p.platform.toLowerCase();
+            if (targetPlat.includes('geeks') || targetPlat.includes('gfg')) {
+              return pName.includes('geeks') || pName.includes('gfg');
+            }
+            if (targetPlat.includes('leetcode')) return pName.includes('leetcode');
+            if (targetPlat.includes('hackerrank')) return pName.includes('hackerrank');
+            if (targetPlat.includes('codeforces')) return pName.includes('codeforces');
+            if (targetPlat.includes('ninjas')) return pName.includes('ninjas');
+            return pName === targetPlat || pName.includes(targetPlat) || targetPlat.includes(pName);
+          });
+
+      if (!filtered.length) {
+        container.innerHTML = `<div style="font-size:0.72rem; color:var(--tx3); padding:10px 12px; background:var(--bg3); border-radius:var(--r1); border:1px dashed var(--b1); text-align:left;">No practice problems matched for <b>${e(platform)}</b>. Select "⚡ All Platforms" to view all available problem matches.</div>`;
+        return;
+      }
+
+      filtered.forEach(p => {
+        const card = ce('div');
+        card.style = 'background:var(--bg3); border:1px solid var(--b1); border-radius:var(--r1); padding:8px 12px; display:flex; align-items:center; justify-content:space-between; margin-bottom: 4px; transition: all 0.2s;';
+        const platStyle = getPlatformBadgeStyle(p.platform);
+        card.innerHTML = `
+          <div style="display:flex; align-items:center; gap:8px; flex:1; text-align:left; overflow:hidden; padding-right:8px;">
+            <span style="${platStyle} font-family:var(--fui); font-size:0.58rem; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:3px; flex-shrink:0;">${e(p.platform)}</span>
+            <span style="font-family:var(--fb); font-size:0.75rem; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${e(p.title)}</span>
+          </div>
+          <a href="${e(p.link)}" target="_blank" style="font-family:var(--fui); font-size:0.62rem; font-weight:700; color:var(--gold); text-decoration:none; text-transform:uppercase; border:1px solid rgba(201,168,76,0.3); padding:3px 8px; border-radius:4px; transition:all 0.2s; flex-shrink:0;">Practice ↗</a>
+        `;
+        container.appendChild(card);
+      });
+    }
+
+    function getPlatformBadgeStyle(platform) {
+      const p = platform.toLowerCase();
+      if (p.includes('leetcode')) return 'background:rgba(245,166,35,0.12); color:var(--amber); border:1px solid rgba(245,166,35,0.25);';
+      if (p.includes('geeks')) return 'background:rgba(62,207,178,0.12); color:var(--teal); border:1px solid rgba(62,207,178,0.25);';
+      if (p.includes('hackerrank')) return 'background:rgba(74,158,255,0.12); color:var(--blue); border:1px solid rgba(74,158,255,0.25);';
+      if (p.includes('ninjas')) return 'background:rgba(240,96,96,0.12); color:var(--red); border:1px solid rgba(240,96,96,0.25);';
+      if (p.includes('codeforces')) return 'background:rgba(244,132,95,0.12); color:var(--coral); border:1px solid rgba(244,132,95,0.25);';
+      return 'background:var(--bg4); color:var(--tx2); border:1px solid var(--b2);';
+    }
+
+    function renderOptimizedCode(code, timeCx, spaceCx) {
+      const card = g('optcode-card');
+      if (!card) return;
+      if (!code || !code.trim()) {
+        card.classList.add('hidden');
+        return;
+      }
+      card.classList.remove('hidden');
+
+      const isAlreadyOptimal = code.trim().includes('ALREADY_OPTIMIZED');
+      const pre = g('optcode-pre');
+      
+      if (isAlreadyOptimal) {
+        pre.innerHTML = `<div style="display:flex; align-items:center; gap:8px; color:var(--teal); font-family:var(--fui); font-size:0.8rem; font-weight:700; background:var(--teal2); border:1px solid rgba(62,207,178,0.25); padding:10px 14px; border-radius:var(--r2);">
+          ✨ Code is Already Optimal
+        </div>
+        <p style="font-family:var(--fb); font-size:0.75rem; color:var(--tx2); margin-top:8px; line-height:1.5;">
+          Your input code is already implemented with optimal time and space complexity! No further architectural optimizations are needed.
+        </p>`;
       } else {
-        lcContainer.innerHTML = '<span style="color:var(--tx3); font-size:0.7rem;">No recommendations generated.</span>';
+        pre.textContent = code.trim();
+      }
+
+      g('optTimeBdg').textContent = 'Time: ' + (timeCx || 'O(?)');
+      g('optSpaceBdg').textContent = 'Space: ' + (spaceCx || 'O(?)');
+    }
+
+    function cpyOptimized() {
+      const code = g('optcode-pre').textContent;
+      if (code) {
+        navigator.clipboard.writeText(code).then(() => showToast('✓ Copied optimized code'));
       }
+    }
+
+    function renderDSAMode(pattern, platformProblems, exercises) {
+      g('dsa-pattern-desc').innerHTML = pattern ? (typeof marked !== 'undefined' ? marked.parse(pattern) : e(pattern)) : 'No patterns detected.';
+      
+      currentPlatformProblems = parsePlatformProblems(platformProblems);
+      const sel = g('dsa-platform-select');
+      const selectedPlat = sel ? sel.value : 'all';
+      filterPlatformProblems(selectedPlat);
 
       g('dsa-exercises-list').innerHTML = exercises ? (typeof marked !== 'undefined' ? marked.parse(exercises) : e(exercises)) : 'No practice exercises available.';
     }
@@ -3965,6 +4510,8 @@ <h3>⚙️ Configure Settings</h3>
     function showLoader() { hide('emptyState'); hide('results'); show('loader'); }
     function hideLoader() { hide('loader'); }
     function showResults() {
+      hide('emptyState');
+      hide('loader');
       show('results');
       if (window.innerWidth <= 920) {
         setTimeout(() => {
@@ -3975,7 +4522,7 @@ <h3>⚙️ Configure Settings</h3>
         }, 150);
       }
     }
-    function showEmpty() { show('emptyState'); }
+    function showEmpty() { hide('loader'); hide('results'); show('emptyState'); }
     function setBusy(on) { const b = g('abtn'); b.disabled = on; g('abtnTxt').textContent = on ? 'Analyzing…' : 'Analyze Code'; }
     function showErr(msg) { g('errtxt').textContent = msg; show('errbar'); setTimeout(() => hide('errbar'), 9000); }
     function hideErr() { hide('errbar'); }
@@ -3992,6 +4539,11 @@ <h3>⚙️ Configure Settings</h3>
       const input = g('keyInput');
       input.value = localStorage.getItem('gemini_api_key') || '';
 
+      const mSel = g('themeSelModal');
+      if (mSel) {
+        mSel.value = localStorage.getItem('codeyy_theme') || 'dark';
+      }
+
       const urlInput = g('apiUrlInput');
       if (urlInput) {
         urlInput.value = localStorage.getItem('codeyy_api_url') || '';