/* Enterprise UI polish */
body { background: var(--bg); }
.app-shell { min-height: 100vh; }
.sidebar {
  width: 280px;
  background: linear-gradient(180deg, var(--nav) 0%, var(--nav-2) 100%);
}
.sidebar .nav-link {
  color: rgba(255,255,255,.78);
  border-radius: 12px;
  padding: .55rem .75rem;
}
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.14); }
.sidebar .section-title {
  color: rgba(255,255,255,.55);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 1rem;
}
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.card { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.table thead th { color: var(--muted); font-weight: 600; }
.badge-soft { background: rgba(217,45,32,.08); color: var(--brand); border: 1px solid rgba(217,45,32,.18); }
.kpi { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); }
.kpi .label { color: var(--muted); font-size: .8rem; }
.kpi .value { font-size: 1.35rem; font-weight: 800; }
.stepper { display:flex; gap:.5rem; flex-wrap:wrap; }
.stepper .step {
  display:flex; align-items:center; gap:.5rem;
  padding: .4rem .7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font-weight: 600; font-size: .9rem;
}
.stepper .step .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: #cbd5e1;
}
.stepper .step.active{ border-color: rgba(217,45,32,.25); color: var(--text); background: #fff; }
.stepper .step.active .dot{ background: var(--brand); }
.stepper .step.done{ border-color: rgba(16,185,129,.25); }
.stepper .step.done .dot{ background: #10b981; }
.form-control, .form-select { border-radius: 12px; }
.btn { border-radius: 12px; }


/* Live-control widgets */
.age-badge { border: 1px solid rgba(0,0,0,.08); }
.age-ok { background: rgba(25,135,84,.12); color: #146c43; }
.age-warn { background: rgba(255,193,7,.18); color: #b58100; }
.age-bad { background: rgba(220,53,69,.14); color: #b02a37; }

.heat-card {
  border-radius: 16px;
  padding: .85rem;
  border: 1px solid rgba(0,0,0,.06);
}
.heat-1 { background: rgba(13,110,253,.06); }
.heat-2 { background: rgba(13,110,253,.10); }
.heat-3 { background: rgba(13,110,253,.16); }
.heat-4 { background: rgba(13,110,253,.22); }
.heat-5 { background: rgba(13,110,253,.30); }