diff --git a/api/admin_static/admin.css b/api/admin_static/admin.css
index 3a324ee6..659902be 100644
--- a/api/admin_static/admin.css
+++ b/api/admin_static/admin.css
@@ -1,21 +1,62 @@
 :root {
   color-scheme: dark;
-  --bg: #11100e;
-  --panel: #1a1815;
-  --panel-strong: #25211c;
-  --card: #201d19;
-  --input: #12110f;
-  --text: #f3eee7;
-  --muted: #aaa197;
-  --line: #373129;
-  --line-strong: #4d4439;
-  --accent: #2fb984;
-  --accent-dark: #24946b;
-  --warn: #f5b74f;
-  --error: #ff746c;
-  --ok: #59d994;
-  --info: #7cc7ff;
-  --shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
+  
+  /* Color Palette */
+  --bg: #090a0f;
+  --panel: #11131c;
+  --panel-strong: #171b26;
+  --card: #151822;
+  --card-hover: #1e2230;
+  --input: #0a0b10;
+  --input-focus: #0f1118;
+  --text: #f3f4f6;
+  --text-strong: #ffffff;
+  --muted: #9ca3af;
+  --line: rgba(255, 255, 255, 0.06);
+  --line-strong: rgba(255, 255, 255, 0.12);
+  
+  /* Brand and Accent Colors */
+  --accent: #10b981;
+  --accent-dark: #059669;
+  --accent-muted: rgba(16, 185, 129, 0.08);
+  --accent-border: rgba(16, 185, 129, 0.3);
+  
+  /* Status Colors */
+  --ok: #10b981;
+  --ok-bg: rgba(16, 185, 129, 0.08);
+  --ok-border: rgba(16, 185, 129, 0.25);
+  
+  --warn: #f59e0b;
+  --warn-bg: rgba(245, 158, 11, 0.08);
+  --warn-border: rgba(245, 158, 11, 0.25);
+  
+  --error: #ef4444;
+  --error-bg: rgba(239, 68, 68, 0.08);
+  --error-border: rgba(239, 68, 68, 0.25);
+  
+  --neutral: #6b7280;
+  --neutral-bg: rgba(107, 114, 128, 0.08);
+  --neutral-border: rgba(107, 114, 128, 0.25);
+  
+  --info: #3b82f6;
+  
+  /* Box Shadow & Glows */
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
+  --shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
+  --glow-accent: 0 0 12px rgba(16, 185, 129, 0.15);
+  
+  /* Borders and Radius */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-full: 9999px;
+  
+  /* Typography */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 * {
@@ -27,10 +68,26 @@ body {
   min-width: 320px;
   background: var(--bg);
   color: var(--text);
-  font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
-  letter-spacing: 0;
+  font-family: var(--font-sans);
+  letter-spacing: -0.01em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom Scrollbars */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--panel-strong);
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--muted);
 }
 
 button,
@@ -38,237 +95,294 @@ input,
 select,
 textarea {
   font: inherit;
+  color: inherit;
 }
 
+/* App Shell Layout */
 .app-shell {
   display: grid;
-  grid-template-columns: 268px minmax(0, 1fr);
+  grid-template-columns: 260px minmax(0, 1fr);
   min-height: 100vh;
-  padding-bottom: 86px;
+  padding-bottom: 96px; /* Space for action bar */
 }
 
+/* Sidebar Navigation */
 .sidebar {
   position: sticky;
   top: 0;
   height: 100vh;
   border-right: 1px solid var(--line);
-  background: #171511;
-  padding: 20px 16px;
+  background: var(--bg);
+  padding: 24px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
 }
 
 .brand {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 28px;
 }
 
 .brand-mark {
   display: grid;
-  width: 38px;
-  height: 38px;
+  width: 40px;
+  height: 40px;
   place-items: center;
-  border-radius: 8px;
-  background: var(--accent);
+  border-radius: var(--radius-md);
+  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
   color: #ffffff;
   font-weight: 800;
-  font-size: 14px;
-}
-
-.brand h1,
-.brand p,
-.topbar h2,
-.section-heading h3,
-.section-heading p,
-.strip-header h3 {
-  margin: 0;
+  font-size: 15px;
+  box-shadow: var(--glow-accent);
 }
 
 .brand h1 {
-  font-size: 15px;
+  font-size: 16px;
+  font-weight: 700;
   line-height: 1.2;
+  color: var(--text-strong);
+  margin: 0;
 }
 
-.brand p,
-.section-heading p,
-.action-meta span {
+.brand p {
   color: var(--muted);
   font-size: 12px;
+  margin: 0;
 }
 
 .section-nav {
   display: grid;
-  gap: 8px;
+  gap: 6px;
 }
 
 .nav-link {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   width: 100%;
-  min-height: 42px;
+  min-height: 40px;
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: transparent;
-  color: var(--text);
-  padding: 10px 12px;
+  color: var(--muted);
+  padding: 10px 14px;
   text-align: left;
   cursor: pointer;
-  font-weight: 700;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all var(--transition-fast);
 }
 
-.nav-link:hover,
-.nav-link.active {
+.nav-link:hover {
   background: var(--panel-strong);
-  border-color: var(--line);
+  color: var(--text-strong);
 }
 
 .nav-link.active {
-  border-color: rgba(89, 217, 148, 0.34);
-  color: #ffffff;
+  background: var(--accent-muted);
+  border-color: var(--accent-border);
+  color: var(--accent);
+  box-shadow: var(--shadow-sm);
 }
 
+/* Accessible focus outlines */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+.nav-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Main Content Area */
 .main {
   min-width: 0;
-  padding: 28px;
+  padding: 40px 48px;
 }
 
 .topbar {
-  margin-bottom: 20px;
+  margin-bottom: 32px;
 }
 
 .topbar h2 {
-  font-size: 28px;
-  line-height: 1.15;
-}
-
-.status-pill {
-  display: inline-flex;
-  align-items: center;
-  min-height: 30px;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 5px 10px;
-  background: var(--panel-strong);
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.status-pill.ok {
-  color: var(--ok);
-  background: rgba(47, 185, 132, 0.13);
-  border-color: rgba(89, 217, 148, 0.36);
-}
-
-.status-pill.warn {
-  color: var(--warn);
-  background: rgba(245, 183, 79, 0.13);
-  border-color: rgba(245, 183, 79, 0.38);
-}
-
-.status-pill.error {
-  color: var(--error);
-  background: rgba(255, 116, 108, 0.12);
-  border-color: rgba(255, 116, 108, 0.36);
-}
-
-.admin-views,
-.admin-view {
-  display: grid;
-  gap: 18px;
-}
-
-.admin-view[hidden] {
-  display: none;
+  font-size: 30px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--text-strong);
+  margin: 0;
 }
 
+/* Provider Strip & Panels */
 .provider-strip,
 .settings-section {
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   background: var(--panel);
   box-shadow: var(--shadow);
+  margin-bottom: 24px;
+  transition: border-color var(--transition-normal);
 }
 
 .provider-strip {
-  padding: 16px;
+  padding: 24px;
 }
 
 .strip-header,
 .section-heading {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
-}
-
-.strip-header {
-  margin-bottom: 12px;
+  gap: 16px;
+  margin-bottom: 20px;
 }
 
 .strip-header h3,
 .section-heading h3 {
-  font-size: 16px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-strong);
+  margin: 0;
 }
 
+.section-heading p {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.4;
+  margin: 4px 0 0 0;
+}
+
+/* Provider Status Cards */
 .provider-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 16px;
 }
 
 .provider-card {
-  display: grid;
-  gap: 8px;
-  min-height: 108px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 140px;
   border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 12px;
+  border-radius: var(--radius-md);
+  padding: 16px;
   background: var(--card);
+  transition: all var(--transition-normal);
+}
+
+.provider-card:hover {
+  border-color: var(--line-strong);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-sm);
+  background: var(--card-hover);
 }
 
 .provider-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 12px;
 }
 
 .provider-title strong {
   font-size: 14px;
+  font-weight: 700;
+  color: var(--text-strong);
+}
+
+/* Modern status pills with color indicators */
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  border: 1px solid var(--neutral-border);
+  border-radius: var(--radius-full);
+  padding: 2px 10px;
+  background: var(--neutral-bg);
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+.status-pill.ok {
+  color: var(--ok);
+  background: var(--ok-bg);
+  border-color: var(--ok-border);
+}
+
+.status-pill.warn {
+  color: var(--warn);
+  background: var(--warn-bg);
+  border-color: var(--warn-border);
+}
+
+.status-pill.error {
+  color: var(--error);
+  background: var(--error-bg);
+  border-color: var(--error-border);
 }
 
 .provider-meta {
   color: var(--muted);
   font-size: 12px;
-  word-break: break-word;
+  line-height: 1.4;
+  word-break: break-all;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
+/* Button & Form Controls styling */
 .test-button,
 .ghost-button,
 .secondary-button,
 .primary-button {
-  min-height: 34px;
-  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--line-strong);
-  padding: 7px 12px;
+  padding: 6px 14px;
+  font-weight: 600;
+  font-size: 13px;
   cursor: pointer;
-  font-weight: 700;
+  transition: all var(--transition-fast);
+  text-decoration: none;
 }
 
-.ghost-button,
-.secondary-button,
 .test-button {
   background: var(--panel-strong);
   color: var(--text);
+  border-color: var(--line);
+  margin-top: auto;
+  align-self: flex-start;
 }
 
-.ghost-button:hover,
-.secondary-button:hover,
-.test-button:hover {
+.test-button:hover:not(:disabled) {
+  background: var(--card-hover);
   border-color: var(--accent);
+  color: var(--accent);
+}
+
+.test-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.secondary-button {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--line-strong);
+}
+
+.secondary-button:hover:not(:disabled) {
+  background: var(--panel-strong);
+  border-color: var(--text);
 }
 
 .primary-button {
@@ -277,40 +391,56 @@ textarea {
   color: #06100b;
 }
 
-.primary-button:hover {
+.primary-button:hover:not(:disabled) {
   background: var(--accent-dark);
 }
 
 .primary-button:disabled {
   cursor: not-allowed;
   border-color: var(--line);
-  background: #34302a;
-  color: #797067;
+  background: var(--panel-strong);
+  color: var(--muted);
 }
 
+.ghost-button {
+  background: transparent;
+  color: var(--muted);
+  border-color: transparent;
+}
+
+.ghost-button:hover:not(:disabled) {
+  color: var(--text-strong);
+  background: var(--panel-strong);
+}
+
+/* Forms layout */
 .form-sections {
   display: grid;
-  gap: 18px;
+  gap: 24px;
 }
 
 .settings-section {
-  padding: 18px;
-  scroll-margin-top: 20px;
+  padding: 24px;
+  scroll-margin-top: 24px;
 }
 
 .section-heading {
-  margin-bottom: 16px;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 16px;
+  margin-bottom: 24px;
 }
 
 .field-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 14px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
 }
 
+/* Field Grouping */
 .field {
-  display: grid;
-  gap: 7px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   align-content: start;
 }
 
@@ -321,110 +451,198 @@ textarea {
   gap: 8px;
   font-size: 13px;
   font-weight: 700;
+  color: var(--text-strong);
 }
 
 .field-source {
-  color: var(--muted);
+  color: var(--accent);
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--accent-muted);
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
 }
 
-.field input,
+/* Form Inputs, Select, Textareas */
+.field input[type="text"],
+.field input[type="number"],
+.field input[type="password"],
 .field select,
 .field textarea {
   width: 100%;
-  min-height: 38px;
+  min-height: 40px;
   border: 1px solid var(--line-strong);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--input);
-  color: var(--text);
-  padding: 8px 10px;
+  color: var(--text-strong);
+  padding: 10px 14px;
+  font-size: 14px;
+  transition: all var(--transition-fast);
+}
+
+/* Custom Dropdown Styling for Select Elements */
+.field select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 14px center;
+  background-size: 14px;
+  padding-right: 36px;
+}
+
+/* Custom Dropdown Styling for Datalist Input Elements (Model Routing) */
+.field input[list] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 14px center;
+  background-size: 14px;
+  padding-right: 36px;
+}
+
+/* Hide WebKit's native picker indicator to avoid double arrow icons */
+.field input[list]::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+
+.field input:focus,
+.field select:focus,
+.field textarea:focus {
+  border-color: var(--accent);
+  background: var(--input-focus);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+  outline: none;
+}
+
+/* Checkbox specific layout styling */
+.field input[type="checkbox"] {
+  align-self: flex-start;
+  width: 20px;
+  height: 20px;
+  accent-color: var(--accent);
+  cursor: pointer;
+  margin: 4px 0;
 }
 
 .field textarea {
-  min-height: 90px;
+  min-height: 100px;
   resize: vertical;
+  line-height: 1.5;
 }
 
 .field input:disabled,
 .field select:disabled,
 .field textarea:disabled {
-  background: #26231f;
-  color: #82796f;
+  background: rgba(255, 255, 255, 0.02);
+  border-color: var(--line);
+  color: var(--muted);
+  cursor: not-allowed;
 }
 
 .field-description {
   color: var(--muted);
   font-size: 12px;
-  line-height: 1.35;
+  line-height: 1.4;
+  margin-top: 2px;
 }
 
+/* Show/Hide Advanced fields */
 .field.advanced-field {
   display: none;
 }
 
 .settings-section.show-advanced .advanced-field {
-  display: grid;
+  display: flex;
 }
 
 .advanced-toggle {
-  justify-self: start;
-  margin-top: 14px;
+  margin-top: 20px;
+  font-size: 12px;
+  border: 1px solid var(--line-strong);
 }
 
+/* Fixed Bottom Action Bar */
 .action-bar {
   position: fixed;
   right: 0;
   bottom: 0;
-  left: 268px;
-  z-index: 10;
+  left: 260px;
+  z-index: 100;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(180px, auto) auto;
-  gap: 14px;
+  grid-template-columns: minmax(0, 1.2fr) minmax(200px, 1fr) auto;
+  gap: 20px;
   align-items: center;
-  min-height: 72px;
+  min-height: 80px;
   border-top: 1px solid var(--line);
-  background: rgba(26, 24, 21, 0.94);
-  padding: 12px 28px;
-  backdrop-filter: blur(12px);
+  background: rgba(9, 10, 15, 0.82);
+  padding: 16px 40px;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
 }
 
 .action-meta {
-  display: grid;
-  gap: 3px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   min-width: 0;
 }
 
-.action-meta strong,
-.action-meta span {
+.action-meta strong {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-strong);
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.action-meta span {
+  color: var(--muted);
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .message-area {
   min-width: 0;
   color: var(--muted);
   font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
 }
 
 .message-area.error {
   color: var(--error);
+  font-weight: 600;
 }
 
 .message-area.ok {
   color: var(--ok);
+  font-weight: 600;
 }
 
 .action-buttons {
   display: flex;
-  gap: 8px;
+  gap: 12px;
 }
 
+.action-buttons button {
+  min-width: 100px;
+}
+
+/* Tablet Layout Optimization */
 @media (max-width: 900px) {
   .app-shell {
-    display: block;
-    padding-bottom: 122px;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 180px; /* More room for stacked action bar */
   }
 
   .sidebar {
@@ -432,28 +650,87 @@ textarea {
     height: auto;
     border-right: 0;
     border-bottom: 1px solid var(--line);
+    padding: 20px;
+    gap: 20px;
   }
 
   .section-nav {
-    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   }
 
   .main {
-    padding: 18px;
+    padding: 24px 20px;
   }
 
   .action-bar {
     left: 0;
     grid-template-columns: 1fr;
-    align-items: stretch;
-    padding: 12px 18px;
+    gap: 12px;
+    padding: 16px 20px;
+    min-height: auto;
+    background: rgba(9, 10, 15, 0.95);
+  }
+
+  .action-meta {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .action-meta span {
+    text-align: right;
   }
 
   .action-buttons {
-    justify-content: stretch;
+    width: 100%;
   }
 
   .action-buttons button {
     flex: 1;
+    min-height: 44px; /* Better touch target on mobile */
+  }
+}
+
+/* Mobile Layout Optimization */
+@media (max-width: 600px) {
+  .brand {
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+  }
+  
+  .brand-mark {
+    width: 48px;
+    height: 48px;
+  }
+
+  .section-nav {
+    grid-template-columns: 1fr;
+  }
+  
+  .topbar {
+    text-align: center;
+  }
+
+  .topbar h2 {
+    font-size: 24px;
+  }
+
+  .provider-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .field-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .action-meta {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 2px;
+  }
+
+  .action-meta span {
+    text-align: left;
   }
 }