we have a course on udemy and my boss is asking me to track the utilization, create for me a dashboard with demo emirati names, showing
each one of them their progress of AI Coder: Vibe Coder to Agentic Engineer, make them random progress, the total sessions in this program
is 93 sessions and for 3 weeks dont use emojies, only SVG icons


Skill

Create a course utilization dashboard HTML file (single file, no frameworks, vanilla JS + CSS) for a Udemy course called "AI Coder: Vibe Coder to Agentic Engineer". Requirements:

- Demo Emirati names (male and female Arabic names common in UAE, e.g. Mohammed Al Mansoori, Fatima Al Rashidi, Ahmed Al Mazrouei, Mariam Al Suwaidi, Khalid Al Nuaimi, Noura Al Hameli, Sultan Al Kaabi, Aisha Al Dhaheri, Omar Al Muhairi, Latifa Al Shamsi, Saeed Al Falasi, Hessa Al Ketbi, Zayed Al Ameri, Maitha Al Jabri, Rashid Al Tenaiji)
- Total program: 93 sessions over 3 weeks
- Each learner has random progress (sessions completed out of 93)
- No emojis anywhere - use inline SVG icons only
- Show: learner name, sessions completed, sessions remaining, progress bar, percentage, week they are currently in (Week 1 = sessions 1-31, Week 2 = sessions 32-62, Week 3 = sessions 63-93), and a status badge (Not Started / In Progress / Completed)
- Dashboard header with course title, total enrolled count, average completion %, top performer
- Summary cards at the top showing: Total Enrolled, Average Progress, Completions, In Progress count
- A filterable/searchable table or card grid
- Sort by progress (high to low / low to high)
- Color theme: professional dark navy + gold/amber accents (UAE-inspired but corporate)
- Clean, modern design with good typography
- The progress bars should be animated on load
- Make it a fully self-contained single HTML file


Launching skill: frontend-design


Base directory for this skill: /Users/khalidbinkalban/.claude/plugins/marketplaces/claude-plugins-official/plugins/frontend-design/skills/frontend-design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

ARGUMENTS: Create a course utilization dashboard HTML file (single file, no frameworks, vanilla JS + CSS) for a Udemy course called "AI Coder: Vibe Coder to Agentic Engineer". Requirements:

- Demo Emirati names (male and female Arabic names common in UAE, e.g. Mohammed Al Mansoori, Fatima Al Rashidi, Ahmed Al Mazrouei, Mariam Al Suwaidi, Khalid Al Nuaimi, Noura Al Hameli, Sultan Al Kaabi, Aisha Al Dhaheri, Omar Al Muhairi, Latifa Al Shamsi, Saeed Al Falasi, Hessa Al Ketbi, Zayed Al Ameri, Maitha Al Jabri, Rashid Al Tenaiji)
- Total program: 93 sessions over 3 weeks
- Each learner has random progress (sessions completed out of 93)
- No emojis anywhere - use inline SVG icons only
- Show: learner name, sessions completed, sessions remaining, progress bar, percentage, week they are currently in (Week 1 = sessions 1-31, Week 2 = sessions 32-62, Week 3 = sessions 63-93), and a status badge (Not Started / In Progress / Completed)
- Dashboard header with course title, total enrolled count, average completion %, top performer
- Summary cards at the top showing: Total Enrolled, Average Progress, Completions, In Progress count
- A filterable/searchable table or card grid
- Sort by progress (high to low / low to high)
- Color theme: professional dark navy + gold/amber accents (UAE-inspired but corporate)
- Clean, modern design with good typography
- The progress bars should be animated on load
- Make it a fully self-contained single HTML file


ToolSearch

Question: select:Write


Question: select:Write


Write

<!DOCTYPE html>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Sora:wght@300;400;500;600&display=swap" rel="stylesheet" />

    <svg class="header-geo" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
      <polygon points="170,10 330,90 330,250 170,330 10,250 10,90" stroke="#c4962a" stroke-width="1.5" fill="none"/>
      <polygon points="170,40 300,110 300,230 170,300 40,230 40,110" stroke="#c4962a" stroke-width="1" fill="none"/>
      <polygon points="170,70 270,130 270,210 170,270 70,210 70,130" stroke="#c4962a" stroke-width="0.75" fill="none"/>
      <line x1="170" y1="10" x2="170" y2="330" stroke="#c4962a" stroke-width="0.5"/>
      <line x1="10" y1="90" x2="330" y2="250" stroke="#c4962a" stroke-width="0.5"/>
      <line x1="330" y1="90" x2="10" y2="250" stroke="#c4962a" stroke-width="0.5"/>
    </svg>
    <svg class="header-geo-bl" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="30" y="30" width="200" height="200" stroke="#c4962a" stroke-width="1" fill="none" transform="rotate(45 130 130)"/>
      <rect x="55" y="55" width="150" height="150" stroke="#c4962a" stroke-width="0.75" fill="none" transform="rotate(45 130 130)"/>
      <circle cx="130" cy="130" r="80" stroke="#c4962a" stroke-width="0.6" fill="none"/>
    </svg>

Udemy — Course Utilization Dashboard

AI Coder: Vibe Coder to
Agentic Engineer

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            3 Weeks Program

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
            </svg>
            93 Total Sessions

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
            15 Enrolled

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
            </svg>
            Avg. 0% Complete

Top Performer

—

Loading...

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>

15

Total Enrolled

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="14"/>
          </svg>

0%

Average Progress

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
          </svg>

0

Completions

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>

0

In Progress

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>

        <input class="search-input" type="text" id="search-input" placeholder="Search learner..." />

        <button class="filter-btn active" data-filter="all" onclick="setFilter('all', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/>
            <line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/>
            <line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
          </svg>
          All
        </button>
        <button class="filter-btn" data-filter="in-progress" onclick="setFilter('in-progress', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>
          In Progress
        </button>
        <button class="filter-btn" data-filter="completed" onclick="setFilter('completed', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
          Completed
        </button>
        <button class="filter-btn" data-filter="not-started" onclick="setFilter('not-started', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
          </svg>
          Not Started
        </button>

          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="16"/>
          </svg>
          Sort: High to Low

Learner

Completed

Remaining

Progress

Done

Current Week

Status

        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#4e6282" stroke-width="1.5" stroke-linecap="round" style="margin:0 auto 12px">
          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        No learners match your search.

    AI Coder: Vibe Coder to Agentic Engineer  |  Utilization Dashboard  |  93 Sessions  ·  3 Weeks


File created successfully at: /Users/khalidbinkalban/course-dashboard.html

<!DOCTYPE html>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Sora:wght@300;400;500;600&display=swap" rel="stylesheet" />

    <svg class="header-geo" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
      <polygon points="170,10 330,90 330,250 170,330 10,250 10,90" stroke="#c4962a" stroke-width="1.5" fill="none"/>
      <polygon points="170,40 300,110 300,230 170,300 40,230 40,110" stroke="#c4962a" stroke-width="1" fill="none"/>
      <polygon points="170,70 270,130 270,210 170,270 70,210 70,130" stroke="#c4962a" stroke-width="0.75" fill="none"/>
      <line x1="170" y1="10" x2="170" y2="330" stroke="#c4962a" stroke-width="0.5"/>
      <line x1="10" y1="90" x2="330" y2="250" stroke="#c4962a" stroke-width="0.5"/>
      <line x1="330" y1="90" x2="10" y2="250" stroke="#c4962a" stroke-width="0.5"/>
    </svg>
    <svg class="header-geo-bl" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="30" y="30" width="200" height="200" stroke="#c4962a" stroke-width="1" fill="none" transform="rotate(45 130 130)"/>
      <rect x="55" y="55" width="150" height="150" stroke="#c4962a" stroke-width="0.75" fill="none" transform="rotate(45 130 130)"/>
      <circle cx="130" cy="130" r="80" stroke="#c4962a" stroke-width="0.6" fill="none"/>
    </svg>

Udemy — Course Utilization Dashboard

AI Coder: Vibe Coder to
Agentic Engineer

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            3 Weeks Program

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
            </svg>
            93 Total Sessions

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
            15 Enrolled

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
            </svg>
            Avg. 0% Complete

Top Performer

—

Loading...

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>

15

Total Enrolled

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="14"/>
          </svg>

0%

Average Progress

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
          </svg>

0

Completions

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>

0

In Progress

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>

        <input class="search-input" type="text" id="search-input" placeholder="Search learner..." />

        <button class="filter-btn active" data-filter="all" onclick="setFilter('all', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/>
            <line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/>
            <line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
          </svg>
          All
        </button>
        <button class="filter-btn" data-filter="in-progress" onclick="setFilter('in-progress', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>
          In Progress
        </button>
        <button class="filter-btn" data-filter="completed" onclick="setFilter('completed', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
          Completed
        </button>
        <button class="filter-btn" data-filter="not-started" onclick="setFilter('not-started', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
          </svg>
          Not Started
        </button>

          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="16"/>
          </svg>
          Sort: High to Low

Learner

Completed

Remaining

Progress

Done

Current Week

Status

        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#4e6282" stroke-width="1.5" stroke-linecap="round" style="margin:0 auto 12px">
          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        No learners match your search.

    AI Coder: Vibe Coder to Agentic Engineer  |  Utilization Dashboard  |  93 Sessions  ·  3 Weeks


The dashboard has been created at `/Users/khalidbinkalban/course-dashboard.html`.

Open it in any browser. Here's what it includes:

**Header**
- Course title with gold accent styling
- Geometric Arabic-inspired SVG pattern decoration
- Live stats: enrolled count, average completion %, top performer name

**4 Summary Cards**
- Total Enrolled / Average Progress / Completions / In Progress
- Animated staggered entrance on load

**Learner Table (15 Emirati names)**
- Columns: Name with avatar initials, Sessions Completed, Sessions Remaining, Animated Progress Bar, Percentage, Current Week badge, Status badge
- Week logic: Week 1 (sessions 1-31), Week 2 (32-62), Week 3 (63-93)
- Status: Not Started / In Progress / Completed

**Controls**
- Live search by name
- Filter buttons: All / In Progress / Completed / Not Started
- Sort toggle: High to Low / Low to High

**Design**
- Dark navy + gold/amber (UAE corporate palette)
- Cormorant Garamond serif for display text, Sora for body
- All SVG icons, zero emojis
- Progress bars animate on load with a smooth cubic-bezier easing


create enhance the UI and make it white theme


Error: File content (11310 tokens) exceeds maximum allowed tokens (10000). Use offset and limit parameters to read specific portions of the file, or search for specific content instead of reading the whole file.


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	  <meta charset="UTF-8" />
5	  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6	  <title>AI Coder — Utilization Dashboard</title>
7	  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Sora:wght@300;400;500;600&display=swap" rel="stylesheet" />
8	  <style>
9	    :root {
10	      --navy-deep:    #060b18;
11	      --navy-base:    #0c1428;
12	      --navy-mid:     #111d35;
13	      --navy-light:   #1a2d4f;
14	      --navy-card:    #0f1a30;
15	      --gold-bright:  #e8b84b;
16	      --gold-mid:     #c4962a;
17	      --gold-dim:     #8a6318;
18	      --gold-subtle:  rgba(196, 150, 42, 0.12);
19	      --text-primary: #f0e6cc;
20	      --text-secondary: #8fa3c0;
21	      --text-muted:   #4e6282;
22	      --border:       rgba(196, 150, 42, 0.18);
23	      --border-soft:  rgba(255, 255, 255, 0.06);
24	      --status-green: #2ec47a;
25	      --status-blue:  #4a9eff;
26	      --status-grey:  #4e6282;
27	      --radius-sm: 6px;
28	      --radius-md: 12px;
29	      --radius-lg: 18px;
30	    }
31
32	    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
33
34	    body {
35	      background: var(--navy-deep);
36	      color: var(--text-primary);
37	      font-family: 'Sora', sans-serif;
38	      font-size: 14px;
39	      min-height: 100vh;
40	      overflow-x: hidden;
41	    }
42
43	    /* ─── NOISE OVERLAY ─────────────────────────────── */
44	    body::before {
45	      content: '';
46	      position: fixed;
47	      inset: 0;
48	      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
49	      pointer-events: none;
50	      z-index: 0;
51	      opacity: 0.4;
52	    }
53
54	    /* ─── HEADER ────────────────────────────────────── */
55	    .header {
56	      position: relative;
57	      background: linear-gradient(160deg, #0e1b35 0%, #080d1a 60%);
58	      border-bottom: 1px solid var(--border);
59	      overflow: hidden;
60	      padding: 48px 60px 40px;
61	    }
62
63	    .header-geo {
64	      position: absolute;
65	      top: -60px; right: -60px;
66	      width: 340px; height: 340px;
67	      opacity: 0.07;
68	      pointer-events: none;
69	    }
70
71	    .header-geo-bl {
72	      position: absolute;
73	      bottom: -80px; left: -40px;
74	      width: 260px; height: 260px;
75	      opacity: 0.05;
76	      pointer-events: none;
77	    }
78
79	    .header-line {
80	      display: flex;
81	      align-items: flex-start;
82	      justify-content: space-between;
83	      gap: 32px;
84	      position: relative;
85	      z-index: 1;
86	    }
87
88	    .course-label {
89	      font-size: 10px;
90	      letter-spacing: 0.22em;
91	      text-transform: uppercase;
92	      color: var(--gold-mid);
93	      font-weight: 500;
94	      margin-bottom: 10px;
95	    }
96
97	    .course-title {
98	      font-family: 'Cormorant Garamond', serif;
99	      font-size: 36px;
100	      font-weight: 700;
101	      line-height: 1.15;
102	      color: var(--text-primary);
103	      max-width: 540px;
104	    }
105
106	    .course-title span {
107	      color: var(--gold-bright);
108	    }
109
110	    .course-meta {
111	      display: flex;
112	      gap: 28px;
113	      margin-top: 18px;
114	    }
115
116	    .meta-item {
117	      display: flex;
118	      align-items: center;
119	      gap: 8px;
120	      font-size: 12px;

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Sora:wght@300;400;500;600&display=swap" rel="stylesheet" />
  <style>
    :root {
      --navy-deep:    #060b18;
      --navy-base:    #0c1428;
      --navy-mid:     #111d35;
      --navy-light:   #1a2d4f;
      --navy-card:    #0f1a30;
      --gold-bright:  #e8b84b;
      --gold-mid:     #c4962a;
      --gold-dim:     #8a6318;
      --gold-subtle:  rgba(196, 150, 42, 0.12);
      --text-primary: #f0e6cc;
      --text-secondary: #8fa3c0;
      --text-muted:   #4e6282;
      --border:       rgba(196, 150, 42, 0.18);
      --border-soft:  rgba(255, 255, 255, 0.06);
      --status-green: #2ec47a;
      --status-blue:  #4a9eff;
      --status-grey:  #4e6282;
      --radius-sm: 6px;
      --radius-md: 12px;
      --radius-lg: 18px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--navy-deep);
      color: var(--text-primary);
      font-family: 'Sora', sans-serif;
      font-size: 14px;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ─── NOISE OVERLAY ─────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
      opacity: 0.4;
    }

    /* ─── HEADER ────────────────────────────────────── */
    .header {
      position: relative;
      background: linear-gradient(160deg, #0e1b35 0%, #080d1a 60%);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      padding: 48px 60px 40px;
    }

    .header-geo {
      position: absolute;
      top: -60px; right: -60px;
      width: 340px; height: 340px;
      opacity: 0.07;
      pointer-events: none;
    }

    .header-geo-bl {
      position: absolute;
      bottom: -80px; left: -40px;
      width: 260px; height: 260px;
      opacity: 0.05;
      pointer-events: none;
    }

    .header-line {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 32px;
      position: relative;
      z-index: 1;
    }

    .course-label {
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-mid);
      font-weight: 500;
      margin-bottom: 10px;
    }

    .course-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 36px;
      font-weight: 700;
      line-height: 1.15;
      color: var(--text-primary);
      max-width: 540px;
    }

    .course-title span {
      color: var(--gold-bright);
    }

    .course-meta {
      display: flex;
      gap: 28px;
      margin-top: 18px;
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;


120	      font-size: 12px;
121	      color: var(--text-secondary);
122	    }
123
124	    .meta-item svg { flex-shrink: 0; }
125
126	    .header-top-stat {
127	      display: flex;
128	      flex-direction: column;
129	      align-items: flex-end;
130	      gap: 6px;
131	    }
132
133	    .top-performer-label {
134	      font-size: 10px;
135	      letter-spacing: 0.18em;
136	      text-transform: uppercase;
137	      color: var(--text-muted);
138	    }
139
140	    .top-performer-name {
141	      font-family: 'Cormorant Garamond', serif;
142	      font-size: 22px;
143	      font-weight: 600;
144	      color: var(--gold-bright);
145	    }
146
147	    .top-performer-sub {
148	      font-size: 11px;
149	      color: var(--text-muted);
150	    }
151
152	    /* ─── MAIN CONTENT ──────────────────────────────── */
153	    .main {
154	      padding: 40px 60px 60px;
155	      position: relative;
156	      z-index: 1;
157	    }
158
159	    /* ─── STAT CARDS ────────────────────────────────── */
160	    .stats-grid {
161	      display: grid;
162	      grid-template-columns: repeat(4, 1fr);
163	      gap: 16px;
164	      margin-bottom: 36px;
165	    }
166
167	    .stat-card {
168	      background: var(--navy-card);
169	      border: 1px solid var(--border-soft);
170	      border-radius: var(--radius-md);
171	      padding: 24px 22px;
172	      display: flex;
173	      flex-direction: column;
174	      gap: 12px;
175	      position: relative;
176	      overflow: hidden;
177	      opacity: 0;
178	      transform: translateY(16px);
179	      transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.25s;
180	    }
181
182	    .stat-card.visible { opacity: 1; transform: translateY(0); }
183	    .stat-card:hover { border-color: var(--border); }
184
185	    .stat-card::before {
186	      content: '';
187	      position: absolute;
188	      top: 0; left: 0; right: 0;
189	      height: 2px;
190	      background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
191	      opacity: 0.6;
192	    }
193
194	    .stat-icon {
195	      width: 36px; height: 36px;
196	      background: var(--gold-subtle);
197	      border-radius: 8px;
198	      display: flex;
199	      align-items: center;
200	      justify-content: center;
201	    }
202
203	    .stat-value {
204	      font-family: 'Cormorant Garamond', serif;
205	      font-size: 38px;
206	      font-weight: 700;
207	      line-height: 1;
208	      color: var(--text-primary);
209	    }
210
211	    .stat-value .unit {
212	      font-size: 22px;
213	      color: var(--gold-mid);
214	    }
215
216	    .stat-label {
217	      font-size: 11px;
218	      color: var(--text-muted);
219	      letter-spacing: 0.08em;
220	      text-transform: uppercase;
221	    }
222
223	    /* ─── CONTROLS ──────────────────────────────────── */
224	    .controls {
225	      display: flex;
226	      align-items: center;
227	      justify-content: space-between;
228	      margin-bottom: 22px;
229	      gap: 16px;
230	    }
231
232	    .search-wrap {
233	      position: relative;
234	      flex: 1;
235	      max-width: 320px;
236	    }
237
238	    .search-icon {
239	      position: absolute;

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>

      font-size: 12px;
      color: var(--text-secondary);
    }

    .meta-item svg { flex-shrink: 0; }

    .header-top-stat {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }

    .top-performer-label {
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .top-performer-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      font-weight: 600;
      color: var(--gold-bright);
    }

    .top-performer-sub {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* ─── MAIN CONTENT ──────────────────────────────── */
    .main {
      padding: 40px 60px 60px;
      position: relative;
      z-index: 1;
    }

    /* ─── STAT CARDS ────────────────────────────────── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 36px;
    }

    .stat-card {
      background: var(--navy-card);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-md);
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.25s;
    }

    .stat-card.visible { opacity: 1; transform: translateY(0); }
    .stat-card:hover { border-color: var(--border); }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
      opacity: 0.6;
    }

    .stat-icon {
      width: 36px; height: 36px;
      background: var(--gold-subtle);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stat-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 38px;
      font-weight: 700;
      line-height: 1;
      color: var(--text-primary);
    }

    .stat-value .unit {
      font-size: 22px;
      color: var(--gold-mid);
    }

    .stat-label {
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* ─── CONTROLS ──────────────────────────────────── */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
      gap: 16px;
    }

    .search-wrap {
      position: relative;
      flex: 1;
      max-width: 320px;
    }

    .search-icon {
      position: absolute;


I have enough context. I'll do a full redesign — white theme with elevated UI, richer typography hierarchy, shadow-based depth, and enhanced visual details.


<!DOCTYPE html>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;0,700;1,300&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />

        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
        </svg>

      Learning Analytics

      Udemy Platform

        Live data

        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
          <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/>
          <line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
        </svg>
        Q2 2025 Cohort

    <svg class="hero-pattern" viewBox="0 0 480 200" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMid slice">
      <defs>
        <pattern id="dotgrid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="1" fill="#b8822a" opacity="0.18"/>
        </pattern>
        <linearGradient id="fade" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stop-color="white" stop-opacity="1"/>
          <stop offset="100%" stop-color="white" stop-opacity="0"/>
        </linearGradient>
        <mask id="fadeMask">
          <rect width="480" height="200" fill="url(#fade)"/>
        </mask>
      </defs>
      <rect width="480" height="200" fill="url(#dotgrid)" mask="url(#fadeMask)"/>

      <polygon points="420,20 460,42 460,86 420,108 380,86 380,42" stroke="#b8822a" stroke-width="1" fill="none" opacity="0.15"/>
      <polygon points="420,36 448,51 448,80 420,95 392,80 392,51" stroke="#b8822a" stroke-width="0.75" fill="none" opacity="0.12"/>
    </svg>

          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
          </svg>
          Course Utilization Report

          AI Coder: Vibe Coder
to Agentic Engineer

            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
              <circle cx="9" cy="7" r="4"/>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
            15 learners enrolled

            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
              <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
            </svg>
            93 total sessions

            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
              <rect x="3" y="4" width="18" height="18" rx="2"/>
              <line x1="16" y1="2" x2="16" y2="6"/>
              <line x1="8" y1="2" x2="8" y2="6"/>
              <line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            3 week program

            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
              <line x1="18" y1="20" x2="18" y2="10"/>
              <line x1="12" y1="20" x2="12" y2="4"/>
              <line x1="6" y1="20" x2="6" y2="14"/>
            </svg>
            Avg. 0% complete

            <svg class="trophy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
              <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>
              <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
              <path d="M4 22h16"/>
              <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
              <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
              <path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/>
            </svg>
            Top Performer

—

Loading...

—

sessions

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2d6fe8" stroke-width="2" stroke-linecap="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>

15

Total Enrolled

          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <polyline points="18 15 12 9 6 15"/>
          </svg>
          Active cohort

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#b8822a" stroke-width="2" stroke-linecap="round">
            <line x1="18" y1="20" x2="18" y2="10"/>
            <line x1="12" y1="20" x2="12" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="14"/>
          </svg>

0%

Average Progress

          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>
          Across all learners

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a362" stroke-width="2" stroke-linecap="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>

0

Completions

          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
          100% of sessions

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c47d0e" stroke-width="2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>

0

In Progress

          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
          </svg>
          Actively learning

        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" stroke-width="2" stroke-linecap="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
          <circle cx="9" cy="7" r="4"/>
        </svg>
        Learner Progress
        15 learners

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
              <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>

          <input class="search-input" id="search-input" type="text" placeholder="Search learner..." />

          <button class="filter-btn active" data-filter="all" onclick="setFilter('all',this)">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
              <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/>
              <line x1="8" y1="18" x2="21" y2="18"/>
              <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/>
              <line x1="3" y1="18" x2="3.01" y2="18"/>
            </svg>
            All
          </button>
          <button class="filter-btn" data-filter="in-progress" onclick="setFilter('in-progress',this)">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
            </svg>
            In Progress
          </button>
          <button class="filter-btn" data-filter="completed" onclick="setFilter('completed',this)">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
            Completed
          </button>
          <button class="filter-btn" data-filter="not-started" onclick="setFilter('not-started',this)">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
              <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
            </svg>
            Not Started
          </button>

        <button class="sort-btn" id="sort-btn" onclick="toggleSort()">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <line x1="12" y1="20" x2="12" y2="10"/>
            <line x1="18" y1="20" x2="18" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="16"/>
          </svg>
          High to Low
        </button>

Learner

Completed

Remaining

Progress

Done

Week

Status

        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--ink-muted)" stroke-width="1.5" stroke-linecap="round">
          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        No learners match your search or filter.

    AI Coder: Vibe Coder to Agentic Engineer  ·  93 Sessions  ·  3 Weeks  ·  Utilization Dashboard


The file /Users/khalidbinkalban/course-dashboard.html has been updated successfully.

<!DOCTYPE html>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;0,700;1,300&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />

        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
        </svg>

      Learning Analytics

      Udemy Platform

        Live data

        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
          <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/>
          <line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
        </svg>
        Q2 2025 Cohort

    <svg class="hero-pattern" viewBox="0 0 480 200" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMid slice">
      <defs>
        <pattern id="dotgrid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="1" fill="#b8822a" opacity="0.18"/>
        </pattern>
        <linearGradient id="fade" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stop-color="white" stop-opacity="1"/>
          <stop offset="100%" stop-color="white" stop-opacity="0"/>
        </linearGradient>
        <mask id="fadeMask">
          <rect width="480" height="200" fill="url(#fade)"/>
        </mask>
      </defs>
      <rect width="480" height="200" fill="url(#dotgrid)" mask="url(#fadeMask)"/>

      <polygon points="420,20 460,42 460,86 420,108 380,86 380,42" stroke="#b8822a" stroke-width="1" fill="none" opacity="0.15"/>
      <polygon points="420,36 448,51 448,80 420,95 392,80 392,51" stroke="#b8822a" stroke-width="0.75" fill="none" opacity="0.12"/>
    </svg>

          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
          </svg>
          Course Utilization Report

          AI Coder: Vibe Coder
to Agentic Engineer

            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
              <circle cx="9" cy="7" r="4"/>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
            15 learners enrolled

            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
              <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
            </svg>
            93 total sessions

            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
              <rect x="3" y="4" width="18" height="18" rx="2"/>
              <line x1="16" y1="2" x2="16" y2="6"/>
              <line x1="8" y1="2" x2="8" y2="6"/>
              <line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            3 week program

            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">
              <line x1="18" y1="20" x2="18" y2="10"/>
              <line x1="12" y1="20" x2="12" y2="4"/>
              <line x1="6" y1="20" x2="6" y2="14"/>
            </svg>
            Avg. 0% complete

            <svg class="trophy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
              <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>
              <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
              <path d="M4 22h16"/>
              <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
              <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
              <path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/>
            </svg>
            Top Performer

—

Loading...

—

sessions

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2d6fe8" stroke-width="2" stroke-linecap="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>

15

Total Enrolled

          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <polyline points="18 15 12 9 6 15"/>
          </svg>
          Active cohort

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#b8822a" stroke-width="2" stroke-linecap="round">
            <line x1="18" y1="20" x2="18" y2="10"/>
            <line x1="12" y1="20" x2="12" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="14"/>
          </svg>

0%

Average Progress

          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>
          Across all learners

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a362" stroke-width="2" stroke-linecap="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>

0

Completions

          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
          100% of sessions

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c47d0e" stroke-width="2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>

0

In Progress

          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
          </svg>
          Actively learning

        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" stroke-width="2" stroke-linecap="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
          <circle cx="9" cy="7" r="4"/>
        </svg>
        Learner Progress
        15 learners

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
              <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>

          <input class="search-input" id="search-input" type="text" placeholder="Search learner..." />

          <button class="filter-btn active" data-filter="all" onclick="setFilter('all',this)">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
              <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/>
              <line x1="8" y1="18" x2="21" y2="18"/>
              <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/>
              <line x1="3" y1="18" x2="3.01" y2="18"/>
            </svg>
            All
          </button>
          <button class="filter-btn" data-filter="in-progress" onclick="setFilter('in-progress',this)">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
            </svg>
            In Progress
          </button>
          <button class="filter-btn" data-filter="completed" onclick="setFilter('completed',this)">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
            Completed
          </button>
          <button class="filter-btn" data-filter="not-started" onclick="setFilter('not-started',this)">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
              <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
            </svg>
            Not Started
          </button>

        <button class="sort-btn" id="sort-btn" onclick="toggleSort()">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <line x1="12" y1="20" x2="12" y2="10"/>
            <line x1="18" y1="20" x2="18" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="16"/>
          </svg>
          High to Low
        </button>

Learner

Completed

Remaining

Progress

Done

Week

Status

        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--ink-muted)" stroke-width="1.5" stroke-linecap="round">
          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        No learners match your search or filter.

    AI Coder: Vibe Coder to Agentic Engineer  ·  93 Sessions  ·  3 Weeks  ·  Utilization Dashboard

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>AI Coder — Utilization Dashboard</title>

-  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Sora:wght@300;400;500;600&display=swap" rel="stylesheet" />

+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;0,700;1,300&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

+      font-family: 'DM Sans', sans-serif;

+      -webkit-font-smoothing: antialiased;

-    /* ─── NOISE OVERLAY ─────────────────────────────── */

-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");

+    /* ─── TOPBAR ────────────────────────────────────── */

+      border-bottom: 1px solid var(--border);

-    /* ─── HEADER ────────────────────────────────────── */

-      background: linear-gradient(160deg, #0e1b35 0%, #080d1a 60%);

+      0%, 100% { opacity: 1; transform: scale(1); }

+      50% { opacity: 0.5; transform: scale(0.8); }

+    /* ─── HERO HEADER ───────────────────────────────── */

+      border: 1px solid var(--gold-border);

-      font-family: 'Cormorant Garamond', serif;

+      border-right: 1px solid var(--border);

+    .meta-chip:last-child { border-right: none; }

+    .meta-chip strong { color: var(--ink); font-weight: 600; }

+    /* ─── TOP PERFORMER CARD ────────────────────────── */

+      background: radial-gradient(circle at 80% 20%, rgba(184,130,42,0.25) 0%, transparent 60%);

+      background: linear-gradient(90deg, var(--gold), var(--gold-light));

+      transition: width 1.4s cubic-bezier(0.16,1,0.3,1);

/* ─── MAIN CONTENT ──────────────────────────────── */

/* ─── STAT CARDS ────────────────────────────────── */

-      border: 1px solid var(--border-soft);

-      transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.25s;

+      transition: opacity 0.5s ease, transform 0.5s ease,

+                  box-shadow 0.25s ease, border-color 0.25s ease;

.stat-card.visible { opacity: 1; transform: translateY(0); }

-    .stat-card:hover { border-color: var(--border); }

+      border-color: var(--border-dark);

-      background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);

+      border-radius: var(--r-lg) var(--r-lg) 0 0;

-      font-family: 'Cormorant Garamond', serif;

/* ─── CONTROLS ──────────────────────────────────── */

+      font-family: 'DM Sans', sans-serif;

+      transition: border-color 0.2s, box-shadow 0.2s;

-    .search-input::placeholder { color: var(--text-muted); }

-    .search-input:focus { border-color: var(--gold-dim); }

+    .search-input::placeholder { color: var(--ink-muted); }

+      border-color: var(--gold-border);

+      box-shadow: 0 0 0 3px var(--gold-pale);

-      border: 1px solid var(--border-soft);

+      border-right: 1px solid var(--border);

-      transition: background 0.2s, border-color 0.2s, color 0.2s;

+      transition: background 0.15s, color 0.15s;

+    .filter-btn:last-child { border-right: none; }

+    .filter-btn:hover { background: var(--bg); color: var(--ink); }

+      transition: background 0.15s, border-color 0.15s, color 0.15s;

+      border-color: var(--border-dark);

-    /* ─── LEARNER TABLE ─────────────────────────────── */

+    /* ─── TABLE ─────────────────────────────────────── */

-      grid-template-columns: 2fr 100px 100px 200px 80px 90px 100px;

-      border-bottom: 1px solid var(--border-soft);

+      grid-template-columns: 2.2fr 96px 96px 220px 76px 100px 110px;

+      border-bottom: 1px solid var(--border);

.learner-row:last-child { border-bottom: none; }

-    .learner-row:hover { background: rgba(255, 255, 255, 0.025); }

-    .learner-row.visible { opacity: 1; transform: translateX(0); }

+    .learner-row:hover { background: var(--bg); }

+    .learner-row.visible { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease, transform 0.4s ease, background 0.15s; }

+    .learner-info { display: flex; align-items: center; gap: 13px; }

-      font-family: 'Cormorant Garamond', serif;

+    .cell { font-size: 13px; color: var(--ink-soft); }

-    .progress-cell { padding-right: 16px; }

+    .progress-cell { padding-right: 20px; }

-      transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);

+      transition: width 1.3s cubic-bezier(0.16, 1, 0.3, 1);

+      font-family: 'DM Sans', sans-serif;

+      border: 1px solid var(--slate-border);

+      border: 1px solid var(--blue-border);

+      border: 1px solid var(--amber-border);

+      border: 1px solid var(--green-border);

/* ─── EMPTY STATE ───────────────────────────────── */

+    .empty-state svg { margin: 0 auto 12px; display: block; }

/* ─── FOOTER ────────────────────────────────────── */

-      border-top: 1px solid var(--border-soft);

+      border-top: 1px solid var(--border);

-    .footer span { color: var(--gold-dim); }

+    .footer strong { color: var(--gold); font-weight: 600; }

-    /* ─── DIVIDER LINE ──────────────────────────────── */

-      background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 40%, var(--gold-dim) 60%, transparent 100%);

+    /* ─── RESPONSIVE ────────────────────────────────── */

+      .stats-grid { grid-template-columns: repeat(2, 1fr); }

+      .table-head, .learner-row { grid-template-columns: 2fr 88px 88px 180px 70px 90px 100px; }

-      .stats-grid { grid-template-columns: repeat(2, 1fr); }

-      .learner-row { grid-template-columns: 2fr 90px 90px 160px 70px 85px 90px; }

+      .topbar, .hero, .main { padding-left: 20px; padding-right: 20px; }

+      .hero-inner { flex-direction: column; }

+      .hero-right { align-self: stretch; }

+      .performer-card { min-width: unset; }

+      .table-card { overflow-x: auto; }

+      .table-head, .learner-row { min-width: 760px; }

+      .controls-row { flex-wrap: wrap; }

-      .header, .main { padding-left: 24px; padding-right: 24px; }

-      .header-line { flex-direction: column; }

-      .header-top-stat { align-items: flex-start; }

-      .table-wrap { overflow-x: auto; }

-      .table-head, .learner-row { min-width: 740px; }

+    /* ─── ANIMATIONS ────────────────────────────────── */

+      from { opacity: 0; transform: translateY(-8px); }

+      to   { opacity: 1; transform: translateY(0); }

+    .hero { animation: slideDown 0.5s ease both; }

-    <svg class="header-geo" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">

+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">

+      <div class="topbar-tag" style="gap:6px;color:var(--ink-muted)">

+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">

+    <svg class="hero-pattern" viewBox="0 0 480 200" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMid slice">

+        <pattern id="dotgrid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">

+          <stop offset="0%" stop-color="white" stop-opacity="1"/>

+          <stop offset="100%" stop-color="white" stop-opacity="0"/>

+          <rect width="480" height="200" fill="url(#fade)"/>

+      <rect width="480" height="200" fill="url(#dotgrid)" mask="url(#fadeMask)"/>

+      <!-- geometric hexagon accent -->

-    <svg class="header-geo-bl" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">

-      <rect x="30" y="30" width="200" height="200" stroke="#c4962a" stroke-width="1" fill="none" transform="rotate(45 130 130)"/>

-      <rect x="55" y="55" width="150" height="150" stroke="#c4962a" stroke-width="0.75" fill="none" transform="rotate(45 130 130)"/>

-
AI Coder: Vibe Coder to
Agentic Engineer

-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">

+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">

+          AI Coder: Vibe Coder
to Agentic Engineer

+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6b7a99" stroke-width="1.8" stroke-linecap="round">

+          <div class="performer-card-label">

+            <svg class="trophy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">

+          <div class="performer-bar-track">

+          <div class="performer-pct-row">

-      <div class="stat-card" id="card-enrolled">

-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">

+      <div class="stat-card" id="sc-enrolled">

+        <div class="stat-icon-wrap" style="background:#eff4fd;">

+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2d6fe8" stroke-width="2" stroke-linecap="round">

+        <div class="stat-change" style="background:#eff4fd; color:#2d6fe8;">

+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">

-      <div class="stat-card" id="card-avg">

+      <div class="stat-card" id="sc-avg">

+        <div class="stat-icon-wrap" style="background:#fdf3e1;">

+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#b8822a" stroke-width="2" stroke-linecap="round">

+        <div class="stat-change" style="background:#fdf3e1; color:var(--gold);">

-      <div class="stat-card" id="card-completed">

+      <div class="stat-card" id="sc-completed">

+        <div class="stat-icon-wrap" style="background:#edfaf4;">

+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a362" stroke-width="2" stroke-linecap="round">

+        <div class="stat-change" style="background:#edfaf4; color:var(--green);">

-      <div class="stat-card" id="card-inprogress">

+      <div class="stat-card" id="sc-inprogress">

+        <div class="stat-icon-wrap" style="background:#fff8ec;">

+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c47d0e" stroke-width="2" stroke-linecap="round">

+        <div class="stat-change" style="background:#fff8ec; color:var(--amber);">

-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">

-        <input class="search-input" type="text" id="search-input" placeholder="Search learner..." />

+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" stroke-width="2" stroke-linecap="round">

-        <button class="filter-btn active" data-filter="all" onclick="setFilter('all', this)">

+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">

+          <input class="search-input" id="search-input" type="text" placeholder="Search learner..." />

+          <button class="filter-btn active" data-filter="all" onclick="setFilter('all',this)">

+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">

+          <button class="filter-btn" data-filter="in-progress" onclick="setFilter('in-progress',this)">

+          <button class="filter-btn" data-filter="completed" onclick="setFilter('completed',this)">

+          <button class="filter-btn" data-filter="not-started" onclick="setFilter('not-started',this)">

+        <button class="sort-btn" id="sort-btn" onclick="toggleSort()">

-        <button class="filter-btn" data-filter="in-progress" onclick="setFilter('in-progress', this)">

-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">

-        <button class="filter-btn" data-filter="completed" onclick="setFilter('completed', this)">

-        <button class="filter-btn" data-filter="not-started" onclick="setFilter('not-started', this)">

-        <div class="sort-select" id="sort-toggle" onclick="toggleSort()">

-        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#4e6282" stroke-width="1.5" stroke-linecap="round" style="margin:0 auto 12px">

+        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--ink-muted)" stroke-width="1.5" stroke-linecap="round">

+        No learners match your search or filter.

-    AI Coder: Vibe Coder to Agentic Engineer  |  Utilization Dashboard  |  93 Sessions  ·  3 Weeks

+    AI Coder: Vibe Coder to Agentic Engineer  ·  93 Sessions  ·  3 Weeks  ·  Utilization Dashboard

-      { name: 'Mohammed Al Mansoori', completed: 78 },

-      { name: 'Fatima Al Rashidi',    completed: 93 },

-      { name: 'Ahmed Al Mazrouei',    completed: 45 },

-      { name: 'Mariam Al Suwaidi',    completed: 12 },

-      { name: 'Khalid Al Nuaimi',     completed: 67 },

-      { name: 'Noura Al Hameli',      completed: 0  },

-      { name: 'Sultan Al Kaabi',      completed: 88 },

-      { name: 'Aisha Al Dhaheri',     completed: 31 },

-      { name: 'Omar Al Muhairi',      completed: 55 },

-      { name: 'Latifa Al Shamsi',     completed: 72 },

-      { name: 'Saeed Al Falasi',      completed: 19 },

-      { name: 'Hessa Al Ketbi',       completed: 93 },

-      { name: 'Zayed Al Ameri',       completed: 38 },

-      { name: 'Maitha Al Jabri',      completed: 62 },

-      { name: 'Rashid Al Tenaiji',    completed: 84 },

+      { bg:'#eff4fd', border:'#9bbaf5', text:'#2d6fe8' },

+      { name:'Mohammed Al Mansoori', done:78  },

+      { name:'Fatima Al Rashidi',    done:93  },

+      { name:'Ahmed Al Mazrouei',    done:45  },

+      { name:'Mariam Al Suwaidi',    done:12  },

+      { name:'Khalid Al Nuaimi',     done:67  },

+      { name:'Noura Al Hameli',      done:0   },

+      { name:'Sultan Al Kaabi',      done:88  },

+      { name:'Aisha Al Dhaheri',     done:31  },

+      { name:'Omar Al Muhairi',      done:55  },

+      { name:'Latifa Al Shamsi',     done:72  },

+      { name:'Saeed Al Falasi',      done:19  },

+      { name:'Hessa Al Ketbi',       done:93  },

+      { name:'Zayed Al Ameri',       done:38  },

+      { name:'Maitha Al Jabri',      done:62  },

+      { name:'Rashid Al Tenaiji',    done:84  },

+      const pct    = Math.round((l.done / TOTAL) * 100);

+      const status = l.done === 0 ? 'not-started' : l.done >= TOTAL ? 'completed' : 'in-progress';

+      return { ...l, pct, status, week,

+               remaining: TOTAL - l.done,

+               pal: AVATARS[i % AVATARS.length],

+               initials: l.name.split(' ').slice(0,2).map(p=>p[0]).join('') };

-      return (parts[0][0] + (parts[1] ? parts[1][0] : '')).toUpperCase();

+    const avg = Math.round(DATA.reduce((s,l)=>s+l.pct,0)/DATA.length);

+    const completions = DATA.filter(l=>l.status==='completed').length;

+    const inProgress  = DATA.filter(l=>l.status==='in-progress').length;

+    const top = [...DATA].sort((a,b)=>b.done-a.done)[0];

-      if (completed <= WEEK1_END) return 1;

-      if (completed <= WEEK2_END) return 2;

+    document.getElementById('hero-avg').textContent = avg;

+    document.getElementById('avg-num').textContent  = avg;

+    document.getElementById('completed-num').textContent = completions;

+    document.getElementById('inprogress-num').textContent = inProgress;

-      if (completed === 0) return 'not-started';

-      if (completed >= TOTAL_SESSIONS) return 'completed';

+    document.getElementById('top-name').textContent     = top.name;

+    document.getElementById('top-score').textContent    = top.done + ' of ' + TOTAL + ' sessions';

+    document.getElementById('top-pct').textContent      = top.pct + '%';

+    document.getElementById('top-sessions').textContent = top.done + ' sessions done';

-      return Math.round((completed / TOTAL_SESSIONS) * 100);

+    let filter = 'all', sortAsc = false, query = '';

+        0: { cls:'w0', label:'Not yet' },

-      if (pct >= 100) return 'linear-gradient(90deg, #2ec47a, #1d9e60)';

-      if (pct >= 66)  return 'linear-gradient(90deg, #c4962a, #e8b84b)';

-      if (pct >= 33)  return 'linear-gradient(90deg, #4a7eff, #4a9eff)';

-      return 'linear-gradient(90deg, #4e6282, #6a80a0)';

+        return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>';

+        return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>';

+      return '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>';

-    const LEARNERS = LEARNERS_RAW.map((l, i) => ({

-      remaining: TOTAL_SESSIONS - l.completed,

-      palette: AVATAR_PALETTES[i % AVATAR_PALETTES.length],

-    const totalEnrolled = LEARNERS.length;

-    const avgPct = Math.round(LEARNERS.reduce((s, l) => s + l.pct, 0) / totalEnrolled);

-    const completions = LEARNERS.filter(l => l.status === 'completed').length;

-    const inProgress = LEARNERS.filter(l => l.status === 'in-progress').length;

-    const topPerformer = [...LEARNERS].sort((a, b) => b.completed - a.completed)[0];

-    document.getElementById('header-avg').textContent = avgPct;

-    document.getElementById('stat-avg').textContent = avgPct;

-    document.getElementById('stat-completed').textContent = completions;

-    document.getElementById('stat-inprogress').textContent = inProgress;

-    document.getElementById('top-performer-name').textContent = topPerformer.name;

-    document.getElementById('top-performer-sub').textContent =

-      topPerformer.completed + ' / ' + TOTAL_SESSIONS + ' sessions (' + topPerformer.pct + '%)';

-    let sortAsc = false; // default: high to low

-      if (w === 0) return { label: 'Not Yet', cls: 'w0' };

-      if (w === 1) return { label: 'Week 1', cls: '' };

-      if (w === 2) return { label: 'Week 2', cls: 'w2' };

-      return { label: 'Week 3', cls: 'w3' };

+      return s === 'completed' ? 'Completed' : s === 'in-progress' ? 'In Progress' : 'Not Started';

-        return '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>';

-        return '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>';

-      return '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>';

+      if (pct >= 100) return 'linear-gradient(90deg,#16a362,#3fcf8e)';

+      if (pct >= 66)  return 'linear-gradient(90deg,#b8822a,#e6a93a)';

+      if (pct >= 33)  return 'linear-gradient(90deg,#2d6fe8,#6a9ff5)';

+      return 'linear-gradient(90deg,#9aa3b8,#c0cad9)';

-      if (status === 'completed')   return 'Completed';

-      if (status === 'in-progress') return 'In Progress';

+      if (pct >= 100) return 'var(--green)';

+      if (pct >= 66)  return 'var(--gold)';

+      if (pct >= 33)  return 'var(--blue)';

-      let filtered = LEARNERS.filter(l => {

-        const matchFilter = currentFilter === 'all' || l.status === currentFilter;

-        const matchSearch = l.name.toLowerCase().includes(searchQuery.toLowerCase());

-        return matchFilter && matchSearch;

+        const fOk = filter === 'all' || l.status === filter;

+        const sOk = l.name.toLowerCase().includes(query.toLowerCase());

+      }).sort((a,b) => sortAsc ? a.done - b.done : b.done - a.done);

-      filtered.sort((a, b) => sortAsc ? a.completed - b.completed : b.completed - a.completed);

-      const list = document.getElementById('learner-list');

+      const list  = document.getElementById('learner-list');

const empty = document.getElementById('empty-state');

+      const badge = document.getElementById('count-badge');

+      badge.textContent = rows.length + ' learner' + (rows.length !== 1 ? 's' : '');

-      list.innerHTML = filtered.map((l, idx) => {

+      list.innerHTML = rows.map((l, i) => {

-          <div class="learner-row" data-idx="${idx}" style="transition-delay:${idx * 40}ms">

+          <div class="learner-row" style="transition-delay:${i * 35}ms">

-              <div class="avatar" style="background:${l.palette.bg};border-color:${l.palette.border};color:${l.palette.text}">

+              <div class="avatar" style="background:${l.pal.bg};border-color:${l.pal.border};color:${l.pal.text};">

-
${l.completed} of ${TOTAL_SESSIONS} sessions

+            <div class="pct-cell" style="color:${pctTextColor(l.pct)}">

-        document.querySelectorAll('.learner-row').forEach(row => {

-          requestAnimationFrame(() => row.classList.add('visible'));

+        document.querySelectorAll('.learner-row').forEach(r => {

+          requestAnimationFrame(() => r.classList.add('visible'));

-          document.querySelectorAll('.progress-fill').forEach(bar => {

-            bar.style.width = bar.dataset.pct + '%';

+          document.querySelectorAll('.progress-fill').forEach(b => {

+            b.style.width = b.dataset.pct + '%';

-      document.getElementById('sort-label').textContent = sortAsc ? 'Sort: Low to High' : 'Sort: High to Low';

+      document.getElementById('sort-label').textContent = sortAsc ? 'Low to High' : 'High to Low';

document.getElementById('search-input').addEventListener('input', e => {

-    // animate stat cards in with stagger

-    const cards = document.querySelectorAll('.stat-card');

-      setTimeout(() => card.classList.add('visible'), 100 + i * 100);

+    ['sc-enrolled','sc-avg','sc-completed','sc-inprogress'].forEach((id, i) => {

+      setTimeout(() => document.getElementById(id).classList.add('visible'), 80 + i * 90);

+      document.getElementById('top-bar').style.width = top.pct + '%';

<!DOCTYPE html>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Sora:wght@300;400;500;600&display=swap" rel="stylesheet" />

    <svg class="header-geo" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
      <polygon points="170,10 330,90 330,250 170,330 10,250 10,90" stroke="#c4962a" stroke-width="1.5" fill="none"/>
      <polygon points="170,40 300,110 300,230 170,300 40,230 40,110" stroke="#c4962a" stroke-width="1" fill="none"/>
      <polygon points="170,70 270,130 270,210 170,270 70,210 70,130" stroke="#c4962a" stroke-width="0.75" fill="none"/>
      <line x1="170" y1="10" x2="170" y2="330" stroke="#c4962a" stroke-width="0.5"/>
      <line x1="10" y1="90" x2="330" y2="250" stroke="#c4962a" stroke-width="0.5"/>
      <line x1="330" y1="90" x2="10" y2="250" stroke="#c4962a" stroke-width="0.5"/>
    </svg>
    <svg class="header-geo-bl" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="30" y="30" width="200" height="200" stroke="#c4962a" stroke-width="1" fill="none" transform="rotate(45 130 130)"/>
      <rect x="55" y="55" width="150" height="150" stroke="#c4962a" stroke-width="0.75" fill="none" transform="rotate(45 130 130)"/>
      <circle cx="130" cy="130" r="80" stroke="#c4962a" stroke-width="0.6" fill="none"/>
    </svg>

Udemy — Course Utilization Dashboard

AI Coder: Vibe Coder to
Agentic Engineer

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            3 Weeks Program

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
            </svg>
            93 Total Sessions

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
            15 Enrolled

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8fa3c0" stroke-width="1.8" stroke-linecap="round">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
            </svg>
            Avg. 0% Complete

Top Performer

—

Loading...

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>

15

Total Enrolled

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="14"/>
          </svg>

0%

Average Progress

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
          </svg>

0

Completions

          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c4962a" stroke-width="2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>

0

In Progress

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>

        <input class="search-input" type="text" id="search-input" placeholder="Search learner..." />

        <button class="filter-btn active" data-filter="all" onclick="setFilter('all', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/>
            <line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/>
            <line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
          </svg>
          All
        </button>
        <button class="filter-btn" data-filter="in-progress" onclick="setFilter('in-progress', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>
          In Progress
        </button>
        <button class="filter-btn" data-filter="completed" onclick="setFilter('completed', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
          Completed
        </button>
        <button class="filter-btn" data-filter="not-started" onclick="setFilter('not-started', this)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/>
          </svg>
          Not Started
        </button>

          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/>
            <line x1="6" y1="20" x2="6" y2="16"/>
          </svg>
          Sort: High to Low

Learner

Completed

Remaining

Progress

Done

Current Week

Status

        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#4e6282" stroke-width="1.5" stroke-linecap="round" style="margin:0 auto 12px">
          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        No learners match your search.

    AI Coder: Vibe Coder to Agentic Engineer  |  Utilization Dashboard  |  93 Sessions  ·  3 Weeks


The dashboard has been fully redesigned with a clean white theme. Here's what changed and improved:

**Theme**
- Pure white surfaces (`#ffffff`) with a soft `#f4f6fb` background
- Shadow-based depth instead of dark borders — cards feel lifted
- All colors inverted to work on light backgrounds

**Layout upgrades**
- New sticky topbar with brand logo, "Live data" pulse indicator, and cohort tag
- Hero header with an animated dot-grid + hexagon geometric pattern
- Top Performer card is now dark-on-light (reversed contrast) for visual anchoring
- Stat cards each have a unique 3px colored accent stripe at the top

**Typography**
- `Fraunces` (optical serif) for large numbers and the hero title
- `DM Sans` for all UI body text — cleaner than Sora on white

**Table**
- Grouped filter buttons in a segmented control instead of separate buttons
- Progress bars use a light gray track with a colored border for refinement
- Color-coded percentage values (green/gold/blue/gray by completion tier)

**Interactions**
- Search focuses with a gold ring glow
- Row hover uses a subtle gray wash
- All animations preserved: staggered card entrance, progress bar sweep, row slide-in


the dashboard is not showing properly


Let me read the file to diagnose the issue.


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	  <meta charset="UTF-8" />
5	  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6	  <title>AI Coder — Utilization Dashboard</title>
7	  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;0,700;1,300&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
8	  <style>
9	    :root {
10	      --white:        #ffffff;
11	      --bg:           #f4f6fb;
12	      --bg-alt:       #eef1f8;
13	      --surface:      #ffffff;
14	      --surface-2:    #f9fafc;
15	      --gold:         #b8822a;
16	      --gold-light:   #e6a93a;
17	      --gold-pale:    #fdf3e1;
18	      --gold-border:  #e8c97a;
19	      --ink:          #141926;
20	      --ink-mid:      #3d4a63;
21	      --ink-soft:     #6b7a99;
22	      --ink-muted:    #9aa3b8;
23	      --border:       #e2e6f0;
24	      --border-dark:  #cdd2e0;
25	      --shadow-sm:    0 1px 3px rgba(20,25,38,0.06), 0 1px 2px rgba(20,25,38,0.04);
26	      --shadow-md:    0 4px 12px rgba(20,25,38,0.08), 0 2px 4px rgba(20,25,38,0.04);
27	      --shadow-lg:    0 12px 32px rgba(20,25,38,0.10), 0 4px 8px rgba(20,25,38,0.06);
28	      --green:        #16a362;
29	      --green-bg:     #edfaf4;
30	      --green-border: #a3dfc3;
31	      --blue:         #2d6fe8;
32	      --blue-bg:      #eff4fd;
33	      --blue-border:  #9bbaf5;
34	      --amber:        #c47d0e;
35	      --amber-bg:     #fff8ec;
36	      --amber-border: #f5cc7a;
37	      --slate-bg:     #f2f4f8;
38	      --slate-border: #d0d5e2;
39	      --r-sm:  6px;
40	      --r-md:  12px;
41	      --r-lg:  18px;
42	      --r-xl:  24px;
43	    }
44
45	    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
46
47	    html { scroll-behavior: smooth; }
48
49	    body {
50	      background: var(--bg);

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Coder — Utilization Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;0,700;1,300&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
  <style>
    :root {
      --white:        #ffffff;
      --bg:           #f4f6fb;
      --bg-alt:       #eef1f8;
      --surface:      #ffffff;
      --surface-2:    #f9fafc;
      --gold:         #b8822a;
      --gold-light:   #e6a93a;
      --gold-pale:    #fdf3e1;
      --gold-border:  #e8c97a;
      --ink:          #141926;
      --ink-mid:      #3d4a63;
      --ink-soft:     #6b7a99;
      --ink-muted:    #9aa3b8;
      --border:       #e2e6f0;
      --border-dark:  #cdd2e0;
      --shadow-sm:    0 1px 3px rgba(20,25,38,0.06), 0 1px 2px rgba(20,25,38,0.04);
      --shadow-md:    0 4px 12px rgba(20,25,38,0.08), 0 2px 4px rgba(20,25,38,0.04);
      --shadow-lg:    0 12px 32px rgba(20,25,38,0.10), 0 4px 8px rgba(20,25,38,0.06);
      --green:        #16a362;
      --green-bg:     #edfaf4;
      --green-border: #a3dfc3;
      --blue:         #2d6fe8;
      --blue-bg:      #eff4fd;
      --blue-border:  #9bbaf5;
      --amber:        #c47d0e;
      --amber-bg:     #fff8ec;
      --amber-border: #f5cc7a;
      --slate-bg:     #f2f4f8;
      --slate-border: #d0d5e2;
      --r-sm:  6px;
      --r-md:  12px;
      --r-lg:  18px;
      --r-xl:  24px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);


240
241	    .performer-card-label {
242	      font-size: 10px;
243	      letter-spacing: 0.18em;
244	      text-transform: uppercase;
245	      color: rgba(255,255,255,0.4);
246	      margin-bottom: 14px;
247	      display: flex;
248	      align-items: center;
249	      gap: 7px;
250	    }
251
252	    .trophy-icon {
253	      width: 16px; height: 16px;
254	      color: var(--gold-light);
255	    }
256
257	    .performer-name {
258	      font-family: 'Fraunces', serif;
259	      font-size: 22px;
260	      font-weight: 600;
261	      color: #fff;
262	      line-height: 1.2;
263	      margin-bottom: 6px;
264	    }
265
266	    .performer-score {
267	      font-size: 12px;
268	      color: rgba(255,255,255,0.5);
269	      margin-bottom: 18px;
270	    }
271
272	    .performer-bar-track {
273	      height: 4px;
274	      background: rgba(255,255,255,0.1);
275	      border-radius: 99px;
276	      overflow: hidden;
277	    }
278
279	    .performer-bar-fill {
280	      height: 100%;
281	      border-radius: 99px;
282	      background: linear-gradient(90deg, var(--gold), var(--gold-light));
283	      width: 0%;
284	      transition: width 1.4s cubic-bezier(0.16,1,0.3,1);
285	    }
286
287	    .performer-pct-row {
288	      display: flex;
289	      justify-content: space-between;
290	      align-items: baseline;
291	      margin-top: 8px;
292	    }
293
294	    .performer-pct {
295	      font-family: 'Fraunces', serif;
296	      font-size: 28px;
297	      font-weight: 700;
298	      color: var(--gold-light);
299	      line-height: 1;
300	    }
301
302	    .performer-sessions {
303	      font-size: 11px;
304	      color: rgba(255,255,255,0.4);
305	    }
306
307	    /* ─── MAIN CONTENT ──────────────────────────────── */
308	    .main { padding: 36px 56px 56px; }
309
310	    /* ─── STAT CARDS ────────────────────────────────── */
311	    .stats-grid {
312	      display: grid;
313	      grid-template-columns: repeat(4, 1fr);
314	      gap: 16px;
315	      margin-bottom: 32px;
316	    }
317
318	    .stat-card {
319	      background: var(--surface);
320	      border: 1px solid var(--border);
321	      border-radius: var(--r-lg);
322	      padding: 22px 22px 20px;
323	      position: relative;
324	      overflow: hidden;
325	      box-shadow: var(--shadow-sm);
326	      opacity: 0;
327	      transform: translateY(14px);
328	      transition: opacity 0.5s ease, transform 0.5s ease,
329	                  box-shadow 0.25s ease, border-color 0.25s ease;
330	    }
331
332	    .stat-card.visible { opacity: 1; transform: translateY(0); }
333
334	    .stat-card:hover {
335	      box-shadow: var(--shadow-md);
336	      border-color: var(--border-dark);
337	    }
338
339	    .stat-accent {

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>

    .performer-card-label {
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .trophy-icon {
      width: 16px; height: 16px;
      color: var(--gold-light);
    }

    .performer-name {
      font-family: 'Fraunces', serif;
      font-size: 22px;
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 6px;
    }

    .performer-score {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 18px;
    }

    .performer-bar-track {
      height: 4px;
      background: rgba(255,255,255,0.1);
      border-radius: 99px;
      overflow: hidden;
    }

    .performer-bar-fill {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      width: 0%;
      transition: width 1.4s cubic-bezier(0.16,1,0.3,1);
    }

    .performer-pct-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-top: 8px;
    }

    .performer-pct {
      font-family: 'Fraunces', serif;
      font-size: 28px;
      font-weight: 700;
      color: var(--gold-light);
      line-height: 1;
    }

    .performer-sessions {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }

    /* ─── MAIN CONTENT ──────────────────────────────── */
    .main { padding: 36px 56px 56px; }

    /* ─── STAT CARDS ────────────────────────────────── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 32px;
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 22px 22px 20px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.5s ease, transform 0.5s ease,
                  box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .stat-card.visible { opacity: 1; transform: translateY(0); }

    .stat-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--border-dark);
    }

    .stat-accent {