free-coding-models 0.5.6 → 0.5.8

package/web/src/components/launch/LaunchButton.jsx

@@ -0,0 +1,30 @@
+/**
+ * @file web/src/components/launch/LaunchButton.jsx
+ * @description Reusable M3 endpoint install action for table rows, DetailPanel, and Recommend results.
+ * @functions LaunchButton → renders a plug button that installs the selected model endpoint
+ * @exports LaunchButton
+ */
+import { IconPlugConnected } from '@tabler/icons-react'
+import { getToolMeta } from '../../../../src/core/tool-metadata.js'
+import styles from './LaunchButton.module.css'
+
+export default function LaunchButton({ model, toolMode = 'opencode', onLaunch, variant = 'default', disabled = false }) {
+  const meta = getToolMeta(toolMode)
+  const label = variant === 'icon' ? 'Install endpoint' : `Install endpoint in ${meta.emoji} ${meta.label}`
+  return (
+    <button
+      type="button"
+      className={`${styles.button} ${styles[variant] || ''}`}
+      disabled={disabled || !model}
+      onClick={(event) => {
+        event.stopPropagation()
+        if (model) onLaunch?.(model)
+      }}
+      title={model ? `Install ${model.label} endpoint in ${meta.label}` : 'Select a model first'}
+      aria-label={model ? `Install ${model.label} endpoint in ${meta.label}` : 'Install selected model endpoint'}
+    >
+      <IconPlugConnected size={variant === 'icon' ? 13 : 14} stroke={1.8} />
+      {variant !== 'icon' && <span>{label}</span>}
+    </button>
+  )
+}

package/web/src/components/launch/LaunchButton.module.css

@@ -0,0 +1,35 @@
+/** @file web/src/components/launch/LaunchButton.module.css */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 8px 12px;
+  border: 1px solid rgba(61, 220, 132, 0.45);
+  border-radius: 6px;
+  background: rgba(61, 220, 132, 0.12);
+  color: #3ddc84;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 800;
+  font-family: var(--font-mono);
+  transition: transform 120ms, background 120ms, border-color 120ms;
+}
+.button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  background: rgba(61, 220, 132, 0.20);
+  border-color: rgba(61, 220, 132, 0.75);
+}
+.button:disabled { opacity: 0.45; cursor: not-allowed; }
+.icon {
+  width: 26px;
+  height: 24px;
+  padding: 0;
+  opacity: 0.72;
+}
+.icon:hover:not(:disabled) { opacity: 1; }
+:global([data-theme="light"]) .button {
+  color: #087d42;
+  border-color: rgba(8, 125, 66, 0.35);
+  background: rgba(8, 125, 66, 0.08);
+}

package/web/src/components/launch/LaunchModal.module.css

@@ -0,0 +1,125 @@
+/** @file web/src/components/launch/LaunchModal.module.css */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.62);
+  backdrop-filter: blur(4px);
+}
+.modal,
+.modalWide {
+  width: min(560px, 96vw);
+  max-height: min(760px, 92vh);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  background: var(--color-bg-elevated);
+  color: var(--color-text);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
+}
+.modalWide { width: min(920px, 96vw); }
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 20px 22px;
+  border-bottom: 1px solid var(--color-border);
+}
+.header h2 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 4px 0 0;
+  font-size: 18px;
+}
+.eyebrow {
+  margin: 0;
+  color: var(--color-accent);
+  font-size: 11px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: .9px;
+}
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--color-border);
+  border-radius: 7px;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+.close:hover { color: var(--color-text); background: var(--color-bg-hover); }
+.body { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
+.command {
+  display: block;
+  padding: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+  color: var(--color-accent);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.note,
+.muted { color: var(--color-text-muted); font-size: 13px; line-height: 1.45; }
+.docs { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent); font-weight: 700; text-decoration: none; }
+.error { color: #ff5a7a; font-weight: 700; }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 22px 20px;
+  border-top: 1px solid var(--color-border);
+}
+.primary,
+.secondary,
+.option {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 800;
+}
+.primary {
+  padding: 9px 14px;
+  background: var(--color-accent);
+  color: var(--color-bg);
+  border-color: var(--color-accent);
+}
+.primary:disabled { opacity: .55; cursor: not-allowed; }
+.secondary {
+  padding: 9px 14px;
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
+.card {
+  padding: 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  background: var(--color-surface);
+}
+.card h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 14px; }
+.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
+.option {
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  text-align: left;
+}
+.option:hover { border-color: var(--color-accent); background: var(--color-bg-hover); }
+.option small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 10px; }
+@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

package/web/src/components/layout/Header.jsx

@@ -13,8 +13,9 @@ import {
   IconBolt, IconSearch, IconDownload, IconSettings, IconMoon, IconSun,
   IconPlayerPlay, IconCommand, IconLayoutDashboard, IconActivity,
   IconSparkles, IconRoute, IconDots, IconQuestionMark, IconHistory,
-  IconPlug, IconFolders,
+  IconPlug, IconFolders, IconMenu2,
 } from '@tabler/icons-react'
+import ToolPicker from '../tools/ToolPicker.jsx'
 import styles from './Header.module.css'
 
 // 📖 Top-level nav items — always visible as buttons. Inlined here so the
@@ -24,8 +25,8 @@ const NAV_ITEMS = [
   { id: 'dashboard',   label: 'Dashboard',   icon: IconLayoutDashboard },
   { id: 'settings',    label: 'Settings',    icon: IconSettings },
   { id: 'analytics',   label: 'Analytics',   icon: IconActivity },
-  { id: 'recommend',   label: 'Recommend',   icon: IconSparkles,   comingIn: 'M3' },
-  { id: 'router',      label: 'Router',      icon: IconRoute,      comingIn: 'M4' },
+  { id: 'recommend',   label: 'Recommend',   icon: IconSparkles },
+  { id: 'router',      label: 'Router',      icon: IconRoute },
 ]
 
 // 📖 Overflow menu items — Help + Changelog shipped in M2; Install Endpoints
@@ -33,8 +34,8 @@ const NAV_ITEMS = [
 const MENU_ITEMS = [
   { id: 'help',              label: 'Help',               icon: IconQuestionMark },
   { id: 'changelog',         label: 'Changelog',          icon: IconHistory },
-  { id: 'install-endpoints', label: 'Install Endpoints',  icon: IconPlug,         comingIn: 'M4' },
-  { id: 'installed-models',  label: 'Installed Models',   icon: IconFolders,      comingIn: 'M4' },
+  { id: 'install-endpoints', label: 'Install Endpoints',  icon: IconPlug },
+  { id: 'installed-models',  label: 'Installed Models',   icon: IconFolders },
 ]
 
 export default function Header({
@@ -43,25 +44,29 @@ export default function Header({
   onToggleTheme, onOpenExport, onOpenCommandPalette,
   onBenchmark, benchmarkRunning, benchmarkTotal, benchmarkCompleted,
   modelsCount, theme, onToast,
+  toolMode = 'opencode', onSetToolMode, onCycleToolMode,
   updateSlot = null,
 }) {
   const [menuOpen, setMenuOpen] = useState(false)
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
   const menuRef = useRef(null)
 
   // 📖 Close the overflow menu on outside click or Esc.
   useEffect(() => {
-    if (!menuOpen) return
+    if (!menuOpen && !mobileNavOpen) return
     const onClick = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false)
     }
-    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false) }
+    const onKey = (e) => {
+      if (e.key === 'Escape') { setMenuOpen(false); setMobileNavOpen(false) }
+    }
     document.addEventListener('mousedown', onClick)
     document.addEventListener('keydown', onKey)
     return () => {
       document.removeEventListener('mousedown', onClick)
       document.removeEventListener('keydown', onKey)
     }
-  }, [menuOpen])
+  }, [menuOpen, mobileNavOpen])
 
   const handleNavClick = (item) => {
     if (item.comingIn) {
@@ -69,6 +74,7 @@ export default function Header({
       return
     }
     onNavigate(item.id)
+    setMobileNavOpen(false)
   }
 
   const handleMenuClick = (item) => {
@@ -93,6 +99,51 @@ export default function Header({
         </div>
         <span className={styles.version}>v{__APP_VERSION__}</span>
 
+        {/* 📖 M5: Hamburger for narrow viewports (never a sidebar). Shows a
+           dropdown with all nav + overflow items on mobile. */}
+        <button
+          className={styles.hamburgerBtn}
+          onClick={() => setMobileNavOpen((o) => !o)}
+          aria-label="Navigation menu"
+          aria-expanded={mobileNavOpen}
+          aria-haspopup="true"
+        >
+          <IconMenu2 size={18} stroke={1.5} />
+        </button>
+        {mobileNavOpen && (
+          <div className={styles.mobileNav} role="menu">
+            {NAV_ITEMS.map((item) => {
+              const Icon = item.icon
+              return (
+                <button
+                  key={item.id}
+                  className={`${styles.mobileNavItem} ${currentView === item.id ? styles.mobileNavActive : ''}`}
+                  onClick={() => handleNavClick(item)}
+                  role="menuitem"
+                >
+                  <Icon size={16} stroke={1.5} />
+                  <span>{item.label}</span>
+                </button>
+              )
+            })}
+            <div className={styles.mobileNavDivider} />
+            {MENU_ITEMS.map((item) => {
+              const Icon = item.icon
+              return (
+                <button
+                  key={item.id}
+                  className={styles.mobileNavItem}
+                  onClick={() => handleMenuClick(item)}
+                  role="menuitem"
+                >
+                  <Icon size={16} stroke={1.5} />
+                  <span>{item.label}</span>
+                </button>
+              )
+            })}
+          </div>
+        )}
+
         {/* Always-visible primary nav (replaces the old left sidebar) */}
         <nav className={styles.nav} aria-label="Primary">
           {NAV_ITEMS.map((item) => {
@@ -119,6 +170,7 @@ export default function Header({
               className={`${styles.navBtn} ${styles.menuTrigger}`}
               onClick={() => setMenuOpen((o) => !o)}
               title="More features"
+              aria-label="More features"
               aria-haspopup="true"
               aria-expanded={menuOpen}
             >
@@ -162,12 +214,18 @@ export default function Header({
       </div>
 
       <div className={styles.right}>
+        <ToolPicker
+          toolMode={toolMode}
+          onSetToolMode={onSetToolMode}
+          onCycleToolMode={onCycleToolMode}
+        />
+
         {/* ⌘K — the only global keyboard shortcut, opens the command palette */}
         <button
           className={styles.cmdkBtn}
           onClick={onOpenCommandPalette}
           title="Command palette (⌘K / Ctrl+P)"
-          aria-label="Open command palette"
+          aria-label="Open command palette (⌘K)"
         >
           <IconCommand size={14} stroke={1.5} />
           <span className={styles.cmdkLabel}>⌘K</span>
@@ -178,6 +236,7 @@ export default function Header({
           onClick={onBenchmark}
           disabled={benchmarkRunning}
           title={benchmarkRunning ? `AI Speed Test running — ${benchmarkCompleted}/${benchmarkTotal}` : `Run AI Latency benchmark on ${modelsCount} visible models`}
+          aria-label={benchmarkRunning ? `AI Speed Test running — ${benchmarkCompleted} of ${benchmarkTotal} complete` : 'AI Latency benchmark'}
         >
           <IconPlayerPlay size={14} stroke={1.5} />
           {benchmarkRunning ? (
@@ -193,10 +252,10 @@ export default function Header({
         {/* 📖 M2: update chip slot. Hidden when no update is available. */}
         {updateSlot}
 
-        <button className={styles.iconBtn} onClick={onToggleTheme} title={`Theme: ${theme} (click to cycle auto / dark / light)`}>
+        <button className={styles.iconBtn} onClick={onToggleTheme} title={`Theme: ${theme} (click to cycle auto / dark / light)`} aria-label={`Theme: ${theme}. Click to cycle.`}>
           {theme === 'light' ? <IconMoon size={16} stroke={1.5} /> : <IconSun size={16} stroke={1.5} />}
         </button>
-        <button className={styles.iconBtn} onClick={onOpenExport} title="Export Data">
+        <button className={styles.iconBtn} onClick={onOpenExport} title="Export Data" aria-label="Export model data">
           <IconDownload size={16} stroke={1.5} />
         </button>
       </div>

package/web/src/components/layout/Header.module.css

@@ -64,7 +64,7 @@
 .logoTextHighlight { color: var(--color-brand); }
 .version {
   font-size: 10px; font-weight: 500; font-family: var(--font-mono);
-  color: var(--color-text-dim); background: var(--color-accent-dim);
+  color: var(--color-text-muted); background: var(--color-surface);
   padding: 2px 6px; border-radius: 999px; border: 1px solid var(--color-border);
 }
 
@@ -264,8 +264,68 @@
   .logoText { display: none; }
   .cmdkLabel { display: none; }
   .benchmarkBtn > span:not(.benchmarkRunning) { display: none; }
+  .nav { display: none; }
+  .hamburgerBtn { display: flex; }
 }
 @media (max-width: 560px) {
   .version { display: none; }
-  .navBtn { padding: 0 6px; }
+}
+
+/* ─── Hamburger + mobile nav (M5) ─── */
+.hamburgerBtn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  margin-left: 8px;
+  &:hover { color: var(--color-text); background: var(--color-bg-hover); }
+}
+
+.mobileNav {
+  position: absolute;
+  top: var(--header-h, 60px);
+  left: 0;
+  right: 0;
+  background: var(--color-bg-elevated);
+  border-bottom: 1px solid var(--color-border);
+  padding: 8px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 150;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.mobileNavItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  &:hover { background: var(--color-bg-hover); color: var(--color-text); }
+}
+
+.mobileNavActive {
+  color: var(--color-accent);
+  background: var(--color-accent-dim);
+}
+
+.mobileNavDivider {
+  height: 1px;
+  background: var(--color-border);
+  margin: 6px 0;
 }

package/web/src/components/recommend/RecommendView.jsx

@@ -0,0 +1,121 @@
+/**
+ * @file web/src/components/recommend/RecommendView.jsx
+ * @description Smart Recommend modal for Web M3 parity: 3-question wizard,
+ * 10-second analysis phase, then Top 3 results from the shared scoring engine.
+ *
+ * @functions RecommendView → full-screen recommendation wizard
+ * @exports RecommendView
+ */
+import { useMemo, useState } from 'react'
+import { IconArrowLeft, IconSparkles, IconX } from '@tabler/icons-react'
+import { TASK_TYPES, PRIORITY_TYPES, CONTEXT_BUDGETS } from '../../../../src/core/utils.js'
+import LaunchButton from '../launch/LaunchButton.jsx'
+import { useRecommend } from '../../hooks/useRecommend.js'
+import styles from './RecommendView.module.css'
+
+const QUESTIONS = [
+  { key: 'taskType', title: 'What are you working on?', options: TASK_TYPES },
+  { key: 'priority', title: 'What matters most?', options: PRIORITY_TYPES },
+  { key: 'contextBudget', title: 'How big is your context?', options: CONTEXT_BUDGETS },
+]
+
+export default function RecommendView({ onClose, onLaunch, onPinAndLaunch, toolMode, onToast }) {
+  const [step, setStep] = useState(0)
+  const [answers, setAnswers] = useState({ taskType: null, priority: null, contextBudget: null })
+  const { recommend, loading, progress, results, error, reset } = useRecommend({ onToast })
+  const question = QUESTIONS[step]
+  const complete = results.length > 0
+
+  const summary = useMemo(() => QUESTIONS
+    .map((q) => q.options[answers[q.key]]?.label)
+    .filter(Boolean)
+    .join(' · '), [answers])
+
+  async function choose(value) {
+    const nextAnswers = { ...answers, [question.key]: value }
+    setAnswers(nextAnswers)
+    if (step < QUESTIONS.length - 1) {
+      setStep(step + 1)
+      return
+    }
+    await recommend(nextAnswers)
+  }
+
+  function back() {
+    if (complete || loading) {
+      reset()
+      setStep(0)
+      setAnswers({ taskType: null, priority: null, contextBudget: null })
+      return
+    }
+    setStep((value) => Math.max(0, value - 1))
+  }
+
+  return (
+    <div className={styles.backdrop} onClick={onClose}>
+      <div className={styles.modal} onClick={(event) => event.stopPropagation()}>
+        <header className={styles.header}>
+          <div>
+            <p className={styles.eyebrow}>Smart Recommend</p>
+            <h2><IconSparkles size={20} /> Find the best model for this task</h2>
+            {summary && <p className={styles.summary}>{summary}</p>}
+          </div>
+          <button className={styles.close} onClick={onClose} aria-label="Close"><IconX size={18} /></button>
+        </header>
+
+        {!loading && !complete && (
+          <main className={styles.body}>
+            <div className={styles.steps}>Question {step + 1} / {QUESTIONS.length}</div>
+            <h3>{question.title}</h3>
+            <div className={styles.options}>
+              {Object.entries(question.options).map(([key, option]) => (
+                <button key={key} className={styles.option} onClick={() => choose(key)}>
+                  <strong>{option.label}</strong>
+                  <span>{key}</span>
+                </button>
+              ))}
+            </div>
+          </main>
+        )}
+
+        {loading && (
+          <main className={styles.body}>
+            <h3>Analyzing live catalog…</h3>
+            <p className={styles.muted}>10 seconds · roughly 2 checks/sec · same scoring as the TUI.</p>
+            <div className={styles.progress}><span style={{ width: `${progress}%` }} /></div>
+            <p className={styles.percent}>{progress}%</p>
+          </main>
+        )}
+
+        {complete && (
+          <main className={styles.body}>
+            <h3>Top 3 recommendations</h3>
+            <div className={styles.results}>
+              {results.map((item, index) => (
+                <article key={`${item.result.providerKey}/${item.result.modelId}`} className={styles.resultCard}>
+                  <div className={styles.medal}>{['🥇', '🥈', '🥉'][index]}</div>
+                  <div className={styles.resultMain}>
+                    <strong>{item.result.label}</strong>
+                    <span>{item.result.origin} · {item.result.tier} · {item.result.ctx}</span>
+                    <p>{item.reason}</p>
+                  </div>
+                  <div className={styles.score}>{item.score}</div>
+                  <LaunchButton model={item.result} toolMode={toolMode} onLaunch={() => onPinAndLaunch?.(item.result)} />
+                </article>
+              ))}
+            </div>
+          </main>
+        )}
+
+        {error && <p className={styles.error}>{error}</p>}
+
+        <footer className={styles.footer}>
+          <button className={styles.secondary} onClick={back} disabled={step === 0 && !loading && !complete}>
+            <IconArrowLeft size={14} /> {complete || loading ? 'Restart' : 'Back'}
+          </button>
+          <button className={styles.secondary} onClick={onClose}>Close</button>
+        </footer>
+      </div>
+    </div>
+  )
+}

package/web/src/components/recommend/RecommendView.module.css

@@ -0,0 +1,55 @@
+/** @file web/src/components/recommend/RecommendView.module.css */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 480;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, .64);
+  backdrop-filter: blur(4px);
+}
+.modal {
+  width: min(980px, 96vw);
+  max-height: min(820px, 94vh);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  background: var(--color-bg-elevated);
+  color: var(--color-text);
+  box-shadow: 0 20px 60px rgba(0,0,0,.48);
+}
+.header,
+.footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); }
+.footer { border-top: 1px solid var(--color-border); border-bottom: 0; justify-content: flex-end; }
+.header h2 { display: flex; align-items: center; gap: 9px; margin: 4px 0; font-size: 21px; }
+.eyebrow { margin: 0; color: var(--color-accent); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
+.summary,
+.muted { color: var(--color-text-muted); margin: 0; }
+.close,
+.secondary { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
+.close { width: 32px; height: 32px; justify-content: center; }
+.secondary { padding: 8px 12px; font-weight: 800; }
+.secondary:disabled { opacity: .45; cursor: not-allowed; }
+.body { padding: 26px 28px; }
+.steps { color: var(--color-accent); font-family: var(--font-mono); font-size: 12px; font-weight: 800; margin-bottom: 10px; }
+.body h3 { margin: 0 0 18px; font-size: 20px; }
+.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
+.option { min-height: 120px; padding: 18px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-text); cursor: pointer; text-align: left; transition: transform 120ms, border-color 120ms, background 120ms; }
+.option:hover { transform: translateY(-2px); border-color: var(--color-accent); background: var(--color-bg-hover); }
+.option strong { display: block; font-size: 16px; margin-bottom: 8px; }
+.option span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 11px; }
+.progress { height: 14px; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; background: var(--color-surface); }
+.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-accent), #b400ff); transition: width 200ms; }
+.percent { font-family: var(--font-mono); color: var(--color-accent); font-weight: 900; }
+.results { display: flex; flex-direction: column; gap: 12px; }
+.resultCard { display: grid; grid-template-columns: 38px 1fr 60px auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
+.medal { font-size: 26px; }
+.resultMain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.resultMain strong { font-size: 15px; }
+.resultMain span { color: var(--color-text-muted); font-size: 12px; }
+.resultMain p { margin: 5px 0 0; color: var(--color-text-dim); font-size: 12px; }
+.score { font-family: var(--font-mono); color: var(--color-accent); font-size: 24px; font-weight: 900; text-align: center; }
+.error { margin: 0 24px 16px; color: #ff5a7a; font-weight: 800; }
+@media (max-width: 760px) { .options { grid-template-columns: 1fr; } .resultCard { grid-template-columns: 32px 1fr; } .score { text-align: left; } }