anygate 0.5.2 → 0.5.4

package/dist/ui/public/style.css

@@ -1,1751 +0,0 @@
-/* ─── Tokens ─────────────────────────────────────────────────────────────── */
-:root {
-  /* Warm charcoal canvas — restrained, no saturated glow */
-  --bg:              oklch(18% 0.006 70);
-  --sidebar-bg:      oklch(15.5% 0.006 70);
-  --surface:         oklch(21% 0.006 70);
-  --surface-2:       oklch(25% 0.006 70);
-  --surface-hover:   oklch(27% 0.007 70);
-  --border:          oklch(30% 0.006 70);
-  --border-bright:   oklch(42% 0.008 70);
-  --border-glow:     oklch(75% 0.16 65 / 0.3);
-
-  /* Accent — warm amber, single hue (no gradient slop) */
-  --accent:          oklch(75% 0.16 65);
-  --accent-dim:      oklch(62% 0.13 60);
-  --accent-muted:    oklch(75% 0.16 65 / 0.12);
-  --accent-glow:     oklch(75% 0.16 65 / 0.15);
-  --accent-2:        oklch(72% 0.14 55);
-
-  /* Text */
-  --text-1:  oklch(96% 0.005 80);
-  --text-2:  oklch(72% 0.01 75);
-  --text-3:  oklch(52% 0.01 75);
-
-  /* Semantic */
-  --success:    oklch(74% 0.16 150);
-  --success-bg: oklch(74% 0.16 150 / 0.1);
-  --error:      oklch(66% 0.2 25);
-  --error-bg:   oklch(66% 0.2 25 / 0.1);
-
-  /* Motion */
-  --ease: cubic-bezier(0.16, 1, 0.3, 1);
-  --dur-xs: 100ms;
-  --dur-sm: 160ms;
-  --dur-md: 240ms;
-  --dur-lg: 380ms;
-
-  /* Layout */
-  --sidebar-w: 240px;
-  --radius:    10px;
-  --radius-sm: 7px;
-  --radius-xs: 5px;
-}
-
-/* ─── Light mode overrides ───────────────────────────────────────────────── */
-html[data-theme="light"] {
-  --bg:              oklch(96% 0.004 75);
-  --sidebar-bg:      oklch(93% 0.005 75);
-  --surface:         oklch(100% 0 0);
-  --surface-2:       oklch(95% 0.004 75);
-  --surface-hover:   oklch(92% 0.005 75);
-  --border:          oklch(86% 0.006 75);
-  --border-bright:   oklch(72% 0.008 75);
-  --text-1:          oklch(22% 0.02 60);
-  --text-2:          oklch(42% 0.015 60);
-  --text-3:          oklch(58% 0.012 60);
-}
-
-html[data-theme="light"] body {
-  background:
-    radial-gradient(ellipse 120% 80% at 50% -20%, oklch(100% 0 0) 0%, transparent 55%),
-    var(--bg);
-}
-
-/* ─── Reset ─────────────────────────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html { scroll-behavior: smooth; scroll-padding-top: 32px; }
-
-body {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  font-size: 16px;
-  line-height: 1.6;
-  color: var(--text-1);
-  background:
-    radial-gradient(ellipse 120% 80% at 50% -20%, oklch(26% 0.008 70 / 0.6) 0%, transparent 55%),
-    var(--bg);
-  -webkit-font-smoothing: antialiased;
-  min-height: 100dvh;
-  overflow: hidden;
-}
-
-a { color: inherit; text-decoration: none; }
-button { font-family: inherit; cursor: pointer; border: none; background: none; }
-input { font-family: inherit; }
-:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
-::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-
-/* ─── App layout ─────────────────────────────────────────────────────────── */
-.layout {
-  display: grid;
-  grid-template-columns: var(--sidebar-w) 1fr;
-  height: 100dvh;
-}
-
-/* ─── Sidebar ────────────────────────────────────────────────────────────── */
-.sidebar {
-  background: var(--sidebar-bg);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  overflow: hidden;
-  position: relative;
-}
-
-.sidebar::after {
-  content: '';
-  position: absolute;
-  top: 0; right: 0;
-  width: 1px;
-  height: 100%;
-  background: linear-gradient(to bottom, var(--accent-dim), transparent 60%);
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-/* Brand */
-.sidebar-brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 28px 24px 20px;
-}
-
-.brand-logo {
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  background: oklch(26% 0.01 70);
-  box-shadow: 0 4px 14px var(--accent-glow);
-}
-
-.brand-monogram {
-  font-family: 'Inter', system-ui, sans-serif;
-  font-size: 21px;
-  font-weight: 800;
-  color: var(--accent);
-  line-height: 1;
-  letter-spacing: -0.02em;
-}
-
-
-.brand-meta {
-  min-width: 0;
-}
-
-.brand-name {
-  font-size: 22px;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--text-1);
-  line-height: 1.1;
-}
-
-.brand-accent {
-  color: var(--accent);
-}
-
-.brand-byline {
-  font-size: 15px;
-  color: var(--text-3);
-  margin-top: 2px;
-  letter-spacing: 0.01em;
-}
-
-/* Version badge */
-.sidebar-version-area {
-  position: relative;
-  margin: 0 24px 24px;
-  width: fit-content;
-}
-
-.sidebar-version {
-  display: inline-flex;
-  align-items: center;
-  padding: 3px 10px;
-  border-radius: 20px;
-  background: var(--accent-muted);
-  border: 1px solid oklch(75% 0.16 65 / 0.25);
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--accent);
-  letter-spacing: 0.03em;
-  width: fit-content;
-}
-
-.update-indicator {
-  display: flex;
-  align-items: center;
-  margin-top: 7px;
-  padding: 4px 8px;
-  border: 1px solid oklch(78% 0.18 85 / 0.4);
-  border-radius: 7px;
-  background: oklch(78% 0.18 85 / 0.12);
-  color: oklch(82% 0.17 85);
-  font: inherit;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.update-indicator:hover {
-  background: oklch(78% 0.18 85 / 0.2);
-}
-
-.update-indicator[hidden],
-.update-popover[hidden] {
-  display: none;
-}
-
-.update-popover {
-  position: absolute;
-  z-index: 30;
-  top: calc(100% + 8px);
-  left: 0;
-  width: calc(var(--sidebar-w) - 32px);
-  padding: 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface-2);
-  box-shadow: 0 14px 40px oklch(5% 0.03 265 / 0.45);
-}
-
-.update-popover-title {
-  margin-bottom: 10px;
-  color: var(--text-1);
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.update-version-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  margin-top: 5px;
-  color: var(--text-3);
-  font-size: 12px;
-}
-
-.update-version-row strong {
-  color: var(--text-1);
-  font-weight: 600;
-}
-
-.update-command {
-  display: block;
-  margin-top: 12px;
-  padding: 8px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface);
-  color: var(--text-2);
-  font-size: 11px;
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-
-.update-copy-btn {
-  width: 100%;
-  margin-top: 10px;
-}
-
-/* Nav */
-.sidebar-nav {
-  flex: 1;
-  padding: 4px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border-radius: var(--radius-sm);
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--text-2);
-  transition: background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
-  position: relative;
-}
-
-.nav-item:hover {
-  background: var(--surface);
-  color: var(--text-1);
-  transform: translateX(2px);
-}
-
-.nav-item.active {
-  background: var(--accent-muted);
-  color: var(--accent);
-  border: 1px solid oklch(75% 0.16 65 / 0.2);
-}
-
-.nav-item.active .nav-icon { color: var(--accent); }
-
-.nav-icon {
-  display: flex;
-  align-items: center;
-  color: var(--text-3);
-  flex-shrink: 0;
-  transition: color var(--dur-sm) var(--ease);
-}
-
-.nav-item:hover .nav-icon { color: var(--text-2); }
-
-.nav-badge {
-  margin-left: auto;
-  font-size: 10px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  padding: 1px 7px;
-  border-radius: 10px;
-  background: var(--surface-2);
-  color: var(--text-3);
-  border: 1px solid var(--border);
-  transition: color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
-}
-
-.nav-badge.full {
-  color: var(--accent);
-  background: var(--accent-muted);
-  border-color: oklch(75% 0.16 65 / 0.3);
-}
-
-/* Sidebar footer */
-.sidebar-footer {
-  padding: 12px 12px 20px;
-  border-top: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.btn-theme-full {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 9px 12px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-2);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
-  text-align: left;
-}
-
-.btn-theme-full:hover {
-  background: var(--surface-hover);
-  color: var(--text-1);
-  border-color: var(--border-bright);
-}
-
-.theme-icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.sidebar-footer-text {
-  font-size: 13px;
-  color: var(--text-3);
-  line-height: 1.7;
-  padding: 0 4px;
-}
-
-.sidebar-footer-text code {
-  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
-  font-size: 11px;
-  color: var(--text-2);
-}
-
-/* ─── Content ────────────────────────────────────────────────────────────── */
-.content {
-  overflow-y: auto;
-  height: 100dvh;
-  padding: 0 48px 80px;
-}
-
-/* Brand hero */
-.app-hero {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 40px 0 28px;
-  margin-bottom: 8px;
-  border-bottom: 1px solid var(--border);
-}
-
-.app-hero-wordmark {
-  display: inline-flex;
-  align-items: center;
-  gap: 14px;
-  user-select: none;
-}
-
-.app-hero-wordmark .hero-text {
-  font-size: 34px;
-  font-weight: 800;
-  letter-spacing: 0.02em;
-  color: var(--text-1);
-  line-height: 1;
-}
-
-.app-hero-sub {
-  font-size: 15px;
-  color: var(--text-3);
-  letter-spacing: 0.01em;
-}
-
-/* ─── Section ────────────────────────────────────────────────────────────── */
-.section {
-  padding-top: 52px;
-  max-width: 680px;
-}
-
-.section + .section {
-  padding-top: 64px;
-  margin-top: 12px;
-  border-top: 1px solid var(--border);
-}
-
-/* Section heading (now the direct first child of each section) */
-.section > .section-heading:first-child {
-  margin-top: 0;
-  padding-top: 4px;
-}
-
-.section-heading {
-  font-size: 30px;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  color: var(--text-1);
-  line-height: 1.15;
-  margin-bottom: 22px;
-}
-
-.heading-accent {
-  color: var(--accent);
-}
-
-/* Favorites sub-panel grouping */
-.fav-subpanel {
-  padding: 22px 0 8px;
-  border-top: 1px solid var(--border);
-}
-
-.fav-subpanel:first-of-type {
-  border-top: none;
-  padding-top: 4px;
-}
-
-.subpanel-heading {
-  font-size: 16px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--text-1);
-  margin-bottom: 14px;
-}
-
-.subpanel-heading .heading-accent {
-  font-weight: 700;
-}
-
-.provider-stats {
-  display: flex;
-  gap: 20px;
-  margin-top: 16px;
-}
-
-.provider-stat {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.provider-stat-value {
-  font-size: 26px;
-  font-weight: 700;
-  color: var(--text-1);
-  letter-spacing: -0.02em;
-  line-height: 1;
-}
-
-.provider-stat-value span {
-  color: var(--accent);
-}
-
-.provider-stat-label {
-  font-size: 13px;
-  color: var(--text-3);
-  font-weight: 500;
-}
-
-/* ─── Search ─────────────────────────────────────────────────────────────── */
-.search-row {
-  margin-bottom: 12px;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.search-row .search-field {
-  flex: 1;
-}
-
-.btn-refresh-all {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.btn-refresh-all svg {
-  flex-shrink: 0;
-}
-
-.free-only-toggle {
-  min-height: 42px;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-  color: var(--text-2);
-  font-size: 13px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.free-only-toggle input {
-  width: 15px;
-  height: 15px;
-  accent-color: var(--accent);
-}
-
-.free-badge {
-  display: inline-flex;
-  align-items: center;
-  min-height: 22px;
-  padding: 0 7px;
-  border: 1px solid oklch(73% 0.14 156 / 0.45);
-  border-radius: 999px;
-  background: oklch(93% 0.07 156 / 0.16);
-  color: oklch(74% 0.14 156);
-  font-size: 11px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.free-badge.dev-access {
-  border-color: oklch(72% 0.13 232 / 0.45);
-  background: oklch(91% 0.06 232 / 0.16);
-  color: oklch(73% 0.13 232);
-}
-
-.btn-refresh-all.loading svg {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-}
-
-.refresh-all-status {
-  font-size: 15px;
-  color: var(--text-2);
-  padding: 10px 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin-bottom: 14px;
-  line-height: 1.7;
-}
-
-.search-field {
-  position: relative;
-}
-
-.search-icon {
-  position: absolute;
-  left: 14px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--text-3);
-  pointer-events: none;
-}
-
-.search-input {
-  width: 100%;
-  padding: 10px 16px 10px 40px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: var(--surface);
-  color: var(--text-1);
-  font-size: 15px;
-  transition: border-color var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease), background var(--dur-md) var(--ease);
-}
-
-.search-input::placeholder { color: var(--text-3); }
-
-.search-input:focus {
-  border-color: var(--border-bright);
-  background: var(--surface-2);
-  box-shadow: 0 0 0 3px var(--accent-glow), inset 0 1px 2px oklch(0% 0 0 / 0.2);
-  outline: none;
-}
-
-/* ─── Provider grid ──────────────────────────────────────────────────────── */
-.provider-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.apps-group-heading {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-top: 12px;
-}
-
-.apps-group-heading:first-child { margin-top: 0; }
-
-.apps-empty {
-  font-size: 13px;
-  color: var(--text-3);
-  padding: 12px 0 4px;
-}
-
-/* Apps & Launch: CLI column on the left, desktop apps on the right */
-#apps.section {
-  max-width: 1080px;
-}
-
-.apps-columns {
-  display: grid;
-  grid-template-columns: 1fr 1px 1fr;
-  gap: 28px;
-  align-items: start;
-}
-
-.apps-column {
-  min-width: 0;
-}
-
-.apps-column-divider {
-  align-self: stretch;
-  background: var(--border);
-}
-
-@media (max-width: 860px) {
-  .apps-columns {
-    grid-template-columns: 1fr;
-  }
-
-  .apps-column-divider {
-    display: none;
-  }
-}
-
-/* Available providers section */
-.available-heading {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  margin: 28px 0 12px;
-  padding-top: 20px;
-  border-top: 1px solid var(--border);
-}
-
-.available-heading-label {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-2);
-}
-
-.available-heading-hint {
-  font-size: 14px;
-  color: var(--text-3);
-}
-
-.provider-grid-available .provider-card {
-  opacity: 0.72;
-  transition: opacity var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
-}
-
-.provider-grid-available .provider-card:hover {
-  opacity: 1;
-}
-
-/* Provider card */
-.provider-card {
-  border-radius: var(--radius);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  transition: border-color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
-}
-
-.provider-card:hover {
-  border-color: var(--border-bright);
-  box-shadow: 0 2px 12px oklch(0% 0 0 / 0.25);
-}
-
-.provider-card.open {
-  border-color: var(--border-bright);
-  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.3);
-}
-
-.provider-card.launch-model-open {
-  position: relative;
-  z-index: 50;
-}
-
-.advanced-app-paths {
-  margin-top: 18px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-  overflow: hidden;
-}
-
-.advanced-app-paths summary {
-  padding: 13px 16px;
-  color: var(--text-2);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  user-select: none;
-}
-
-.advanced-app-paths[open] summary {
-  border-bottom: 1px solid var(--border);
-  background: var(--surface-2);
-}
-
-.app-paths-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.app-path-row {
-  display: grid;
-  grid-template-columns: minmax(150px, 220px) minmax(240px, 1fr) auto;
-  gap: 10px;
-  align-items: center;
-  padding: 12px 16px;
-  background: var(--surface);
-}
-
-.app-path-meta {
-  min-width: 0;
-}
-
-.app-path-name {
-  color: var(--text-1);
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.app-path-input {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 13px;
-}
-
-.app-path-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.app-path-actions .btn {
-  height: 38px;
-  padding-inline: 14px;
-}
-
-.advanced-empty {
-  padding: 16px;
-  color: var(--text-3);
-  font-size: 14px;
-}
-
-.launch-model-picker,
-.launch-folder-control {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.launch-model-input-wrap {
-  position: relative;
-}
-
-.launch-model-input,
-.launch-folder-input {
-  height: 42px;
-  padding-left: 14px;
-}
-
-.launch-model-menu {
-  position: absolute;
-  z-index: 60;
-  top: calc(100% + 8px);
-  left: 0;
-  right: 0;
-  max-height: 380px;
-  overflow: auto;
-  border: 1px solid var(--border-bright);
-  border-radius: var(--radius);
-  background: var(--surface);
-  box-shadow: 0 18px 42px oklch(0% 0 0 / 0.25);
-  padding: 8px;
-}
-
-.launch-model-quick {
-  display: flex;
-  gap: 8px;
-  padding: 4px 4px 8px;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 8px;
-}
-
-.launch-model-quick button,
-.launch-model-row {
-  border-radius: var(--radius-sm);
-  color: var(--text-1);
-  background: transparent;
-  text-align: left;
-  transition: background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
-}
-
-.launch-model-quick button {
-  padding: 7px 10px;
-  font-size: 13px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-}
-
-.launch-model-quick button:hover,
-.launch-model-row:hover {
-  background: var(--accent-muted);
-  color: var(--text-1);
-}
-
-.launch-model-group {
-  padding: 4px 0 8px;
-}
-
-.launch-model-group-heading {
-  padding: 8px 10px 5px;
-  color: var(--text-3);
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.launch-model-row {
-  width: 100%;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(130px, 0.55fr);
-  gap: 8px;
-  align-items: center;
-  padding: 9px 10px;
-  font-size: 14px;
-}
-
-.launch-model-name,
-.launch-model-id {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.launch-model-id {
-  grid-column: 3;
-  color: var(--text-3);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 12px;
-}
-
-.launch-model-empty {
-  padding: 16px 10px;
-  color: var(--text-3);
-  font-size: 14px;
-}
-
-.launch-folder-recents {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 6px;
-}
-
-.launch-folder-chip {
-  max-width: 100%;
-  padding: 5px 8px;
-  border-radius: var(--radius-xs);
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  color: var(--text-2);
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.launch-folder-chip:hover {
-  border-color: var(--border-bright);
-  color: var(--text-1);
-}
-
-@media (max-width: 760px) {
-  .app-path-row {
-    grid-template-columns: 1fr;
-  }
-
-  .launch-model-row {
-    grid-template-columns: 1fr;
-    gap: 2px;
-  }
-
-  .launch-model-id {
-    grid-column: auto;
-  }
-
-  .app-path-actions {
-    justify-content: stretch;
-  }
-
-  .app-path-actions .btn {
-    flex: 1;
-  }
-}
-
-.provider-card-header {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 14px 18px;
-  cursor: pointer;
-  user-select: none;
-  transition: background var(--dur-xs) var(--ease);
-  border-top-left-radius: calc(var(--radius) - 1px);
-  border-top-right-radius: calc(var(--radius) - 1px);
-  border-bottom-left-radius: calc(var(--radius) - 1px);
-  border-bottom-right-radius: calc(var(--radius) - 1px);
-}
-
-.provider-card-header:hover { background: var(--surface-hover); }
-.provider-card.open .provider-card-header {
-  background: var(--surface-2);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/* Provider icon */
-.provider-logo-img {
-  width: 22px;
-  height: 22px;
-  object-fit: contain;
-  display: block;
-}
-
-/* Only apply white filter to Simple Icons SVGs (not ICO/PNG brand logos) */
-.provider-logo-img[src*="simpleicons.org"] {
-  filter: brightness(0) invert(1);
-}
-
-.provider-logo-fallback {
-  font-size: 19px;
-  font-weight: 700;
-  color: oklch(98% 0.003 265);
-  line-height: 1;
-}
-
-.provider-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 19px;
-  font-weight: 700;
-  color: oklch(98% 0.003 265);
-  flex-shrink: 0;
-  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.3);
-}
-
-.provider-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.provider-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-1);
-}
-
-.provider-models-count {
-  font-size: 15px;
-  color: var(--text-3);
-  margin-top: 1px;
-}
-
-.template-signup-link {
-  color: var(--accent-dim);
-  font-size: 13px;
-  margin-left: 6px;
-  transition: color var(--dur-sm) var(--ease);
-}
-
-.template-signup-link:hover { color: var(--accent); }
-
-.provider-status {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-shrink: 0;
-}
-
-.status-chip {
-  font-size: 15px;
-  font-weight: 500;
-  padding: 3px 9px;
-  border-radius: 20px;
-  border: 1px solid transparent;
-}
-
-.status-chip.has-key {
-  color: var(--success);
-  background: var(--success-bg);
-  border-color: oklch(74% 0.2 155 / 0.2);
-}
-
-.status-chip.free-access {
-  color: oklch(75% 0.15 190);
-  background: oklch(75% 0.15 190 / 0.12);
-  border-color: oklch(75% 0.15 190 / 0.2);
-}
-
-.status-chip.no-key {
-  color: var(--text-3);
-  background: var(--surface-2);
-  border-color: var(--border);
-}
-
-.provider-chevron {
-  color: var(--text-3);
-  transition: transform var(--dur-md) var(--ease), color var(--dur-sm) var(--ease);
-  flex-shrink: 0;
-}
-
-.provider-card.open .provider-chevron {
-  transform: rotate(180deg);
-  color: var(--accent);
-}
-
-/* Provider body expand */
-.provider-body {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--dur-md) var(--ease);
-  border-top: 1px solid transparent;
-}
-
-.provider-card.open .provider-body {
-  grid-template-rows: 1fr;
-  border-top-color: var(--border);
-}
-
-.provider-body-inner { overflow: hidden; }
-.provider-card.open .provider-body-inner { overflow: visible; }
-
-.provider-body-content {
-  padding: 18px 18px 18px 70px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* Key input row */
-.key-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.key-input-wrap { flex: 1; }
-
-.key-input {
-  width: 100%;
-  padding: 9px 13px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--text-1);
-  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
-  font-size: 16px;
-  transition: border-color var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
-}
-
-.key-input::placeholder { color: var(--text-3); font-family: 'Inter', system-ui, sans-serif; }
-
-.key-input:focus {
-  outline: none;
-  border-color: var(--border-bright);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-/* Buttons */
-.btn {
-  padding: 8px 16px;
-  border-radius: var(--radius-sm);
-  font-size: 15px;
-  font-weight: 500;
-  transition: all var(--dur-xs) var(--ease);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.btn-primary {
-  background: var(--accent);
-  color: oklch(22% 0.03 60);
-  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3);
-}
-
-.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 2px 8px oklch(0% 0 0 / 0.35); }
-.btn-primary:active { transform: translateY(0); }
-.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
-
-.btn-ghost {
-  background: var(--surface-2);
-  color: var(--text-2);
-  border: 1px solid var(--border);
-}
-
-.btn-ghost:hover { background: var(--surface-hover); color: var(--text-1); border-color: var(--border-bright); }
-
-.key-feedback {
-  font-size: 16px;
-  min-height: 16px;
-  transition: opacity var(--dur-md) var(--ease);
-}
-
-.key-feedback.success { color: var(--success); }
-.key-feedback.error   { color: var(--error); }
-.key-feedback.muted   { color: var(--text-3); }
-
-/* ─── Skeleton ───────────────────────────────────────────────────────────── */
-.skeleton {
-  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite linear;
-  border-radius: var(--radius);
-}
-
-@keyframes shimmer {
-  from { background-position: 200% 0; }
-  to   { background-position: -200% 0; }
-}
-
-.skeleton-card { height: 66px; margin-bottom: 8px; }
-
-/* ─── Model results ──────────────────────────────────────────────────────── */
-.model-results {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin-bottom: 12px;
-  overflow: hidden;
-}
-
-.model-results-empty, .model-results-error {
-  padding: 20px;
-  color: var(--text-3);
-  font-size: 15px;
-  text-align: center;
-}
-
-.model-results-error { color: var(--error); text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-
-.model-group-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px 6px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--text-3);
-  border-top: 1px solid var(--border);
-}
-
-.model-group-header:first-child { border-top: none; }
-
-.model-group-icon {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 8px;
-  font-weight: 700;
-  color: oklch(98% 0.003 265);
-}
-
-.model-result-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 9px 16px;
-  transition: background var(--dur-xs) var(--ease);
-  cursor: default;
-}
-
-.model-result-row:hover { background: var(--surface-hover); }
-
-.model-result-id {
-  flex: 1;
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--text-1);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.model-result-ctx { font-size: 15px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
-
-.btn-add {
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 17px;
-  line-height: 1;
-  color: var(--accent);
-  border: 1px solid oklch(75% 0.16 65 / 0.35);
-  background: var(--accent-muted);
-  flex-shrink: 0;
-  transition: all var(--dur-sm) var(--ease);
-}
-
-.btn-add:hover { background: var(--accent); color: oklch(98% 0.003 265); transform: scale(1.12); box-shadow: 0 2px 8px var(--accent-glow); }
-.btn-add:disabled { color: var(--text-3); border-color: var(--border); background: transparent; cursor: not-allowed; transform: none; }
-.btn-add.already-added { color: var(--success); border-color: oklch(74% 0.2 155 / 0.3); background: var(--success-bg); font-size: 15px; }
-.btn-add.already-added:hover { background: var(--success-bg); color: var(--success); transform: none; box-shadow: none; }
-
-/* ─── Antigravity slot bar ───────────────────────────────────────────────── */
-.agy-slot-bar {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 14px 18px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin-bottom: 16px;
-}
-
-.agy-slot-label {
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--text-2);
-  flex-shrink: 0;
-}
-
-.agy-slot-pips {
-  display: flex;
-  gap: 5px;
-  flex: 1;
-}
-
-.agy-pip {
-  flex: 1;
-  height: 5px;
-  border-radius: 3px;
-  background: var(--border);
-  transition: background var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
-}
-
-.agy-pip.filled {
-  background: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent-glow);
-}
-
-.agy-slot-count {
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--text-1);
-  font-variant-numeric: tabular-nums;
-  flex-shrink: 0;
-}
-
-.agy-slot-max { font-size: 15px; font-weight: 400; color: var(--text-3); }
-
-/* ─── Favorites list ─────────────────────────────────────────────────────── */
-.fav-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-height: 60px;
-}
-
-.fav-empty {
-  padding: 32px 20px;
-  text-align: center;
-  color: var(--text-3);
-  font-size: 15px;
-  background: var(--surface);
-  border: 1px dashed var(--border);
-  border-radius: var(--radius);
-}
-
-.fav-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-radius: var(--radius);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  transition: background var(--dur-xs) var(--ease), border-color var(--dur-sm) var(--ease),
-              transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
-  cursor: default;
-  user-select: none;
-}
-
-.fav-item:hover { background: var(--surface-2); border-color: var(--border-bright); }
-
-.fav-item.keyboard-focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
-
-.fav-item.dragging {
-  transform: scale(1.025) rotate(0.5deg);
-  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.5), 0 0 0 1px var(--accent-dim);
-  border-color: var(--accent-dim);
-  background: var(--surface-2);
-  z-index: 10;
-  position: relative;
-}
-
-.fav-item.drag-over {
-  border-color: var(--accent);
-  background: var(--accent-muted);
-  box-shadow: 0 0 0 2px var(--accent-glow);
-}
-
-.fav-item.slide-in {
-  animation: fav-enter var(--dur-lg) var(--ease);
-}
-
-@keyframes fav-enter {
-  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-.drag-handle {
-  color: var(--text-3);
-  cursor: grab;
-  font-size: 15px;
-  flex-shrink: 0;
-  padding: 2px;
-  border-radius: 4px;
-  transition: color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
-  display: flex;
-  align-items: center;
-}
-
-.drag-handle:hover { color: var(--accent); background: var(--accent-muted); }
-.drag-handle:active { cursor: grabbing; }
-
-/* Fav item number badge */
-.fav-rank {
-  width: 26px;
-  height: 26px;
-  border-radius: 7px;
-  border: 1px solid;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 700;
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -0.01em;
-}
-
-.fav-model-id {
-  flex: 1;
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--text-1);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.fav-provider-badge {
-  font-size: 15px;
-  font-weight: 600;
-  padding: 3px 10px;
-  border-radius: 20px;
-  border: 1px solid;
-  flex-shrink: 0;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
-}
-
-.btn-remove {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: var(--text-3);
-  flex-shrink: 0;
-  transition: color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
-}
-
-.btn-remove:hover { color: var(--error); background: var(--error-bg); }
-
-/* ─── Toast ──────────────────────────────────────────────────────────────── */
-.toast-container {
-  position: fixed;
-  bottom: 24px;
-  right: 28px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  z-index: 200;
-  pointer-events: none;
-}
-
-.toast {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 11px 18px;
-  border-radius: var(--radius);
-  background: var(--surface-2);
-  border: 1px solid var(--border-bright);
-  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.5), 0 0 0 1px oklch(42% 0.008 70 / 0.4);
-  font-size: 15px;
-  font-weight: 500;
-  pointer-events: all;
-  animation: toast-in var(--dur-md) var(--ease);
-}
-
-.toast.out { animation: toast-out 150ms var(--ease) forwards; }
-
-@keyframes toast-in {
-  from { opacity: 0; transform: translateY(10px) scale(0.96); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-@keyframes toast-out {
-  to { opacity: 0; transform: translateY(-4px) scale(0.97); }
-}
-
-.toast-msg { color: var(--text-1); }
-
-.btn-undo {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--accent);
-  padding: 2px 6px;
-  border-radius: 4px;
-  transition: opacity var(--dur-sm) var(--ease);
-}
-
-.btn-undo:hover { opacity: 0.75; }
-
-/* ─── Server Gateway ─────────────────────────────────────────────────────── */
-
-.nav-badge-status {
-  color: var(--success);
-  background: var(--success-bg);
-  border-color: oklch(74% 0.2 155 / 0.25);
-}
-
-.btn-sm { padding: 5px 11px; font-size: 13px; }
-
-.server-field { margin-bottom: 22px; }
-
-.server-field-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 10px;
-}
-
-.server-field-hint {
-  font-size: 13px;
-  color: var(--text-3);
-  font-weight: 400;
-  text-transform: none;
-  letter-spacing: normal;
-}
-
-.server-toggle-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 15px;
-  color: var(--text-1);
-  cursor: pointer;
-}
-
-.server-toggle-row input[type="checkbox"],
-.server-provider-row input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  accent-color: var(--accent);
-  cursor: pointer;
-}
-
-.toggle-group {
-  display: inline-flex;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-
-.toggle-option {
-  padding: 8px 16px;
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--text-2);
-  background: var(--surface);
-  transition: background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
-}
-
-.toggle-option + .toggle-option { border-left: 1px solid var(--border); }
-
-.toggle-option:hover { background: var(--surface-hover); color: var(--text-1); }
-
-.toggle-option.active {
-  background: var(--accent-muted);
-  color: var(--accent);
-}
-
-.server-providers-picker, .server-network-options {
-  margin-top: 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.server-provider-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.server-provider-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 6px 4px 10px;
-  border-radius: 20px;
-  background: var(--accent-muted);
-  color: var(--accent);
-  font-size: 13px;
-  font-weight: 500;
-  border: 1px solid oklch(75% 0.16 65 / 0.25);
-}
-
-.server-provider-chip button {
-  color: inherit;
-  font-size: 15px;
-  line-height: 1;
-  padding: 2px;
-  opacity: 0.7;
-}
-
-.server-provider-chip button:hover { opacity: 1; }
-
-.server-provider-list {
-  max-height: 260px;
-  overflow-y: auto;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-}
-
-.server-provider-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--border);
-  transition: background var(--dur-sm) var(--ease);
-}
-
-.server-provider-row:last-child { border-bottom: none; }
-.server-provider-row:hover { background: var(--surface-hover); }
-
-.server-provider-row-name { flex: 1; font-size: 15px; color: var(--text-1); }
-.server-provider-row-count { font-size: 13px; color: var(--text-3); }
-
-.server-start-btn { width: 100%; height: 44px; font-size: 15px; font-weight: 600; margin-top: 4px; }
-
-.server-start-error { margin-bottom: 10px; }
-
-.server-status-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 14px;
-}
-
-.server-status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--success);
-}
-
-.server-status-dot {
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: var(--success);
-  box-shadow: 0 0 8px var(--success);
-  animation: server-pulse 2s infinite;
-}
-
-@keyframes server-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-.server-stop-btn {
-  color: var(--error);
-  border-color: oklch(68% 0.22 25 / 0.4);
-}
-
-.server-config-summary {
-  font-size: 14px;
-  color: var(--text-3);
-  margin-bottom: 20px;
-}
-
-.url-card-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 24px;
-}
-
-.url-card {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-}
-
-.url-card-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  flex-shrink: 0;
-  width: 90px;
-}
-
-.url-card-value {
-  flex: 1;
-  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
-  font-size: 13px;
-  color: var(--text-1);
-  overflow-wrap: anywhere;
-}
-
-.url-card-value.masked { letter-spacing: 0.15em; }
-
-.server-model-table-wrap {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  overflow: auto;
-}
-
-.server-model-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-
-.server-model-table th {
-  text-align: left;
-  padding: 10px 14px;
-  background: var(--surface-2);
-  color: var(--text-2);
-  font-weight: 600;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  border-bottom: 1px solid var(--border);
-}
-
-.server-model-table td {
-  padding: 9px 14px;
-  border-bottom: 1px solid var(--border);
-  color: var(--text-1);
-}
-
-.server-model-table tr:last-child td { border-bottom: none; }
-
-.server-model-table code {
-  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
-  font-size: 12px;
-  color: var(--text-2);
-}