/* TaskPyro 2.3.9 palette, verified against its deployed light/dark tokens.
   Keep the independent UI and brand; match the source's slate surfaces and
   blue/green/purple/orange monitoring accents. */
:root {
  --bg: oklch(100% 0 0);
  --panel: oklch(100% 0 0);
  --text: oklch(12.9% .042 264.695);
  --muted: oklch(55.4% .046 257.417);
  --line: oklch(92.9% .013 255.508);
  --hover: oklch(96.8% .007 247.896);
  --soft: #f8fafc;
  --primary: oklch(20.8% .042 265.755);
  --inverse: oklch(98.4% .003 247.858);
  --brand: #336eb8;
  --blue: #2563eb;
  --green: #16a34a;
  --purple: #9333ea;
  --orange: #ea580c;
  color: var(--text);
  background: var(--bg);
}
body.dark {
  --bg: oklch(12.9% .042 264.695);
  --panel: oklch(14% .04 259.21);
  --text: oklch(98.4% .003 247.858);
  --muted: oklch(70.4% .04 256.788);
  --line: oklch(100% 0 0 / .1);
  --hover: oklch(27.9% .041 260.031);
  --soft: oklch(20.8% .042 265.755);
  --primary: oklch(92.9% .013 255.508);
  --inverse: oklch(20.8% .042 265.755);
  --blue: #60a5fa;
  --green: #4ade80;
  --purple: #c084fc;
  --orange: #fb923c;
}
.brand-mark { background: var(--brand); }
.nav-link { color: var(--text); }
.nav-link.active { background: var(--hover); }
.nav-link.active:before { background: var(--brand); }
button:focus-visible, a:focus-visible, input:focus, textarea:focus, select:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px #94a3b830;
}
.metrics-grid .metric-card { background: var(--soft); }
.metric-card:nth-child(1) .metric-value,.metric-card:nth-child(1) .metric-top .icon { color: var(--blue); }
.metric-card:nth-child(2) .metric-value,.metric-card:nth-child(2) .metric-top .icon { color: var(--green); }
.metric-card:nth-child(3) .metric-value,.metric-card:nth-child(3) .metric-top .icon { color: var(--purple); }
.metric-card:nth-child(4) .metric-value,.metric-card:nth-child(4) .metric-top .icon { color: var(--orange); }
.chart-bar { background: var(--green); }
.chart-bar.secondary { background: #ef4444; }
.chart-legend span:first-child:before { background: var(--green); }
.chart-legend span:last-child:before { background: #ef4444; }
.resource-row:nth-child(1) .bar-fill { background: var(--blue); }
.resource-row:nth-child(2) .bar-fill { background: var(--purple); }
.resource-row:nth-child(3) .bar-fill { background: var(--orange); }
.cell-symbol,.activity-icon { color: var(--blue); background: color-mix(in srgb,var(--blue) 9%,var(--panel)); }
.calendar-day.today { border-color: var(--blue); color: var(--blue); }
.workflow-node.selected { border-color: var(--blue); box-shadow: 0 0 0 3px #3b82f61c; }
.crawler-bridge-banner { margin: 0 0 20px; display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; border: 1px solid color-mix(in srgb,var(--blue) 20%,var(--line)); border-radius: 9px; background: color-mix(in srgb,var(--blue) 4%,var(--panel)); }
.crawler-bridge-banner>.icon { color: var(--blue); margin-top: 2px; }
.crawler-bridge-banner p { margin: 5px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.crawler-bridge-banner .btn { margin-left: auto; }
.crawler-cycle { display:inline-flex; gap:5px; align-items:center; font-size:11px; color:var(--blue); border:1px solid color-mix(in srgb,var(--blue) 18%,var(--line)); border-radius:4px; padding:2px 6px; margin:5px 0; }
.workflow-node .node-description { overflow-wrap:anywhere; }
[data-task-id]>td:nth-child(3) { min-width:220px;max-width:340px; }
[data-task-id]>td:nth-child(3)>.text-mono { display:block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
[data-task-id] .cell-main { min-width:180px;max-width:290px; }
[data-task-id] .cell-main small { max-width:260px; }
.crawler-cycle-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 22px; }
.crawler-cycle-card { padding:17px;border:1px solid var(--line);border-radius:10px;background:var(--panel); }
.cycle-heading { display:flex;align-items:center;gap:7px;color:var(--blue);font-size:12px; }
.cycle-heading .tag { margin-left:auto;font-size:10px; }
.crawler-cycle-card h3 { margin:16px 0 9px;font-size:14px; }
.crawler-cycle-card>strong { font-size:14px;color:var(--blue); }
.crawler-cycle-card p { margin:9px 0 15px;font-size:11px;color:var(--muted);line-height:1.6; }
.cycle-1 .cycle-heading,.cycle-1>strong { color:var(--green); }
.cycle-2 .cycle-heading,.cycle-2>strong { color:var(--purple); }
.cycle-3 .cycle-heading,.cycle-3>strong { color:var(--orange); }
@media(max-width:1250px){.crawler-cycle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.crawler-cycle-grid{grid-template-columns:1fr}.crawler-bridge-banner{flex-wrap:wrap}}