Panelowy jezyk strony: statusy, paski tempa, os przestojow, fonty, wersjonowanie assetow

public/assets/css/site.css

@@ -542,6 +542,94 @@ button.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
   .nav-scrim[hidden] { display: none; }
 }
 
+/* Instrumenty z panelu Sensory (podgląd demonstracyjny w treści CMS) */
+.kpi-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  margin-top: 1.4rem;
+}
+.kpi-card {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 1.1rem 1.2rem;
+  box-shadow: 0 10px 24px rgba(16, 44, 50, 0.08);
+}
+.kpi-card b {
+  display: block;
+  font-family: var(--font-display);
+  font-variant-numeric: tabular-nums;
+  font-size: 1.9rem;
+  line-height: 1.1;
+  color: var(--teal);
+}
+.kpi-card span { font-size: 0.92rem; color: var(--ink-soft); }
+.machine-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.35rem 1rem;
+  align-items: center;
+  padding: 0.85rem 0;
+  border-top: 1px solid var(--line);
+}
+.machine-row:first-of-type { border-top: 0; }
+.machine-row b { color: var(--ink); }
+.machine-row .sub { display: block; color: var(--ink-soft); font-size: 0.88rem; font-weight: 400; }
+.pill {
+  display: inline-block;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  padding: 0.3rem 0.75rem;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.pill--ok { background: #ddf0c8; color: #2c4a00; }
+.pill--bad { background: #fbe0d6; color: #8f2b16; }
+.pill--idle { background: #f4e9c8; color: #6b4e00; }
+.bar {
+  height: 0.65rem;
+  background: #dde5dd;
+  border-radius: 999px;
+  overflow: hidden;
+  grid-column: 1 / -1;
+}
+.bar > span { display: block; height: 100%; border-radius: 999px; }
+.bar > span.good { background: #3f9e4d; }
+.bar > span.bad { background: #d95f4b; }
+.stripes {
+  display: flex;
+  height: 15px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: #dde5dd;
+  margin-top: 0.5rem;
+}
+.stripes i { display: block; height: 100%; }
+.stripes .w { background: #3f9e4d; flex: 5; }
+.stripes .s { background: #d9a441; flex: 2; }
+.stripes .p { background: #d95f4b; flex: 3; }
+.timeline-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 1.2rem;
+  font-size: 0.88rem;
+  color: var(--ink-soft);
+  margin-top: 0.8rem;
+}
+.timeline-legend i {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 3px;
+  margin-right: 0.35rem;
+  vertical-align: baseline;
+}
+@media (max-width: 900px) {
+  .kpi-row { grid-template-columns: repeat(2, 1fr); }
+}
+
 @media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   *, *::before, *::after {