free-coding-models 0.5.85 → 0.5.87

package/web/src/components/router/RouterView.module.css

@@ -1,1289 +0,0 @@
-.overlay {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  padding: 24px;
-}
-
-.modal {
-  background: var(--color-bg-card, #080908);
-  border: 1px solid var(--color-border, #161a16);
-  border-radius: 12px;
-  width: 100%;
-  max-width: 1000px;
-  margin: 0 auto;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-height: 0;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border, #1e1e2e);
-}
-
-.title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-primary, #e0e0e0);
-}
-
-.closeBtn {
-  background: none;
-  border: none;
-  color: var(--text-muted, #888);
-  font-size: 18px;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 6px;
-  &:hover { background: var(--bg-hover, #1a1a2e); color: var(--text-primary, #e0e0e0); }
-}
-
-.body {
-  padding: 20px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-/* Hero Card */
-.heroCard {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-radius: 10px;
-  margin-bottom: 16px;
-}
-
-.heroRunning {
-  background: linear-gradient(135deg, rgba(0, 200, 100, 0.08), rgba(0, 200, 100, 0.02));
-  border: 1px solid rgba(0, 200, 100, 0.2);
-}
-
-.heroStopped {
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-}
-
-.heroLeft {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.heroStatus {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.statusDot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.dotGreen {
-  background: #00c864;
-  box-shadow: 0 0 6px rgba(0, 200, 100, 0.4);
-}
-
-.dotGray {
-  background: #555;
-}
-
-.heroLabel {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary, #e0e0e0);
-}
-
-.heroMeta {
-  font-size: 12px;
-  color: var(--text-muted, #888);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.heroActions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.startBtn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: #00c864;
-  color: #000;
-  border: none;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  &:hover { background: #00d874; }
-  &:disabled { opacity: 0.5; cursor: not-allowed; }
-}
-
-/* 📖 Bigger start button for the stopped state — more prominent CTA. */
-.startBtnBig {
-  padding: 10px 24px;
-  font-size: 15px;
-  border-radius: 10px;
-}
-
-.stopBtn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: #dc3545;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  &:hover { background: #e04555; }
-  &:disabled { opacity: 0.5; cursor: not-allowed; }
-}
-
-.refreshBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 8px;
-  color: var(--text-muted, #888);
-  cursor: pointer;
-  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
-}
-
-/* Quick Setup */
-.quickSetup {
-  margin-bottom: 16px;
-}
-
-/* 📖 Hero glow when running — makes the quick setup card visually prominent. */
-.quickSetupHero {
-  border: 1px solid rgba(0, 200, 100, 0.25);
-  box-shadow: 0 0 16px rgba(0, 200, 100, 0.08);
-  border-radius: 10px;
-  padding: 12px;
-  background: linear-gradient(135deg, rgba(0, 200, 100, 0.05), transparent);
-}
-
-/* 📖 "Copy all" button — sits at the right of the Quick Setup title. */
-.copyAllBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: auto;
-  padding: 3px 10px;
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 6px;
-  color: var(--text-secondary, #aaa);
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  font-family: inherit;
-  &:hover { color: var(--text-primary, #e0e0e0); border-color: var(--accent, #00c864); }
-}
-
-.sectionTitle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-secondary, #aaa);
-  margin: 0 0 8px 0;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.quickRows {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 8px;
-  padding: 10px 12px;
-}
-
-.quickRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.quickLabel {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted, #888);
-  min-width: 60px;
-  text-transform: uppercase;
-}
-
-.quickValue {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text-primary, #e0e0e0);
-  background: var(--bg-primary, #0f0f17);
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-family: 'SF Mono', monospace;
-}
-
-.copyBtn {
-  background: none;
-  border: none;
-  color: var(--text-muted, #888);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
-}
-
-/* Probe Mode */
-.section {
-  margin-bottom: 16px;
-}
-
-.probeModes {
-  display: flex;
-  gap: 8px;
-}
-
-.probeBtn {
-  padding: 6px 14px;
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 6px;
-  background: var(--bg-secondary, #14141f);
-  color: var(--text-secondary, #aaa);
-  font-size: 12px;
-  cursor: pointer;
-  text-transform: capitalize;
-  &:hover { border-color: var(--text-muted, #888); }
-}
-
-.probeActive {
-  background: rgba(0, 200, 100, 0.1);
-  border-color: rgba(0, 200, 100, 0.3);
-  color: #00c864;
-  font-weight: 600;
-}
-
-/* Model Health */
-.modelList {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.modelRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  background: var(--bg-secondary, #14141f);
-  border-radius: 6px;
-  font-size: 12px;
-}
-
-.modelPriority {
-  color: var(--text-muted, #888);
-  min-width: 22px;
-  font-weight: 600;
-}
-
-.modelName {
-  flex: 1;
-  color: var(--text-primary, #e0e0e0);
-  font-family: 'SF Mono', monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.modelScore {
-  color: var(--text-muted, #888);
-  min-width: 40px;
-  text-align: right;
-}
-
-.modelLatency {
-  color: var(--text-muted, #888);
-  min-width: 50px;
-  text-align: right;
-}
-
-.circuitBadge {
-  font-size: 10px;
-  font-weight: 700;
-  padding: 2px 6px;
-  border-radius: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  min-width: 70px;
-  text-align: center;
-}
-
-.circuitClosed { background: rgba(0, 200, 100, 0.15); color: #00c864; }
-.circuitOpen { background: rgba(220, 53, 69, 0.15); color: #dc3545; }
-.circuitHalfOpen { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
-.circuitAuth { background: rgba(255, 140, 0, 0.15); color: #ff8c00; }
-.circuitUnknown { background: rgba(128, 128, 128, 0.15); color: #888; }
-
-.pulse {
-  color: #fbbf24;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% { opacity: 0.4; }
-  50% { opacity: 1; }
-  100% { opacity: 0.4; }
-}
-
-.activeList {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.activeRow {
-  background: rgba(251, 191, 36, 0.05);
-  border: 1px solid rgba(251, 191, 36, 0.2);
-  border-radius: 8px;
-  padding: 10px 12px;
-}
-
-.activeMain {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.activeModel {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--text-primary, #e0e0e0);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.activeId {
-  color: var(--text-muted, #666);
-  font-size: 10px;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 1px 4px;
-  border-radius: 4px;
-  font-family: 'SF Mono', monospace;
-  font-weight: normal;
-}
-
-.activeStatus {
-  font-size: 12px;
-}
-
-.processingText {
-  color: #10b981;
-  font-weight: 500;
-}
-
-.stalledText {
-  color: #ef4444;
-  font-weight: 700;
-  animation: flash 1s infinite;
-}
-
-@keyframes flash {
-  0% { opacity: 1; }
-  50% { opacity: 0.5; }
-  100% { opacity: 1; }
-}
-
-.activeDetails {
-  display: flex;
-  gap: 12px;
-  font-size: 11px;
-  color: var(--text-muted, #888);
-}
-
-.activeCurrentModel {
-  color: var(--text-secondary, #b0b0b0);
-}
-
-.activeTokens {
-  background: rgba(255, 255, 255, 0.05);
-  padding: 0 4px;
-  border-radius: 3px;
-}
-
-/* Request Log */
-.logList {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.logRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px;
-  font-size: 11px;
-  font-family: 'SF Mono', monospace;
-}
-
-.logTime { color: var(--text-muted, #555); min-width: 60px; }
-.logId {
-  color: var(--text-muted, #666);
-  font-size: 9px;
-  min-width: 32px;
-  background: rgba(255, 255, 255, 0.03);
-  padding: 1px 3px;
-  border-radius: 3px;
-  text-align: center;
-  font-family: 'SF Mono', monospace;
-}
-.logOk { color: #00c864; min-width: 28px; }
-.logErr { color: #dc3545; min-width: 28px; }
-.logModel { color: var(--text-secondary, #aaa); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.logLatency { color: var(--text-muted, #888); min-width: 50px; text-align: right; }
-.logTokens { color: var(--text-muted, #888); min-width: 60px; text-align: right; }
-.logDetail {
-  color: var(--text-muted, #666);
-  font-size: 10px;
-  flex: 1;
-  text-align: right;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.logFailover {
-  font-size: 9px;
-  padding: 1px 4px;
-  background: rgba(255, 193, 7, 0.15);
-  color: #ffc107;
-  border-radius: 3px;
-  text-transform: uppercase;
-}
-
-.logEmpty {
-  padding: 16px;
-  text-align: center;
-  color: var(--text-muted, #888);
-  font-size: 12px;
-  background: var(--bg-secondary, #14141f);
-  border: 1px dashed var(--border, #1e1e2e);
-  border-radius: 8px;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-/* ── Set Manager (add / remove / drag-and-drop) ─────────────────────── */
-
-.setMeta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 12px;
-  color: var(--text-muted, #888);
-  margin-bottom: 8px;
-}
-
-.setMetaName {
-  font-weight: 600;
-  color: var(--text-secondary, #aaa);
-  font-family: 'SF Mono', monospace;
-}
-
-.setActions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.smallBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 6px;
-  color: var(--text-secondary, #aaa);
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  font-family: inherit;
-  &:hover { color: var(--text-primary, #e0e0e0); border-color: var(--text-muted, #888); }
-  &:disabled { opacity: 0.4; cursor: not-allowed; }
-}
-
-.primaryBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  background: #00c864;
-  color: #000;
-  border: 1px solid #00c864;
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  font-family: inherit;
-  &:hover { background: #00d874; border-color: #00d874; }
-  &:disabled { opacity: 0.4; cursor: not-allowed; }
-}
-
-.setList {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-height: 60px;
-}
-
-.setEmpty {
-  padding: 20px 16px;
-  text-align: center;
-  color: var(--text-muted, #888);
-  font-size: 12px;
-  background: var(--bg-secondary, #14141f);
-  border: 1px dashed var(--border, #1e1e2e);
-  border-radius: 8px;
-}
-
-.setEmptyTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-secondary, #aaa);
-  margin-bottom: 4px;
-}
-
-.setEmptyHint {
-  font-size: 11px;
-  color: var(--text-muted, #888);
-  line-height: 1.5;
-}
-
-.setEmptyHint strong {
-  color: var(--text-secondary, #aaa);
-}
-
-.setRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 6px;
-  font-size: 12px;
-  cursor: grab;
-  user-select: none;
-  transition: background 0.1s, border-color 0.1s, transform 0.1s;
-}
-
-.setRow:hover {
-  background: var(--bg-hover, #1a1a2e);
-  border-color: var(--text-muted, #888);
-}
-
-.setRowDragging {
-  opacity: 0.5;
-  transform: scale(0.99);
-  cursor: grabbing;
-}
-
-.setRowDropTarget {
-  border-color: #00c864;
-  background: rgba(0, 200, 100, 0.06);
-}
-
-.setRowDropTargetAbove {
-  border-top: 2px solid #00c864;
-}
-
-.setRowDropTargetBelow {
-  border-bottom: 2px solid #00c864;
-}
-
-.setDragHandle {
-  color: var(--text-muted, #888);
-  cursor: grab;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  line-height: 1;
-  user-select: none;
-  &:hover { color: var(--text-secondary, #aaa); }
-}
-
-.setPriority {
-  min-width: 28px;
-  font-weight: 700;
-  font-size: 11px;
-  color: var(--text-muted, #888);
-  text-align: right;
-  font-family: 'SF Mono', monospace;
-}
-
-.setKey {
-  flex: 1;
-  color: var(--text-primary, #e0e0e0);
-  font-family: 'SF Mono', monospace;
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.setTier {
-  font-size: 10px;
-  font-weight: 700;
-  padding: 2px 6px;
-  border-radius: 3px;
-  background: var(--bg-primary, #0f0f17);
-  color: var(--text-muted, #888);
-  min-width: 32px;
-  text-align: center;
-  text-transform: uppercase;
-}
-
-/* 📖 Priority badge variants — make the fallback chain semantics explicit
-   (issue #120). Primary gets the accent color so users instantly see which
-   model serves every request; fallbacks stay muted. */
-.setPriorityPrimary {
-  min-width: 52px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: rgba(0, 200, 100, 0.14);
-  color: var(--accent, #00c864);
-  border: 1px solid rgba(0, 200, 100, 0.3);
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  text-align: center;
-}
-
-.setPriorityFallback {
-  text-transform: none;
-  opacity: 0.85;
-}
-
-/* 📖 Next-to-serve row — subtle accent left border + tint so the user can
-   see at a glance which model will handle the next chat completion.
-   Only applied when the daemon is running and routingOrder is known. */
-.setRowNext {
-  background: linear-gradient(90deg, rgba(0, 200, 100, 0.07), transparent 60%);
-  border-left: 2px solid var(--accent, #00c864);
-  padding-left: 8px;
-}
-
-/* 📖 Priority legend — one-line explainer above the set list. */
-.priorityLegend {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  padding: 6px 10px;
-  margin-bottom: 8px;
-  font-size: 11px;
-  color: var(--text-muted, #888);
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 6px;
-}
-
-.legendPrimary {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  font-weight: 600;
-  color: var(--accent, #00c864);
-}
-
-.legendFallback {
-  font-weight: 600;
-  color: var(--text-secondary, #aaa);
-}
-
-.legendSeparator {
-  color: var(--text-muted, #888);
-  opacity: 0.7;
-}
-
-.legendNext {
-  margin-left: auto;
-  color: var(--text-secondary, #aaa);
-}
-
-.legendNext code {
-  color: var(--accent, #00c864);
-  font-family: 'SF Mono', monospace;
-  font-size: 10px;
-}
-
-.setRowBtns {
-  display: flex;
-  gap: 2px;
-}
-
-.iconBtn {
-  background: none;
-  border: none;
-  color: var(--text-muted, #888);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
-  &:disabled { opacity: 0.3; cursor: not-allowed; }
-}
-
-.removeBtn:hover { color: #ff6b6b; background: rgba(220, 53, 69, 0.1); }
-
-/* Add picker */
-.pickerPanel {
-  margin-top: 10px;
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 8px;
-  padding: 10px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.pickerHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary, #aaa);
-}
-
-.pickerSearch {
-  display: flex;
-  gap: 6px;
-}
-
-.pickerInput {
-  flex: 1;
-  padding: 6px 10px;
-  background: var(--bg-primary, #0f0f17);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 6px;
-  color: var(--text-primary, #e0e0e0);
-  font-size: 12px;
-  font-family: inherit;
-  outline: none;
-  &:focus { border-color: var(--accent, #00c864); }
-}
-
-.pickerSelect {
-  padding: 6px 10px;
-  background: var(--bg-primary, #0f0f17);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 6px;
-  color: var(--text-primary, #e0e0e0);
-  font-size: 12px;
-  font-family: inherit;
-  outline: none;
-  cursor: pointer;
-  max-width: 140px;
-}
-
-.pickerList {
-  max-height: 220px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.pickerItem {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px;
-  font-size: 11px;
-  font-family: 'SF Mono', monospace;
-  color: var(--text-primary, #e0e0e0);
-  border-radius: 4px;
-  cursor: pointer;
-  &:hover { background: var(--bg-hover, #1a1a2e); }
-}
-
-.pickerItemAdded {
-  opacity: 0.4;
-  cursor: not-allowed;
-  text-decoration: line-through;
-}
-
-.pickerProvider {
-  color: var(--text-muted, #888);
-  min-width: 90px;
-}
-
-.pickerModel {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pickerBadge {
-  font-size: 9px;
-  padding: 1px 4px;
-  border-radius: 3px;
-  background: rgba(255, 140, 0, 0.15);
-  color: #ff8c00;
-  text-transform: uppercase;
-  font-weight: 700;
-}
-
-.pickerBadgeOk {
-  background: rgba(0, 200, 100, 0.15);
-  color: #00c864;
-}
-
-.pickerEmpty {
-  padding: 10px;
-  text-align: center;
-  color: var(--text-muted, #888);
-  font-size: 12px;
-}
-
-.saveStatus {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 10px;
-  color: var(--text-muted, #888);
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
-.saveStatusOk { color: #00c864; }
-.saveStatusErr { color: #dc3545; }
-
-/* ── Auto-heal banner ────────────────────────────────────────── */
-
-.autoHealBanner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 14px;
-  margin-bottom: 12px;
-  background: rgba(255, 193, 7, 0.08);
-  border: 1px solid rgba(255, 193, 7, 0.3);
-  border-radius: 8px;
-}
-
-.autoHealLeft {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  min-width: 0;
-  flex: 1;
-}
-
-.autoHealIcon {
-  font-size: 18px;
-  color: #ffc107;
-  flex-shrink: 0;
-  line-height: 1.4;
-}
-
-.autoHealTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary, #e0e0e0);
-  margin-bottom: 2px;
-}
-
-.autoHealHint {
-  font-size: 11px;
-  color: var(--text-muted, #888);
-  line-height: 1.4;
-}
-
-.autoHealHint strong {
-  color: var(--text-secondary, #aaa);
-}
-
-.autoHealActions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-/* ════════════════════════════════════════════════════════════════════════
-   📖 Probe-all button + progress bar (AI Latency benchmarks on the set).
-   ════════════════════════════════════════════════════════════════════════ */
-
-/* 📖 Active state for the Probe button while benchmarks run. */
-.probeBtnActive {
-  border-color: var(--accent, #00c864);
-  color: var(--accent, #00c864);
-  cursor: progress;
-}
-
-/* 📖 Progress card shown below the set actions while probing. */
-.probeProgress {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 8px 10px;
-  margin-bottom: 8px;
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid rgba(0, 200, 100, 0.2);
-  border-radius: 6px;
-}
-
-.probeProgressLabel {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 11px;
-  color: var(--accent, #00c864);
-  font-weight: 600;
-}
-
-.probeProgressCount {
-  margin-left: auto;
-  color: var(--text-secondary, #aaa);
-  font-weight: 500;
-  font-family: 'SF Mono', monospace;
-}
-
-.probeProgressBar {
-  height: 4px;
-  background: var(--bg-primary, #0f0f17);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.probeProgressFill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent, #00c864), rgba(0, 200, 100, 0.6));
-  border-radius: 2px;
-  transition: width 0.4s ease;
-}
-
-/* ════════════════════════════════════════════════════════════════════════
-   📖 AI Latency cell in each set row — populated by Probe all.
-   ════════════════════════════════════════════════════════════════════════ */
-
-.aiLatencyCell {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 78px;
-  font-size: 10px;
-  font-family: 'SF Mono', monospace;
-  justify-content: flex-end;
-}
-
-.aiLatencyMs {
-  font-weight: 700;
-  color: #b400ff;
-}
-
-.aiLatencyTps {
-  color: var(--text-muted, #888);
-  font-size: 9px;
-}
-
-.aiLatencySpin {
-  color: var(--accent, #00c864);
-  letter-spacing: 2px;
-  animation: probeSpin 0.8s steps(3, end) infinite;
-}
-
-@keyframes probeSpin {
-  0% { opacity: 0.3; }
-  50% { opacity: 1; }
-  100% { opacity: 0.3; }
-}
-
-.aiLatencyErr {
-  color: var(--error, #ff5a5a);
-  font-size: 10px;
-}
-
-.aiLatencyNone {
-  color: var(--text-muted, #888);
-  opacity: 0.4;
-}
-
-/* ════════════════════════════════════════════════════════════════════════
-   📖 Mini Playground — live router test inside the Router view.
-   ════════════════════════════════════════════════════════════════════════ */
-
-.miniPgHint {
-  margin-left: auto;
-  font-size: 10px;
-  font-weight: 400;
-  color: var(--text-muted, #888);
-}
-
-.miniPgHint code {
-  color: var(--accent, #00c864);
-  font-family: 'SF Mono', monospace;
-}
-
-.miniPg {
-  max-height: 220px;
-  overflow-y: auto;
-  padding: 8px;
-  margin-bottom: 8px;
-  background: var(--bg-primary, #0f0f17);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  scroll-behavior: smooth;
-}
-
-.miniPgEmpty {
-  text-align: center;
-  color: var(--text-muted, #888);
-  font-size: 11px;
-  padding: 18px 8px;
-}
-
-.miniPgMsg {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  max-width: 88%;
-}
-
-.miniPgUser {
-  align-self: flex-end;
-  align-items: flex-end;
-}
-
-.miniPgAssistant {
-  align-self: flex-start;
-  align-items: flex-start;
-}
-
-.miniPgBubble {
-  padding: 7px 11px;
-  border-radius: 12px;
-  font-size: 12px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-primary, #e0e0e0);
-}
-
-.miniPgUser .miniPgBubble {
-  background: rgba(0, 200, 100, 0.12);
-  border: 1px solid rgba(0, 200, 100, 0.2);
-  border-bottom-right-radius: 4px;
-}
-
-.miniPgAssistant .miniPgBubble {
-  background: var(--bg-secondary, #14141f);
-  border: 1px solid var(--border, #1e1e2e);
-  border-bottom-left-radius: 4px;
-}
-
-.miniPgTyping {
-  color: var(--accent, #00c864);
-  letter-spacing: 3px;
-  animation: probeSpin 0.9s steps(3, end) infinite;
-}
-
-.miniPgError {
-  display: block;
-  margin-top: 4px;
-  color: var(--error, #ff5a5a);
-  font-size: 11px;
-}
-
-.miniPgAborted {
-  display: block;
-  margin-top: 4px;
-  color: var(--text-muted, #888);
-  font-size: 10px;
-  font-style: italic;
-}
-
-/* 📖 Target badge under each user bubble — shows the Primary model the
-   router will try first for this message (priority-first routing, #120).
-   If failover kicks in, the reply's .miniPgRouted badge shows a different
-   model, making the fallback chain visible at a glance. */
-.miniPgTarget {
-  font-size: 10px;
-  color: var(--text-muted, #888);
-  font-family: 'SF Mono', monospace;
-  padding: 0 4px;
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-}
-
-.miniPgTarget svg {
-  color: var(--accent, #00c864);
-}
-
-/* 📖 Routed-via badge under each assistant reply — shows WHICH model the
-   priority-first router actually picked for this message (issue #120). */
-.miniPgRouted {
-  font-size: 10px;
-  color: var(--text-muted, #888);
-  font-family: 'SF Mono', monospace;
-  padding: 0 4px;
-}
-
-.miniPgRouted span {
-  color: var(--accent, #00c864);
-}
-
-.miniPgInputRow {
-  display: flex;
-  gap: 6px;
-  align-items: stretch;
-}
-
-.miniPgInput {
-  flex: 1;
-  padding: 8px 12px;
-  background: var(--bg-primary, #0f0f17);
-  border: 1px solid var(--border, #1e1e2e);
-  border-radius: 8px;
-  color: var(--text-primary, #e0e0e0);
-  font-size: 12px;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.15s;
-}
-
-.miniPgInput:focus {
-  border-color: var(--accent, #00c864);
-}
-
-.miniPgInput::placeholder {
-  color: var(--text-muted, #888);
-}
-
-.miniPgSendBtn,
-.miniPgStopBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: opacity 0.15s, background 0.15s;
-  flex-shrink: 0;
-}
-
-.miniPgSendBtn {
-  background: var(--accent, #00c864);
-  color: #000;
-}
-
-.miniPgSendBtn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.miniPgStopBtn {
-  background: var(--error, #ff5a5a);
-  color: #fff;
-}
-
-/* ── Passive quota (t2) ───────────────────────────────────────────────── */
-
-.quotaGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.quotaCell {
-  display: grid;
-  grid-template-columns: 18px 1fr auto;
-  align-items: center;
-  gap: 4px 8px;
-  padding: 6px 10px;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.quotaSource {
-  font-size: 14px;
-  text-align: center;
-}
-
-.quotaName {
-  font-size: 12px;
-  font-weight: 600;
-  opacity: 0.9;
-  text-transform: lowercase;
-  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
-}
-
-.quotaBar {
-  grid-column: 1 / -1;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.quotaFill {
-  height: 100%;
-  transition: width 0.4s ease-out;
-}
-
-.quotaPct {
-  font-size: 12px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}