@raingor/pi-web-switch 0.4.3 → 0.4.4

package/src/index.css

@@ -1,245 +1,659 @@
 @import "tailwindcss";
 
-/* ─── Theme Variables ──────────────────────────────────── */
+/* ─── Signal Console Design System ─────────────────────── */
 
 :root,
 .light {
   --color-scheme: light;
-  --page-bg: #f9fafb;
-  --page-text: #111827;
-  --card-bg: #ffffff;
-  --card-border: #e5e7eb;
-  --card-header-border: #e5e7eb;
-  --card-header-text: #374151;
-  --input-bg: #ffffff;
-  --input-border: #d1d5db;
-  --input-text: #111827;
-  --muted-text: #6b7280;
-  --subtle-text: #9ca3af;
-  --accent-bg: #eff6ff;
-  --hover-bg: #f3f4f6;
-  --sidebar-bg: #ffffff;
-  --sidebar-border: #e5e7eb;
-  --sidebar-logo: #1e40af;
-  --sidebar-active-bg: #eff6ff;
-  --sidebar-active-text: #2563eb;
-  --sidebar-text: #6b7280;
-  --sidebar-hover-bg: #f3f4f6;
-  --sidebar-hover-text: #374151;
-  --scrollbar-thumb: #d1d5db;
-  --scrollbar-thumb-hover: #9ca3af;
-  
-  /* Chat component variables */
-  --bg: #ffffff;
-  --bg-panel: #f9fafb;
-  --bg-hover: #f3f4f6;
-  --bg-selected: #eff6ff;
-  --border: #e5e7eb;
-  --text: #111827;
-  --text-muted: #6b7280;
-  --text-dim: #9ca3af;
-  --accent: #2563eb;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --page-bg: #eef3f5;
+  --page-bg-deep: #e4ecef;
+  --page-text: #10252b;
+  --card-bg: rgba(248, 252, 252, 0.86);
+  --card-bg-solid: #f8fcfc;
+  --card-border: rgba(38, 86, 96, 0.18);
+  --card-header-border: rgba(38, 86, 96, 0.14);
+  --card-header-text: #213b42;
+  --input-bg: rgba(255, 255, 255, 0.76);
+  --input-border: rgba(40, 90, 101, 0.23);
+  --input-text: #10252b;
+  --muted-text: #60757b;
+  --subtle-text: #8a9ba0;
+  --accent-bg: rgba(0, 173, 204, 0.09);
+  --hover-bg: rgba(0, 173, 204, 0.07);
+  --sidebar-bg: rgba(244, 249, 249, 0.94);
+  --sidebar-border: rgba(37, 78, 87, 0.16);
+  --sidebar-logo: #00a6c2;
+  --sidebar-active-bg: rgba(0, 175, 205, 0.1);
+  --sidebar-active-text: #007f97;
+  --sidebar-text: #586f75;
+  --sidebar-hover-bg: rgba(0, 173, 204, 0.06);
+  --sidebar-hover-text: #17343c;
+  --scrollbar-thumb: rgba(41, 84, 94, 0.25);
+  --scrollbar-thumb-hover: rgba(0, 158, 188, 0.55);
+  --signal-cyan: #00a9c7;
+  --signal-cyan-bright: #00c9eb;
+  --signal-lime: #70a900;
+  --signal-amber: #d88914;
+  --signal-red: #e64d6b;
+  --signal-violet: #7161d9;
+  --grid-line: rgba(31, 83, 94, 0.055);
+  --panel-shadow: 0 18px 50px rgba(28, 60, 67, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
+  --font-display: "Avenir Next", Avenir, "Century Gothic", sans-serif;
+  --font-body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
+  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
+
+  --bg: var(--page-bg);
+  --bg-panel: var(--card-bg);
+  --bg-hover: var(--hover-bg);
+  --bg-selected: var(--sidebar-active-bg);
+  --border: var(--card-border);
+  --text: var(--page-text);
+  --text-muted: var(--muted-text);
+  --text-dim: var(--subtle-text);
+  --accent: var(--signal-cyan);
 }
 
 .dark {
   --color-scheme: dark;
-  --page-bg: #030712;
-  --page-text: #f3f4f6;
-  --card-bg: rgba(17, 24, 39, 0.5);
-  --card-border: #1f2937;
-  --card-header-border: #1f2937;
-  --card-header-text: #d1d5db;
-  --input-bg: #1f2937;
-  --input-border: #374151;
-  --input-text: #ffffff;
-  --muted-text: #9ca3af;
-  --subtle-text: #6b7280;
-  --accent-bg: rgba(37, 99, 235, 0.1);
-  --hover-bg: rgba(31, 41, 55, 0.5);
-  --sidebar-bg: #030712;
-  --sidebar-border: #1f2937;
-  --sidebar-logo: #2563eb;
-  --sidebar-active-bg: rgba(37, 99, 235, 0.1);
-  --sidebar-active-text: #60a5fa;
-  --sidebar-text: #9ca3af;
-  --sidebar-hover-bg: #1f2937;
-  --sidebar-hover-text: #e5e7eb;
-  --scrollbar-thumb: #4b5563;
-  --scrollbar-thumb-hover: #6b7280;
-  
-  /* Chat component variables */
-  --bg: #030712;
-  --bg-panel: rgba(17, 24, 39, 0.5);
-  --bg-hover: rgba(31, 41, 55, 0.5);
-  --bg-selected: rgba(37, 99, 235, 0.1);
-  --border: #1f2937;
-  --text: #f3f4f6;
-  --text-muted: #9ca3af;
-  --text-dim: #6b7280;
-  --accent: #2563eb;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-}
-
-:root {
-  color-scheme: var(--color-scheme, dark);
+  --page-bg: #05090d;
+  --page-bg-deep: #020507;
+  --page-text: #e8f5f5;
+  --card-bg: rgba(11, 20, 25, 0.82);
+  --card-bg-solid: #0b1419;
+  --card-border: rgba(117, 180, 190, 0.16);
+  --card-header-border: rgba(117, 180, 190, 0.13);
+  --card-header-text: #d7e7e9;
+  --input-bg: rgba(13, 24, 30, 0.92);
+  --input-border: rgba(113, 172, 182, 0.22);
+  --input-text: #edfafa;
+  --muted-text: #849ba0;
+  --subtle-text: #53676c;
+  --accent-bg: rgba(0, 216, 255, 0.09);
+  --hover-bg: rgba(0, 216, 255, 0.07);
+  --sidebar-bg: rgba(5, 10, 14, 0.96);
+  --sidebar-border: rgba(104, 169, 179, 0.14);
+  --sidebar-logo: #00d8ff;
+  --sidebar-active-bg: rgba(0, 216, 255, 0.08);
+  --sidebar-active-text: #6cecff;
+  --sidebar-text: #789096;
+  --sidebar-hover-bg: rgba(0, 216, 255, 0.045);
+  --sidebar-hover-text: #d4e9eb;
+  --scrollbar-thumb: rgba(99, 145, 152, 0.28);
+  --scrollbar-thumb-hover: rgba(0, 216, 255, 0.55);
+  --signal-cyan: #00d8ff;
+  --signal-cyan-bright: #7cecff;
+  --signal-lime: #9ef01a;
+  --signal-amber: #ffb84d;
+  --signal-red: #ff5c7a;
+  --signal-violet: #9f8cff;
+  --grid-line: rgba(102, 181, 192, 0.045);
+  --panel-shadow: 0 22px 60px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.025) inset;
+
+  --bg: var(--page-bg);
+  --bg-panel: var(--card-bg);
+  --bg-hover: var(--hover-bg);
+  --bg-selected: var(--sidebar-active-bg);
+  --border: var(--card-border);
+  --text: var(--page-text);
+  --text-muted: var(--muted-text);
+  --text-dim: var(--subtle-text);
+  --accent: var(--signal-cyan);
 }
 
+:root { color-scheme: var(--color-scheme, dark); }
+
+* { box-sizing: border-box; }
+html, body, #root { min-height: 100%; }
 body {
-  font-family: "Inter", "SF Pro", system-ui, -apple-system, sans-serif;
-  background-color: var(--page-bg);
+  margin: 0;
+  overflow: hidden;
+  font-family: var(--font-body);
+  background: var(--page-bg);
   color: var(--page-text);
+  letter-spacing: 0.005em;
 }
-
-/* Theme-aware utility classes */
-.theme-card {
-  background-color: var(--card-bg);
-  border-color: var(--card-border);
+button, input, select, textarea { font: inherit; }
+button, a, input, select, textarea {
+  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
 }
-
-.theme-input {
-  background-color: var(--input-bg);
-  border-color: var(--input-border);
-  color: var(--input-text);
+button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
+  outline: 1px solid var(--signal-cyan);
+  outline-offset: 2px;
 }
+::selection { color: #001014; background: var(--signal-cyan-bright); }
 
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border-radius: 3px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
+/* ─── Application Shell ───────────────────────────────── */
+
+.app-shell {
+  position: relative;
+  display: flex;
+  width: calc(100% / var(--ui-zoom, 1));
+  height: calc(100vh / var(--ui-zoom, 1));
+  min-height: 0;
+  overflow: hidden;
+  transform: scale(var(--ui-zoom, 1));
+  transform-origin: top left;
+  isolation: isolate;
+  background:
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    linear-gradient(0deg, var(--grid-line) 1px, transparent 1px),
+    radial-gradient(circle at 76% 5%, color-mix(in srgb, var(--signal-cyan) 8%, transparent), transparent 32%),
+    radial-gradient(circle at 18% 92%, color-mix(in srgb, var(--signal-violet) 5%, transparent), transparent 27%),
+    var(--page-bg);
+  background-size: 44px 44px, 44px 44px, auto, auto, auto;
 }
 
-/* Smooth transitions for theme toggle */
-* {
-  transition: background-color 0.15s ease, border-color 0.15s ease;
+.app-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
+.app-atmosphere::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: .17;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
+  mix-blend-mode: soft-light;
+}
+.app-orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--signal-cyan) 12%, transparent); border-radius: 50%; }
+.app-orbit::before, .app-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--signal-cyan) 8%, transparent); }
+.app-orbit-one { width: 620px; height: 620px; right: -240px; top: -250px; animation: orbit-drift 24s linear infinite; }
+.app-orbit-one::before { inset: 66px; }
+.app-orbit-one::after { inset: 148px; }
+.app-orbit-two { width: 360px; height: 360px; left: 15%; bottom: -240px; animation: orbit-drift 32s linear reverse infinite; }
+.app-scanline {
+  position: absolute;
+  left: 0; right: 0; top: -10%; height: 20%;
+  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--signal-cyan) 3%, transparent), transparent);
+  animation: ambient-scan 13s ease-in-out infinite;
 }
 
-/* ─── Light Mode Overrides ──────────────────────────────
-   Remap hardcoded Tailwind dark-mode classes to light colors.
-   This is needed because most components use fixed classes
-   like text-white, text-gray-400, bg-gray-950, border-gray-800, etc. */
+.app-stage { display: flex; min-width: 0; flex: 1; flex-direction: column; }
+.app-main { min-width: 0; flex: 1; overflow-y: auto; overflow-x: hidden; }
+.app-main-full { overflow: hidden; }
+.app-canvas { width: min(100%, 1440px); margin: 0 auto; padding: 38px 42px 56px; animation: canvas-enter 480ms cubic-bezier(.22,.8,.25,1) both; }
+.mobile-command-bar { display: none; }
+.sidebar-scrim { display: none; }
 
-.light .text-white,
-.light .text-gray-100 {
-  color: #111827;
-}
-.light .text-gray-200,
-.light .text-gray-300 {
-  color: #374151;
-}
-.light .text-gray-400 {
-  color: #6b7280;
-}
-.light .text-gray-500,
-.light .text-gray-600 {
-  color: #9ca3af;
-}
-.light .bg-gray-950,
-.light .bg-gray-900,
-.light .bg-gray-900\/50,
-.light .bg-gray-900\/30,
-.light .bg-gray-900\/70 {
-  background-color: #ffffff;
-}
-.light .bg-gray-800,
-.light .bg-gray-800\/30,
-.light .bg-gray-800\/50,
-.light .bg-gray-800\/20 {
-  background-color: #f3f4f6;
-}
-.light .bg-black\/60 {
-  background-color: rgba(107, 114, 128, 0.5);
-}
-.light .border-gray-800,
-.light .border-gray-800\/50,
-.light .border-gray-700 {
-  border-color: #e5e7eb;
-}
-.light .border-gray-700 {
-  border-color: #d1d5db;
-}
-.light .border-gray-600 {
-  border-color: #d1d5db;
-}
-.light .text-blue-400 {
-  color: #2563eb;
-}
-.light .bg-blue-600 {
-  background-color: #2563eb;
-}
-.light .bg-blue-500\/10,
-.light .bg-blue-600\/10 {
-  background-color: #eff6ff;
-}
-.light .text-emerald-400 {
-  color: #059669;
-}
-.light .text-amber-400 {
-  color: #d97706;
+/* ─── Command Sidebar ─────────────────────────────────── */
+
+.command-sidebar {
+  position: relative;
+  z-index: 30;
+  display: flex;
+  width: 252px;
+  min-width: 252px;
+  height: 100vh;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--sidebar-border);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--signal-cyan) 2%, transparent), transparent 24%),
+    var(--sidebar-bg);
+  box-shadow: 16px 0 50px rgba(0, 0, 0, .035);
+  backdrop-filter: blur(24px);
+}
+.sidebar-edge { position: absolute; right: -1px; top: 0; width: 1px; height: 130px; background: linear-gradient(var(--signal-cyan), transparent); opacity: .68; }
+.brand-block { position: relative; display: flex; align-items: center; gap: 13px; min-height: 94px; padding: 20px 20px 18px; border-bottom: 1px solid var(--sidebar-border); }
+.brand-block::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--signal-cyan), transparent 72%); opacity: .36; }
+.brand-mark { position: relative; display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; }
+.brand-mark img { position: relative; z-index: 2; width: 34px; height: 34px; border-radius: 10px; filter: saturate(.9) hue-rotate(-34deg); box-shadow: 0 0 24px color-mix(in srgb, var(--signal-cyan) 22%, transparent); }
+.brand-orbit { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--signal-cyan) 30%, transparent); border-radius: 50%; animation: brand-rotate 12s linear infinite; }
+.brand-orbit::before { content: ""; position: absolute; width: 4px; height: 4px; top: 3px; left: 8px; border-radius: 50%; background: var(--signal-cyan); box-shadow: 0 0 8px var(--signal-cyan); }
+.brand-name { overflow: hidden; color: var(--page-text); font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
+.brand-subtitle { margin-top: 1px; overflow: hidden; color: var(--subtle-text); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
+.sidebar-close { display: none; margin-left: auto; padding: 7px; color: var(--muted-text); border: 1px solid var(--sidebar-border); border-radius: 7px; }
+.sidebar-system-label { display: flex; align-items: center; gap: 10px; padding: 24px 20px 10px; color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .18em; }
+.sidebar-label-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--sidebar-border), transparent); }
+.command-nav { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 3px 12px 16px; }
+.command-nav-item { position: relative; display: grid; grid-template-columns: 24px 31px minmax(0,1fr) 14px; align-items: center; min-height: 44px; padding: 0 10px; overflow: hidden; color: var(--sidebar-text); border: 1px solid transparent; border-radius: 8px; text-decoration: none; }
+.command-nav-item::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--signal-cyan) 9%, transparent), transparent 75%); transform: translateX(-25%); transition: opacity 180ms ease, transform 180ms ease; }
+.command-nav-item:hover { color: var(--sidebar-hover-text); background: var(--sidebar-hover-bg); }
+.command-nav-item:hover::before, .command-nav-item.is-active::before { opacity: 1; transform: translateX(0); }
+.command-nav-item.is-active { color: var(--sidebar-active-text); border-color: color-mix(in srgb, var(--signal-cyan) 18%, transparent); background: var(--sidebar-active-bg); box-shadow: 0 10px 30px color-mix(in srgb, var(--signal-cyan) 5%, transparent), inset 2px 0 0 var(--signal-cyan); }
+.nav-code { position: relative; z-index: 1; color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }
+.nav-icon { position: relative; z-index: 1; display: grid; place-items: center; }
+.nav-label { position: relative; z-index: 1; overflow: hidden; font-size: 13px; font-weight: 600; letter-spacing: .005em; text-overflow: ellipsis; white-space: nowrap; }
+.nav-signal { position: relative; z-index: 1; width: 4px; height: 4px; margin-left: auto; border-radius: 50%; background: var(--sidebar-border); }
+.command-nav-item.is-active .nav-signal { background: var(--signal-cyan); box-shadow: 0 0 10px var(--signal-cyan); }
+.sidebar-footer { border-top: 1px solid var(--sidebar-border); }
+.node-status { display: flex; align-items: center; gap: 10px; margin: 14px 14px 8px; padding: 11px 10px; border: 1px solid var(--sidebar-border); border-radius: 8px; background: color-mix(in srgb, var(--card-bg-solid) 52%, transparent); }
+.node-status-icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--signal-cyan); border: 1px solid color-mix(in srgb, var(--signal-cyan) 22%, transparent); border-radius: 7px; background: var(--accent-bg); }
+.node-status-label, .node-status-value { display: block; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
+.node-status-label { color: var(--subtle-text); }
+.node-status-value { margin-top: 3px; color: var(--muted-text); }
+.node-status-value i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--signal-lime); box-shadow: 0 0 8px var(--signal-lime); animation: signal-pulse 2.2s ease-in-out infinite; }
+.language-panel { position: relative; padding: 0 14px 12px; }
+.language-trigger { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 10px; color: var(--sidebar-text); border-radius: 7px; font-size: 12px; }
+.language-trigger:hover { color: var(--sidebar-hover-text); background: var(--sidebar-hover-bg); }
+.language-menu { position: absolute; left: 14px; right: 14px; bottom: calc(100% + 5px); padding: 5px; border: 1px solid var(--card-border); border-radius: 9px; background: var(--card-bg-solid); box-shadow: var(--panel-shadow); }
+.language-option { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 8px 9px; color: var(--muted-text); border-radius: 6px; font-size: 11px; }
+.language-option:hover, .language-option.is-selected { color: var(--page-text); background: var(--hover-bg); }
+.language-option i { width: 5px; height: 5px; border-radius: 50%; background: var(--signal-cyan); box-shadow: 0 0 8px var(--signal-cyan); }
+.version-strip { display: flex; justify-content: space-between; padding: 10px 20px 13px; color: var(--subtle-text); border-top: 1px solid var(--sidebar-border); font-family: var(--font-mono); font-size: 7px; letter-spacing: .08em; }
+
+/* ─── Page / Panel Language ───────────────────────────── */
+
+main h1, main h2, main h3 { font-family: var(--font-display); letter-spacing: -.025em; }
+main h1 { font-size: clamp(1.28rem, 2vw, 1.65rem) !important; font-weight: 720 !important; }
+.page-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: var(--signal-cyan); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
+.page-kicker span { width: 18px; height: 1px; background: var(--signal-cyan); box-shadow: 0 0 8px var(--signal-cyan); }
+.dashboard-command-header { position: relative; padding-bottom: 17px; border-bottom: 1px solid var(--card-border); }
+.dashboard-command-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100px; height: 1px; background: linear-gradient(90deg, var(--signal-cyan), transparent); }
+
+.tech-panel,
+.rounded-xl.border.border-gray-800,
+.rounded-xl.border.border-gray-800\/50 {
+  position: relative;
+  border-color: var(--card-border) !important;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--signal-cyan) 2.5%, transparent), transparent 38%),
+    var(--card-bg) !important;
+  box-shadow: var(--panel-shadow);
+  backdrop-filter: blur(16px);
+}
+.tech-panel::before,
+.rounded-xl.border.border-gray-800::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--signal-cyan) 16%, transparent), transparent 22%) top left / 100% 1px no-repeat;
+  opacity: .7;
+}
+.tech-panel:hover { border-color: color-mix(in srgb, var(--signal-cyan) 28%, var(--card-border)) !important; }
+.dashboard-stat-card { min-height: 174px; overflow: hidden; border-radius: 10px !important; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
+.dashboard-stat-card::after { content: ""; position: absolute; width: 85px; height: 85px; right: -50px; bottom: -50px; border: 1px solid color-mix(in srgb, var(--signal-cyan) 14%, transparent); border-radius: 50%; box-shadow: 0 0 0 18px color-mix(in srgb, var(--signal-cyan) 3%, transparent); }
+.dashboard-stat-card:hover { transform: translateY(-2px); box-shadow: 0 24px 58px color-mix(in srgb, var(--signal-cyan) 8%, transparent); }
+.dashboard-stat-card > div:first-child > div:last-child { border: 1px solid color-mix(in srgb, var(--signal-cyan) 15%, transparent); border-radius: 7px !important; }
+.dashboard-stat-card > p:nth-of-type(1) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.telemetry-chart { min-height: 384px; overflow: hidden; border-radius: 10px !important; background:
+  linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+  linear-gradient(0deg, var(--grid-line) 1px, transparent 1px),
+  linear-gradient(135deg, color-mix(in srgb, var(--signal-cyan) 3%, transparent), transparent 44%),
+  var(--card-bg) !important;
+  background-size: 24px 24px, 24px 24px, auto, auto !important;
+}
+.telemetry-chart h3::before { content: "// "; color: var(--signal-cyan); font-family: var(--font-mono); }
+.data-console { border-radius: 10px !important; }
+.data-console thead { background: color-mix(in srgb, var(--signal-cyan) 3.5%, transparent); }
+.data-console tbody tr { transition: background-color 120ms ease; }
+.data-console tbody tr:hover { background: color-mix(in srgb, var(--signal-cyan) 4%, transparent); }
+.data-console th { font-family: var(--font-mono); font-size: 9px !important; letter-spacing: .06em; text-transform: uppercase; }
+.data-console td { font-variant-numeric: tabular-nums; }
+
+/* Upgrade generic page panels and controls without changing page logic. */
+[class*="rounded-xl"][class*="border-gray-800"],
+[class*="rounded-lg"][class*="border-gray-800"] { border-color: var(--card-border) !important; }
+[class*="bg-gray-900/50"], [class*="bg-gray-900/40"], [class*="bg-gray-900/30"], [class*="bg-gray-900/70"] { background-color: var(--card-bg) !important; }
+input, select, textarea {
+  color: var(--input-text);
+  border-color: var(--input-border) !important;
+  border-radius: 7px !important;
+  background: var(--input-bg) !important;
+  box-shadow: 0 1px 0 color-mix(in srgb, white 5%, transparent) inset;
+}
+input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--signal-cyan) 65%, var(--input-border)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-cyan) 9%, transparent); }
+button[class*="bg-blue-600"], button[class*="bg-blue-500"] {
+  color: #001014 !important;
+  background: linear-gradient(135deg, var(--signal-cyan-bright), var(--signal-cyan)) !important;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--signal-cyan) 18%, transparent);
+}
+button[class*="bg-blue-600"]:hover, button[class*="bg-blue-500"]:hover { transform: translateY(-1px); filter: brightness(1.06); }
+table { border-collapse: collapse; }
+.font-mono { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; }
+
+/* ─── Shared Components ───────────────────────────────── */
+
+.stat-instrument { min-height: 154px; padding: 20px; overflow: hidden; border: 1px solid var(--card-border); border-radius: 10px; }
+.panel-corner { position: absolute; width: 12px; height: 12px; pointer-events: none; }
+.panel-corner-tl { left: 7px; top: 7px; border-left: 1px solid var(--signal-cyan); border-top: 1px solid var(--signal-cyan); }
+.panel-corner-br { right: 7px; bottom: 7px; border-right: 1px solid var(--signal-cyan); border-bottom: 1px solid var(--signal-cyan); }
+.instrument-label { color: var(--muted-text); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
+.instrument-value { color: var(--page-text); font-family: var(--font-display); font-size: 25px; font-weight: 760; letter-spacing: -.04em; }
+.instrument-meta { color: var(--subtle-text); font-size: 10px; }
+.instrument-icon { display: grid; width: 36px; height: 36px; place-items: center; color: var(--signal-cyan); border: 1px solid color-mix(in srgb, var(--signal-cyan) 17%, transparent); border-radius: 8px; background: var(--accent-bg); }
+.instrument-trend { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; font-family: var(--font-mono); font-size: 10px; }
+.instrument-trend.is-positive { color: var(--signal-lime); }
+.instrument-trend.is-negative { color: var(--signal-red); }
+.empty-signal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: 44px 24px; overflow: hidden; text-align: center; border: 1px dashed var(--card-border); border-radius: 10px; background: radial-gradient(circle at center, color-mix(in srgb, var(--signal-cyan) 5%, transparent), transparent 48%); }
+.empty-signal-radar { position: relative; display: grid; width: 74px; height: 74px; margin-bottom: 18px; place-items: center; color: var(--signal-cyan); border: 1px solid color-mix(in srgb, var(--signal-cyan) 28%, transparent); border-radius: 50%; }
+.empty-signal-radar::before, .empty-signal-radar::after { content: ""; position: absolute; inset: 9px; border: 1px dashed color-mix(in srgb, var(--signal-cyan) 19%, transparent); border-radius: 50%; animation: brand-rotate 14s linear infinite; }
+.empty-signal-radar::after { inset: -12px; animation-direction: reverse; }
+.empty-signal-code { color: var(--signal-cyan) !important; font-family: var(--font-mono); font-size: 8px !important; letter-spacing: .16em; }
+.empty-signal h3 { margin-top: 7px; color: var(--page-text); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
+.empty-signal > p:last-of-type { max-width: 430px; margin-top: 5px; color: var(--muted-text); font-size: 12px; }
+.modal-shell { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
+.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 7, 10, .68); backdrop-filter: blur(12px); }
+.tech-modal { position: relative; width: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--signal-cyan) 24%, var(--card-border)); border-radius: 11px; background: var(--card-bg-solid); box-shadow: 0 30px 100px rgba(0,0,0,.4), 0 0 70px color-mix(in srgb, var(--signal-cyan) 8%, transparent); animation: modal-enter 180ms ease-out both; }
+.tech-modal::before { content: ""; position: absolute; left: 0; top: 0; width: 32%; height: 1px; background: linear-gradient(90deg, var(--signal-cyan), transparent); }
+.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--card-border); }
+.modal-kicker { display: block; margin-bottom: 2px; color: var(--signal-cyan); font-family: var(--font-mono); font-size: 7px; letter-spacing: .16em; }
+.modal-header h2 { color: var(--page-text); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
+.modal-close { display: grid; width: 32px; height: 32px; place-items: center; color: var(--muted-text); border: 1px solid var(--card-border); border-radius: 7px; }
+.modal-close:hover { color: var(--signal-cyan); border-color: color-mix(in srgb, var(--signal-cyan) 32%, var(--card-border)); background: var(--accent-bg); }
+.modal-content { max-height: min(82vh, 900px); overflow-y: auto; padding: 20px; }
+
+/* ─── Loading / Feedback ──────────────────────────────── */
+
+.loading-console { position: relative; display: flex; height: 100vh; align-items: center; justify-content: center; overflow: hidden; background: var(--page-bg-deep); }
+.loading-console::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(0deg, var(--grid-line) 1px, transparent 1px); background-size: 36px 36px; }
+.loading-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--muted-text); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; }
+.loading-ring { position: relative; width: 48px; height: 48px; border: 1px solid var(--card-border); border-radius: 50%; }
+.loading-ring::before { content: ""; position: absolute; inset: 5px; border: 2px solid transparent; border-top-color: var(--signal-cyan); border-right-color: color-mix(in srgb, var(--signal-cyan) 35%, transparent); border-radius: 50%; animation: brand-rotate .85s linear infinite; box-shadow: 0 0 18px color-mix(in srgb, var(--signal-cyan) 13%, transparent); }
+
+/* ─── Scrollbar ───────────────────────────────────────── */
+::-webkit-scrollbar { width: 7px; height: 7px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
+::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
+
+/* ─── Light mode utility remaps ───────────────────────── */
+.light .text-white, .light .text-gray-100 { color: var(--page-text); }
+.light .text-gray-200, .light .text-gray-300 { color: #31494f; }
+.light .text-gray-400 { color: var(--muted-text); }
+.light .text-gray-500, .light .text-gray-600 { color: var(--subtle-text); }
+.light .bg-gray-950, .light .bg-gray-900 { background-color: var(--card-bg-solid); }
+.light .bg-gray-900\/50, .light .bg-gray-900\/30, .light .bg-gray-900\/70 { background-color: var(--card-bg); }
+.light .bg-gray-800, .light .bg-gray-800\/30, .light .bg-gray-800\/50, .light .bg-gray-800\/20 { background-color: rgba(222, 232, 234, .72); }
+.light .bg-black\/60 { background-color: rgba(12, 30, 35, .52); }
+.light .border-gray-800, .light .border-gray-800\/50, .light .border-gray-700, .light .border-gray-600 { border-color: var(--card-border); }
+.light .text-blue-400 { color: var(--signal-cyan); }
+.light .bg-blue-600 { background-color: var(--signal-cyan); }
+.light .bg-blue-500\/10, .light .bg-blue-600\/10 { background-color: var(--accent-bg); }
+.light .text-emerald-400 { color: #558d00; }
+.light .text-amber-400 { color: #b46b00; }
+.light .text-purple-400 { color: var(--signal-violet); }
+.light .text-red-400 { color: #d73558; }
+.light .bg-red-600 { background-color: #d73558; }
+.light .bg-red-950\/20 { background-color: rgba(215,53,88,.07); }
+.light .border-red-700, .light .border-red-900\/30 { border-color: rgba(215,53,88,.3); }
+.light .bg-emerald-500\/10 { background-color: rgba(85,141,0,.08); }
+.light .bg-amber-500\/10 { background-color: rgba(180,107,0,.08); }
+.light .hover\:bg-gray-800:hover, .light .hover\:bg-gray-800\/70:hover, .light .hover\:bg-gray-800\/60:hover, .light .hover\:bg-gray-800\/40:hover, .light .hover\:bg-gray-800\/30:hover { background-color: var(--hover-bg); }
+.light .hover\:bg-gray-700:hover { background-color: rgba(204,219,222,.8); }
+.light .hover\:text-gray-200:hover { color: var(--page-text); }
+.light .placeholder-gray-500::placeholder, .light .placeholder-gray-600::placeholder { color: var(--subtle-text); }
+
+/* ─── Responsive ──────────────────────────────────────── */
+
+@media (max-width: 1100px) {
+  .app-canvas { padding-inline: 28px; }
+  .command-sidebar { width: 232px; min-width: 232px; }
 }
-.light .text-purple-400 {
-  color: #7c3aed;
+
+@media (max-width: 820px) {
+  body { overflow: hidden; }
+  .dashboard-command-header > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
+  .dashboard-command-header > div:last-child > .flex.items-center.gap-1.rounded-lg.border.p-0\.5 { order: 10; width: 100%; justify-content: center; }
+  .command-sidebar { position: fixed; left: 0; top: 0; width: min(86vw, 290px); min-width: 0; transform: translateX(-105%); box-shadow: 28px 0 80px rgba(0,0,0,.34); transition: transform 240ms cubic-bezier(.22,.8,.25,1); }
+  .command-sidebar.is-open { transform: translateX(0); }
+  .sidebar-close { display: grid; place-items: center; }
+  .sidebar-scrim { position: fixed; inset: 0; z-index: 20; display: block; border: 0; background: rgba(1,8,11,.58); backdrop-filter: blur(5px); }
+  .mobile-command-bar { display: flex; height: 58px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--card-border); background: color-mix(in srgb, var(--sidebar-bg) 88%, transparent); backdrop-filter: blur(18px); }
+  .command-icon-button { display: grid; width: 34px; height: 34px; place-items: center; color: var(--page-text); border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); }
+  .mobile-brand { display: flex; align-items: center; gap: 8px; color: var(--signal-cyan); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
+  .system-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-lime); box-shadow: 0 0 10px var(--signal-lime); animation: signal-pulse 2.2s ease-in-out infinite; }
+  .app-canvas { padding: 24px 18px 42px; }
+  .dashboard-command-header { align-items: flex-start !important; }
+  .dashboard-command-header > div:last-child { width: 100%; overflow-x: auto; padding-bottom: 4px; }
 }
-.light .text-red-400 {
-  color: #dc2626;
+
+@media (max-width: 560px) {
+  .app-canvas { padding-inline: 14px; }
+  .dashboard-page { gap: 14px; }
+  .dashboard-stat-card { min-height: 150px; }
+  .telemetry-chart { min-height: 340px; padding: 16px !important; }
+  .data-console > div:first-child { overflow-x: auto; }
+  .data-console > div:first-child button { white-space: nowrap; }
+  .modal-shell { padding: 10px; }
 }
-.light .bg-red-600 {
-  background-color: #dc2626;
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
 }
-.light .bg-red-950\/20 {
-  background-color: #fef2f2;
+
+/* ─── Motion ──────────────────────────────────────────── */
+@keyframes brand-rotate { to { transform: rotate(360deg); } }
+@keyframes orbit-drift { 50% { transform: rotate(180deg) scale(1.025); } to { transform: rotate(360deg); } }
+@keyframes ambient-scan { 0%, 18% { transform: translateY(-70vh); opacity: 0; } 30% { opacity: 1; } 76% { opacity: .8; } 100% { transform: translateY(125vh); opacity: 0; } }
+@keyframes signal-pulse { 0%,100% { opacity: .5; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.1); } }
+@keyframes canvas-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes modal-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
+
+/* ─── Rich dashboard analytics ────────────────────────── */
+.dashboard-analytics-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
+.analytics-overview-panel { grid-column: span 7; padding: 18px; border-radius: 10px; }
+.composition-panel { grid-column: span 5; padding: 18px; border-radius: 10px; }
+.distribution-panel, .activity-panel, .model-leaderboard-panel { grid-column: span 4; min-height: 294px; padding: 18px; border-radius: 10px; }
+.analytics-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--card-border); }
+.analytics-panel-header h3 { margin-top: 3px; color: var(--page-text); font-size: 14px; font-weight: 700; }
+.analytics-panel-kicker { color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .13em; }
+.analytics-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding-top: 14px; }
+.analytics-metric { display: flex; min-width: 0; align-items: flex-start; gap: 9px; padding: 11px 9px; border: 1px solid var(--card-border); border-radius: 8px; background: color-mix(in srgb, var(--card-bg-solid) 28%, transparent); }
+.analytics-metric-icon { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border: 1px solid; border-radius: 7px; }
+.analytics-metric-label { overflow: hidden; color: var(--muted-text); font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
+.analytics-metric-value { margin-top: 5px; overflow: hidden; color: var(--page-text); font-family: var(--font-display); font-size: 17px; font-weight: 750; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
+.analytics-metric-detail { margin-top: 3px; overflow: hidden; color: var(--subtle-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
+.composition-layout { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 13px; min-height: 199px; }
+.composition-chart { position: relative; width: 148px; height: 148px; }
+.composition-chart::before { content: ""; position: absolute; inset: 18px; border: 10px solid color-mix(in srgb, var(--card-border) 46%, transparent); border-radius: 50%; }
+.composition-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
+.composition-center strong { color: var(--page-text); font-family: var(--font-display); font-size: 18px; letter-spacing: -.04em; }
+.composition-center span { margin-top: 3px; color: var(--subtle-text); font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
+.composition-legend { display: flex; flex-direction: column; gap: 9px; }
+.composition-legend-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: var(--muted-text); font-size: 10px; }
+.composition-legend-row strong { color: var(--page-text); font-family: var(--font-mono); font-size: 9px; font-weight: 600; }
+.legend-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
+.composition-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; padding-top: 9px; color: var(--muted-text); border-top: 1px solid var(--card-border); font-family: var(--font-mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
+.composition-summary strong { color: var(--signal-lime); font-size: 10px; }
+.distribution-list, .leaderboard-list { display: flex; flex-direction: column; gap: 13px; padding-top: 15px; }
+.distribution-row { position: relative; min-width: 0; padding-bottom: 1px; }
+.distribution-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.distribution-name { display: block; overflow: hidden; color: var(--page-text); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
+.distribution-meta { display: block; margin-top: 2px; overflow: hidden; color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
+.distribution-value { flex: 0 0 auto; color: var(--muted-text); font-family: var(--font-mono); font-size: 9px; }
+.distribution-track { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--card-border) 70%, transparent); }
+.distribution-track span { display: block; height: 100%; min-width: 0; border-radius: inherit; box-shadow: 0 0 10px color-mix(in srgb, currentColor 30%, transparent); transition: width 400ms ease; }
+.distribution-percent { position: absolute; right: 0; bottom: -1px; color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; }
+.activity-chart { height: 202px; padding-top: 11px; }
+.activity-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding-top: 11px; border-top: 1px solid var(--card-border); color: var(--muted-text); font-family: var(--font-mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
+.activity-footer strong { color: var(--signal-cyan); font-size: 11px; }
+.leaderboard-row { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 75%, transparent); }
+.leaderboard-row:last-child { border-bottom: 0; }
+.leaderboard-rank { color: var(--signal-violet); font-family: var(--font-mono); font-size: 8px; }
+.leaderboard-name { overflow: hidden; color: var(--page-text); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
+.leaderboard-meta { margin-top: 2px; overflow: hidden; color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
+.leaderboard-value { flex: 0 0 auto; color: var(--page-text); font-family: var(--font-mono); font-size: 9px; }
+.analytics-no-data { padding: 30px 0; color: var(--subtle-text); font-size: 11px; text-align: center; }
+
+@media (max-width: 1080px) {
+  .analytics-overview-panel, .composition-panel { grid-column: span 12; }
+  .distribution-panel, .activity-panel, .model-leaderboard-panel { grid-column: span 4; }
 }
-.light .border-red-700,
-.light .border-red-900\/30 {
-  border-color: #fca5a5;
+@media (max-width: 820px) {
+  .analytics-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .distribution-panel, .activity-panel, .model-leaderboard-panel { grid-column: span 12; }
 }
-.light .bg-emerald-500\/10 {
-  background-color: #f0fdf4;
+@media (max-width: 560px) {
+  .analytics-metrics-grid { grid-template-columns: 1fr; }
+  .composition-layout { grid-template-columns: 132px minmax(0, 1fr); gap: 8px; }
+  .composition-chart { width: 132px; height: 132px; }
+  .analytics-overview-panel, .composition-panel, .distribution-panel, .activity-panel, .model-leaderboard-panel { padding: 14px; }
 }
-.light .text-emerald-400 {
-  color: #059669;
+
+/* ─── Memory workspace ────────────────────────────────── */
+.memory-command-header { position: relative; padding-bottom: 16px; border-bottom: 1px solid var(--card-border); }
+.memory-command-header::after, .providers-command-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 1px; background: linear-gradient(90deg, var(--signal-cyan), transparent); }
+.memory-readout-grid, .providers-readout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.memory-readout-card, .providers-readout-card { min-height: 92px; padding: 14px 16px; overflow: hidden; border-radius: 9px; }
+.memory-readout-card span, .providers-readout-card span { display: block; color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; letter-spacing: .13em; }
+.memory-readout-card strong, .providers-readout-card strong { display: block; margin-top: 9px; color: var(--page-text); font-family: var(--font-display); font-size: 21px; letter-spacing: -.04em; }
+.memory-readout-card small, .providers-readout-card small { display: block; margin-top: 3px; color: var(--muted-text); font-size: 10px; }
+.memory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border-radius: 9px; }
+.memory-file-jump { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 7px; }
+.memory-toolbar-label { margin-right: 3px; color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
+.memory-file-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; color: var(--muted-text); border: 1px solid var(--card-border); border-radius: 6px; font-family: var(--font-mono); font-size: 9px; text-decoration: none; }
+.memory-file-chip:hover { color: var(--signal-cyan); border-color: color-mix(in srgb, var(--signal-cyan) 35%, var(--card-border)); background: var(--accent-bg); }
+.memory-file-chip b { color: var(--page-text); font-size: 8px; }
+.memory-search { width: min(290px, 100%); flex: 0 0 auto; }
+.memory-sections { display: flex; flex-direction: column; gap: 14px; }
+.memory-file-panel { padding: 18px; overflow: hidden; border-radius: 10px; }
+.memory-file-header { position: relative; }
+.memory-file-header::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 70px; height: 1px; background: var(--signal-cyan); opacity: .65; }
+.memory-timeline { position: relative; }
+.memory-timeline::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 10px; width: 1px; background: linear-gradient(var(--signal-cyan), transparent); opacity: .35; }
+.memory-entry-card { margin-left: 16px; border-color: var(--card-border) !important; background: color-mix(in srgb, var(--card-bg-solid) 32%, transparent) !important; transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease; }
+.memory-entry-card::before { content: ""; position: absolute; left: -20px; top: 17px; width: 7px; height: 7px; border: 1px solid var(--signal-cyan); border-radius: 50%; background: var(--page-bg); box-shadow: 0 0 8px color-mix(in srgb, var(--signal-cyan) 70%, transparent); }
+.memory-entry-card:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--signal-cyan) 30%, var(--card-border)) !important; background: color-mix(in srgb, var(--signal-cyan) 4%, var(--card-bg-solid)) !important; }
+.memory-entry-actions { opacity: 1 !important; }
+.memory-entry-actions button { border: 1px solid transparent; }
+.memory-entry-actions button:hover { border-color: var(--card-border); background: var(--accent-bg); }
+.memory-empty-state { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; padding: 42px; text-align: center; border: 1px dashed var(--card-border); border-radius: 10px; background: radial-gradient(circle, color-mix(in srgb, var(--signal-cyan) 5%, transparent), transparent 55%); }
+.memory-empty-radar { display: grid; width: 72px; height: 72px; place-items: center; color: var(--signal-cyan); border: 1px solid color-mix(in srgb, var(--signal-cyan) 28%, transparent); border-radius: 50%; box-shadow: 0 0 0 10px color-mix(in srgb, var(--signal-cyan) 3%, transparent); }
+
+/* ─── Providers workspace ────────────────────────────── */
+.providers-command-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 16px; }
+.providers-header-signal { display: inline-flex; align-items: center; gap: 7px; padding-top: 9px; color: var(--signal-lime); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
+.providers-header-signal span { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-lime); box-shadow: 0 0 10px var(--signal-lime); }
+.providers-readout-card strong { font-size: 20px; }
+.providers-console { position: relative; border-radius: 10px !important; box-shadow: var(--panel-shadow); }
+.providers-console::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--signal-cyan), transparent 34%); opacity: .7; }
+.provider-rail { background: color-mix(in srgb, var(--card-bg-solid) 50%, transparent); }
+.provider-detail { background: linear-gradient(135deg, color-mix(in srgb, var(--signal-cyan) 2%, transparent), transparent 38%); }
+.provider-rail button.provider-list-item { border-color: transparent !important; }
+.provider-rail button:hover { color: var(--page-text) !important; border-color: color-mix(in srgb, var(--signal-cyan) 15%, transparent) !important; background: var(--hover-bg) !important; }
+.provider-rail button.provider-list-item.is-active { border-color: color-mix(in srgb, var(--signal-cyan) 42%, var(--card-border)) !important; background: var(--accent-bg) !important; box-shadow: inset 2px 0 var(--signal-cyan), 0 0 18px color-mix(in srgb, var(--signal-cyan) 7%, transparent); }
+.provider-detail > div:first-child { padding-bottom: 13px; border-bottom: 1px solid var(--card-border); }
+.provider-detail label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
+.provider-detail input, .provider-detail select { min-height: 38px; }
+.provider-detail > div:nth-of-type(1) + div { margin-top: 18px; }
+.provider-detail [class*="rounded-lg"][class*="border-gray-800"] { background: color-mix(in srgb, var(--card-bg-solid) 30%, transparent) !important; }
+.provider-detail [class*="bg-gray-900/70"] { background: color-mix(in srgb, var(--card-bg-solid) 38%, transparent) !important; }
+.provider-detail [class*="bg-gray-900/70"]:hover { border-color: color-mix(in srgb, var(--signal-cyan) 23%, var(--card-border)) !important; }
+
+@media (max-width: 820px) {
+  .memory-toolbar { align-items: stretch; flex-direction: column; }
+  .memory-search { width: 100%; }
+  .providers-command-header { flex-direction: column; gap: 5px; }
+  .providers-header-signal { padding-top: 0; }
+  .providers-console { flex-direction: column; overflow: visible; }
+  .provider-rail { width: 100% !important; border-right: 0 !important; border-bottom: 1px solid var(--card-border); }
+  .provider-rail > div { max-height: 250px; overflow-y: auto; }
+  .providers-console { min-height: 0; }
+  .provider-detail { padding: 18px !important; }
+  .provider-detail > * { min-width: 0; }
+  .provider-model-list { max-height: 52vh; overflow-y: auto; }
+  .provider-model-row { flex-wrap: wrap; }
+  .provider-model-row > .min-w-0 { flex: 1 1 180px; }
+  .provider-model-row > button, .provider-model-row > span { max-width: 100%; }
+
 }
-.light .bg-amber-500\/10 {
-  background-color: #fffbeb;
+@media (max-width: 560px) {
+  .memory-readout-grid, .providers-readout-grid { grid-template-columns: 1fr; }
+  .memory-file-panel { padding: 14px; }
+  .memory-entry-card { margin-left: 13px; }
 }
-.light .hover\:bg-gray-800,
-.light .hover\:bg-gray-800\/70,
-.light .hover\:bg-gray-800\/60,
-.light .hover\:bg-gray-800\/40,
-.light .hover\:bg-gray-800\/30 {
-  &:hover {
-    background-color: #e5e7eb;
-  }
+.provider-list-item::after { content: ""; width: 4px; height: 4px; margin-left: 2px; border-radius: 50%; background: var(--card-border); }
+.provider-list-item:hover::after, .provider-list-item.is-active::after { background: var(--signal-cyan); box-shadow: 0 0 8px var(--signal-cyan); }
+.provider-model-list { background: color-mix(in srgb, var(--card-bg-solid) 24%, transparent); }
+.provider-model-row { transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
+.provider-model-row:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--signal-cyan) 24%, var(--card-border)) !important; background: color-mix(in srgb, var(--signal-cyan) 5%, var(--card-bg-solid)) !important; }
+
+/* ─── Dashboard data source switcher ─────────────────── */
+.dashboard-source-strip { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 10px 12px; overflow: hidden; border-radius: 9px; }
+.dashboard-source-label { flex: 0 0 auto; color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
+.dashboard-source-options { display: flex; min-width: 0; flex: 1; align-items: center; gap: 5px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
+.dashboard-source-options::-webkit-scrollbar { display: none; }
+.dashboard-source-option { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 6px 9px; color: var(--muted-text); border: 1px solid transparent; border-radius: 6px; font-family: var(--font-mono); font-size: 9px; }
+.dashboard-source-option:hover { color: var(--page-text); background: var(--hover-bg); }
+.dashboard-source-option.is-active { color: var(--signal-cyan); border-color: color-mix(in srgb, var(--signal-cyan) 26%, transparent); background: var(--accent-bg); box-shadow: inset 0 -1px color-mix(in srgb, var(--signal-cyan) 50%, transparent); }
+.dashboard-source-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--card-border); }
+.dashboard-source-option.is-active .dashboard-source-dot { background: var(--signal-cyan); box-shadow: 0 0 8px var(--signal-cyan); }
+.dashboard-source-note { flex: 0 1 280px; color: var(--subtle-text); font-size: 9px; line-height: 1.45; }
+@media (max-width: 820px) {
+  .dashboard-source-strip { align-items: stretch; flex-direction: column; gap: 7px; }
+  .dashboard-source-note { flex-basis: auto; }
 }
-.light .hover\:bg-gray-700 {
-  &:hover {
-    background-color: #d1d5db;
-  }
-}
-.light .hover\:text-gray-200 {
-  &:hover {
-    color: #374151;
-  }
-}
-.light .placeholder-gray-500 {
-  &::placeholder {
-    color: #9ca3af;
-  }
+
+/* Keep UI zoom independent from the root rem/font-size preference. The
+   application canvas expands in layout space before it is visually scaled,
+   so reduced zoom reveals more of dense pages instead of clipping them. */
+:root { --ui-zoom: 1; }
+.app-shell { flex: 0 0 auto; }
+
+
+/* Compatibility controls use readable body text rather than compact field-label typography. */
+.provider-detail .provider-compat-label {
+  color: var(--page-text);
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.55;
+  text-transform: none;
+}
+.provider-detail .provider-compat-description {
+  color: var(--muted-text) !important;
+  font-family: var(--font-body);
+  font-size: 13px !important;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.55;
+  text-transform: none;
+}
+@media (max-width: 820px) {
+  .provider-detail .provider-compat-row { align-items: flex-start; }
+  .provider-detail .provider-compat-label { font-size: 13px; }
+  .provider-detail .provider-compat-description { display: block; margin-top: 3px; margin-left: 0 !important; }
 }
-.light input,
-.light select,
-.light textarea {
-  background-color: #ffffff;
-  border-color: #d1d5db;
-  color: #111827;
+
+
+/* ─── Official Usage Query ───────────────────────────── */
+.official-usage-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--card-border); }
+.official-usage-header h1 { margin-top: 3px; }
+.official-usage-header p { margin-top: 5px; color: var(--muted-text); font-size: 13px; }
+.official-usage-status { display: inline-flex; align-items: center; gap: 7px; padding-top: 9px; color: var(--signal-lime); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
+.official-usage-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-lime); box-shadow: 0 0 10px var(--signal-lime); }
+.official-usage-config, .official-usage-results { padding: 18px; border-radius: 10px; }
+.official-usage-section-head, .official-usage-result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--card-border); }
+.official-usage-section-head span, .official-usage-result-header span { color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; }
+.official-usage-section-head h2, .official-usage-result-header h2 { margin-top: 4px; color: var(--page-text); font-family: var(--font-display); font-size: 16px; font-weight: 700; }
+.official-usage-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .35fr); gap: 16px; padding-top: 18px; }
+.official-usage-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
+.official-usage-field-wide { grid-column: 1 / -1; }
+.official-usage-field > span { display: flex; align-items: center; gap: 7px; color: var(--muted-text); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
+.official-usage-field > span svg { width: 14px; height: 14px; color: var(--signal-cyan); }
+.official-usage-field input, .official-usage-field select, .official-usage-field textarea { width: 100%; min-height: 40px; padding: 9px 11px; color: var(--input-text); border: 1px solid var(--input-border); border-radius: 7px; outline: none; background: var(--input-bg); }
+.official-usage-field textarea { resize: vertical; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
+.official-usage-field small { color: var(--subtle-text); font-size: 10px; }
+.official-usage-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 17px; }
+.official-usage-primary, .official-usage-refresh { display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--signal-cyan) 40%, var(--card-border)); border-radius: 7px; }
+.official-usage-primary { padding: 10px 15px; color: #001014; background: linear-gradient(135deg, var(--signal-cyan-bright), var(--signal-cyan)); font-size: 12px; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,0.35); }
+.official-usage-primary:disabled { cursor: not-allowed; opacity: .45; }
+.official-usage-primary svg, .official-usage-refresh svg { width: 15px; height: 15px; }
+.official-usage-saved { display: inline-flex; align-items: center; gap: 5px; color: var(--signal-lime); font-size: 11px; }
+.official-usage-saved svg { width: 14px; height: 14px; }
+.official-usage-error { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; padding: 10px 12px; color: var(--signal-red); border: 1px solid color-mix(in srgb, var(--signal-red) 25%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--signal-red) 6%, transparent); font-size: 12px; }
+.official-usage-error svg { width: 15px; height: 15px; flex: 0 0 auto; }
+.official-usage-refresh { padding: 7px 10px; color: var(--page-text); background: var(--card-bg); font-size: 11px; border: 1px solid var(--card-border); }
+.official-usage-refresh:hover { color: var(--signal-cyan); background: var(--accent-bg); border-color: color-mix(in srgb, var(--signal-cyan) 40%, var(--card-border)); }
+.official-usage-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
+.official-usage-card { min-height: 112px; padding: 15px; border-radius: 8px; }
+.official-usage-card span { display: block; color: var(--subtle-text); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
+.official-usage-card strong { display: block; margin-top: 10px; color: var(--page-text); font-family: var(--font-display); font-size: 25px; letter-spacing: -.04em; }
+.official-usage-card small { color: var(--muted-text); font-size: 10px; }
+.official-usage-progress { margin-top: 12px; padding: 16px; border-radius: 8px; }
+.official-usage-progress-head, .official-usage-progress-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted-text); font-family: var(--font-mono); font-size: 10px; }
+.official-usage-progress-head strong { color: var(--signal-lime); font-size: 16px; }
+.official-usage-progress-track { height: 12px; margin: 12px 0 9px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--signal-lime) 22%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--card-border) 65%, transparent); }
+.official-usage-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--signal-lime), var(--signal-cyan)); box-shadow: 0 0 18px color-mix(in srgb, var(--signal-lime) 38%, transparent); transition: width 450ms ease; }
+.official-usage-loading, .official-usage-empty { display: flex; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted-text); text-align: center; }
+.official-usage-empty { padding: 30px; border-radius: 10px; }
+.official-usage-empty svg { width: 34px; height: 34px; color: var(--signal-cyan); }
+.official-usage-empty h2 { color: var(--page-text); font-size: 16px; font-weight: 700; }
+.official-usage-empty p { max-width: 440px; color: var(--muted-text); font-size: 12px; }
+@media (max-width: 820px) {
+  .official-usage-header { flex-direction: column; gap: 5px; }
+  .official-usage-form-grid { grid-template-columns: 1fr; }
+  .official-usage-field-wide { grid-column: auto; }
+  .official-usage-cards { grid-template-columns: 1fr; }
 }