/* Motyw agentic engineering: chłodny jasny papier, szmaragdowy akcent, ciemny panel z logiem przebiegu
   jak terminal agenta. Bez logo żadnego dostawcy. */
:root[data-theme="agentic"] {
  --bg: #F4F6F5; --bg-2: #E9EEEC; --fg: #0F1A17; --muted: #4f5d58; --border: #d3dcd8;
  --accent: #059669; --accent-fg: #fff; --accent-text: #047857; --accent-soft: rgba(5,150,105,.12);
  --radius: 12px;
  --shadow: 0 1px 2px rgba(10,40,30,.08), 0 10px 30px rgba(10,40,30,.08);
}
:root[data-theme="agentic"] .hero { background: radial-gradient(ellipse at 85% 15%, rgba(5,150,105,.16), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(15,26,23,.06), transparent 50%); }
:root[data-theme="agentic"] .hero-photo-cutout { background: radial-gradient(circle at 50% 35%, #bfe7d6 0%, #dff2ea 70%, transparent 71%); }
:root[data-theme="agentic"] .demo { color-scheme: dark; background: #0B1210; color: #DDE7E3; --muted: #94a59f; --border: #22302b; --bg-2: #111b18; --accent: #34d399; --accent-fg: #052e22; --fg: #DDE7E3; }
:root[data-theme="agentic"] .demo-root { background: #111b18; }
:root[data-theme="agentic"] .demo h2 { color: #fff; }

/* Log przebiegu: oś czasu z godziną po lewej, krok po prawej. */
.run-log { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.run-step { display: grid; grid-template-columns: 8.5rem 1fr; gap: .9rem; padding: .8rem .9rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: #0e1714; }
.run-step h4 { margin: 0 0 .25rem; font-size: .98rem; color: #fff; }
.run-step p { margin: 0; font-size: .9rem; line-height: 1.55; color: #c9d6d1; }
.run-t { font-family: var(--mono); font-size: .78rem; color: var(--accent); padding-top: .15rem; }
.run-gate { border-left-color: #f59e0b; }
.run-gate .run-t { color: #fbbf24; }
.run-ship { border-left-color: #a7f3d0; background: #0f2019; }
.run-new { animation: run-in .35s ease-out; }
@keyframes run-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.run-count { margin-left: auto; font-family: var(--mono); font-size: .8rem; }
.run-done { margin: 1rem 0 0; font-weight: 700; color: #a7f3d0; }
@media (max-width: 599px) {
  .run-step { grid-template-columns: 1fr; gap: .35rem; }
  .run-count { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .run-new { animation: none; } }