<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    @php
    use App\Helpers\StudentHelper;

    $logoPath = StudentHelper::collegeLogo();
    $ctitle = StudentHelper::collegeCtitle();
    $ptitle = StudentHelper::collegePtitle();

    $logoExists = $logoPath && file_exists(storage_path('app/public/' . $logoPath));

    // âœ… completed flag (based on existing $previousAnswer behavior)
    $isCompleted = !empty($previousAnswer);

    $rawAnswer = $previousAnswer ?? '';

    // if stored as <pre><code>...</code></pre>, extract code only
    $rawAnswer = preg_replace('#^<pre><code>|</code></pre>$#i', '', trim($rawAnswer));

    // decode entities: &lt; -> < etc
    $rawAnswer = html_entity_decode($rawAnswer, ENT_QUOTES | ENT_HTML5, 'UTF-8');

    // normalize line endings
    $rawAnswer = str_replace(["\r\n", "\r"], "\n", $rawAnswer);
    @endphp

    <link rel="icon" type="image/png" href="{{ asset('storage/' . $logoPath) }}">
    <title>@yield('ctitle', $ptitle)</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <!-- âœ… Ace Editor (with language tools + snippets + autocomplete) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.6/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.6/ext-language_tools.js"></script>

    <!-- keep (safe), but icons replaced with SVG drawings -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">

<style>
/* =========================================================
   PREMIUM DARK UI (LeetCode-like)
   âœ… Dark surfaces + subtle borders
   âœ… Neon GREEN (Submit style)
   âœ… Glowing ORANGE (Premium style)
   âœ… Smooth hover + focus rings
   âœ… No heavy multi-color gradients (only soft glow)
========================================================= */

:root{
  --bg:#0b0f14;          /* page */
  --surface:#11161d;     /* panels */
  --surface2:#0f141a;    /* inner / editor wrap */
  --surface3:#0c1117;    /* inputs/output */
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.12);

  --text:#e6edf7;
  --muted:#aab6d5;
  --muted2:#7f8bb0;

  --green:#22c55e;       /* submit */
  --green2:#16a34a;
  --orange:#f59e0b;      /* premium */
  --orange2:#fb923c;

  --shadow:0 16px 45px rgba(0,0,0,.55);
  --shadow2:0 10px 30px rgba(0,0,0,.45);

  --radius:16px;
  --radius2:14px;
}

html, body { height: 100%; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: 13px;
  letter-spacing: .2px;
  overflow-x:hidden;
}

/* subtle grid (premium feel) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity:.18;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 84px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 84px);
}

/* ultra soft glow (one-tone) */
body::after{
  content:"";
  position: fixed;
  inset:-250px;
  pointer-events:none;
  opacity:.16;
  background:
    radial-gradient(circle at 22% 20%, rgba(34,197,94,.55), transparent 40%),
    radial-gradient(circle at 82% 14%, rgba(245,158,11,.50), transparent 42%);
  filter: blur(24px);
}

/* Layout */
.flex-container{
  display:flex;
  height:100vh;
  width:100%;
  gap:14px;
  padding:14px;
}

/* Panels */
.panel{
  background: rgba(17,22,29,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  color: var(--text);
  overflow: hidden;
  position: relative;
}

/* kill old glow layer */
.panel:before{ display:none !important; }
.panel > *{ position:relative; z-index:1; }

/* Width targets (Desktop) */
#left-panel{ flex: 0 0 30%; min-width: 280px; max-width: 520px; }
#center-panel{ flex: 1 1 50%; min-width: 360px; }
#right-panel{ flex: 0 0 20%; min-width: 240px; max-width: 420px; }

/* Responsive */
@media (max-width: 1100px){
  .flex-container{ flex-direction: column; height:auto; min-height:100vh; }
  #left-panel, #center-panel, #right-panel{
    flex: 0 0 auto;
    width: 100%;
    min-width: unset;
    max-width: unset;
  }
  #editor{ height: 60vh !important; }
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(245,158,11,.35) rgba(255,255,255,.05); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.04);
}
::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.16);
}

/* Editor sizing */
#editor {
  width: 100%;
  height: calc(100vh - 120px);
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  overflow: hidden;
  background: rgba(15,20,26,.80);
}

/* Left panel inner */
#left-panel{
  overflow-y:auto;
  padding: 14px;
}

/* Right panel padding */
#right-panel{
  padding: 14px;
}

/* Chips */
.title-chip{
  display:inline-flex;
  align-items:center;