:root{
  --soft:#f6f8fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#2563eb;
  --brand2:#22c55e;
}
.bg-soft{ background: var(--soft); color: var(--text); }
.brand-dot{
  width:12px;height:12px;border-radius:50%;
  background: linear-gradient(135deg,var(--brand),#60a5fa);
  display:inline-block;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.card{
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
  border-radius: 16px;
}
.badge-soft{
  background: rgba(37,99,235,.12);
  color: var(--brand);
  border: 1px solid rgba(37,99,235,.18);
}
.badge-ok{
  background: rgba(34,197,94,.14);
  color: #15803d;
  border: 1px solid rgba(34,197,94,.22);
}
.badge-off{
  background: rgba(239,68,68,.12);
  color: #b91c1c;
  border: 1px solid rgba(239,68,68,.18);
}
.table>:not(caption)>*>*{ vertical-align: middle; }
.form-control, .form-select{
  border-radius: 12px;
}
.btn{ border-radius: 12px; }
a{ text-decoration: none; }
.kpi{
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 30px rgba(15,23,42,.04);
}
.kpi .label{ color: var(--muted); font-size:.85rem; }
.kpi .value{ font-size:1.3rem; font-weight:700; }