agent-tank 0.9.0

package/src/status-page.css

@@ -0,0 +1,1149 @@
+:root {
+  /* Dark mode colors (default) - Industrial aesthetic */
+  --bg-primary: #0d1117;
+  --bg-card: #161b22;
+  --bg-secondary: #21262d;
+  --text-primary: #f0f6fc;
+  --text-secondary: #8b949e;
+  --text-tertiary: #6e7681;
+  --accent-primary: #161b22;
+  --accent-hover: #21262d;
+  --border-color: #30363d;
+  --disabled-bg: #484f58;
+  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --card-border: #30363d;
+  --progress-track: rgba(255, 255, 255, 0.06);
+  /* Industrial/tank specific */
+  --tank-glass: rgba(255, 255, 255, 0.08);
+  --tank-glow: rgba(72, 187, 120, 0.3);
+  --dot-grid-color: rgba(255, 255, 255, 0.03);
+  /* Monospace font for numbers */
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+}
+
+body.light-mode {
+  /* Light mode colors - Industrial aesthetic */
+  --bg-primary: #f6f8fa;
+  --bg-card: #ffffff;
+  --bg-secondary: #f0f3f6;
+  --text-primary: #1f2328;
+  --text-secondary: #656d76;
+  --text-tertiary: #8b949e;
+  --accent-primary: #1f2328;
+  --accent-hover: #32383f;
+  --border-color: #d0d7de;
+  --disabled-bg: #afb8c1;
+  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --card-border: #d0d7de;
+  --progress-track: #e6e8eb;
+  /* Industrial/tank specific */
+  --tank-glass: rgba(0, 0, 0, 0.04);
+  --tank-glow: rgba(72, 187, 120, 0.2);
+  --dot-grid-color: rgba(0, 0, 0, 0.03);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-variant-numeric: tabular-nums;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  margin: 0;
+  padding: 0;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  /* Holy Grail Flexbox layout for sticky footer */
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Top Navigation Bar */
+.top-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border-color);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.top-nav-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Logo link - wraps tank icon and title */
+.logo-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  color: inherit;
+  transition: opacity 0.2s ease;
+}
+
+.logo-link:hover {
+  opacity: 0.8;
+}
+
+/* Tank logo styling */
+.tank-logo {
+  width: 28px;
+  height: 28px;
+  color: var(--text-primary);
+  opacity: 0.9;
+}
+
+.top-nav-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 0;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.top-nav-title .brand-emphasis {
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+.top-nav-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.top-nav .last-checked {
+  font-size: 13px;
+  color: var(--text-tertiary);
+}
+
+/* Unified header button base styles */
+.top-nav .refresh-all-btn,
+.top-nav .monitor-toggle-btn,
+.top-nav .theme-toggle-btn {
+  height: 36px;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 500;
+  width: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  border-radius: 6px;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
+}
+
+/* Interactive click feedback - press effect */
+.top-nav .refresh-all-btn:active:not(:disabled),
+.top-nav .monitor-toggle-btn:active:not(:disabled),
+.top-nav .theme-toggle-btn:active:not(:disabled) {
+  transform: scale(0.98);
+  background: var(--bg-secondary);
+}
+
+/* Refresh All button specific */
+.top-nav .refresh-all-btn {
+  --accent-glow: rgba(20, 184, 166, 0.4);
+}
+
+.top-nav .refresh-all-btn:hover:not(:disabled) {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  box-shadow: 0 0 12px var(--accent-glow);
+  border-color: #14b8a6;
+}
+
+.top-nav .refresh-all-btn .sync-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* Syncing state for Refresh All */
+.top-nav .refresh-all-btn.syncing {
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+.top-nav .refresh-all-btn.syncing .sync-icon {
+  animation: spin 0.8s linear infinite;
+}
+
+body.light-mode .top-nav .refresh-all-btn {
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+}
+
+body.light-mode .top-nav .refresh-all-btn:hover:not(:disabled) {
+  background: var(--bg-secondary);
+  box-shadow: 0 0 12px rgba(20, 184, 166, 0.3);
+}
+
+body.light-mode .top-nav .refresh-all-btn:active:not(:disabled) {
+  background: var(--bg-secondary);
+}
+
+/* Theme toggle button specific */
+.top-nav .theme-toggle-btn {
+  --accent-glow: rgba(251, 191, 36, 0.4);
+}
+
+.top-nav .theme-toggle-btn:hover:not(:disabled) {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  box-shadow: 0 0 12px var(--accent-glow);
+  border-color: #fbbf24;
+}
+
+body.light-mode .top-nav .theme-toggle-btn {
+  background: transparent;
+  border: 1px solid var(--border-color);
+}
+
+body.light-mode .top-nav .theme-toggle-btn:hover:not(:disabled) {
+  box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
+}
+
+body.light-mode .top-nav .theme-toggle-btn:active:not(:disabled) {
+  background: var(--bg-secondary);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  /* Flex grow to fill available space and push footer to bottom */
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  /* Ensure full width for grid children */
+  width: 100%;
+}
+
+.agents {
+  display: grid;
+  /* Default: single column on mobile */
+  grid-template-columns: 1fr;
+  gap: 20px;
+  /* Ensure grid fills container width for proper row layout */
+  width: 100%;
+  /* Top-align cards with generous spacing below the header */
+  margin-top: 48px;
+  /* Align to top, not center - scalable for multiple rows */
+  align-content: start;
+}
+
+/* Row layout for wider screens - 3 columns for 3 provider cards */
+@media (min-width: 768px) {
+  .agents {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.agent-card {
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 32px 24px 28px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: var(--card-shadow);
+  display: flex;
+  flex-direction: column;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+  /* Dot-grid background for industrial panel look */
+  background-image: radial-gradient(var(--dot-grid-color) 1px, transparent 1px);
+  background-size: 16px 16px;
+  position: relative;
+}
+
+body.light-mode .agent-card {
+  border: 1px solid var(--card-border);
+}
+
+.agent-card:hover {
+  border-color: var(--text-tertiary);
+}
+
+.agent-card.error { border-color: #e53e3e; }
+.agent-card.refreshing { border-color: #ecc94b; }
+
+.agent-card h2 {
+  margin: 0 0 20px 0;
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.usage { margin-bottom: 15px; flex: 1; }
+
+.usage-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0 4px 0;
+  min-height: 48px;
+}
+
+/* Trackable usage items - clickable entire row */
+.usage-item.trackable {
+  cursor: pointer;
+  padding: 10px 8px 4px 8px;
+  margin: 0 -8px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+
+.usage-item.trackable:hover {
+  background-color: var(--bg-secondary);
+}
+
+/* Active tracking state for the row - subtle highlight with vibrant LED */
+.usage-item.trackable.tracking {
+  background-color: rgba(72, 187, 120, 0.08);
+  border: 1px solid rgba(72, 187, 120, 0.2);
+  margin: -1px -9px 0 -9px;
+  padding: 10px 8px 4px 8px;
+}
+
+body.light-mode .usage-item.trackable.tracking {
+  background-color: rgba(72, 187, 120, 0.06);
+}
+
+/* Enhanced LED glow when row is being tracked */
+.usage-item.trackable.tracking .status-dot {
+  box-shadow: 0 0 8px currentColor, 0 0 12px currentColor;
+}
+
+.usage-item:last-child { border-bottom: none; }
+
+.usage-item.reset-info {
+  padding: 0 0 0 12px;
+  font-size: 13px;
+  border-bottom: none;
+  min-height: auto;
+}
+
+/* Container for reset info + time progress bar */
+.reset-info-wrapper {
+  position: relative;
+  margin-top: 8px;
+  margin-bottom: 12px;
+}
+
+.usage-item.reset-info .usage-label { font-size: 12px; text-transform: none; }
+.usage-item.reset-info .usage-value { font-family: var(--font-mono); font-weight: 500; color: var(--text-secondary); }
+
+.usage-label {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  /* Universal LED standard: all labels have status dots */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Model name styling - dark grey (light mode) / light grey (dark mode), slightly bolder, lowercase */
+.usage-label.model-name {
+  color: #d1d5db;
+  font-weight: 500;
+  text-transform: none;
+}
+
+body.light-mode .usage-label.model-name {
+  color: #374151;
+}
+
+/* Status dot indicator for model usage tier */
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  box-shadow: 0 0 6px currentColor;
+}
+
+.status-dot.status-green {
+  background-color: #48bb78;
+  color: #48bb78;
+}
+
+.status-dot.status-yellow {
+  background-color: #ecc94b;
+  color: #ecc94b;
+}
+
+.status-dot.status-red {
+  background-color: #e53e3e;
+  color: #e53e3e;
+}
+
+/* Pill background removed - plain text with status dots for uniform look */
+.model-pill {
+  /* Background removed per design unification - just keep inline-flex for alignment */
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.usage-value {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+  font-variant-numeric: tabular-nums;
+}
+
+.usage-percent {
+  font-family: var(--font-mono);
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+}
+
+.usage-suffix {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-tertiary);
+}
+
+.usage-value.high { color: #48bb78; }
+.usage-value.high .usage-percent { color: #48bb78; }
+.usage-value.medium { color: #ecc94b; }
+.usage-value.medium .usage-percent { color: #ecc94b; }
+.usage-value.low { color: #e53e3e; }
+.usage-value.low .usage-percent { color: #e53e3e; }
+
+.progress-bar {
+  height: 16px;
+  background: var(--tank-glass);
+  border-radius: 4px;
+  margin-top: 8px;
+  overflow: hidden;
+  position: relative;
+  /* Glass vial effect with inset shadow */
+  box-shadow:
+    inset 0 2px 4px rgba(0, 0, 0, 0.3),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.05);
+  /* Measurement tick marks every 20% - dark on empty part */
+  background-image:
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent calc(20% - 1px),
+      rgba(255, 255, 255, 0.08) calc(20% - 1px),
+      rgba(255, 255, 255, 0.08) 20%
+    );
+  background-color: var(--tank-glass);
+}
+
+body.light-mode .progress-bar {
+  box-shadow:
+    inset 0 2px 4px rgba(0, 0, 0, 0.1),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.5);
+  background-image:
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent calc(20% - 1px),
+      rgba(0, 0, 0, 0.1) calc(20% - 1px),
+      rgba(0, 0, 0, 0.1) 20%
+    );
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+  position: relative;
+  /* Liquid effect with inner glow and gradient */
+  box-shadow:
+    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
+    inset 0 2px 4px rgba(255, 255, 255, 0.15),
+    0 0 8px var(--tank-glow);
+  /* Subtle gradient for liquid depth effect */
+  background-image:
+    /* Backlit tick marks - lighter/white on filled part */
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent calc(20% - 1px),
+      rgba(255, 255, 255, 0.25) calc(20% - 1px),
+      rgba(255, 255, 255, 0.25) 20%
+    ),
+    /* Original depth gradient */
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      transparent 40%,
+      rgba(0, 0, 0, 0.1) 100%
+    );
+  background-blend-mode: overlay;
+}
+
+.card-footer {
+  margin-top: auto;
+  padding-top: 15px;
+  border-top: 1px solid var(--border-color);
+}
+
+.card-footer .last-updated {
+  display: block;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 10px;
+  text-align: center;
+}
+
+.error-msg {
+  display: block;
+  color: #e53e3e;
+  margin-bottom: 10px;
+  font-size: 13px;
+}
+
+/* Version update notice below agent cards */
+.version-update-notice {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: #ecc94b;
+  padding: 6px 10px;
+  background: rgba(236, 201, 75, 0.08);
+  border-radius: 4px;
+  border: 1px solid rgba(236, 201, 75, 0.2);
+}
+
+body.light-mode .version-update-notice {
+  color: #b7791f;
+  background: rgba(236, 201, 75, 0.1);
+  border-color: rgba(183, 121, 31, 0.2);
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s ease;
+}
+
+button:hover:not(:disabled) { background: var(--accent-hover); }
+
+button:disabled {
+  background: var(--disabled-bg);
+  cursor: not-allowed;
+}
+
+button .spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Legacy classes removed - controls now in top-nav */
+
+/* Agent heading with icon */
+.agent-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* Public API Status Badge */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 4px;
+  margin-left: 4px;
+  white-space: nowrap;
+}
+
+.status-badge-green {
+  background: rgba(72, 187, 120, 0.15);
+  color: #48bb78;
+  border: 1px solid rgba(72, 187, 120, 0.3);
+}
+
+.status-badge-yellow {
+  background: rgba(236, 201, 75, 0.15);
+  color: #ecc94b;
+  border: 1px solid rgba(236, 201, 75, 0.3);
+}
+
+.status-badge-red {
+  background: rgba(229, 62, 62, 0.15);
+  color: #e53e3e;
+  border: 1px solid rgba(229, 62, 62, 0.3);
+}
+
+.status-badge-grey {
+  background: rgba(113, 128, 150, 0.15);
+  color: #718096;
+  border: 1px solid rgba(113, 128, 150, 0.3);
+}
+
+/* Light mode badge adjustments */
+body.light-mode .status-badge-green {
+  background: rgba(72, 187, 120, 0.12);
+  color: #38a169;
+  border-color: rgba(56, 161, 105, 0.3);
+}
+
+body.light-mode .status-badge-yellow {
+  background: rgba(236, 201, 75, 0.12);
+  color: #b7791f;
+  border-color: rgba(183, 121, 31, 0.3);
+}
+
+body.light-mode .status-badge-red {
+  background: rgba(229, 62, 62, 0.12);
+  color: #c53030;
+  border-color: rgba(197, 48, 48, 0.3);
+}
+
+body.light-mode .status-badge-grey {
+  background: rgba(113, 128, 150, 0.12);
+  color: #4a5568;
+  border-color: rgba(74, 85, 104, 0.3);
+}
+
+/* Agent icon styling */
+.agent-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+/* Agent icons - neutral low-opacity white/grey for industrial look
+   Status dots (LEDs) are now the primary color indicators */
+.agent-claude,
+.agent-gemini,
+.agent-codex {
+  --agent-bg-subtle: rgba(255, 255, 255, 0.04);
+}
+
+.agent-claude .agent-icon,
+.agent-gemini .agent-icon,
+.agent-codex .agent-icon {
+  color: var(--text-tertiary);
+  opacity: 0.7;
+}
+
+body.light-mode .agent-claude .agent-icon,
+body.light-mode .agent-gemini .agent-icon,
+body.light-mode .agent-codex .agent-icon {
+  color: var(--text-secondary);
+  opacity: 0.6;
+}
+
+/* Agent cards have simple borders - brand colors only on icons */
+.agent-claude,
+.agent-gemini,
+.agent-codex {
+  background: var(--bg-card);
+}
+
+/* Light mode adjustments for subtle backgrounds */
+body.light-mode .agent-claude,
+body.light-mode .agent-gemini,
+body.light-mode .agent-codex {
+  --agent-bg-subtle: rgba(0, 0, 0, 0.02);
+}
+
+/* Agent headings use neutral color, only icons have brand colors */
+.agent-claude h2,
+.agent-gemini h2,
+.agent-codex h2 {
+  color: var(--text-primary);
+}
+
+/* Time elapsed progress bar - subtle, thin bar positioned below reset info */
+.time-progress-bar {
+  position: relative;
+  margin-top: 4px;
+  margin-left: 12px;
+  height: 3px;
+  background: rgba(113, 128, 150, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.time-progress-fill {
+  height: 100%;
+  background: rgba(113, 128, 150, 0.5);
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+
+/* Light mode adjustments for time progress bar */
+body.light-mode .time-progress-bar {
+  background: rgba(113, 128, 150, 0.15);
+}
+
+body.light-mode .time-progress-fill {
+  background: rgba(113, 128, 150, 0.4);
+}
+
+/* Refresh icon button - inline in card header */
+.refresh-icon-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  margin-left: auto;
+  cursor: pointer;
+  color: var(--text-secondary);
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.refresh-icon-btn:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+
+.refresh-icon-btn:hover:not(:disabled) svg {
+  stroke-width: 2.5;
+}
+
+.refresh-icon-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.refresh-icon-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+.refresh-icon-btn.spinning svg {
+  animation: spin 0.8s linear infinite;
+}
+
+/* Global last-updated timestamp - now in nav bar, legacy class */
+.last-updated-global {
+  display: none;
+}
+
+/* Model container wrapper - consistent vertical spacing */
+.model-container {
+  margin-bottom: 24px;
+  /* Ensure minimum padding even when "Resets in" is hidden */
+  padding-bottom: 8px;
+}
+
+.model-container:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+/* Zero usage - de-emphasized styling using color shift (not opacity for accessibility) */
+/* Only apply grey color to the percentage text, not the model name */
+.zero-usage .usage-value,
+.zero-usage .usage-percent,
+.zero-usage .usage-suffix {
+  color: #9ca3af !important;
+}
+
+/* Progress bar for zero usage: show track but no fill, but keep track visible */
+.progress-bar.zero-usage {
+  background-color: var(--tank-glass);
+  background-image:
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent calc(20% - 1px),
+      rgba(255, 255, 255, 0.05) calc(20% - 1px),
+      rgba(255, 255, 255, 0.05) 20%
+    );
+}
+
+.progress-bar.zero-usage .progress-fill {
+  width: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Light mode: zero usage progress bars */
+body.light-mode .progress-bar.zero-usage {
+  background-color: var(--tank-glass);
+  background-image:
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent calc(20% - 1px),
+      rgba(0, 0, 0, 0.04) calc(20% - 1px),
+      rgba(0, 0, 0, 0.04) 20%
+    );
+}
+
+/* Reset info for zero usage: grey text */
+.reset-info-wrapper.zero-usage .usage-value,
+.reset-info-wrapper.zero-usage .usage-label {
+  color: #9ca3af;
+}
+
+/* Time progress bar in zero state */
+.time-progress-bar.zero-usage .time-progress-fill {
+  background: rgba(156, 163, 175, 0.4);
+}
+
+/* Interactive hover for zero-usage items - subtle highlight */
+.usage-item.zero-usage:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+body.light-mode .usage-item.zero-usage:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+/* Model subheading - Codex visual grouping (keeps ALL CAPS as category dividers) */
+.model-subheading {
+  margin-top: 2em;
+  padding-top: 1.25em;
+  border-top: 1px solid var(--border-color);
+  min-height: auto;
+}
+
+/* Add extra spacing between model groups for distinct "module" feel */
+.model-subheading:not(:first-child) {
+  margin-top: calc(2em + 4px);
+}
+
+.model-subheading .usage-label {
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+}
+
+.model-subheading:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+
+/* Model container within Codex subheading - consistent spacing */
+.model-subheading + .model-container {
+  margin-top: 12px;
+}
+
+/* Nested metrics under Codex model subheadings - indented 12px for visual grouping */
+.nested-container {
+  padding-left: 12px;
+}
+
+.usage-item.nested-metric {
+  /* Adjust padding for nested items */
+}
+
+.progress-bar.nested-metric {
+  /* Keep progress bars aligned with their nested labels */
+}
+
+/* Footer - SaaS-style split layout, improved contrast */
+.footer {
+  /* Push footer to bottom using auto margin */
+  margin-top: auto;
+  padding: 16px 24px;
+  font-size: 0.75rem;
+  color: #9ca3af;
+  opacity: 0.75;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid var(--border-color);
+  transition: opacity 0.2s ease;
+}
+
+/* Reveal footer on hover */
+.footer:hover {
+  opacity: 0.95;
+}
+
+body.light-mode .footer {
+  color: #6b7280;
+  opacity: 0.8;
+}
+
+body.light-mode .footer:hover {
+  opacity: 1;
+}
+
+.footer-left,
+.footer-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.footer-right {
+  gap: 1em;
+}
+
+.footer-separator {
+  color: inherit;
+  opacity: 0.5;
+}
+
+.footer a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.footer a:hover {
+  color: var(--text-primary);
+}
+
+.footer-version {
+  font-variant-numeric: tabular-nums;
+}
+
+/* API Endpoint link - developer-first monospace styling */
+.api-link {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  padding: 2px 6px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 4px;
+  color: inherit;
+  text-decoration: none;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.api-link:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #48bb78;
+}
+
+/* Copied state - green feedback */
+.api-link.copied {
+  background: rgba(72, 187, 120, 0.15);
+  color: #48bb78;
+}
+
+/* Light mode adjustments for API link */
+body.light-mode .api-link {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+body.light-mode .api-link:hover {
+  background: rgba(0, 0, 0, 0.08);
+  color: #38a169;
+}
+
+body.light-mode .api-link.copied {
+  background: rgba(72, 187, 120, 0.12);
+  color: #38a169;
+}
+
+/* Copy API button - small icon button next to API link */
+.copy-api-btn {
+  background: none;
+  border: none;
+  padding: 2px;
+  margin: 0;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity 0.2s ease, color 0.2s ease;
+  vertical-align: middle;
+}
+
+.copy-api-btn:hover {
+  opacity: 1;
+  color: var(--text-primary);
+}
+
+.copy-api-btn .copy-icon {
+  width: 12px;
+  height: 12px;
+}
+
+/* Copied state - green checkmark effect */
+.copy-api-btn.copied {
+  color: #48bb78;
+  opacity: 1;
+}
+
+body.light-mode .copy-api-btn.copied {
+  color: #38a169;
+}
+
+/* ===== Background Monitor Feature ===== */
+
+/* Track button - inline target icon for pinning metrics */
+.track-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  margin-left: 8px;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+/* Show on hover of parent usage-item */
+.usage-item:hover .track-btn {
+  opacity: 1;
+}
+
+.track-btn:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+
+/* Active/tracking state - always visible with accent color and glow */
+.track-btn.tracking {
+  opacity: 1;
+  color: #48bb78;
+  animation: tracking-pulse 2s ease-in-out infinite;
+}
+
+/* Subtle pulsing glow for tracking indicator */
+@keyframes tracking-pulse {
+  0%, 100% {
+    filter: drop-shadow(0 0 2px rgba(72, 187, 120, 0.4));
+  }
+  50% {
+    filter: drop-shadow(0 0 6px rgba(72, 187, 120, 0.8));
+  }
+}
+
+.track-btn.tracking:hover {
+  color: #38a169;
+  background: rgba(72, 187, 120, 0.1);
+  animation: none;
+  filter: drop-shadow(0 0 6px rgba(72, 187, 120, 0.6));
+}
+
+.track-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Monitor toggle button removed - monitoring is always on */
+
+/* Hide default favicon when using canvas-generated one */
+.favicon-canvas {
+  display: none;
+}
+
+/* ===== Pace Warning Feature ===== */
+
+/* Pace warning indicator - shows when usage is out-pacing time */
+.pace-warning {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+  padding: 2px 6px;
+  background: rgba(236, 201, 75, 0.12);
+  border: 1px solid rgba(236, 201, 75, 0.25);
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #ecc94b;
+  cursor: help;
+}
+
+.pace-warning .pace-icon {
+  font-size: 10px;
+}
+
+.pace-warning .pace-text {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+/* Light mode adjustments for pace warning */
+body.light-mode .pace-warning {
+  background: rgba(236, 201, 75, 0.15);
+  border-color: rgba(183, 121, 31, 0.25);
+  color: #b7791f;
+}
+
+/* Critical pace (2x or higher) - red warning */
+.pace-warning.pace-critical {
+  background: rgba(229, 62, 62, 0.12);
+  border-color: rgba(229, 62, 62, 0.25);
+  color: #e53e3e;
+}
+
+body.light-mode .pace-warning.pace-critical {
+  background: rgba(229, 62, 62, 0.1);
+  border-color: rgba(197, 48, 48, 0.25);
+  color: #c53030;
+}
+
+/* Pace ETA indicator - shows "runs out in X" */
+.pace-warning .pace-eta {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  margin-left: 4px;
+  padding-left: 4px;
+  border-left: 1px solid currentColor;
+  opacity: 0.85;
+}
+
+/* ETA emphasis for critical pace (2x+) */
+.pace-warning.pace-critical .pace-eta {
+  font-weight: 600;
+  opacity: 1;
+}