npm - @codemieai/code - Versions diffs - 0.2.0 → 0.3.0 - Mend

@codemieai/code 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/dist/agents/plugins/claude/plugin/skills/codemie-analytics/references/people-spending-dashboard-template.html ADDED Viewed

@@ -0,0 +1,3270 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>__DASHBOARD_TITLE__ — LiteLLM</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+  <style>
+/**
+ * CodeMie Design Tokens
+ * CSS Custom Properties for the CodeMie UI design system.
+ * Dark theme is default. Add class="light" to <html> for light mode.
+ *
+ * Source: tailwind.config.ts + component analysis from codemie-ui-next
+ */
+/* ============================================================
+   FONT IMPORT
+   ============================================================ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
+/* ============================================================
+   GLOBAL SCALE (theme-independent)
+   ============================================================ */
+:root {
+  /* --- Typography --- */
+  --font-sans: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'GeistMono', 'Fira Code', 'Courier New', monospace;
+  --text-xs-1:  0.625rem;  /* 10px  */
+  --text-xs:    0.75rem;   /* 12px  */
+  --text-sm-1:  0.813rem;  /* 13px  */
+  --text-sm:    0.875rem;  /* 14px  */
+  --text-base:  1rem;      /* 16px  */
+  --text-h1:    2rem;      /* 32px  */
+  --text-h2:    1.5rem;    /* 24px  */
+  --text-h3:    1rem;      /* 16px  */
+  --text-h4:    0.875rem;  /* 14px  */
+  --text-h5:    0.75rem;   /* 12px  */
+  --lh-h1:   2rem;    /* 32px */
+  --lh-h2:   1.5rem;  /* 24px */
+  --lh-h3:   1.3125rem; /* 21px */
+  --lh-h4:   1.125rem;  /* 18px */
+  --lh-h5:   1rem;      /* 16px */
+  /* --- Border Radius --- */
+  --radius-sm:   4px;
+  --radius-md:   6px;
+  --radius-lg:   8px;
+  --radius-xl:   12px;
+  --radius-2xl:  16px;
+  --radius-full: 9999px;
+  /* --- Spacing --- */
+  --space-0-5: 0.125rem;  /* 2px  */
+  --space-1:   0.25rem;   /* 4px  */
+  --space-1-5: 0.375rem;  /* 6px  */
+  --space-2:   0.5rem;    /* 8px  */
+  --space-2-5: 0.625rem;  /* 10px */
+  --space-3:   0.75rem;   /* 12px */
+  --space-4:   1rem;      /* 16px */
+  --space-5:   1.25rem;   /* 20px */
+  --space-6:   1.5rem;    /* 24px */
+  --space-8:   2rem;      /* 32px */
+  /* --- Shadows (dark-friendly defaults) --- */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  --shadow-sidebar: -1px 0 0 0 rgba(255, 255, 255, 0.1);
+  /* --- Transitions --- */
+  --transition-fast: 120ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+  /* --- Layout --- */
+  --navbar-width:          72px;
+  --navbar-width-expanded: 196px;
+  --sidebar-width:         308px;
+  --layout-header-height:  56px;
+  --card-height:           158px;
+  /* --- Z-index --- */
+  --z-dropdown:  30;
+  --z-sticky:    40;
+  --z-modal:     50;
+  --z-toast:     60;
+}
+/* ============================================================
+   DARK THEME (default)
+   ============================================================ */
+:root,
+:root.dark {
+  /* --- Surface / Background --- */
+  --color-bg-page:           #1A1A1A;   /* Main page background         */
+  --color-bg-sidebar:        #151515;   /* Sidebar & card backgrounds   */
+  --color-bg-card:           #151515;   /* Card surface                 */
+  --color-bg-nav:            #000000;   /* Navigation rail              */
+  --color-bg-elevated:       #2E2E2E;   /* Modals, dropdowns, popovers  */
+  --color-bg-secondary:      #212224;   /* Secondary panels             */
+  --color-bg-tertiary:       #2E3033;   /* Tertiary areas               */
+  --color-bg-quaternary:     #333436;   /* Table headers, input prefix  */
+  --color-bg-hover:          #212224;   /* Interactive hover state      */
+  --color-bg-hover-strong:   #333436;   /* Stronger hover               */
+  --color-bg-input:          #1A1A1A;   /* Input & textarea background  */
+  --color-bg-input-prefix:   #333436;   /* Input side label             */
+  --color-bg-btn-primary:    #20222E;   /* Primary button background    */
+  --color-bg-btn-primary-h:  #262941;   /* Primary button hover         */
+  --color-bg-pagination-active: #212224;
+  /* --- Text --- */
+  --color-text-primary:      #FFFFFF;   /* Main body text               */
+  --color-text-secondary:    #F2F0EF;   /* Secondary text               */
+  --color-text-tertiary:     #CCCCCC;   /* Tertiary / subdued           */
+  --color-text-muted:        #BBBBBB;   /* Labels, captions             */
+  --color-text-placeholder:  #CCCCCC;   /* Input placeholder            */
+  --color-text-link:         #F2F0EF;   /* Links in dark mode           */
+  --color-text-link-hover:   #F2F0EF;
+  --color-text-inverse:      #FFFFFF;   /* Text on colored backgrounds  */
+  --color-text-heading:      #BBBBBB;   /* Section headings             */
+  --color-text-nav:          #CCCCCC;   /* Navigation labels            */
+  /* --- Borders --- */
+  --color-border-primary:    #333436;   /* Default border               */
+  --color-border-secondary:  #47484A;   /* Hover/focus border           */
+  --color-border-structural: #333436;   /* Layout dividers              */
+  --color-border-subtle:     #4C4C4C;   /* Very subtle border           */
+  --color-border-accent:     #FFFFFF;   /* Accent / active border       */
+  --color-border-focus:      #FFFFFF;   /* Focus ring                   */
+  --color-border-error:      #F9303C;   /* Error state border           */
+  --color-border-panel:      #333436;   /* Panel outlines               */
+  --color-border-btn-secondary: #333436;
+  --color-border-btn-secondary-h: transparent;
+  /* --- Icons --- */
+  --color-icon-primary:      #FFFFFF;
+  --color-icon-secondary:    #CCCCCC;
+  --color-icon-tertiary:     #999999;
+  --color-icon-error:        #F9303C;
+  /* --- Semantic Colors --- */
+  --color-success:           #259F4C;
+  --color-success-bg:        #1B271F;
+  --color-success-border:    #259F4C;
+  --color-success-text:      #259F4C;
+  --color-error:             #F9303C;
+  --color-error-bg:          #262121;
+  --color-error-border:      #FE3B4C;
+  --color-error-text:        #FE3B4C;
+  --color-warning:           #F5A534;
+  --color-warning-bg:        #492B00;
+  --color-warning-border:    #663B00;
+  --color-warning-text:      #F5A534;
+  --color-info:              #2297F6;
+  --color-info-bg:           #002442;
+  --color-info-border:       #003A69;
+  --color-info-text:         #2297F6;
+  --color-purple:            #C084FC;
+  --color-purple-bg:         #2D1B3D;
+  --color-purple-border:     #2D1B3D;
+  --color-purple-text:       #F3E8FF;
+  --color-cyan:              #06B6D4;
+  --color-cyan-bg:           #003942;
+  --color-cyan-border:       #005866;
+  /* --- Status Badges --- */
+  --status-not-started-text: #A0A0A0;
+  --status-not-started-bg:   #333333;
+  --status-not-started-border: #4C4C4C;
+  --status-in-progress-text: #2297F6;
+  --status-in-progress-bg:   #002442;
+  --status-in-progress-border: #003A69;
+  --status-pending-text:     #06B6D4;
+  --status-pending-bg:       #003942;
+  --status-pending-border:   #005866;
+  --status-success-text:     #259F4C;
+  --status-success-bg:       #1B271F;
+  --status-success-border:   #259F4C;
+  --status-error-text:       #FE3B4C;
+  --status-error-bg:         #262121;
+  --status-error-border:     #FE3B4C;
+  --status-warning-text:     #F5A534;
+  --status-warning-bg:       #492B00;
+  --status-warning-border:   #663B00;
+  --status-advanced-text:    #C084FC;
+  --status-advanced-bg:      #2D1B3D;
+  --status-advanced-border:  #2D1B3D;
+  /* --- Gradients --- */
+  --gradient-primary-btn:    linear-gradient(90deg, #672D92, #547CCC);
+  --gradient-brand:          linear-gradient(152deg, #0078C2, #0047FF, #8453D2);
+  --gradient-magical:        linear-gradient(90deg, #672D92, #5677C8);
+  --gradient-purple-radial:  radial-gradient(271.77% 163.1% at 50% -10.71%, #200E32 0%, #9E00FF 75.14%, #EC56FF 100%);
+  --gradient-switch-off:     linear-gradient(to right, #BBB, #666);
+  --gradient-switch-on:      linear-gradient(to right, #672C92, #547CCC);
+  /* --- Primitive Palette (for swatch display) --- */
+  --blue-25:   #F1F8FF;  --blue-50:   #D5E7FC;  --blue-100:  #B2D7FF;
+  --blue-300:  #2297F6;  --blue-400:  #007AFF;  --blue-500:  #4E32FF;
+  --blue-550:  #0C4DAF;  --blue-600:  #003A69;  --blue-800:  #002442;
+}
+/* ============================================================
+   LIGHT THEME
+   Apply class="light" to <html> or <body>
+   ============================================================ */
+.light {
+  --color-bg-page:           #F9F9F9;
+  --color-bg-sidebar:        #FBFBFB;
+  --color-bg-card:           #FFFFFF;
+  --color-bg-nav:            #FBFBFB;
+  --color-bg-elevated:       #FFFFFF;
+  --color-bg-secondary:      #FFFFFF;
+  --color-bg-tertiary:       #FBFBFB;
+  --color-bg-quaternary:     #B2D7FF;
+  --color-bg-hover:          #D5E7FC;
+  --color-bg-hover-strong:   #D5E7FC;
+  --color-bg-input:          #FFFFFF;
+  --color-bg-input-prefix:   #EEEEEE;
+  --color-bg-btn-primary:    #D5E7FC;
+  --color-bg-btn-primary-h:  #B2D7FF;
+  --color-bg-pagination-active: #D5E7FC;
+  --color-text-primary:      #333333;
+  --color-text-secondary:    #333333;
+  --color-text-tertiary:     #333333;
+  --color-text-muted:        #666666;
+  --color-text-placeholder:  #999999;
+  --color-text-link:         #007AFF;
+  --color-text-link-hover:   #0C4DAF;
+  --color-text-inverse:      #FFFFFF;
+  --color-text-heading:      #007AFF;
+  --color-text-nav:          #FFFFFF;
+  --color-border-primary:    #CCCCCC;
+  --color-border-secondary:  #BBBBBB;
+  --color-border-structural: #E5E5E5;
+  --color-border-subtle:     #999999;
+  --color-border-accent:     #007AFF;
+  --color-border-focus:      #000000;
+  --color-border-error:      #F9303C;
+  --color-border-panel:      #E5E5E5;
+  --color-border-btn-secondary: transparent;
+  --color-border-btn-secondary-h: #007AFF;
+  --color-icon-primary:      #666666;
+  --color-icon-secondary:    #333333;
+  --color-icon-tertiary:     #707070;
+  --color-icon-error:        #F9303C;
+  --color-success:           #259F4C;
+  --color-success-bg:        #E6F7E6;
+  --color-success-border:    #259F4C;
+  --color-success-text:      #259F4C;
+  --color-error:             #F9303C;
+  --color-error-bg:          #F0E2E3;
+  --color-error-border:      #FE3B4C;
+  --color-error-text:        #FE3B4C;
+  --color-warning:           #F5A534;
+  --color-warning-bg:        #FAF2E7;
+  --color-warning-border:    #F5A534;
+  --color-warning-text:      #F5A534;
+  --color-info:              #2297F6;
+  --color-info-bg:           #D5E7FC;
+  --color-info-border:       #2297F6;
+  --color-info-text:         #2297F6;
+  --color-purple:            #8B5CF6;
+  --color-purple-bg:         #F3E8FF;
+  --color-purple-border:     #F3E8FF;
+  --color-purple-text:       #C084FC;
+  --color-cyan:              #06B6D4;
+  --color-cyan-bg:           #DFFAFF;
+  --color-cyan-border:       #005866;
+  --status-not-started-text: #A0A0A0;
+  --status-not-started-bg:   #EEEEEE;
+  --status-not-started-border: #999999;
+  --status-in-progress-text: #2297F6;
+  --status-in-progress-bg:   #D5E7FC;
+  --status-in-progress-border: #2297F6;
+  --status-pending-text:     #06B6D4;
+  --status-pending-bg:       #DFFAFF;
+  --status-pending-border:   #06B6D4;
+  --status-success-text:     #259F4C;
+  --status-success-bg:       #E6F7E6;
+  --status-success-border:   #259F4C;
+  --status-error-text:       #FE3B4C;
+  --status-error-bg:         #F0E2E3;
+  --status-error-border:     #FE3B4C;
+  --status-warning-text:     #F5A534;
+  --status-warning-bg:       #FAF2E7;
+  --status-warning-border:   #F5A534;
+  --status-advanced-text:    #8B5CF6;
+  --status-advanced-bg:      #F3E8FF;
+  --status-advanced-border:  #C084FC;
+  --gradient-primary-btn:    linear-gradient(90deg, #3676f7, #cc22f2);
+  --gradient-magical:        linear-gradient(90deg, #3676f7, #cc22f2);
+  --gradient-switch-off:     linear-gradient(to right, #fff, #fff);
+  --gradient-switch-on:      linear-gradient(to right, #007AFF, #007AFF);
+  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
+  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
+}
+/**
+ * CodeMie Base Styles
+ * Reset, body, scrollbar, and global base rules.
+ */
+/* ============================================================
+   RESET
+   ============================================================ */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+/* ============================================================
+   BODY
+   ============================================================ */
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-page);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* ============================================================
+   LINKS
+   ============================================================ */
+a {
+  color: var(--color-text-link);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+a:hover {
+  color: var(--color-text-link-hover);
+  text-decoration: underline;
+}
+/* ============================================================
+   SCROLLBAR (WebKit)
+   ============================================================ */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-subtle);
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-secondary);
+}
+/* ============================================================
+   SELECTION
+   ============================================================ */
+::selection {
+  background: rgba(34, 151, 246, 0.3);
+  color: var(--color-text-primary);
+}
+/* ============================================================
+   FOCUS RING
+   ============================================================ */
+:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+/* ============================================================
+   IMAGES & MEDIA
+   ============================================================ */
+img, svg, video {
+  display: block;
+  max-width: 100%;
+}
+/* ============================================================
+   LISTS
+   ============================================================ */
+ul, ol {
+  list-style: none;
+}
+/* ============================================================
+   CODE
+   ============================================================ */
+code, pre, kbd, samp {
+  font-family: var(--font-mono);
+}
+code {
+  font-size: 0.875em;
+  background: var(--color-bg-quaternary);
+  color: var(--color-text-secondary);
+  padding: 0.1em 0.4em;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-primary);
+}
+pre {
+  background: var(--color-bg-quaternary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  overflow-x: auto;
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+}
+pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+}
+/* ============================================================
+   HR / DIVIDER
+   ============================================================ */
+hr, .divider {
+  border: none;
+  border-top: 1px solid var(--color-border-structural);
+  margin: var(--space-4) 0;
+}
+/* ============================================================
+   LAYOUT HELPERS
+   ============================================================ */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--space-4);
+}
+.section {
+  padding: var(--space-8) 0;
+}
+/* ============================================================
+   ICON (inline SVG sizing helpers)
+   ============================================================ */
+.icon-xs  { width: 12px; height: 12px; flex-shrink: 0; }
+.icon-sm  { width: 16px; height: 16px; flex-shrink: 0; }
+.icon-md  { width: 18px; height: 18px; flex-shrink: 0; }
+.icon-lg  { width: 20px; height: 20px; flex-shrink: 0; }
+.icon-xl  { width: 24px; height: 24px; flex-shrink: 0; }
+.icon-2xl { width: 32px; height: 32px; flex-shrink: 0; }
+/**
+ * CodeMie Typography
+ * Headings, text scales, font utilities.
+ */
+/* ============================================================
+   HEADINGS
+   ============================================================ */
+h1, .h1 {
+  font-size: var(--text-h1);
+  line-height: var(--lh-h1);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  letter-spacing: -0.02em;
+}
+h2, .h2 {
+  font-size: var(--text-h2);
+  line-height: var(--lh-h2);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+h3, .h3 {
+  font-size: var(--text-h3);
+  line-height: var(--lh-h3);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+h4, .h4 {
+  font-size: var(--text-h4);
+  line-height: var(--lh-h4);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+h5, .h5 {
+  font-size: var(--text-h5);
+  line-height: var(--lh-h5);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+h6, .h6 {
+  font-size: var(--text-xs);
+  line-height: 1.4;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+/* Section label (used above section headings) */
+.section-label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--color-text-heading);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-2);
+}
+/* ============================================================
+   TEXT SIZE UTILITIES
+   ============================================================ */
+.text-2xl  { font-size: 1.5rem; }
+.text-xl   { font-size: 1.25rem; }
+.text-lg   { font-size: 1.125rem; }
+.text-base { font-size: var(--text-base); }
+.text-sm   { font-size: var(--text-sm); }
+.text-sm-1 { font-size: var(--text-sm-1); }
+.text-xs   { font-size: var(--text-xs); }
+.text-xs-1 { font-size: var(--text-xs-1); }
+/* ============================================================
+   FONT WEIGHT UTILITIES
+   ============================================================ */
+.font-normal   { font-weight: 400; }
+.font-medium   { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold     { font-weight: 700; }
+/* ============================================================
+   TEXT COLOR UTILITIES
+   ============================================================ */
+.text-primary     { color: var(--color-text-primary); }
+.text-secondary   { color: var(--color-text-secondary); }
+.text-tertiary    { color: var(--color-text-tertiary); }
+.text-muted       { color: var(--color-text-muted); }
+.text-link        { color: var(--color-text-link); }
+.text-inverse     { color: var(--color-text-inverse); }
+.text-success     { color: var(--color-success-text); }
+.text-error       { color: var(--color-error-text); }
+.text-warning     { color: var(--color-warning-text); }
+.text-info        { color: var(--color-info-text); }
+/* ============================================================
+   TEXT STYLE UTILITIES
+   ============================================================ */
+.uppercase    { text-transform: uppercase; }
+.capitalize   { text-transform: capitalize; }
+.lowercase    { text-transform: lowercase; }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.nowrap    { white-space: nowrap; }
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+/* ============================================================
+   PARAGRAPH
+   ============================================================ */
+p {
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+}
+p + p {
+  margin-top: var(--space-3);
+}
+/* Caption / helper text */
+.caption {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  line-height: 1.4;
+}
+/* Monospace inline text */
+.mono {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+/**
+ * CodeMie Button Components
+ * All button variants, sizes, and states.
+ *
+ * Usage: <button class="btn btn-primary btn-md">Label</button>
+ */
+/* ============================================================
+   BASE BUTTON
+   ============================================================ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1-5);
+  font-family: var(--font-sans);
+  font-weight: 600;
+  white-space: nowrap;
+  border-radius: var(--radius-lg);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition:
+    background-color var(--transition-base),
+    border-color var(--transition-base),
+    color var(--transition-base),
+    opacity var(--transition-base);
+  text-decoration: none;
+  user-select: none;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+.btn:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+.btn:disabled,
+.btn[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+/* ============================================================
+   SIZES
+   ============================================================ */
+/* Small — 24px height */
+.btn-sm {
+  height: 24px;
+  padding: 0 var(--space-1-5);
+  gap: var(--space-1);
+  font-size: var(--text-xs);
+  line-height: 20px;
+}
+/* Medium — 28px height (default) */
+.btn-md {
+  height: 28px;
+  padding: 0 var(--space-2);
+  gap: var(--space-1-5);
+  font-size: var(--text-xs);
+  line-height: 24px;
+}
+/* Large — 44px height */
+.btn-lg {
+  height: 44px;
+  padding: 0 var(--space-4);
+  gap: var(--space-2-5);
+  font-size: var(--text-sm);
+  line-height: 28px;
+}
+/* ============================================================
+   VARIANTS
+   ============================================================ */
+/* Primary — Navy/gradient background with gradient border */
+.btn-primary {
+  background-color: var(--color-bg-btn-primary);
+  color: var(--color-text-secondary);
+  border: 1px solid transparent;
+  background-image:
+    linear-gradient(var(--color-bg-btn-primary), var(--color-bg-btn-primary)),
+    var(--gradient-primary-btn);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+}
+.btn-primary:hover:not(:disabled) {
+  background-image:
+    linear-gradient(var(--color-bg-btn-primary-h), var(--color-bg-btn-primary-h)),
+    var(--gradient-primary-btn);
+}
+/* Secondary — Subtle bordered */
+.btn-secondary {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  border-color: var(--color-border-btn-secondary);
+}
+.btn-secondary:hover:not(:disabled) {
+  background-color: var(--color-bg-hover-strong);
+  border-color: var(--color-border-btn-secondary-h);
+}
+/* Base — Standard outlined */
+.btn-base {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-structural);
+}
+.btn-base:hover:not(:disabled) {
+  background-color: var(--color-border-structural);
+}
+/* Action — Accent highlighted (blue tint bg in dark) */
+.btn-action {
+  background-color: var(--color-bg-btn-primary);
+  color: var(--color-text-secondary);
+  border-color: var(--color-bg-input-prefix);
+}
+.btn-action:hover:not(:disabled) {
+  border-color: var(--color-border-btn-secondary-h);
+  background-color: var(--color-bg-btn-primary-h);
+}
+/* Delete — Red destructive */
+.btn-delete {
+  background-color: rgba(254, 59, 76, 0.1);
+  color: var(--color-error-text);
+  border-color: var(--color-error-border);
+}
+.btn-delete:hover:not(:disabled) {
+  background-color: rgba(254, 59, 76, 0.15);
+  border-color: var(--color-error);
+}
+/* Tertiary / Ghost — no background */
+.btn-tertiary,
+.btn-ghost {
+  background-color: transparent;
+  color: var(--color-text-primary);
+  border-color: transparent;
+}
+.btn-tertiary:hover:not(:disabled),
+.btn-ghost:hover:not(:disabled) {
+  background-color: var(--color-border-structural);
+}
+/* Magical — Gradient fill, brand colors */
+.btn-magical {
+  background: var(--gradient-magical);
+  color: var(--color-text-inverse);
+  border-color: var(--color-border-structural);
+}
+.btn-magical:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+/* Link — Plain text, no box */
+.btn-link {
+  background: transparent;
+  border-color: transparent;
+  color: var(--color-text-link);
+  padding-left: 0;
+  padding-right: 0;
+  font-weight: 500;
+  height: auto;
+}
+.btn-link:hover:not(:disabled) {
+  text-decoration: underline;
+}
+/* ============================================================
+   ICON BUTTON (square)
+   ============================================================ */
+.btn-icon {
+  padding: 0;
+  aspect-ratio: 1;
+}
+.btn-icon.btn-sm { width: 24px; }
+.btn-icon.btn-md { width: 28px; }
+.btn-icon.btn-lg { width: 44px; }
+/* ============================================================
+   FULL WIDTH
+   ============================================================ */
+.btn-full {
+  width: 100%;
+}
+/* ============================================================
+   LOADING STATE
+   ============================================================ */
+.btn-loading {
+  cursor: wait;
+  pointer-events: none;
+}
+.btn-loading::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.12) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: btn-shimmer 1.5s infinite linear;
+}
+@keyframes btn-shimmer {
+  from { background-position: -200% 0; }
+  to   { background-position:  200% 0; }
+}
+/* ============================================================
+   BUTTON GROUP
+   ============================================================ */
+.btn-group {
+  display: inline-flex;
+  gap: 0;
+}
+.btn-group .btn {
+  border-radius: 0;
+}
+.btn-group .btn:first-child {
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+}
+.btn-group .btn:last-child {
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+}
+.btn-group .btn:not(:first-child) {
+  margin-left: -1px;
+}
+/**
+ * CodeMie Form Components
+ * Input, Textarea, Select, Checkbox, Radio, Switch.
+ */
+/* ============================================================
+   FORM GROUP (field wrapper)
+   ============================================================ */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+/* ============================================================
+   LABEL
+   ============================================================ */
+.form-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-0-5);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--color-text-muted);
+}
+.form-label .required {
+  color: var(--color-error);
+  margin-left: 1px;
+}
+/* ============================================================
+   INPUT
+   ============================================================ */
+.input-wrapper {
+  display: flex;
+  align-items: stretch;
+  min-height: 32px;
+  max-height: 32px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-bg-input);
+  transition:
+    border-color var(--transition-base),
+    box-shadow var(--transition-base);
+  overflow: hidden;
+}
+.input-wrapper:hover:not(.input-disabled) {
+  border-color: var(--color-border-secondary);
+}
+.input-wrapper:focus-within:not(.input-disabled) {
+  border-color: var(--color-border-secondary);
+}
+.input-wrapper.input-error {
+  border-color: var(--color-border-error);
+}
+.input-wrapper.input-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+/* The actual <input> inside wrapper */
+.form-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  padding: 0 var(--space-2);
+  min-width: 0;
+}
+.form-input::placeholder {
+  color: var(--color-text-placeholder);
+}
+.form-input:disabled {
+  cursor: not-allowed;
+}
+/* Standalone input (no wrapper needed) */
+input.input,
+.input {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 var(--space-2);
+  background-color: var(--color-bg-input);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  outline: none;
+  transition: border-color var(--transition-base);
+}
+input.input::placeholder,
+.input::placeholder {
+  color: var(--color-text-placeholder);
+}
+input.input:hover,
+.input:hover {
+  border-color: var(--color-border-secondary);
+}
+input.input:focus,
+.input:focus {
+  border-color: var(--color-border-secondary);
+}
+input.input.input-error,
+.input.input-error {
+  border-color: var(--color-border-error);
+}
+input.input:disabled,
+.input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+/* Sizes */
+.input-lg {
+  height: 40px;
+  font-size: var(--text-base);
+  padding: 0 var(--space-3);
+}
+/* Input prefix / suffix labels */
+.input-prefix,
+.input-suffix {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  background-color: var(--color-bg-input-prefix);
+  white-space: nowrap;
+  flex-shrink: 0;
+  border-right: 1px solid var(--color-border-subtle);
+}
+.input-suffix {
+  border-right: none;
+  border-left: 1px solid var(--color-border-subtle);
+}
+.input-adornment {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-2);
+  color: var(--color-icon-tertiary);
+  flex-shrink: 0;
+}
+/* ============================================================
+   TEXTAREA
+   ============================================================ */
+textarea.textarea,
+.textarea {
+  display: block;
+  width: 100%;
+  min-height: 80px;
+  max-height: 384px; /* max-h-96 */
+  padding: var(--space-2-5) var(--space-3);
+  background-color: var(--color-bg-input);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  outline: none;
+  resize: vertical;
+  line-height: 1.5;
+  transition: border-color var(--transition-base);
+}
+textarea.textarea::placeholder,
+.textarea::placeholder {
+  color: var(--color-text-placeholder);
+}
+textarea.textarea:hover,
+.textarea:hover {
+  border-color: var(--color-border-secondary);
+}
+textarea.textarea:focus,
+.textarea:focus {
+  border-color: var(--color-border-secondary);
+}
+textarea.textarea.textarea-error,
+.textarea.textarea-error {
+  border-color: var(--color-border-error);
+}
+textarea.textarea:disabled,
+.textarea:disabled {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+/* ============================================================
+   SELECT
+   ============================================================ */
+.select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 var(--space-2);
+  background-color: var(--color-bg-input);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  user-select: none;
+  transition: border-color var(--transition-base);
+  gap: var(--space-2);
+}
+.select-trigger:hover {
+  border-color: var(--color-border-secondary);
+}
+.select-trigger.select-open {
+  border-color: var(--color-border-secondary);
+}
+.select-trigger .select-arrow {
+  color: var(--color-icon-tertiary);
+  flex-shrink: 0;
+  transition: transform var(--transition-base);
+}
+.select-trigger.select-open .select-arrow {
+  transform: rotate(180deg);
+}
+/* Native select fallback */
+select.select {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 var(--space-2);
+  background-color: var(--color-bg-input);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 28px;
+}
+select.select:hover {
+  border-color: var(--color-border-secondary);
+}
+select.select:focus {
+  border-color: var(--color-border-secondary);
+}
+/* Dropdown panel */
+.select-panel {
+  position: absolute;
+  z-index: var(--z-dropdown);
+  min-width: 160px;
+  max-width: 256px;
+  margin-top: var(--space-2);
+  padding: var(--space-1-5);
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-panel);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  max-height: 240px;
+  overflow-y: auto;
+}
+.select-option {
+  display: block;
+  padding: var(--space-1-5) var(--space-2-5);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.select-option:hover {
+  background-color: var(--color-bg-hover-strong);
+}
+.select-option.selected {
+  background-color: var(--color-bg-hover);
+  font-weight: 500;
+}
+/* ============================================================
+   CHECKBOX
+   ============================================================ */
+.checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  user-select: none;
+}
+.checkbox-wrapper input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
+  border: 2px solid var(--color-border-primary);
+  background-color: var(--color-bg-elevated);
+  transition:
+    border-color var(--transition-fast),
+    background-color var(--transition-fast);
+}
+.checkbox-wrapper:hover .checkbox-box {
+  border-color: var(--color-border-secondary);
+}
+.checkbox-wrapper input[type='checkbox']:checked + .checkbox-box {
+  border-color: var(--color-text-primary);
+  background-color: var(--color-text-primary);
+}
+.checkbox-check {
+  display: none;
+  width: 12px;
+  height: 12px;
+  color: var(--color-bg-page);
+}
+.checkbox-wrapper input[type='checkbox']:checked + .checkbox-box .checkbox-check {
+  display: block;
+}
+.checkbox-label {
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+}
+.checkbox-wrapper.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+/* ============================================================
+   RADIO
+   ============================================================ */
+.radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  user-select: none;
+}
+.radio-wrapper input[type='radio'] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.radio-dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--color-border-primary);
+  background-color: var(--color-bg-elevated);
+  transition:
+    border-color var(--transition-fast),
+    background-color var(--transition-fast);
+}
+.radio-dot::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-page);
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+.radio-wrapper:hover .radio-dot {
+  border-color: var(--color-border-secondary);
+}
+.radio-wrapper input[type='radio']:checked + .radio-dot {
+  border-color: var(--color-text-primary);
+  background-color: var(--color-text-primary);
+}
+.radio-wrapper input[type='radio']:checked + .radio-dot::after {
+  opacity: 1;
+}
+.radio-label {
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+}
+/* ============================================================
+   SWITCH (Toggle)
+   ============================================================ */
+.switch-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  user-select: none;
+}
+.switch-wrapper input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.switch-track {
+  position: relative;
+  width: 32px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: var(--gradient-switch-off);
+  border: 1px solid var(--color-border-primary);
+  transition:
+    background var(--transition-base),
+    border-color var(--transition-base);
+  flex-shrink: 0;
+}
+.switch-wrapper input[type='checkbox']:checked + .switch-track {
+  background: var(--gradient-switch-on);
+  border-color: var(--color-border-accent);
+}
+.switch-knob {
+  position: absolute;
+  top: 1px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  background-color: #CCCCCC;
+  transition: transform var(--transition-base), background-color var(--transition-base);
+  pointer-events: none;
+}
+.switch-wrapper input[type='checkbox']:checked ~ .switch-track .switch-knob {
+  transform: translateX(16px);
+  background-color: #FFFFFF;
+}
+/* Alternative pure CSS switch using :has() or JS class */
+.switch-track.switch-on .switch-knob {
+  transform: translateX(16px);
+  background-color: #FFFFFF;
+}
+.switch-label {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  transition: color var(--transition-fast);
+}
+.switch-wrapper:hover .switch-label {
+  color: var(--color-border-accent);
+}
+/* ============================================================
+   FORM ERROR / HELPER TEXT
+   ============================================================ */
+.form-error {
+  font-size: var(--text-sm);
+  color: var(--color-error-text);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  margin-top: var(--space-0-5);
+}
+.form-helper {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  margin-top: var(--space-0-5);
+}
+/* ============================================================
+   SEARCH INPUT
+   ============================================================ */
+.search-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.search-input-wrapper .search-icon {
+  position: absolute;
+  left: var(--space-2);
+  color: var(--color-icon-tertiary);
+  pointer-events: none;
+}
+.search-input-wrapper input {
+  padding-left: 28px;
+}
+/**
+ * CodeMie UI Components
+ * Cards, Badges, Status badges, Alerts, Avatars, Tags, Spinner, Tooltip, Progress.
+ */
+/* ============================================================
+   CARD
+   ============================================================ */
+.card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border-structural);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  transition:
+    border-color var(--transition-base),
+    box-shadow var(--transition-base);
+}
+.card:hover {
+  border-color: var(--color-border-secondary);
+}
+.card-fixed {
+  height: var(--card-height); /* 158px */
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--color-border-structural);
+}
+.card-body {
+  flex: 1;
+  padding: var(--space-4);
+  overflow: hidden;
+}
+.card-footer {
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--color-border-structural);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.card-title {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.card-subtitle {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.card-description {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+/* Panel — larger surface for content areas */
+.panel {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-panel);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-border-structural);
+  background-color: var(--color-bg-tertiary);
+}
+.panel-body {
+  padding: var(--space-4);
+}
+/* ============================================================
+   STATUS BADGE
+   ============================================================ */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  padding: 0 var(--space-2);
+  height: 17px;
+  line-height: 17px;
+  border-radius: var(--radius-full);
+  border: 1px solid;
+  font-size: var(--text-xs-1);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  user-select: none;
+  flex-shrink: 0;
+}
+.badge-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  display: inline-block;
+}
+/* Variants */
+.badge-not-started {
+  background-color: var(--status-not-started-bg);
+  color: var(--status-not-started-text);
+  border-color: var(--status-not-started-border);
+}
+.badge-not-started .badge-dot { background-color: var(--status-not-started-text); }
+.badge-in-progress {
+  background-color: var(--status-in-progress-bg);
+  color: var(--status-in-progress-text);
+  border-color: var(--status-in-progress-border);
+}
+.badge-in-progress .badge-dot {
+  background-color: var(--status-in-progress-text);
+  animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.badge-pending {
+  background-color: var(--status-pending-bg);
+  color: var(--status-pending-text);
+  border-color: var(--status-pending-border);
+}
+.badge-pending .badge-dot { background-color: var(--status-pending-text); }
+.badge-success {
+  background-color: var(--status-success-bg);
+  color: var(--status-success-text);
+  border-color: var(--status-success-border);
+}
+.badge-success .badge-dot { background-color: var(--status-success-text); }
+.badge-error {
+  background-color: var(--status-error-bg);
+  color: var(--status-error-text);
+  border-color: var(--status-error-border);
+}
+.badge-error .badge-dot { background-color: var(--status-error-text); }
+.badge-warning {
+  background-color: var(--status-warning-bg);
+  color: var(--status-warning-text);
+  border-color: var(--status-warning-border);
+}
+.badge-warning .badge-dot { background-color: var(--status-warning-text); }
+.badge-advanced {
+  background-color: var(--status-advanced-bg);
+  color: var(--status-advanced-text);
+  border-color: var(--status-advanced-border);
+}
+.badge-advanced .badge-dot { background-color: var(--status-advanced-text); }
+@keyframes badge-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+/* ============================================================
+   TAG (category / label)
+   ============================================================ */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-secondary);
+  background-color: var(--color-bg-secondary);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  user-select: none;
+}
+/* Tag sizes */
+.tag-sm {
+  padding: 1px var(--space-1-5);
+  font-size: var(--text-xs-1);
+  border-radius: var(--radius-md);
+}
+/* Tag colors */
+.tag-blue {
+  background-color: var(--color-info-bg);
+  border-color: var(--color-info-border);
+  color: var(--color-info-text);
+}
+.tag-green {
+  background-color: var(--color-success-bg);
+  border-color: var(--color-success-border);
+  color: var(--color-success-text);
+}
+.tag-red {
+  background-color: var(--color-error-bg);
+  border-color: var(--color-error-border);
+  color: var(--color-error-text);
+}
+.tag-yellow {
+  background-color: var(--color-warning-bg);
+  border-color: var(--color-warning-border);
+  color: var(--color-warning-text);
+}
+.tag-purple {
+  background-color: var(--color-purple-bg);
+  border-color: var(--color-purple-border);
+  color: var(--color-purple-text);
+}
+/* ============================================================
+   ALERT / INFO BANNER
+   ============================================================ */
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  border: 1px solid;
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+.alert-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+.alert-info {
+  background-color: var(--color-info-bg);
+  border-color: var(--color-info-border);
+  color: var(--color-info-text);
+}
+.alert-success {
+  background-color: var(--color-success-bg);
+  border-color: var(--color-success-border);
+  color: var(--color-success-text);
+}
+.alert-warning {
+  background-color: var(--color-warning-bg);
+  border-color: var(--color-warning-border);
+  color: var(--color-warning-text);
+}
+.alert-error {
+  background-color: var(--color-error-bg);
+  border-color: var(--color-error-border);
+  color: var(--color-error-text);
+}
+/* ============================================================
+   AVATAR
+   ============================================================ */
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border-secondary);
+  background-color: var(--color-bg-elevated);
+  overflow: hidden;
+  flex-shrink: 0;
+  user-select: none;
+  font-weight: 600;
+  color: #FFFFFF;
+  font-size: var(--text-xs);
+}
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--radius-full);
+}
+/* Sizes */
+.avatar-xs    { width: 20px;  height: 20px;  font-size: 8px; border-width: 1px; }
+.avatar-sm    { width: 24px;  height: 24px;  font-size: 9px; border-width: 1px; }
+.avatar-md    { width: 32px;  height: 32px;  font-size: var(--text-xs); }
+.avatar-chat  { width: 40px;  height: 40px;  font-size: var(--text-sm); }
+.avatar-lg    { width: 72px;  height: 72px;  font-size: var(--text-h3); border-width: 2px; }
+.avatar-xl    { width: 96px;  height: 96px;  font-size: var(--text-h2); border-width: 2px; }
+.avatar-modal { width: 176px; height: 176px; font-size: var(--text-h1); border-width: 2px; }
+/* Avatar initials color palette */
+.avatar-color-0  { background-color: #AA47BC; }
+.avatar-color-1  { background-color: #7A1FA2; }
+.avatar-color-2  { background-color: #6B8592; }
+.avatar-color-3  { background-color: #465A65; }
+.avatar-color-4  { background-color: #EC407A; }
+.avatar-color-5  { background-color: #C2175B; }
+.avatar-color-6  { background-color: #5C6BC0; }
+.avatar-color-7  { background-color: #0288D1; }
+.avatar-color-8  { background-color: #00579C; }
+.avatar-color-9  { background-color: #0098A6; }
+.avatar-color-10 { background-color: #00887A; }
+.avatar-color-11 { background-color: #004C3F; }
+.avatar-color-12 { background-color: #689F39; }
+.avatar-color-13 { background-color: #33691E; }
+.avatar-color-14 { background-color: #8C6E63; }
+.avatar-color-15 { background-color: #5D4038; }
+.avatar-color-16 { background-color: #7E57C2; }
+.avatar-color-17 { background-color: #512DA7; }
+.avatar-color-18 { background-color: #EF6C00; }
+.avatar-color-19 { background-color: #F5511E; }
+.avatar-color-20 { background-color: #AA3410; }
+/* Avatar group (stacked) */
+.avatar-group {
+  display: flex;
+  align-items: center;
+}
+.avatar-group .avatar {
+  margin-left: -8px;
+}
+.avatar-group .avatar:first-child {
+  margin-left: 0;
+}
+/* ============================================================
+   SPINNER
+   ============================================================ */
+.spinner {
+  display: inline-block;
+  border-radius: var(--radius-full);
+  border-style: solid;
+  border-color: var(--color-border-secondary);
+  border-top-color: var(--color-text-primary);
+  animation: spinner-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+.spinner-xs  { width: 12px; height: 12px; border-width: 1.5px; }
+.spinner-sm  { width: 16px; height: 16px; border-width: 2px; }
+.spinner-md  { width: 24px; height: 24px; border-width: 2px; }
+.spinner-lg  { width: 32px; height: 32px; border-width: 3px; }
+.spinner-xl  { width: 48px; height: 48px; border-width: 3px; }
+.spinner-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+@keyframes spinner-spin {
+  to { transform: rotate(360deg); }
+}
+/* ============================================================
+   PROGRESS BAR
+   ============================================================ */
+.progress-track {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--color-bg-tertiary);
+  border-radius: 68px;
+  border: 1px solid var(--color-border-secondary);
+  width: 85px;
+  height: 14px;
+}
+.progress-fill {
+  height: 100%;
+  background: var(--gradient-primary-btn);
+  border-radius: 68px;
+  transition: width 200ms ease-out;
+}
+.progress-label {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 9px;
+  line-height: 10px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+/* Full-width progress bar */
+.progress-bar {
+  width: 100%;
+  height: 4px;
+  background-color: var(--color-bg-tertiary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+.progress-bar .progress-fill {
+  height: 4px;
+  border-radius: var(--radius-full);
+}
+/* ============================================================
+   TOOLTIP
+   ============================================================ */
+.tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+.tooltip {
+  position: absolute;
+  z-index: var(--z-toast);
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--color-bg-elevated);
+  color: var(--color-text-primary);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  line-height: 1;
+  white-space: nowrap;
+  box-shadow: var(--shadow-md);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+.tooltip-wrapper:hover .tooltip {
+  opacity: 1;
+}
+/* Tooltip positions */
+.tooltip-right {
+  bottom: auto;
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+.tooltip-bottom {
+  bottom: auto;
+  top: calc(100% + 8px);
+}
+/* ============================================================
+   EMPTY STATE
+   ============================================================ */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-4);
+  text-align: center;
+  gap: var(--space-3);
+}
+.empty-state-icon {
+  color: var(--color-icon-tertiary);
+  margin-bottom: var(--space-1);
+}
+.empty-state-title {
+  font-size: var(--text-h4);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.empty-state-description {
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  max-width: 320px;
+}
+/* ============================================================
+   CHIP / CLOSE TAG
+   ============================================================ */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 2px var(--space-1-5);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-quaternary);
+  border: 1px solid var(--color-border-primary);
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+}
+.chip-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-full);
+  background: transparent;
+  border: none;
+  color: var(--color-icon-tertiary);
+  cursor: pointer;
+  padding: 0;
+  transition: color var(--transition-fast), background-color var(--transition-fast);
+}
+.chip-close:hover {
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-hover);
+}
+/* ============================================================
+   STAT CARD (metric KPI tile)
+   ============================================================ */
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-3) var(--space-4);
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border-structural);
+  border-radius: var(--radius-xl);
+  min-width: 0;
+}
+.stat-card-label {
+  font-size: var(--text-xs-1);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.stat-card-value {
+  font-size: var(--text-h2);
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--color-text-primary);
+}
+.stat-card-desc {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* Stat card inside a grid */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-3);
+}
+/* ============================================================
+   DESCRIPTION LIST (key-value pairs)
+   ============================================================ */
+.dl-grid {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: var(--space-2) var(--space-4);
+  font-size: var(--text-sm);
+}
+.dl-grid dt {
+  color: var(--color-text-muted);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.dl-grid dd {
+  color: var(--color-text-primary);
+}
+/**
+ * CodeMie Layout & Navigation
+ * Tables, Tabs, Pagination, Modals, Navigation.
+ */
+/* ============================================================
+   TABLE
+   ============================================================ */
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+table.table,
+.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--text-xs);
+  line-height: 1.3;
+}
+.table thead tr th {
+  text-align: left;
+  padding: var(--space-2-5) var(--space-4);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-quaternary);
+  border-top: 1px solid var(--color-border-structural);
+  border-bottom: 1px solid var(--color-border-structural);
+  white-space: nowrap;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.table thead tr th:first-child {
+  border-left: 1px solid var(--color-border-structural);
+  border-radius: var(--radius-lg) 0 0 0;
+}
+.table thead tr th:last-child {
+  border-right: 1px solid var(--color-border-structural);
+  border-radius: 0 var(--radius-lg) 0 0;
+}
+.table tbody tr td {
+  padding: var(--space-3) var(--space-4);
+  color: var(--color-text-secondary);
+  border-bottom: 1px solid var(--color-border-structural);
+  vertical-align: middle;
+}
+.table tbody tr:hover td {
+  background-color: var(--color-bg-hover);
+}
+.table tbody tr:last-child td {
+  border-bottom: none;
+}
+/* Sortable header */
+.th-sortable {
+  cursor: pointer;
+  user-select: none;
+  gap: var(--space-1);
+}
+.th-sortable:hover {
+  color: var(--color-text-link);
+}
+.sort-icon {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 1px;
+  color: var(--color-icon-tertiary);
+  flex-shrink: 0;
+}
+.th-sortable.sort-asc .sort-icon,
+.th-sortable.sort-desc .sort-icon {
+  color: var(--color-text-primary);
+}
+/* Numeric / right-aligned columns */
+.td-number {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+/* ============================================================
+   TABS
+   ============================================================ */
+.tabs {
+  display: flex;
+  flex-direction: column;
+}
+.tabs-list {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid var(--color-border-panel);
+  flex-shrink: 0;
+}
+.tab-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-2);
+  padding-bottom: var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition:
+    border-color var(--transition-base),
+    color var(--transition-base);
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+  background: transparent;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  font-family: var(--font-sans);
+}
+.tab-item:hover {
+  border-bottom-color: var(--color-text-tertiary);
+}
+.tab-item.active,
+.tab-item[aria-selected='true'] {
+  border-bottom-color: var(--color-text-primary);
+  font-weight: 600;
+  cursor: default;
+}
+/* Small tab variant */
+.tabs-sm .tab-item {
+  font-size: var(--text-xs);
+  padding: var(--space-2-5);
+  padding-bottom: var(--space-2-5);
+}
+.tabs-panel {
+  flex: 1;
+  padding-top: var(--space-4);
+}
+/* ============================================================
+   PAGINATION
+   ============================================================ */
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  padding: var(--space-3) 0;
+  border-top: 1px solid var(--color-border-structural);
+}
+.pagination-info {
+  color: var(--color-text-muted);
+  font-size: var(--text-h5);
+  margin-right: auto;
+}
+.page-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  min-width: 32px;
+  padding: 0 var(--space-2);
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-structural);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-link);
+  font-size: var(--text-h5);
+  cursor: pointer;
+  transition:
+    border-color var(--transition-fast),
+    background-color var(--transition-fast);
+  user-select: none;
+  text-decoration: none;
+  font-family: var(--font-sans);
+  font-weight: 400;
+}
+.page-btn:hover:not(.disabled) {
+  border-color: var(--color-border-accent);
+}
+.page-btn.active {
+  border-color: var(--color-border-accent);
+  background-color: var(--color-bg-pagination-active);
+  font-weight: 600;
+}
+.page-btn.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+/* ============================================================
+   MODAL / DIALOG
+   ============================================================ */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+  padding: var(--space-4);
+}
+.modal {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-panel);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  max-height: 95vh;
+  width: 100%;
+  overflow: hidden;
+}
+.modal-sm  { max-width: 400px; }
+.modal-md  { max-width: 512px; }  /* default */
+.modal-lg  { max-width: 720px; }
+.modal-xl  { max-width: 1024px; }
+.modal-full { max-width: 90vw; }
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-border-structural);
+  flex-shrink: 0;
+}
+.modal-title {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-lg);
+  border: none;
+  background: transparent;
+  color: var(--color-icon-tertiary);
+  cursor: pointer;
+  transition:
+    color var(--transition-fast),
+    background-color var(--transition-fast);
+  flex-shrink: 0;
+}
+.modal-close:hover {
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-quaternary);
+}
+.modal-body {
+  flex: 1;
+  padding: var(--space-4);
+  overflow-y: auto;
+}
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-top: 1px solid var(--color-border-structural);
+  flex-shrink: 0;
+  background-color: var(--color-bg-elevated);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+/* ============================================================
+   SIDEBAR NAVIGATION
+   ============================================================ */
+.nav-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0-5);
+  padding: var(--space-2);
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-sm);
+  color: var(--color-text-nav);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+  text-decoration: none;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.nav-item:hover {
+  background-color: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+.nav-item.active {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
+.nav-item .nav-icon {
+  flex-shrink: 0;
+  color: var(--color-icon-tertiary);
+  transition: color var(--transition-fast);
+}
+.nav-item:hover .nav-icon,
+.nav-item.active .nav-icon {
+  color: var(--color-icon-primary);
+}
+.nav-group-label {
+  padding: var(--space-2) var(--space-3) var(--space-1);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+/* ============================================================
+   LAYOUT SHELL (app chrome)
+   ============================================================ */
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+}
+.app-navbar {
+  width: var(--navbar-width);
+  min-height: 100vh;
+  background-color: var(--color-bg-nav);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--space-3) 0;
+  flex-shrink: 0;
+  border-right: 1px solid var(--color-border-structural);
+}
+.app-sidebar {
+  width: var(--sidebar-width);
+  min-height: 100vh;
+  background-color: var(--color-bg-sidebar);
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--color-border-structural);
+  flex-shrink: 0;
+}
+.app-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+.app-header {
+  height: var(--layout-header-height);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-4);
+  border-bottom: 1px solid var(--color-border-structural);
+  background-color: var(--color-bg-page);
+  flex-shrink: 0;
+  gap: var(--space-4);
+}
+.app-main {
+  flex: 1;
+  padding: var(--space-4);
+  overflow-y: auto;
+}
+/**
+ * CodeMie Utility Classes
+ * Flexbox, spacing, display, overflow, z-index, and misc helpers.
+ */
+/* ============================================================
+   DISPLAY
+   ============================================================ */
+.hidden    { display: none !important; }
+.block     { display: block; }
+.inline    { display: inline; }
+.inline-block { display: inline-block; }
+.flex      { display: flex; }
+.inline-flex { display: inline-flex; }
+.grid      { display: grid; }
+/* ============================================================
+   FLEX
+   ============================================================ */
+.flex-col   { flex-direction: column; }
+.flex-row   { flex-direction: row; }
+.flex-wrap  { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.flex-1     { flex: 1; }
+.flex-auto  { flex: auto; }
+.flex-none  { flex: none; }
+.flex-shrink-0 { flex-shrink: 0; }
+.grow       { flex-grow: 1; }
+/* Align */
+.items-start    { align-items: flex-start; }
+.items-center   { align-items: center; }
+.items-end      { align-items: flex-end; }
+.items-stretch  { align-items: stretch; }
+/* Justify */
+.justify-start   { justify-content: flex-start; }
+.justify-center  { justify-content: center; }
+.justify-end     { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+/* ============================================================
+   GRID
+   ============================================================ */
+.grid-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-auto-fill-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
+.grid-auto-fill-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+.grid-auto-fill-lg { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
+/* ============================================================
+   GAP
+   ============================================================ */
+.gap-1   { gap: var(--space-1); }
+.gap-2   { gap: var(--space-2); }
+.gap-3   { gap: var(--space-3); }
+.gap-4   { gap: var(--space-4); }
+.gap-5   { gap: var(--space-5); }
+.gap-6   { gap: var(--space-6); }
+.gap-8   { gap: var(--space-8); }
+.gap-x-2 { column-gap: var(--space-2); }
+.gap-x-3 { column-gap: var(--space-3); }
+.gap-x-4 { column-gap: var(--space-4); }
+.gap-y-2 { row-gap: var(--space-2); }
+.gap-y-3 { row-gap: var(--space-3); }
+.gap-y-4 { row-gap: var(--space-4); }
+/* ============================================================
+   PADDING
+   ============================================================ */
+.p-1  { padding: var(--space-1); }
+.p-2  { padding: var(--space-2); }
+.p-3  { padding: var(--space-3); }
+.p-4  { padding: var(--space-4); }
+.p-6  { padding: var(--space-6); }
+.p-8  { padding: var(--space-8); }
+.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
+.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
+.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+.pt-2 { padding-top: var(--space-2); }
+.pt-4 { padding-top: var(--space-4); }
+.pt-8 { padding-top: var(--space-8); }
+.pb-2 { padding-bottom: var(--space-2); }
+.pb-4 { padding-bottom: var(--space-4); }
+/* ============================================================
+   MARGIN
+   ============================================================ */
+.m-auto  { margin: auto; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+.ml-auto { margin-left: auto; }
+.mr-auto { margin-right: auto; }
+.mt-1 { margin-top: var(--space-1); }
+.mt-2 { margin-top: var(--space-2); }
+.mt-3 { margin-top: var(--space-3); }
+.mt-4 { margin-top: var(--space-4); }
+.mt-6 { margin-top: var(--space-6); }
+.mt-8 { margin-top: var(--space-8); }
+.mb-1 { margin-bottom: var(--space-1); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-3 { margin-bottom: var(--space-3); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-6 { margin-bottom: var(--space-6); }
+/* ============================================================
+   WIDTH / HEIGHT
+   ============================================================ */
+.w-full    { width: 100%; }
+.w-auto    { width: auto; }
+.h-full    { height: 100%; }
+.min-h-screen { min-height: 100vh; }
+.min-w-0   { min-width: 0; }
+.max-w-sm  { max-width: 384px; }
+.max-w-md  { max-width: 512px; }
+.max-w-lg  { max-width: 720px; }
+.max-w-xl  { max-width: 960px; }
+.max-w-full { max-width: 100%; }
+/* ============================================================
+   OVERFLOW
+   ============================================================ */
+.overflow-hidden   { overflow: hidden; }
+.overflow-auto     { overflow: auto; }
+.overflow-x-auto   { overflow-x: auto; }
+.overflow-y-auto   { overflow-y: auto; }
+.overflow-visible  { overflow: visible; }
+/* ============================================================
+   POSITION
+   ============================================================ */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed    { position: fixed; }
+.sticky   { position: sticky; }
+.inset-0  { inset: 0; }
+.top-0    { top: 0; }
+.bottom-0 { bottom: 0; }
+.left-0   { left: 0; }
+.right-0  { right: 0; }
+/* ============================================================
+   Z-INDEX
+   ============================================================ */
+.z-10     { z-index: 10; }
+.z-20     { z-index: 20; }
+.z-30     { z-index: var(--z-dropdown); }
+.z-50     { z-index: var(--z-modal); }
+.z-60     { z-index: var(--z-toast); }
+/* ============================================================
+   BORDER RADIUS
+   ============================================================ */
+.rounded-sm   { border-radius: var(--radius-sm); }
+.rounded-md   { border-radius: var(--radius-md); }
+.rounded-lg   { border-radius: var(--radius-lg); }
+.rounded-xl   { border-radius: var(--radius-xl); }
+.rounded-2xl  { border-radius: var(--radius-2xl); }
+.rounded-full { border-radius: var(--radius-full); }
+/* ============================================================
+   BACKGROUND COLORS
+   ============================================================ */
+.bg-page      { background-color: var(--color-bg-page); }
+.bg-card      { background-color: var(--color-bg-card); }
+.bg-elevated  { background-color: var(--color-bg-elevated); }
+.bg-secondary { background-color: var(--color-bg-secondary); }
+.bg-tertiary  { background-color: var(--color-bg-tertiary); }
+.bg-success   { background-color: var(--color-success-bg); }
+.bg-error     { background-color: var(--color-error-bg); }
+.bg-warning   { background-color: var(--color-warning-bg); }
+.bg-info      { background-color: var(--color-info-bg); }
+/* Gradient backgrounds */
+.bg-brand     { background: var(--gradient-brand); }
+.bg-magical   { background: var(--gradient-magical); }
+.bg-purple-radial { background: var(--gradient-purple-radial); }
+/* ============================================================
+   BORDER
+   ============================================================ */
+.border       { border: 1px solid var(--color-border-structural); }
+.border-top   { border-top: 1px solid var(--color-border-structural); }
+.border-bottom { border-bottom: 1px solid var(--color-border-structural); }
+.border-left  { border-left: 1px solid var(--color-border-structural); }
+.border-right { border-right: 1px solid var(--color-border-structural); }
+.border-none  { border: none; }
+/* ============================================================
+   CURSOR
+   ============================================================ */
+.cursor-pointer   { cursor: pointer; }
+.cursor-default   { cursor: default; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-wait      { cursor: wait; }
+/* ============================================================
+   POINTER EVENTS
+   ============================================================ */
+.pointer-none { pointer-events: none; }
+/* ============================================================
+   OPACITY
+   ============================================================ */
+.opacity-0   { opacity: 0; }
+.opacity-50  { opacity: 0.5; }
+.opacity-60  { opacity: 0.6; }
+.opacity-100 { opacity: 1; }
+/* ============================================================
+   SELECTION
+   ============================================================ */
+.select-none { user-select: none; }
+.select-text { user-select: text; }
+/* ============================================================
+   SHADOWS
+   ============================================================ */
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+/* ============================================================
+   TRANSITIONS
+   ============================================================ */
+.transition     { transition: all var(--transition-base); }
+.transition-colors { transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base); }
+    .stat-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: var(--space-4);
+      margin-bottom: var(--space-6);
+    }
+    .stat-grid-top {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: var(--space-4);
+      margin-bottom: var(--space-4);
+    }
+    @media (max-width: 960px) { .stat-grid-top { grid-template-columns: repeat(2,1fr); } }
+    .stat-card {
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border-structural);
+      border-radius: var(--radius-xl);
+      padding: var(--space-4) var(--space-5);
+      display: flex; flex-direction: column; gap: var(--space-1);
+    }
+    .stat-card-label {
+      font-size: var(--text-xs); font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase; letter-spacing: 0.05em;
+    }
+    .stat-card-value {
+      font-size: 1.75rem; font-weight: 700;
+      color: var(--color-text-primary); line-height: 1.2;
+    }
+    .stat-card-desc { font-size: var(--text-xs); color: var(--color-text-muted); }
+    .stat-card-grand   { border-top: 3px solid #2297F6; }
+    .stat-card-web     { border-top: 3px solid #259F4C; }
+    .stat-card-cli     { border-top: 3px solid #C084FC; }
+    .stat-card-premium { border-top: 3px solid #F5A534; }
+    .stat-card-muted   { border-top: 3px solid var(--color-border-structural); }
+    .charts-row {
+      display: grid; grid-template-columns: 1fr 1fr;
+      gap: var(--space-4); margin-bottom: var(--space-4);
+    }
+    @media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }
+    .progress-bar-wrap { background: var(--color-bg-quaternary); border-radius: var(--radius-full); height: 6px; overflow: hidden; }
+    .progress-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.3s ease; }
+    .fill-ok   { background: var(--color-success); }
+    .fill-warn { background: var(--color-warning); }
+    .fill-over { background: var(--color-error); }
+    tbody tr { cursor: pointer; transition: background 0.12s; }
+    tbody tr:hover td { background: var(--color-bg-hover) !important; }
+    /* spend type mini pill */
+    .spend-pill {
+      display: inline-flex; align-items: center; gap: 3px;
+      font-size: 11px; font-weight: 600;
+      padding: 1px 6px; border-radius: var(--radius-full);
+    }
+    .pill-web     { background: rgba(37,159,76,0.15);  color: var(--color-success-text); }
+    .pill-cli     { background: rgba(192,132,252,0.15); color: var(--color-purple); }
+    .pill-premium { background: rgba(245,165,52,0.15); color: var(--color-warning-text); }
+    /* === Analytics section styles === */
+    .analytics-section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border-structural); }
+    .dim-bars { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-3); }
+    .dim-bar-row { display: grid; grid-template-columns: 130px 1fr 36px; align-items: center; gap: 8px; }
+    .dim-bar-label { font-size: 11px; color: var(--color-text-muted); }
+    .dim-bar-track { background: var(--color-bg-secondary); border-radius: var(--radius-full); height: 6px; overflow: hidden; }
+    .dim-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.3s; }
+    .dim-bar-score { font-size: 11px; font-weight: 600; color: var(--color-text-primary); text-align: right; }
+    .champion-header { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
+    .champion-score { font-size: 1.6rem; font-weight: 700; color: var(--color-text-primary); }
+    .champion-rank { font-size: 11px; color: var(--color-text-muted); }
+    .cli-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
+    .cli-stat-cell { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
+    .cli-stat-val { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); }
+    .cli-stat-lbl { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }
+    .modal-backdrop {
+      display: none; position: fixed; inset: 0;
+      background: rgba(0,0,0,0.65); z-index: 50;
+      align-items: center; justify-content: center;
+    }
+    .modal-backdrop.open { display: flex; }
+    .modal-box {
+      background: var(--color-bg-elevated);
+      border: 1px solid var(--color-border-structural);
+      border-radius: var(--radius-2xl);
+      padding: var(--space-6);
+      width: 100%; max-width: 580px;
+      max-height: 90vh; overflow-y: auto; position: relative;
+    }
+    .modal-close {
+      position: absolute; top: var(--space-4); right: var(--space-4);
+      background: var(--color-bg-hover);
+      border: 1px solid var(--color-border-structural);
+      border-radius: var(--radius-full);
+      color: var(--color-text-primary);
+      width: 28px; height: 28px; cursor: pointer; font-size: 14px;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .modal-close:hover { background: var(--color-bg-hover-strong); }
+    .modal-email { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); word-break: break-all; }
+    .modal-section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border-structural); }
+    .modal-section-title { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); }
+    .dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
+    .dl-grid dt { color: var(--color-text-muted); white-space: nowrap; }
+    .dl-grid dd { color: var(--color-text-primary); font-weight: 500; }
+    .budget-bar-label { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); }
+    .big-spend { font-size: 2.2rem; font-weight: 700; color: #2297F6; margin-bottom: 4px; }
+    .spend-breakdown-row {
+      display: grid; grid-template-columns: repeat(3, 1fr);
+      gap: var(--space-3); margin-bottom: var(--space-4);
+    }
+    .spend-breakdown-cell {
+      background: var(--color-bg-secondary);
+      border: 1px solid var(--color-border-structural);
+      border-radius: var(--radius-lg);
+      padding: var(--space-2) var(--space-3);
+      text-align: center;
+    }
+    .spend-breakdown-cell .val { font-size: 1.15rem; font-weight: 700; }
+    .spend-breakdown-cell .lbl { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }
+    .search-bar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
+    .search-bar .input-wrapper { flex: 1; min-width: 200px; }
+    .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
+    .mini-budget-block { margin-top: 8px; }
+    .mini-budget-label { font-size: 10px; color: var(--color-text-muted); margin-bottom: 2px; }
+  </style>
+</head>
+<body class="p-6">
+<div class="container" style="max-width:1400px;">
+  <div class="page-header">
+    <div>
+      <h1>__DASHBOARD_TITLE__</h1>
+      <p class="text-muted">LiteLLM direct customer spend &mdash; __TOTAL_USERS__ participants &nbsp;&middot;&nbsp; Generated __REPORT_DATE__ __SUBTITLE_NOTES__</p>
+    </div>
+    <span class="badge badge-in-progress"><span class="badge-dot"></span>Live LiteLLM Data</span>
+  </div>
+  <!-- Row 1: Grand total + 3 type totals -->
+  <div class="stat-grid-top">
+    <div class="stat-card stat-card-grand">
+      <span class="stat-card-label">&#x1F4B0; Grand Total</span>
+      <span class="stat-card-value">__GRAND_TOTAL__</span>
+      <span class="stat-card-desc">All 3 spend types combined</span>
+    </div>
+    <div class="stat-card stat-card-web">
+      <span class="stat-card-label">&#x1F310; Web / Platform</span>
+      <span class="stat-card-value">__WEB_TOTAL__</span>
+      <span class="stat-card-desc">email@domain (UI spend)</span>
+    </div>
+    <div class="stat-card stat-card-cli">
+      <span class="stat-card-label">&#x1F4BB; CLI</span>
+      <span class="stat-card-value">__CLI_TOTAL__</span>
+      <span class="stat-card-desc">email_codemie_cli</span>
+    </div>
+    <div class="stat-card stat-card-premium">
+      <span class="stat-card-label">&#x2728; Premium Models</span>
+      <span class="stat-card-value">__PREMIUM_TOTAL__</span>
+      <span class="stat-card-desc">email_codemie_premium_models</span>
+    </div>
+  </div>
+  <!-- Row 2: User stats -->
+  <div class="stat-grid" style="grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:var(--space-6);">
+    <div class="stat-card stat-card-muted">
+      <span class="stat-card-label">Participants</span>
+      <span class="stat-card-value">__TOTAL_USERS__</span>
+      <span class="stat-card-desc">From bootcamp.xlsx</span>
+    </div>
+    <div class="stat-card stat-card-muted">
+      <span class="stat-card-label">In LiteLLM</span>
+      <span class="stat-card-value">__IN_LITELLM__</span>
+      <span class="stat-card-desc">Registered as customers</span>
+    </div>
+    <div class="stat-card stat-card-muted">
+      <span class="stat-card-label">Active Spenders</span>
+      <span class="stat-card-value">__ACTIVE_USERS__</span>
+      <span class="stat-card-desc">Any spend &gt; $0</span>
+    </div>
+    <div class="stat-card stat-card-muted">
+      <span class="stat-card-label">Avg Spend (active)</span>
+      <span class="stat-card-value">__AVG_SPEND__</span>
+      <span class="stat-card-desc">Mean — active users only</span>
+    </div>
+  </div>
+  <!-- Budget estimate widget -->
+  <div class="card" style="margin-bottom:var(--space-4);border-color:var(--color-info-border);background:linear-gradient(135deg,var(--color-bg-card) 80%,var(--color-info-bg) 100%);">
+    <div class="card-body" style="display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-6);padding:var(--space-5) var(--space-6);">
+      <div>
+        <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);">
+          <span style="font-size:18px;">&#x1F4B3;</span>
+          <h3 style="margin:0;">Estimated Monthly Program Budget</h3>
+          <span class="badge badge-in-progress">Projection</span>
+        </div>
+        <p class="text-muted" style="margin:0;font-size:var(--text-sm);">
+          Projected cost for the full cohort based on the
+          <strong style="color:var(--color-info-text);">current average spend per active user (__AVG_SPEND__)</strong>
+          scaled to all <strong style="color:var(--color-text-primary);">656 participants</strong>,
+          with a <strong style="color:var(--color-text-primary);">+20% overhead buffer</strong> for spikes, onboarding, and premium model usage.
+        </p>
+        <div style="margin-top:var(--space-3);display:flex;gap:var(--space-6);flex-wrap:wrap;">
+          <div>
+            <div style="font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:2px;">Base estimate</div>
+            <div style="font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary);">__BASE_ESTIMATE__ &nbsp;<span style="font-weight:400;color:var(--color-text-muted);">(__AVG_SPEND__ &times; __TOTAL_USERS__)</span></div>
+          </div>
+          <div>
+            <div style="font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:2px;">+20% buffer</div>
+            <div style="font-size:var(--text-sm);font-weight:600;color:var(--color-warning-text);">__BUFFER_AMOUNT__</div>
+          </div>
+        </div>
+      </div>
+      <div style="text-align:right;flex-shrink:0;">
+        <div style="font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:4px;">RECOMMENDED BUDGET</div>
+        <div style="font-size:2.8rem;font-weight:700;color:#2297F6;line-height:1;">__BUDGET_PROJECTION__</div>
+        <div style="font-size:var(--text-sm);color:var(--color-text-muted);margin-top:4px;">per month / full cohort</div>
+        <div style="font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px;">avg __AVG_SPEND__ &times; __TOTAL_USERS__ &times; 1.20</div>
+      </div>
+    </div>
+  </div>
+  <!-- Charts -->
+  <div class="charts-row" style="align-items:start;">
+    <div class="card">
+      <div class="card-header"><div class="card-title">Spend Distribution (Total per User)</div></div>
+      <div class="card-body" style="height:250px;"><canvas id="rangeChart"></canvas></div>
+    </div>
+    <div class="card">
+      <div class="card-header"><div class="card-title">Top 10 by Total Spend</div></div>
+      <div class="card-body" style="height:460px;"><canvas id="topChart"></canvas></div>
+    </div>
+  </div>
+  <div class="card" style="margin-bottom:var(--space-4);">
+    <div class="card-header"><div class="card-title">Spend Breakdown by Type</div></div>
+    <div class="card-body" style="height:240px;"><canvas id="breakdownChart"></canvas></div>
+  </div>
+  <!-- Table -->
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">All Participants</div>
+      <div class="search-bar">
+        <div class="input-wrapper">
+          <input class="form-input" id="searchInput" type="text" placeholder="Search by email..." oninput="filterTable()">
+        </div>
+        <select class="input" id="sortSelect" onchange="applySort()" style="width:180px;height:32px;">
+          <option value="total_desc">Total &#x2193; (highest)</option>
+          <option value="web_desc">Web &#x2193;</option>
+          <option value="cli_desc">CLI &#x2193;</option>
+          <option value="premium_desc">Premium &#x2193;</option>
+          <option value="total_asc">Total &#x2191; (lowest)</option>
+          <option value="email_asc">Email A&#x2192;Z</option>
+        </select>
+        <span class="badge" id="countBadge">656 users</span>
+      </div>
+    </div>
+    <div class="card-body" style="padding:0;">
+      <div class="table-wrapper">
+        <table class="table" id="usersTable">
+          <thead>
+            <tr>
+              <th style="width:44px;">#</th>
+              <th>Email</th>
+              <th class="td-number" style="color:var(--color-success-text);">Web ($)</th>
+              <th class="td-number" style="color:var(--color-purple);">CLI ($)</th>
+              <th class="td-number" style="color:var(--color-warning-text);">Premium ($)</th>
+              <th class="td-number">Total ($)</th>
+              <th style="width:110px;">Status</th>
+            </tr>
+          </thead>
+          <tbody id="tableBody"></tbody>
+        </table>
+      </div>
+      <div class="pagination" id="paginationBar" style="padding:12px 16px;"></div>
+    </div>
+  </div>
+</div>
+<!-- Modal -->
+<div class="modal-backdrop" id="modalBackdrop" onclick="backdropClose(event)">
+  <div class="modal-box">
+    <button class="modal-close" onclick="closeModal()">&#x2715;</button>
+    <h3 id="modalTitle"></h3>
+    <p class="modal-email" id="modalEmail"></p>
+    <div id="modalContent"></div>
+  </div>
+</div>
+<script>
+  const ALL_USERS = __ALL_USERS_JSON__;
+  const STATS = __STATS_JSON__;
+  const ANALYTICS_DATA = __ANALYTICS_JSON__;
+  const RANGES = __RANGES_JSON__;
+  let filtered = ALL_USERS.slice();
+  let currentPage = 1;
+  const PAGE_SIZE = 50;
+  // ── CHARTS ──
+  function initCharts() {
+    const rangeLabels = Object.keys(RANGES);
+    const rangeValues = Object.values(RANGES);
+    new Chart(document.getElementById('rangeChart'), {
+      type: 'bar',
+      data: { labels: rangeLabels, datasets: [{ label: 'Users', data: rangeValues,
+        backgroundColor: ['#4C4C4C','#2297F6','#259F4C','#F5A534','#C084FC','#F9303C'], borderRadius: 6 }] },
+      options: { responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { display: false }, tooltip: { callbacks: { label: c => ' ' + c.raw + ' users' } } },
+        scales: { x: { grid: { color: '#333436' }, ticks: { color: '#BBBBBB', font: { size: 11 } } },
+                  y: { grid: { color: '#333436' }, ticks: { color: '#BBBBBB', font: { size: 11 } } } } }
+    });
+    const top10 = ALL_USERS.filter(u => u.total_spend > 0).slice(0, 10);
+    new Chart(document.getElementById('topChart'), {
+      type: 'bar',
+      data: { labels: top10.map(u => u.email.split('@')[0].replace(/_/g,' ')),
+        datasets: [
+          { label: 'Web',     data: top10.map(u => u.web_spend),     backgroundColor: '#259F4C', borderRadius: 0, barThickness: 28 },
+          { label: 'CLI',     data: top10.map(u => u.cli_spend),     backgroundColor: '#C084FC', borderRadius: 0, barThickness: 28 },
+          { label: 'Premium', data: top10.map(u => u.premium_spend), backgroundColor: '#F5A534', borderRadius: 4, barThickness: 28 }
+        ] },
+      options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { position: 'bottom', labels: { color: '#BBBBBB', font: { size: 12 }, boxWidth: 14, padding: 16 } },
+          tooltip: { callbacks: { label: c => ' ' + c.dataset.label + ': $' + c.raw.toFixed(2) } } },
+        scales: { x: { stacked: true, grid: { color: '#333436' }, ticks: { color: '#BBBBBB', font: { size: 11 }, callback: v => '$' + v } },
+                  y: { stacked: true, grid: { color: 'transparent' }, ticks: { color: '#CCCCCC', font: { size: 12 } } } } }
+    });
+    // Stacked breakdown for ALL users (aggregated)
+    new Chart(document.getElementById('breakdownChart'), {
+      type: 'bar',
+      data: { labels: ['Total Spend'],
+        datasets: [
+          { label: 'Web / Platform', data: [STATS.web_total],     backgroundColor: '#259F4C', borderRadius: 0 },
+          { label: 'CLI',            data: [STATS.cli_total],     backgroundColor: '#C084FC', borderRadius: 0 },
+          { label: 'Premium Models', data: [STATS.premium_total], backgroundColor: '#F5A534', borderRadius: 6 }
+        ] },
+      options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+        plugins: { legend: { position: 'right', labels: { color: '#BBBBBB', font: { size: 12 }, boxWidth: 14 } },
+          tooltip: { callbacks: { label: c => ' ' + c.dataset.label + ': $' + c.raw.toFixed(2) } } },
+        scales: { x: { stacked: true, grid: { color: '#333436' }, ticks: { color: '#BBBBBB', callback: v => '$' + v } },
+                  y: { stacked: true, grid: { color: 'transparent' }, ticks: { color: '#BBBBBB' } } } }
+    });
+  }
+  function spendBadge(total) {
+    if (total === 0)    return '<span class="badge badge-not-started">No spend</span>';
+    if (total <= 5)     return '<span class="badge badge-in-progress">Low</span>';
+    if (total <= 20)    return '<span class="badge badge-success">Moderate</span>';
+    if (total <= 50)    return '<span class="badge badge-warning">High</span>';
+    if (total <= 150)   return '<span class="badge badge-error">Very High</span>';
+    return '<span class="badge badge-error" style="background:rgba(249,48,60,0.25);">Top</span>';
+  }
+  function fmt(v) { return v > 0 ? '$' + v.toFixed(2) : '—'; }
+  function renderTable() {
+    const tbody = document.getElementById('tableBody');
+    const start = (currentPage - 1) * PAGE_SIZE;
+    const page = filtered.slice(start, start + PAGE_SIZE);
+    if (!page.length) {
+      tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:var(--color-text-muted);padding:48px;">No results</td></tr>';
+      return;
+    }
+    tbody.innerHTML = page.map(function(u, i) {
+      const rank = start + i + 1;
+      const tc = u.total_spend > 50 ? 'var(--color-warning-text)' : u.total_spend > 0 ? 'var(--color-text-primary)' : 'var(--color-text-muted)';
+      return '<tr data-email="' + encodeURIComponent(u.email) + '" style="cursor:pointer;">'
+        + '<td style="color:var(--color-text-muted);font-weight:600;font-size:var(--text-xs);">' + rank + '</td>'
+        + '<td style="font-family:var(--font-mono);font-size:var(--text-xs);">' + u.email + '</td>'
+        + '<td class="td-number" style="color:var(--color-success-text);">' + fmt(u.web_spend) + '</td>'
+        + '<td class="td-number" style="color:var(--color-purple);">' + fmt(u.cli_spend) + '</td>'
+        + '<td class="td-number" style="color:var(--color-warning-text);">' + fmt(u.premium_spend) + '</td>'
+        + '<td class="td-number" style="font-weight:700;color:' + tc + ';">' + fmt(u.total_spend) + '</td>'
+        + '<td>' + spendBadge(u.total_spend) + '</td>'
+        + '</tr>';
+    }).join('');
+  }
+  function renderPagination() {
+    const total = filtered.length;
+    const pages = Math.ceil(total / PAGE_SIZE);
+    document.getElementById('countBadge').textContent = total + ' users';
+    const bar = document.getElementById('paginationBar');
+    if (pages <= 1) { bar.innerHTML = '<span class="pagination-info">Showing ' + total + ' of ' + total + ' users</span>'; return; }
+    const s = (currentPage-1)*PAGE_SIZE+1, e = Math.min(currentPage*PAGE_SIZE, total);
+    let btns = '';
+    const lo = Math.max(1, Math.min(currentPage-3, pages-6)), hi = Math.min(pages, lo+6);
+    if (lo > 1) btns += '<button class="page-btn" onclick="goPage(1)">1</button><span style="color:var(--color-text-muted);padding:0 4px">&hellip;</span>';
+    for (let p=lo; p<=hi; p++) btns += '<button class="page-btn' + (p===currentPage?' active':'') + '" onclick="goPage('+p+')">'+p+'</button>';
+    if (hi < pages) btns += '<span style="color:var(--color-text-muted);padding:0 4px">&hellip;</span><button class="page-btn" onclick="goPage('+pages+')">'+pages+'</button>';
+    bar.innerHTML = '<span class="pagination-info">Showing '+s+'&ndash;'+e+' of '+total+'</span>'
+      + '<button class="page-btn'+(currentPage===1?' disabled':'')+'" onclick="goPage('+(currentPage-1)+')" '+(currentPage===1?'disabled':'')+'>&#8249;</button>'
+      + btns
+      + '<button class="page-btn'+(currentPage===pages?' disabled':'')+'" onclick="goPage('+(currentPage+1)+')" '+(currentPage===pages?'disabled':'')+'>&#8250;</button>';
+  }
+  function goPage(p) {
+    const pages = Math.ceil(filtered.length/PAGE_SIZE);
+    if (p<1||p>pages) return;
+    currentPage = p; renderTable(); renderPagination();
+    window.scrollTo({top:0,behavior:'smooth'});
+  }
+  function filterTable() {
+    const q = document.getElementById('searchInput').value.toLowerCase();
+    filtered = q ? ALL_USERS.filter(function(u){ return u.email.toLowerCase().indexOf(q)!==-1; }) : ALL_USERS.slice();
+    doSort(); currentPage=1; renderTable(); renderPagination();
+  }
+  function applySort() { doSort(); currentPage=1; renderTable(); renderPagination(); }
+  function doSort() {
+    const s = document.getElementById('sortSelect').value;
+    const fns = {
+      total_desc: function(a,b){ return b.total_spend-a.total_spend; },
+      web_desc:   function(a,b){ return b.web_spend-a.web_spend; },
+      cli_desc:   function(a,b){ return b.cli_spend-a.cli_spend; },
+      premium_desc: function(a,b){ return b.premium_spend-a.premium_spend; },
+      total_asc:  function(a,b){ return a.total_spend-b.total_spend; },
+      email_asc:  function(a,b){ return a.email.localeCompare(b.email); }
+    };
+    filtered.sort(fns[s] || fns.total_desc);
+  }
+  function budgetBlock(label, spend, bud, color) {
+    if (!bud) return '';
+    const pct = bud.soft ? Math.min((spend/bud.soft)*100, 100) : null;
+    const cls = pct!==null ? (pct>=100?'fill-over':pct>=75?'fill-warn':'fill-ok') : 'fill-ok';
+    return '<div class="mini-budget-block">'
+      + '<div style="font-size:10px;font-weight:600;color:'+color+';margin-bottom:3px;">'+label+'</div>'
+      + '<dl class="dl-grid" style="gap:4px 12px;font-size:12px;">'
+      + '<dt>Spend</dt><dd>$' + spend.toFixed(2) + '</dd>'
+      + (bud.soft ? '<dt>Soft</dt><dd>$'+bud.soft+'</dd>' : '')
+      + (bud.max  ? '<dt>Hard</dt><dd>$'+bud.max+'</dd>' : '')
+      + (bud.duration ? '<dt>Cycle</dt><dd>'+bud.duration+'</dd>' : '')
+      + '</dl>'
+      + (pct!==null ? '<div style="margin-top:6px;"><div class="budget-bar-label"><span style="font-size:10px;">Budget used</span><span style="font-size:10px;font-weight:700;color:'+color+';">'+pct.toFixed(0)+'%</span></div><div class="progress-bar-wrap" style="height:8px;"><div class="progress-bar-fill '+cls+'" style="width:'+pct.toFixed(1)+'%"></div></div></div>' : '')
+      + '</div>';
+  }
+  function tierBadge(tier) {
+    var cls = {'pioneer':'badge-advanced','expert':'badge-in-progress','advanced':'badge-success','practitioner':'badge-warning','newcomer':'badge-not-started'}[tier] || 'badge-not-started';
+    var icon = {'pioneer':'🏆','expert':'⭐','advanced':'🔥','practitioner':'📈','newcomer':'🌱'}[tier] || '•';
+    return '<span class="badge ' + cls + '">' + icon + ' ' + (tier||'unknown') + '</span>';
+  }
+  function dimBar(label, score, color) {
+    var pct = Math.min(Math.max(score||0, 0), 100);
+    return '<div class="dim-bar-row">'
+      + '<div class="dim-bar-label">' + label + '</div>'
+      + '<div class="dim-bar-track"><div class="dim-bar-fill" style="width:' + pct + '%;background:' + color + ';"></div></div>'
+      + '<div class="dim-bar-score">' + (score||0).toFixed(0) + '</div>'
+      + '</div>';
+  }
+  function openModal(enc) {
+    const email = decodeURIComponent(enc);
+    const u = ALL_USERS.find(function(x){ return x.email===email; });
+    if (!u) return;
+    document.getElementById('modalTitle').textContent = u.email.split('@')[0].replace(/_/g,' ');
+    document.getElementById('modalEmail').textContent = u.email;
+    const statusBadge = u.total_spend===0 ? '<span class="badge badge-not-started">No spend</span>'
+      : '<span class="badge badge-success"><span class="badge-dot"></span>Active</span>';
+    // Analytics data for this user
+    const an = ANALYTICS_DATA[email] || {};
+    const lb = an.lb || null;
+    const cli = an.cli || null;
+    // Champion section
+    var championHtml = '';
+    if (lb) {
+      var dimColors = ['#2297F6','#C084FC','#259F4C','#F5A534','#06B6D4','#F9303C'];
+      var dimLabels = ['D1 · Platform Usage','D2 · Platform Creation','D3 · Workflow Usage','D4 · Workflow Creation','D5 · CLI & Agentic','D6 · Impact & Knowledge'];
+      var dimScores = [lb.d1, lb.d2, lb.d3, lb.d4, lb.d5, lb.d6];
+      championHtml = '<div class="analytics-section">'
+        + '<div class="modal-section-title">AI Champion Profile</div>'
+        + '<div class="champion-header">'
+        + tierBadge(lb.tier)
+        + (lb.intent ? '<span style="font-size:12px;color:var(--color-text-secondary);">' + lb.intent + '</span>' : '')
+        + '</div>'
+        + '<div style="display:flex;align-items:baseline;gap:8px;margin-bottom:12px;">'
+        + '<span class="champion-score">' + (lb.score||0).toFixed(1) + '</span>'
+        + '<span style="font-size:12px;color:var(--color-text-muted);">/ 100 score</span>'
+        + (lb.rank ? '<span class="champion-rank">&nbsp;· Rank #' + lb.rank + '</span>' : '')
+        + '</div>'
+        + '<div class="dim-bars">';
+      for (var i=0; i<6; i++) {
+        championHtml += dimBar(dimLabels[i], dimScores[i], dimColors[i]);
+      }
+      championHtml += '</div></div>';
+    }
+    // CLI section
+    var cliHtml = '';
+    if (cli) {
+      var clsColor = {'production':'var(--color-success-text)','staging':'var(--color-warning-text)','development':'var(--color-info-text)'}[cli.classification] || 'var(--color-text-muted)';
+      var clsBadge = {'production':'badge-success','staging':'badge-warning','development':'badge-in-progress'}[cli.classification] || 'badge-not-started';
+      cliHtml = '<div class="analytics-section">'
+        + '<div class="modal-section-title">CLI Activity (Last 30 Days)</div>'
+        + '<div style="margin-bottom:8px;">'
+        + (cli.classification ? '<span class="badge ' + clsBadge + '">' + cli.classification + '</span>' : '')
+        + '</div>'
+        + '<div class="cli-stats-grid">'
+        + '<div class="cli-stat-cell"><div class="cli-stat-val">' + (cli.sessions||0) + '</div><div class="cli-stat-lbl">Sessions</div></div>'
+        + '<div class="cli-stat-cell"><div class="cli-stat-val" style="color:var(--color-success-text);">+' + ((cli.lines_added||0)).toLocaleString() + '</div><div class="cli-stat-lbl">Lines Added</div></div>'
+        + '<div class="cli-stat-cell"><div class="cli-stat-val" style="color:var(--color-error-text);">-' + ((cli.lines_removed||0)).toLocaleString() + '</div><div class="cli-stat-lbl">Lines Removed</div></div>'
+        + '</div>'
+        + (cli.net_lines !== null && cli.net_lines !== undefined ? '<div style="margin-top:8px;font-size:12px;color:var(--color-text-muted);">Net lines: <strong style="color:var(--color-text-primary);">' + (cli.net_lines>=0?'+':'') + (cli.net_lines||0).toLocaleString() + '</strong></div>' : '')
+        + '</div>';
+    }
+    document.getElementById('modalContent').innerHTML =
+      '<div style="font-size:2.2rem;font-weight:700;color:#2297F6;margin-bottom:4px;">$' + u.total_spend.toFixed(2) + '</div>'
+      + '<div style="margin-bottom:16px;">' + statusBadge + ' &nbsp;<span class="text-muted" style="font-size:11px;">Combined LiteLLM spend</span></div>'
+      + '<div class="spend-breakdown-row">'
+      + '<div class="spend-breakdown-cell">'
+      +   '<div class="val" style="color:var(--color-success-text);">$' + u.web_spend.toFixed(2) + '</div>'
+      +   '<div class="lbl">&#x1F310; Web / Platform</div>'
+      + '</div>'
+      + '<div class="spend-breakdown-cell">'
+      +   '<div class="val" style="color:var(--color-purple);">$' + u.cli_spend.toFixed(2) + '</div>'
+      +   '<div class="lbl">&#x1F4BB; CLI</div>'
+      + '</div>'
+      + '<div class="spend-breakdown-cell">'
+      +   '<div class="val" style="color:var(--color-warning-text);">$' + u.premium_spend.toFixed(2) + '</div>'
+      +   '<div class="lbl">&#x2728; Premium Models</div>'
+      + '</div>'
+      + '</div>'
+      + '<div class="modal-section">'
+      + '<div class="modal-section-title">Budget Details per Account</div>'
+      + budgetBlock('Web / Platform (email@domain)', u.web_spend, u.web_budget, 'var(--color-success-text)')
+      + (u.cli_spend > 0 || u.cli_budget ? '<hr style="border-color:var(--color-border-structural);margin:10px 0;">' + budgetBlock('CLI (email_codemie_cli)', u.cli_spend, u.cli_budget, 'var(--color-purple)') : '')
+      + (u.premium_spend > 0 || u.premium_budget ? '<hr style="border-color:var(--color-border-structural);margin:10px 0;">' + budgetBlock('Premium Models (email_codemie_premium_models)', u.premium_spend, u.premium_budget, 'var(--color-warning-text)') : '')
+      + '</div>'
+      + championHtml
+      + cliHtml;
+    document.getElementById('modalBackdrop').classList.add('open');
+  }
+  function closeModal() { document.getElementById('modalBackdrop').classList.remove('open'); }
+  function backdropClose(e) { if (e.target===document.getElementById('modalBackdrop')) closeModal(); }
+  document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeModal(); });
+  document.getElementById('tableBody').addEventListener('click', function(e) {
+    const row = e.target.closest('tr[data-email]');
+    if (row) openModal(row.getAttribute('data-email'));
+  });
+  doSort(); renderTable(); renderPagination(); initCharts();
+</script>
+</body>
+</html>