/* Reconix control surface: dense, calm, and predictable. */
:root {
  --rx-bg: #f6f8fb;
  --rx-surface: #ffffff;
  --rx-surface-soft: #f1f5f9;
  --rx-border: #dbe3ed;
  --rx-text: #172033;
  --rx-muted: #607087;
  --rx-primary: #1e40af;
  --rx-primary-hover: #1d4ed8;
  --rx-accent: #b45309;
  --rx-sidebar: #101b2d;
  --rx-sidebar-text: #cbd5e1;
  --rx-focus: #2563eb;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--rx-bg); color: var(--rx-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; }
a, button, select, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { cursor: pointer; }
:focus-visible { outline: 3px solid var(--rx-focus); outline-offset: 2px; }
[x-cloak] { display: none !important; }

.rx-skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .65rem .9rem; border-radius: 6px; background: #fff; color: #172033; box-shadow: 0 6px 18px rgba(15, 23, 42, .22); transition: top .18s ease; }
.rx-skip-link:focus { top: 1rem; }
.rx-sidebar { background: var(--rx-sidebar); color: var(--rx-sidebar-text); border-right: 1px solid rgba(255,255,255,.08); }
.rx-sidebar-brand { min-height: 4rem; display: flex; align-items: center; padding: 0 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.rx-sidebar-brand strong { display: block; color: #fff; font-size: 1rem; letter-spacing: -.02em; }
.rx-sidebar-brand small { display: block; margin-top: 2px; color: #94a3b8; font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.rx-brand-mark { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid rgba(147,197,253,.35); border-radius: 7px; background: #1e40af; color: #fff; font-size: 1.1rem; font-weight: 800; }
.rx-sidebar-label { margin: 0 0 .45rem; padding: 0 .55rem; color: #8fa1ba; font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-link { display: flex; min-height: 2.45rem; align-items: center; gap: .65rem; padding: .55rem .65rem; border: 1px solid transparent; border-radius: 6px; color: #cbd5e1; font-size: .875rem; font-weight: 600; transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link.active { border-color: rgba(147,197,253,.24); background: #1d3a72; color: #fff; }
.nav-icon { display: inline-flex; width: 1.2rem; height: 1.2rem; align-items: center; justify-content: center; color: #93c5fd; font-size: .95rem; font-weight: 800; }
.nav-link.active .nav-icon { color: #fff; }
.rx-sidebar-user { margin-top: auto; padding: .8rem; border-top: 1px solid rgba(255,255,255,.1); }
.rx-sidebar-user strong { color: #f8fafc; font-size: .78rem; }
.rx-sidebar-user small { color: #94a3b8; font-size: .68rem; }
.rx-sidebar-user a { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; flex: 1; border: 1px solid rgba(255,255,255,.13); border-radius: 5px; color: #cbd5e1; font-size: .7rem; transition: background-color .16s ease, color .16s ease; }
.rx-sidebar-user a:hover { background: rgba(255,255,255,.08); color: #fff; }
.rx-avatar { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; background: #2563eb; color: #fff; font-size: .82rem; font-weight: 800; }
.rx-header { min-height: 4rem; border-bottom: 1px solid var(--rx-border); background: rgba(255,255,255,.96); }
.rx-eyebrow { margin: 0 0 .1rem; color: #64748b; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rx-header h1 { margin: 0; color: var(--rx-text); font-size: 1.05rem; font-weight: 750; letter-spacing: -.02em; }
.rx-system-health { align-items: center; gap: .45rem; padding: .45rem .65rem; border: 1px solid var(--rx-border); border-radius: 6px; background: var(--rx-surface-soft); color: #475569; font-size: .7rem; font-weight: 700; }
.rx-health-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #dc2626; }
.rx-health-dot.ok { background: #059669; }
.rx-health-dot.bad { background: #dc2626; }
.rx-health-metric { padding-left: .4rem; border-left: 1px solid var(--rx-border); color: #64748b; font-weight: 600; }
.rx-role { align-items: center; min-height: 2rem; padding: 0 .6rem; border-radius: 5px; background: #e8eefc; color: #1e40af; font-size: .68rem; font-weight: 800; }
.rx-icon-button { display: inline-flex; min-width: 2.25rem; min-height: 2.25rem; align-items: center; justify-content: center; border: 1px solid var(--rx-border); border-radius: 6px; background: var(--rx-surface); color: #475569; font-size: .75rem; font-weight: 800; transition: border-color .16s ease, color .16s ease, background-color .16s ease; }
.rx-icon-button:hover { border-color: #93c5fd; background: #eff6ff; color: var(--rx-primary); }
.rx-page-shell { width: 100%; max-width: 1480px; margin: 0 auto; }
.rx-panel { border: 1px solid var(--rx-border); border-radius: 8px; background: var(--rx-surface); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.rx-panel-hover { transition: border-color .16s ease, box-shadow .16s ease; }
.rx-panel-hover:hover { border-color: #9fb8dc; box-shadow: 0 5px 16px rgba(15,23,42,.08); }
.rx-hero { border: 1px solid #1e3a70; border-radius: 8px; background: #13284b; }
.rx-stat-value { letter-spacing: -.04em; }
.rx-primary-button { border: 1px solid var(--rx-primary); background: var(--rx-primary); }
.rx-primary-button:hover { background: var(--rx-primary-hover); }
.rx-input { border: 1px solid var(--rx-border); background: var(--rx-surface); color: var(--rx-text); }
.rx-status { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.rx-status::before { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; content: ""; }
.rx-status.running { background: #e8f0ff; color: #1e40af; }
.rx-status.paused { background: #fff7ed; color: #9a3412; }
.rx-status.finished { background: #ecfdf5; color: #047857; }
.rx-table-action { display: inline-flex; min-width: 2.25rem; min-height: 2.25rem; align-items: center; justify-content: center; border: 1px solid var(--rx-border); border-radius: 6px; color: #475569; transition: background-color .16s ease, color .16s ease; }
.rx-table-action:hover { background: #eff6ff; color: var(--rx-primary); }
.rx-action-button { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .55rem; border: 1px solid var(--rx-border); border-radius: 8px; background: var(--rx-surface); color: #1e3a8a; font-size: .8rem; font-weight: 750; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.rx-action-button svg { width: 1.1rem; height: 1.1rem; color: #2563eb; }
.rx-action-button:hover { border-color: #93c5fd; background: #eff6ff; color: #1e40af; }
.rx-page-button { display: inline-flex; min-height: 2.25rem; align-items: center; padding: 0 .65rem; border: 1px solid var(--rx-border); border-radius: 6px; color: #475569; font-size: .75rem; font-weight: 700; }
.rx-page-button:hover { border-color: #93c5fd; background: #eff6ff; color: var(--rx-primary); }
.rx-browser-mark { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid currentColor; }
.rx-browser-mark svg { width: 1.15rem; height: 1.15rem; }
.rx-browser-blue { color: #2563eb; background: #eff6ff; }
.rx-browser-orange { color: #c2410c; background: #fff7ed; }
.rx-browser-indigo { color: #4f46e5; background: #eef2ff; }
.rx-browser-violet { color: #7c3aed; background: #f5f3ff; }
.rx-browser-teal { color: #0f766e; background: #f0fdfa; }
.rx-browser-rose { color: #be123c; background: #fff1f2; }
.rx-browser-cyan { color: #0e7490; background: #ecfeff; }
.rx-browser-sky { color: #0369a1; background: #f0f9ff; }
.rx-browser-emerald { color: #047857; background: #ecfdf5; }
.rx-browser-port { color: #64748b; font: 600 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.dark .rx-browser-mark { background: #1d3a72; }
.rx-dashboard-table { width: 100%; table-layout: fixed; }
.rx-dashboard-table th:nth-child(1), .rx-dashboard-table td:nth-child(1) { width: 39%; }
.rx-dashboard-table th:nth-child(2), .rx-dashboard-table td:nth-child(2) { width: 23%; }
.rx-dashboard-table th:nth-child(3), .rx-dashboard-table td:nth-child(3) { width: 30%; }
.rx-dashboard-table th:nth-child(4), .rx-dashboard-table td:nth-child(4) { width: 8%; }
.rx-auth-bg { min-height: 100vh; background: #0f1d33; }
.rx-auth-card { border: 1px solid #dbe3ed; border-radius: 8px !important; background: #fff; box-shadow: 0 8px 24px rgba(2,6,23,.18); }
.rx-auth-card input { min-height: 2.75rem; border: 1px solid var(--rx-border); border-radius: 6px !important; background: #fff; color: var(--rx-text); }
.rx-auth-card input:focus { border-color: #2563eb; outline: 3px solid rgba(37,99,235,.18); outline-offset: 0; }
.rx-auth-card button[type="submit"] { min-height: 2.75rem; border-radius: 6px !important; }
.flash-success, .flash-error, .flash-info { padding: .75rem 1rem; border: 1px solid; border-radius: 6px; font-size: .875rem; font-weight: 600; }
.flash-success { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.flash-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.flash-info { border-color: #bfdbfe; background: #eff6ff; color: #1e3a8a; }

.dark {
  --rx-bg: #0d1626;
  --rx-surface: #142238;
  --rx-surface-soft: #111d31;
  --rx-border: #2b3a50;
  --rx-text: #e2e8f0;
  --rx-muted: #94a3b8;
}
.dark body { background: #0d1626; color: #e2e8f0; }
.dark .rx-app,
.dark .rx-app main#main-content,
.dark .rx-app .rx-page-shell { background-color: var(--rx-bg) !important; color: var(--rx-text); }
.dark .rx-header { border-color: #243247; background: #111d31; }
.dark .rx-header h1 { color: #f8fafc; }
.dark .rx-eyebrow, .dark .rx-system-health { color: #94a3b8; }
.dark .rx-system-health, .dark .rx-icon-button, .dark .rx-panel, .dark .rx-auth-card { border-color: #2b3a50; background: #142238; }
.dark .rx-icon-button { color: #cbd5e1; }
.dark .rx-icon-button:hover { background: #1d3a72; color: #fff; }
.dark .rx-panel, .dark .rx-auth-card { color: #e2e8f0; }
.dark .flash-success { border-color: #166534; background: #052e1b; color: #a7f3d0; }
.dark .flash-error { border-color: #7f1d1d; background: #3f1010; color: #fecaca; }
.dark .flash-info { border-color: #1e3a8a; background: #12234a; color: #bfdbfe; }
.dark .rx-role { background: #1d3a72; color: #bfdbfe; }
.dark .rx-status.running { background: #1d3a72; color: #bfdbfe; }
.dark .rx-status.paused { background: #4a2411; color: #fed7aa; }
.dark .rx-status.finished { background: #063b2a; color: #a7f3d0; }
.dark .rx-table-action, .dark .rx-action-button { border-color: #2b3a50; background: #142238; color: #dbeafe; }
.dark .rx-table-action:hover, .dark .rx-action-button:hover { background: #1d3a72; color: #fff; }
.dark .rx-page-button { border-color: #2b3a50; color: #cbd5e1; }
.dark .rx-page-button:hover { background: #1d3a72; color: #fff; }

@media (max-width: 767px) {
  .rx-header { min-height: 3.75rem; }
  .rx-header h1 { font-size: .98rem; }
}
@media (max-width: 560px) {
  .rx-dashboard-table th, .rx-dashboard-table td { padding-left: .7rem; padding-right: .7rem; }
  .rx-dashboard-table th:nth-child(1), .rx-dashboard-table td:nth-child(1) { width: 61%; }
  .rx-dashboard-table th:nth-child(2), .rx-dashboard-table td:nth-child(2) { width: 27%; }
  .rx-dashboard-table th:nth-child(4), .rx-dashboard-table td:nth-child(4) { width: 12%; }
  .rx-dashboard-table .rx-progress-column { display: none; }
  .rx-dashboard-table .rx-table-action { min-width: 2rem; min-height: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Shared surface rules keep legacy screens visually consistent with the
   operations shell while preserving their existing markup and behavior. */
.rx-app main#main-content { background: var(--rx-bg); }
.rx-app main#main-content .rounded-2xl,
.rx-app main#main-content .rounded-3xl { border-radius: 8px !important; }
.rx-app main#main-content .shadow-sm,
.rx-app main#main-content .shadow-lg,
.rx-app main#main-content .shadow-xl,
.rx-app main#main-content .shadow-2xl { box-shadow: 0 1px 2px rgba(15,23,42,.05) !important; }
.rx-app main#main-content .bg-white { background-color: var(--rx-surface) !important; }
.rx-app main#main-content .bg-slate-50 { background-color: var(--rx-surface-soft) !important; }
.rx-app main#main-content [class*="border-slate-100"],
.rx-app main#main-content [class*="border-slate-200"] { border-color: var(--rx-border) !important; }
.rx-app main#main-content input,
.rx-app main#main-content select,
.rx-app main#main-content textarea { border-radius: 6px; }
.rx-app main#main-content button,
.rx-app main#main-content a[class*="bg-blue-"],
.rx-app main#main-content a[class*="bg-sky-"],
.rx-app main#main-content a[class*="bg-cyan-"] { transition: filter .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; }
.rx-app main#main-content button:hover,
.rx-app main#main-content a[class*="bg-blue-"]:hover,
.rx-app main#main-content a[class*="bg-sky-"]:hover,
.rx-app main#main-content a[class*="bg-cyan-"]:hover { filter: brightness(1.04); }
.rx-app main#main-content table thead { letter-spacing: .06em; }
.rx-app main#main-content table th { font-size: .68rem; }
.rx-app main#main-content table td { vertical-align: middle; }
.rx-app .nav-icon svg { width: 1.1rem; height: 1.1rem; }
.rx-app .nav-link { touch-action: manipulation; }

.dark .rx-app main#main-content .bg-white { background-color: #142238 !important; }
.dark .rx-app main#main-content .bg-slate-50 { background-color: #111d31 !important; }
.dark .rx-app main#main-content [class*="border-slate-100"],
.dark .rx-app main#main-content [class*="border-slate-200"] { border-color: #2b3a50 !important; }

/* Task detail uses a single light operational canvas. The terminal and the
   public dossier keep their intentionally dark, isolated surfaces. */
.rx-task-detail .bg-slate-950,
.rx-task-detail .bg-slate-900,
.rx-task-detail [class*="bg-slate-950/"],
.rx-task-detail [class*="bg-slate-900/"] { background-color: var(--rx-surface) !important; }
.rx-task-detail [class*="bg-cyan-950"],
.rx-task-detail [class*="bg-indigo-950"],
.rx-task-detail [class*="bg-violet-950"] { background-color: #eef6ff !important; }
.rx-task-detail [class*="border-slate-7"],
.rx-task-detail [class*="border-indigo-8"],
.rx-task-detail [class*="border-violet-8"],
.rx-task-detail [class*="border-cyan-8"] { border-color: var(--rx-border) !important; }
.rx-task-detail .text-slate-100,
.rx-task-detail .text-slate-200,
.rx-task-detail .text-slate-300 { color: #334155 !important; }
.rx-task-detail .text-cyan-200,
.rx-task-detail .text-indigo-200,
.rx-task-detail .text-violet-200 { color: #1e40af !important; }

/* The internal company view follows the same light shell as the task list. */
.rx-company-dossier .dossier-hero,
.rx-company-dossier .dossier-panel { background: var(--rx-surface) !important; border-color: var(--rx-border) !important; color: var(--rx-text); box-shadow: 0 1px 2px rgba(15,23,42,.05) !important; }
.rx-company-dossier .dossier-hero { background-image: none !important; }
.rx-company-dossier .dossier-hero::after { display: none; }
.rx-company-dossier .dossier-hero h2,
.rx-company-dossier .dossier-hero .text-white,
.rx-company-dossier .dossier-panel .text-white { color: var(--rx-text) !important; }
.rx-company-dossier .dossier-hero .text-slate-400,
.rx-company-dossier .dossier-panel .text-slate-400,
.rx-company-dossier .dossier-panel .text-slate-500 { color: var(--rx-muted) !important; }
.rx-company-dossier .dossier-tabs { background: var(--rx-surface-soft) !important; border-color: var(--rx-border) !important; backdrop-filter: none; }
.rx-company-dossier .dossier-tab { border-radius: 6px; color: #475569; }
.rx-company-dossier .dossier-tab:hover { background: #e7eef8; color: var(--rx-text); }
.rx-company-dossier .dossier-tab.active { background: var(--rx-primary); border-color: var(--rx-primary); color: #fff; box-shadow: none; }
.rx-company-dossier [class*="bg-slate-950"],
.rx-company-dossier [class*="bg-slate-900"] { background-color: var(--rx-surface-soft) !important; }
.rx-company-dossier [class*="border-slate-7"] { border-color: var(--rx-border) !important; }
.rx-company-dossier .dossier-research { background: var(--rx-surface) !important; }
.rx-company-dossier .dossier-research section { box-shadow: none; }

.dark .rx-task-detail .bg-slate-950,
.dark .rx-task-detail .bg-slate-900,
.dark .rx-task-detail [class*="bg-slate-950/"],
.dark .rx-task-detail [class*="bg-slate-900/"] { background-color: #142238 !important; }
.dark .rx-task-detail [class*="bg-cyan-950"],
.dark .rx-task-detail [class*="bg-indigo-950"],
.dark .rx-task-detail [class*="bg-violet-950"] { background-color: #1d3a72 !important; }
.dark .rx-task-detail .text-slate-100,
.dark .rx-task-detail .text-slate-200,
.dark .rx-task-detail .text-slate-300 { color: #e2e8f0 !important; }
.dark .rx-task-detail .text-slate-400,
.dark .rx-task-detail .text-slate-500,
.dark .rx-task-detail .text-slate-600 { color: #94a3b8 !important; }
.dark .rx-task-detail .text-slate-700,
.dark .rx-task-detail .text-slate-800,
.dark .rx-task-detail .text-slate-900 { color: #e2e8f0 !important; }
.dark .rx-task-detail [class*="bg-emerald-50"],
.dark .rx-task-detail [class*="bg-orange-50"],
.dark .rx-task-detail [class*="bg-sky-50"],
.dark .rx-task-detail [class*="bg-indigo-50"],
.dark .rx-task-detail [class*="bg-slate-50"] { background-color: #111d31 !important; }
.dark .rx-company-dossier .dossier-hero,
.dark .rx-company-dossier .dossier-panel { background: #142238 !important; color: #e2e8f0; }
.dark .rx-company-dossier .dossier-tabs { background: #111d31 !important; }
.dark .rx-company-dossier [class*="bg-slate-950"],
.dark .rx-company-dossier [class*="bg-slate-900"] { background-color: #111d31 !important; }
.dark .rx-company-dossier .dossier-tab { color: #cbd5e1; }
.dark .rx-company-dossier .dossier-tab:hover { background: #1d3a72; color: #fff; }

/* Task workflow and panel status: one semantic vocabulary in both themes. */
.rx-task-workflow { border: 1px solid var(--rx-border); border-radius: 8px; background: var(--rx-surface); padding: 1.25rem; }
.rx-task-workflow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rx-border); }
.rx-task-workflow h2, .rx-status-hero h2 { margin: 0; color: var(--rx-text); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.rx-task-workflow-head p:not(.rx-eyebrow) { margin: .3rem 0 0; color: var(--rx-muted); font-size: .78rem; }
.rx-current-stage { min-width: 10rem; border: 1px solid #f2c46d; border-radius: 7px; background: #fff8e7; padding: .55rem .7rem; }
.rx-current-stage span { display: block; color: #9a5b05; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.rx-current-stage strong { display: block; margin-top: .15rem; color: #713f12; font-size: .8rem; }
.rx-workflow-list { display: grid; gap: .55rem; margin-top: 1rem; }
.rx-workflow-step { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; align-items: center; gap: .75rem; border: 1px solid var(--rx-border); border-radius: 7px; padding: .72rem .8rem; background: var(--rx-surface-soft); }
.rx-workflow-step.is-current { border-color: #e4a72c; box-shadow: 0 0 0 2px rgba(228,167,44,.16); }
.rx-workflow-marker { display: inline-flex; width: 1.8rem; height: 1.8rem; align-items: center; justify-content: center; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: .72rem; font-weight: 800; }
.rx-workflow-step.state-done .rx-workflow-marker { background: #c9f3df; color: #087443; }
.rx-workflow-step.state-running .rx-workflow-marker { background: #f8d88a; color: #7a4b00; }
.rx-workflow-step.state-paused .rx-workflow-marker { background: #fed7aa; color: #9a3412; }
.rx-workflow-step.state-error .rx-workflow-marker { background: #fecaca; color: #991b1b; }
.rx-workflow-title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.rx-workflow-title h3 { margin: 0; color: var(--rx-text); font-size: .84rem; font-weight: 800; }
.rx-workflow-copy p { margin: .12rem 0 0; color: var(--rx-muted); font-size: .72rem; }
.rx-workflow-copy small { display: block; margin-top: .2rem; color: var(--rx-muted); font-size: .68rem; }
.rx-step-state { border-radius: 999px; padding: .15rem .4rem; background: #e2e8f0; color: #475569; font-size: .62rem; font-weight: 800; }
.state-done .rx-step-state { background: #d8f7e7; color: #087443; }.state-running .rx-step-state,.state-ready .rx-step-state { background: #fff0bf; color: #8a5200; }.state-paused .rx-step-state { background: #ffedd5; color: #9a3412; }.state-error .rx-step-state { background: #fee2e2; color: #b91c1c; }
.rx-step-action { min-height: 2rem; border: 1px solid #d89b20; border-radius: 6px; background: #fff8e7; color: #7a4b00; padding: 0 .65rem; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.rx-step-action:hover { background: #fef0c2; }

.rx-status-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; border: 1px solid #34445d; border-radius: 8px; background: #1a2638; color: #eef4fb; padding: 1.25rem 1.4rem; }
.rx-status-hero h2 { color: #f8fafc; font-size: 1.35rem; }.rx-status-hero .rx-eyebrow { color: #aab8cb; }.rx-status-hero p:not(.rx-eyebrow) { max-width: 45rem; margin: .35rem 0 0; color: #c2cedd; font-size: .82rem; }
.rx-status-hero-metrics { display: flex; flex: 0 0 auto; gap: 1.2rem; }.rx-status-hero-metrics div { min-width: 6rem; }.rx-status-hero-metrics strong { display: block; color: #f8d88a; font-size: 1.35rem; }.rx-status-hero-metrics span { color: #b5c2d2; font-size: .68rem; }
.rx-pipeline-map { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .5rem; }.rx-pipeline-node { position: relative; display: flex; min-height: 5.3rem; align-items: flex-start; gap: .55rem; border: 1px solid var(--rx-border); border-radius: 7px; background: var(--rx-surface-soft); padding: .65rem; }.rx-pipeline-node > span { display: inline-flex; width: 1.45rem; height: 1.45rem; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; background: #e8c36c; color: #684400; font-size: .62rem; font-weight: 900; }.rx-pipeline-node strong { display: block; color: var(--rx-text); font-size: .72rem; line-height: 1.25; }.rx-pipeline-node small { display: block; margin-top: .25rem; color: var(--rx-muted); font-size: .64rem; line-height: 1.3; }.rx-pipeline-node i { position: absolute; right: -.55rem; top: 1.8rem; z-index: 1; color: #b88727; font-style: normal; font-weight: 800; }
.rx-agent-card { display: flex; gap: .7rem; border: 1px solid var(--rx-border); border-radius: 7px; background: var(--rx-surface-soft); padding: .75rem; }.rx-agent-index { display: inline-flex; width: 1.7rem; height: 1.7rem; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 5px; background: #d8eee9; color: #17675c; font-size: .7rem; font-weight: 900; }.rx-agent-card h3 { margin: 0; color: var(--rx-text); font-size: .8rem; font-weight: 800; }.rx-agent-card p { margin: .2rem 0; color: var(--rx-muted); font-size: .7rem; line-height: 1.35; }.rx-agent-card small { color: var(--rx-muted); font-size: .62rem; }
.rx-summary-counts { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }.rx-summary-counts div { border: 1px solid var(--rx-border); border-radius: 6px; padding: .55rem; }.rx-summary-counts strong { display: block; color: var(--rx-text); font-size: 1.2rem; }.rx-summary-counts strong.is-online { color: #079669; }.rx-summary-counts strong.is-offline { color: #c2413d; }.rx-summary-counts span { color: var(--rx-muted); font-size: .63rem; }.rx-browser-mini-list { display: grid; gap: .28rem; margin-bottom: 0; padding: 0; list-style: none; }.rx-browser-mini-list li { display: grid; grid-template-columns: .55rem 1fr auto auto; align-items: center; gap: .45rem; color: var(--rx-text); font-size: .7rem; }.rx-browser-mini-list code { color: var(--rx-muted); font-size: .62rem; }.rx-browser-mini-list em { color: var(--rx-muted); font-size: .62rem; font-style: normal; }.rx-browser-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #94a3b8; }.rx-browser-dot.online { background: #10b981; }.rx-browser-dot.offline { background: #ef4444; }.rx-browser-dot.degraded { background: #f59e0b; }
.rx-task-health-grid { display: flex; flex-wrap: wrap; gap: .55rem; }.rx-task-health-grid div { min-width: 8rem; border: 1px solid var(--rx-border); border-radius: 6px; padding: .55rem .7rem; }.rx-task-health-grid strong { display: block; color: var(--rx-text); font-size: 1.1rem; }.rx-task-health-grid span { color: var(--rx-muted); font-size: .66rem; }.rx-muted-note { color: var(--rx-muted); font-size: .7rem; }

/* The live task card uses the same surface tokens; legacy utility classes are
   intentionally neutralized here so no white-on-white or blue-on-blue text remains. */
.rx-task-live-card { background: var(--rx-surface) !important; color: var(--rx-text); }
.rx-task-live-card .text-white { color: var(--rx-text) !important; }.rx-task-live-card .text-sky-50,.rx-task-live-card .text-sky-100,.rx-task-live-card .text-sky-200,.rx-task-live-card .text-sky-300 { color: var(--rx-muted) !important; }.rx-task-live-card [class*="bg-white/"] { background: var(--rx-surface-soft) !important; }.rx-task-live-card [class*="border-white/"] { border-color: var(--rx-border) !important; }.rx-task-live-card .bg-white { background: var(--rx-surface-soft) !important; color: var(--rx-text) !important; }.rx-task-live-card .text-sky-700 { color: #8a5200 !important; }.rx-task-live-card .border-t { border-color: var(--rx-border) !important; }.rx-task-live-card .rx-domain-pipeline { background: var(--rx-surface-soft); }

@media (max-width: 767px) {
  .rx-app main#main-content { padding-top: 1rem; }
  .rx-app main#main-content .overflow-x-auto { scrollbar-width: thin; }
  .rx-status-hero { align-items: flex-start; flex-direction: column; }.rx-status-hero-metrics { width: 100%; }.rx-pipeline-map { grid-template-columns: 1fr 1fr; }.rx-pipeline-node i { display: none; }.rx-task-workflow-head { flex-direction: column; }.rx-current-stage { width: 100%; }.rx-workflow-step { grid-template-columns: 1.8rem minmax(0,1fr); }.rx-workflow-step form { grid-column: 2; }.rx-step-action { width: 100%; }
}