free-coding-models 0.5.86 → 0.5.87

package/web/src/components/atoms/ProviderLogo.module.css

@@ -1,103 +0,0 @@
-/**
- * @file web/src/components/atoms/ProviderLogo.module.css
- * @description Styles for the inline [icon + wordmark] provider cell.
- *
- *   - Single horizontal row, max-height pinned so the cell never exceeds the
- *     table's row height (matches the 7px vertical padding on .td).
- *   - `color: var(--color-text)` propagates the active theme's text color into
- *     inlined SVGs that use `fill="currentColor"` (mono icons + all wordmarks).
- *   - Sized to fit within a ~150px column at default row height. Cloudflare
- *     is the widest wordmark (~145px at 12px high) — it fits but is tight.
- */
-
-.row {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 100%;
-  max-height: var(--pl-max-h, 22px);
-  overflow: hidden;
-  /* 📖 Inherited by the inlined SVGs that use `fill="currentColor"`. Set on
-     📖 the row so both the mono icon and the wordmark pick up the theme. */
-  color: var(--color-text);
-  line-height: 1;
-  vertical-align: middle;
-}
-
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--pl-icon-h, 16px);
-  width: auto;
-  flex-shrink: 0;
-}
-/* 📖 The inlined <svg> from lobe-icons ships with `width="1em" height="1em"`.
-   📖 We override both so the wrapper's height controls the rendered size, and
-   📖 let the viewBox dictate the width (preserves each icon's aspect ratio). */
-.icon svg {
-  height: 100%;
-  width: auto;
-  display: block;
-}
-
-.textLogo {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--pl-text-h, 12px);
-  width: auto;
-  flex-shrink: 0;
-}
-.textLogo svg {
-  height: 100%;
-  width: auto;
-  display: block;
-}
-
-/* 📖 Wordmark-only variant used by OVH (and any future provider whose "icon"
-   📖 asset is itself a full horizontal wordmark). Sized to a slightly tighter
-   📖 max height than the square icons so the wordmark doesn't visually crowd
-   📖 the row. The viewBox aspect ratio of the OVH wordmark is ~6.3:1, so at
-   📖 14px high it renders ~88px wide — fits comfortably in 150px. */
-.iconLegacyWordmark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--pl-icon-h, 14px);
-  width: auto;
-  flex-shrink: 0;
-  /* 📖 Default text color is inherited from the row. Wordmarks that use
-     📖 `fill="currentColor"` (OVH) follow the theme automatically. Wordmarks
-     📖 with hardcoded fills (Scaleway) need a per-theme override — see
-     📖 `.scalewayLogo` below. */
-  color: var(--color-text);
-}
-.iconLegacyWordmark svg {
-  height: 100%;
-  width: auto;
-  display: block;
-}
-
-/* 📖 Scaleway: brand purple #521094 is the official color. It looks great on
-   📖 white but is barely visible on the dark background — the contrast is
-   📖 too low (dark purple on near-black). Bump to a lighter, more saturated
-   📖 shade in dark mode so the wordmark reads cleanly without losing brand
-   📖 identity. Paths were rewritten to use `fill="currentColor"` so this
-   📖 single CSS color property controls the whole wordmark. */
-:global(.scalewayLogo) {
-  color: #521094;
-  transition: color 200ms var(--ease-out, ease);
-}
-:global([data-theme="dark"]) :global(.scalewayLogo) {
-  color: #a78bfa;
-}
-
-.fallback {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--color-text);
-  white-space: nowrap;
-  /* 📖 Slight tracking so the origin name reads cleanly next to the icon. */
-  letter-spacing: 0.2px;
-}

package/web/src/components/atoms/RankCell.jsx

@@ -1,9 +0,0 @@
-/**
- * @file web/src/components/atoms/RankCell.jsx
- * @description Row index number — triable column, matches CLI Rank (idx).
- */
-import styles from './RankCell.module.css'
-
-export default function RankCell({ index }) {
-  return <span className={styles.rank}>{index}</span>
-}

package/web/src/components/atoms/RankCell.module.css

@@ -1,9 +0,0 @@
-.rank {
-  display: inline-block;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-text-dim);
-  text-align: center;
-  min-width: 28px;
-}

package/web/src/components/atoms/Sparkline.jsx

@@ -1,63 +0,0 @@
-/**
- * @file web/src/components/atoms/Sparkline.jsx
- * @description SVG sparkline chart for ping history trend visualization.
- * 📖 Renders a polyline with gradient area fill and endpoint dot.
- * 📖 Colors are theme-aware: reads CSS custom properties from :root so the
- * 📖 stroke/dot swap to the AA-contrast palette in light mode automatically.
- */
-import { useMemo } from 'react'
-
-// 📖 Read CSS custom properties at module scope; falls back to dark-mode neon
-// 📖 values when running outside the browser (e.g. during server rendering).
-function readCssVar(name, fallback) {
-  if (typeof window === 'undefined' || !window.document?.documentElement) return fallback
-  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
-  return v || fallback
-}
-
-// 📖 Threshold-based color picker that returns the current theme's variant of
-// 📖 each color. Reading the variables on every render is fine — they only
-// 📖 change when the user toggles the theme, and the memo cache key catches it.
-function pickSparkColor(lastVal) {
-  if (lastVal < 500)  return readCssVar('--color-success', '#00ff88')
-  if (lastVal < 1500) return readCssVar('--color-warning', '#ffaa00')
-  return readCssVar('--color-danger', '#ff4444')
-}
-
-export default function Sparkline({ history }) {
-  const svg = useMemo(() => {
-    if (!history || history.length < 2) return null
-    const valid = history.filter((p) => p.code === '200' || p.code === '401')
-    if (valid.length < 2) return null
-
-    const values = valid.map((p) => p.ms)
-    const max = Math.max(...values, 1)
-    const min = Math.min(...values, 0)
-    const range = max - min || 1
-    const w = 80,
-      h = 22
-    const step = w / (values.length - 1)
-
-    const points = values
-      .map((v, i) => {
-        const x = i * step
-        const y = h - ((v - min) / range) * (h - 4) - 2
-        return `${x.toFixed(1)},${y.toFixed(1)}`
-      })
-      .join(' ')
-
-    const lastVal = values[values.length - 1]
-    const color = pickSparkColor(lastVal)
-    const lastX = ((values.length - 1) * step).toFixed(1)
-    const lastY = (h - ((lastVal - min) / range) * (h - 4) - 2).toFixed(1)
-
-    return (
-      <svg className="sparkline-svg" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-        <polyline fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" points={points} opacity="0.85" />
-        <circle cx={lastX} cy={lastY} r="2.5" fill={color} />
-      </svg>
-    )
-  }, [history])
-
-  return svg || null
-}

package/web/src/components/atoms/StabilityCell.jsx

@@ -1,18 +0,0 @@
-/**
- * @file web/src/components/atoms/StabilityCell.jsx
- * @description Renders stability score with a progress bar and numeric value.
- */
-import styles from './StabilityCell.module.css'
-
-export default function StabilityCell({ score }) {
-  if (score == null || score < 0) return <span className={styles.none}>—</span>
-  const cls = score >= 70 ? 'high' : score >= 40 ? 'mid' : 'low'
-  return (
-    <div className={styles.cell}>
-      <div className={styles.bar}>
-        <div className={`${styles.fill} ${styles[cls]}`} style={{ width: `${score}%` }} />
-      </div>
-      <span className={styles.value}>{score}</span>
-    </div>
-  )
-}

package/web/src/components/atoms/StabilityCell.module.css

@@ -1,13 +0,0 @@
-.cell { display: flex; align-items: center; gap: 6px; }
-.bar  { width: 48px; height: 6px; border-radius: 3px; background: var(--color-surface); overflow: hidden; }
-.fill { height: 100%; border-radius: 3px; transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1); }
-.high { background: linear-gradient(90deg, #00ff88, #76b900); }
-.mid  { background: linear-gradient(90deg, #ffaa00, #ff8c00); }
-.low  { background: linear-gradient(90deg, #ff4444, #cc0000); }
-.value { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; }
-.none  { color: var(--color-text-dim); }
-
-/* 📖 Light theme: drop the neon gradients to deep, saturated versions. */
-:global([data-theme="light"]) .high { background: linear-gradient(90deg, #008f4d, #4a7a00); }
-:global([data-theme="light"]) .mid  { background: linear-gradient(90deg, #b86b00, #c45a00); }
-:global([data-theme="light"]) .low  { background: linear-gradient(90deg, #c8143a, #990000); }

package/web/src/components/atoms/StatusDot.jsx

@@ -1,13 +0,0 @@
-/**
- * @file web/src/components/atoms/StatusDot.jsx
- * @description Renders a colored status indicator dot (green=up, red=down, gray=pending).
- * 📖 When a model is not in the active router set and still pending, we show
- * 📖 a muted gray dot instead of the animated yellow — this makes it visually
- * 📖 clear that the model is *not being tested* rather than *still loading*.
- */
-import styles from './StatusDot.module.css'
-
-export default function StatusDot({ status, inRouterSet = true }) {
-  const cls = status === 'up' ? styles.up : status === 'timeout' ? styles.timeout : status === 'down' ? styles.down : (status === 'pending' && !inRouterSet) ? styles.notInSet : styles.pending
-  return <span className={`${styles.dot} ${cls}`} />
-}

package/web/src/components/atoms/StatusDot.module.css

@@ -1,29 +0,0 @@
-.dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-right: 6px;
-  vertical-align: middle;
-}
-.up       { background: #00ff88; box-shadow: 0 0 6px rgba(0,255,136,0.4); }
-.down     { background: #ff4444; }
-.timeout  { background: #ff4444; }
-.pending  { background: #555570; animation: pulse 1.5s ease-in-out infinite; }
-/* 📖 Models not in the active router set — static dim dot, no pulse animation.
-   📖 Visually distinct from 'pending' (yellow animated) so users know this
-   📖 model is simply not being tested, not still loading. */
-.notInSet { background: #3a3a4a; opacity: 0.5; }
-
-@keyframes pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(118,185,0,0.25); }
-  50% { box-shadow: 0 0 0 6px transparent; }
-}
-
-/* 📖 Light theme: deep green/red for the dot so it still reads as "up"/"down"
-   📖 on a white card; the glow halo is dimmed so it doesn't blow out. */
-:global([data-theme="light"]) .up       { background: #008f4d; box-shadow: 0 0 4px rgba(0,143,77,0.35); }
-:global([data-theme="light"]) .down,
-:global([data-theme="light"]) .timeout  { background: #c8143a; }
-:global([data-theme="light"]) .pending  { background: #888899; }
-:global([data-theme="light"]) .notInSet { background: #b0b0b8; opacity: 0.6; }

package/web/src/components/atoms/TPSCell.jsx

@@ -1,36 +0,0 @@
-/**
- * @file web/src/components/atoms/TPSCell.jsx
- * @description Benchmark tokens-per-second column — animated spinner during benchmarks.
- * 📖 Shows: 13, 45, —. Retry badge ↻N in blue.
- * 📖 When isRunning: animated CSS spinner matches AILatencyCell.
- */
-import styles from './TPSCell.module.css'
-
-function formatTps(result, isRunning) {
-  if (isRunning) return { text: '…', badge: '' }
-  if (!result || !result.ok) return { text: '—', badge: '' }
-  const badge = result.retries > 0 ? `↻${result.retries}` : ''
-  return { text: String(Math.round(result.tokensPerSecond ?? 0)), badge }
-}
-
-export default function TPSCell({ result, isRunning }) {
-  const { text, badge } = formatTps(result, isRunning)
-  const ok = result?.ok
-  const colorCls = ok ? styles.fast : (result ? styles.slow : styles.dim)
-
-  return (
-    <span className={`${styles.cell} ${isRunning ? styles.runningCell : ''}`}>
-      {isRunning ? (
-        <>
-          <span className={styles.miniSpinner} />
-          <span className={`${styles.value} ${styles.running}`}>{text}</span>
-        </>
-      ) : (
-        <>
-          <span className={`${styles.value} ${colorCls}`}>{text}</span>
-          {badge && <span className={styles.badge}>{badge}</span>}
-        </>
-      )}
-    </span>
-  )
-}

package/web/src/components/atoms/TPSCell.module.css

@@ -1,44 +0,0 @@
-.cell {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 40px;
-  transition: background 200ms;
-  border-radius: 4px;
-  padding: 1px 3px;
-}
-.value { }
-.fast   { color: #00ff88; }
-.slow   { color: #ff4444; }
-.dim    { color: var(--color-text-dim); }
-.running { color: #b400ff; font-weight: 700; }
-.badge  { color: #06b6d4; font-size: 10px; }
-
-/* ── Running row highlight ── */
-.runningCell {
-  background: rgba(180, 0, 255, 0.12);
-}
-
-/* ── Mini spinner matching AILatencyCell ── */
-@keyframes miniSpin {
-  to { transform: rotate(360deg); }
-}
-.miniSpinner {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border: 1.5px solid rgba(180, 0, 255, 0.3);
-  border-top-color: #b400ff;
-  border-radius: 50%;
-  animation: miniSpin 0.6s linear infinite;
-  flex-shrink: 0;
-}
-
-/* 📖 Light theme overrides — match AILatencyCell. */
-:global([data-theme="light"]) .fast   { color: #008f4d; }
-:global([data-theme="light"]) .slow   { color: #c8143a; }
-:global([data-theme="light"]) .badge  { color: #0e7490; }
-:global([data-theme="light"]) .runningCell { background: rgba(125, 0, 180, 0.08); }

package/web/src/components/atoms/TierBadge.jsx

@@ -1,10 +0,0 @@
-/**
- * @file web/src/components/atoms/TierBadge.jsx
- * @description Renders a tier badge (S+, S, A+, etc.) with color-coded styling.
- */
-import styles from './TierBadge.module.css'
-
-export default function TierBadge({ tier }) {
-  const cls = tier.replace('+', 'plus').replace('-', 'minus').toLowerCase()
-  return <span className={`${styles.badge} ${styles[`tier_${cls}`]}`}>{tier}</span>
-}

package/web/src/components/atoms/TierBadge.module.css

@@ -1,29 +0,0 @@
-.badge {
-  display: inline-block;
-  font-family: 'JetBrains Mono', monospace;
-  font-weight: 700;
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  text-align: center;
-  min-width: 32px;
-}
-.tier_splus { background: rgba(255,215,0,0.15); color: #ffd700; border: 1px solid rgba(255,215,0,0.3); }
-.tier_s     { background: rgba(255,140,0,0.12); color: #ff8c00; border: 1px solid rgba(255,140,0,0.25); }
-.tier_aplus { background: rgba(0,200,255,0.1); color: #00c8ff; border: 1px solid rgba(0,200,255,0.2); }
-.tier_a     { background: rgba(61,220,132,0.1); color: #3ddc84; border: 1px solid rgba(61,220,132,0.2); }
-.tier_aminus{ background: rgba(126,207,126,0.1); color: #7ecf7e; border: 1px solid rgba(126,207,126,0.2); }
-.tier_bplus { background: rgba(168,168,200,0.1); color: #b8b8d8; border: 1px solid rgba(168,168,200,0.15); }
-.tier_b     { background: rgba(128,128,152,0.1); color: #a0a0b8; border: 1px solid rgba(128,128,152,0.15); }
-.tier_c     { background: rgba(96,96,120,0.1); color: #909098; border: 1px solid rgba(96,96,120,0.15); }
-
-/* 📖 Light theme: darker, AA-contrast tier text colors. Borders stay the same
-   📖 hue so the badge still feels "tier-colored", just more legible. */
-:global([data-theme="light"]) .tier_splus  { color: #7a5e00; border-color: rgba(176,136,0,0.4); }
-:global([data-theme="light"]) .tier_s      { color: #a14a00; border-color: rgba(196,90,0,0.4); }
-:global([data-theme="light"]) .tier_aplus  { color: #005d8a; border-color: rgba(0,115,168,0.4); }
-:global([data-theme="light"]) .tier_a      { color: #1f7a3e; border-color: rgba(31,122,62,0.4); }
-:global([data-theme="light"]) .tier_aminus { color: #2f7a2f; border-color: rgba(47,122,47,0.4); }
-:global([data-theme="light"]) .tier_bplus  { color: #4a4a72; border-color: rgba(90,90,138,0.4); }
-:global([data-theme="light"]) .tier_b      { color: #555566; border-color: rgba(85,85,102,0.4); }
-:global([data-theme="light"]) .tier_c      { color: #5a5a6a; border-color: rgba(106,106,122,0.4); }

package/web/src/components/atoms/Toast.jsx

@@ -1,25 +0,0 @@
-/**
- * @file web/src/components/atoms/Toast.jsx
- * @description Toast notification component with auto-dismiss and animated entrance/exit.
- */
-import { useEffect, useRef } from 'react'
-import styles from './Toast.module.css'
-
-const ICONS = { success: '✅', error: '❌', warning: '⚠️', info: 'ℹ️' }
-
-export default function Toast({ message, type = 'info', duration = 3500, onDismiss }) {
-  const timerRef = useRef(null)
-
-  useEffect(() => {
-    timerRef.current = setTimeout(onDismiss, duration)
-    return () => clearTimeout(timerRef.current)
-  }, [duration, onDismiss])
-
-  return (
-    <div className={`${styles.toast} ${styles[type]}`}>
-      <span className={styles.icon}>{ICONS[type] || '📌'}</span>
-      <span className={styles.message}>{message}</span>
-      <button className={styles.close} onClick={onDismiss}>×</button>
-    </div>
-  )
-}

package/web/src/components/atoms/Toast.module.css

@@ -1,41 +0,0 @@
-.toast {
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 18px;
-  border-radius: var(--radius-md, 10px);
-  background: var(--color-bg-elevated);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-lg);
-  font-size: 13px;
-  font-weight: 500;
-  animation: slideIn 300ms cubic-bezier(0.16, 1, 0.3, 1);
-  min-width: 280px;
-  max-width: 420px;
-}
-.success { border-left: 4px solid #00ff88; }
-.error   { border-left: 4px solid #ff4444; }
-.warning { border-left: 4px solid #ffaa00; }
-.info    { border-left: 4px solid #06b6d4; }
-
-/* 📖 Light theme: deeper accent bars so they pop on the white toast card. */
-:global([data-theme="light"]) .success { border-left-color: #008f4d; }
-:global([data-theme="light"]) .error   { border-left-color: #c8143a; }
-:global([data-theme="light"]) .warning { border-left-color: #b86b00; }
-:global([data-theme="light"]) .info    { border-left-color: #0e7490; }
-.icon    { font-size: 18px; flex-shrink: 0; }
-.message { flex: 1; }
-.close {
-  background: none;
-  border: none;
-  color: var(--color-text-dim);
-  cursor: pointer;
-  font-size: 16px;
-  padding: 0;
-  line-height: 1;
-}
-.exiting { animation: slideOut 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
-
-@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

package/web/src/components/atoms/ToastContainer.jsx

@@ -1,16 +0,0 @@
-/**
- * @file web/src/components/atoms/ToastContainer.jsx
- * @description Fixed-position container that renders all active toasts.
- */
-import styles from './ToastContainer.module.css'
-import Toast from './Toast.jsx'
-
-export default function ToastContainer({ toasts, dismissToast }) {
-  return (
-    <div className={styles.container}>
-      {toasts.map((t) => (
-        <Toast key={t.id} message={t.message} type={t.type} onDismiss={() => dismissToast(t.id)} />
-      ))}
-    </div>
-  )
-}

package/web/src/components/atoms/ToastContainer.module.css

@@ -1,10 +0,0 @@
-.container {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 10000;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  pointer-events: none;
-}

package/web/src/components/atoms/VerdictBadge.jsx

@@ -1,36 +0,0 @@
-/**
- * @file web/src/components/atoms/VerdictBadge.jsx
- * @description Renders a verdict badge matching exactly the TUI format.
- * 📖 Shows emoji + text: 🟩 Perfect, 🟢 Normal, 🟡 Spiky, 🟠 Slow, 🔴 Very Slow, 🔥 Overloaded, 🟥 Unstable, ⚫ Not Active, ⏳ Pending.
- */
-import styles from './VerdictBadge.module.css'
-
-// ─── Emoji map matching TUI render-table.js verdictIcon ──────────────────────────
-const VERDICT_WITH_EMOJI = {
-  Perfect:     { emoji: '🟩', text: 'Perfect',     cls: 'perfect' },
-  Normal:      { emoji: '🟢', text: 'Normal',      cls: 'normal' },
-  Spiky:       { emoji: '🟡', text: 'Spiky',       cls: 'spiky' },
-  Slow:        { emoji: '🟠', text: 'Slow',        cls: 'slow' },
-  'Very Slow': { emoji: '🔴', text: 'Very Slow',   cls: 'veryslow' },
-  Overloaded:  { emoji: '🔥', text: 'Overloaded',  cls: 'overloaded' },
-  Unstable:    { emoji: '🟥', text: 'Unstable',    cls: 'unstable' },
-  'Not Active':{ emoji: '⚫', text: 'Not Active', cls: 'notactive' },
-  Pending:     { emoji: '⏳', text: 'Pending',     cls: 'pending' },
-}
-
-const DEFAULT_ENTRY = { emoji: '❔', text: 'Pending', cls: 'pending' }
-
-export default function VerdictBadge({ verdict, httpCode }) {
-  // Handle 429 rate limit from HTTP code (TUI shows 🔥 429 TRY LATER in Health column)
-  // In Verdict column, TUI shows 'Overloaded' for 429 — keep same behavior
-  const entry = verdict
-    ? (VERDICT_WITH_EMOJI[verdict] || { emoji: '❔', text: verdict, cls: 'pending' })
-    : DEFAULT_ENTRY
-
-  return (
-    <span className={`${styles.badge} ${styles[entry.cls]}`}>
-      <span className={styles.emoji}>{entry.emoji}</span>
-      <span className={styles.text}>{entry.text}</span>
-    </span>
-  )
-}

package/web/src/components/atoms/VerdictBadge.module.css

@@ -1,40 +0,0 @@
-/**
- * @file web/src/components/atoms/VerdictBadge.module.css
- * @description Styles matching TUI verdict colors (emoji + text).
- */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  font-size: 11px;
-  font-weight: 700;
-  padding: 2px 7px;
-  border-radius: 999px;
-  white-space: nowrap;
-}
-
-.emoji { font-size: 12px; line-height: 1; }
-.text { line-height: 1; }
-
-/* ─── Color variants matching TUI theme ─── */
-.perfect    { background: rgba(0,255,136,0.12); color: #00ff88; }
-.normal     { background: rgba(118,185,0,0.12); color: #76b900; }
-.slow       { background: rgba(255,170,0,0.12); color: #ffaa00; }
-.spiky      { background: rgba(255,102,0,0.12); color: #ff6600; }
-.veryslow  { background: rgba(255,68,68,0.12); color: #ff4444; }
-.overloaded { background: rgba(255,34,34,0.12); color: #ff2222; }
-.unstable   { background: rgba(204,0,0,0.12); color: #cc0000; }
-.notactive  { background: rgba(85,85,112,0.12); color: #555570; }
-.pending    { background: rgba(68,68,96,0.1); color: #444460; }
-
-/* 📖 Light theme: deeper, more saturated text colors. Backgrounds stay
-   📖 the same since they are translucent and adapt to the white card. */
-:global([data-theme="light"]) .perfect    { color: #008f4d; background: rgba(0,143,77,0.10); }
-:global([data-theme="light"]) .normal     { color: #4a7a00; background: rgba(74,122,0,0.10); }
-:global([data-theme="light"]) .slow       { color: #b86b00; background: rgba(184,107,0,0.10); }
-:global([data-theme="light"]) .spiky      { color: #c45000; background: rgba(196,80,0,0.10); }
-:global([data-theme="light"]) .veryslow   { color: #c8143a; background: rgba(200,20,58,0.10); }
-:global([data-theme="light"]) .overloaded { color: #b8101f; background: rgba(184,16,31,0.10); }
-:global([data-theme="light"]) .unstable   { color: #990000; background: rgba(153,0,0,0.10); }
-:global([data-theme="light"]) .notactive  { color: #5a5a72; }
-:global([data-theme="light"]) .pending    { color: #5a5a8a; }