*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f0f4f8;
  color: #1e293b;
  min-height: 100vh;
}

header {
  background: #1e3a5f;
  color: #fff;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.logo { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px; }
.tagline { font-size: 0.9rem; opacity: 0.7; }

main { max-width: 900px; margin: 2rem auto; padding: 0 1rem; display: grid; gap: 1.5rem; }

.card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.card h2 { font-size: 1.1rem; margin-bottom: 1.2rem; color: #1e3a5f; }

.field-row { display: flex; align-items: center; margin-bottom: 0.75rem; gap: 1rem; }
.field-row label { width: 220px; font-size: 0.88rem; color: #475569; flex-shrink: 0; }
.field-row input, .field-row select {
  flex: 1; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 0.45rem 0.7rem; font-size: 0.9rem;
}
.toggle-row input { width: 20px; height: 20px; }

button {
  margin-top: 0.5rem; padding: 0.6rem 2rem;
  background: #3b82f6; color: #fff;
  border: none; border-radius: 6px;
  font-size: 0.95rem; cursor: pointer;
  transition: background 0.15s;
}
button:hover { background: #2563eb; }
button:disabled { background: #94a3b8; cursor: not-allowed; }

.result { margin-top: 1.2rem; padding: 1rem; border-radius: 8px; }
.result.delayed { background: #fee2e2; border: 1px solid #fca5a5; }
.result.on-time { background: #a7f3d0; border: 1px solid #6ee7b7; }
.result-label { font-size: 1.4rem; font-weight: 700; }
.result-meta { font-size: 0.82rem; color: #475569; margin-top: 0.3rem; }

.error { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px;
  padding: 0.8rem 1rem; margin-top: 1rem; font-size: 0.88rem; color: #92400e; }

.hidden { display: none !important; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.metric-tile { text-align: center; background: #f8fafc; border-radius: 8px; padding: 0.9rem 0.5rem; }
.metric-val { display: block; font-size: 1.5rem; font-weight: 700; color: #1e3a5f; }
.metric-lbl { font-size: 0.75rem; color: #64748b; display: block; margin-top: 0.2rem; }

canvas { display: block; width: 100%; max-width: 100%; border-radius: 6px; }

.search-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.search-row input { flex: 1; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0.45rem 0.7rem; }
.search-row button { margin: 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid #e2e8f0; color: #64748b; }
td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #f1f5f9; }
tr:last-child td { border-bottom: none; }
.label-delayed { color: #dc2626; font-weight: 600; }
.label-ontime { color: #059669; font-weight: 600; }
.status-ok { color: #059669; }
.status-error { color: #dc2626; }