/* =========================================================================
   Protocol Observatory — UI/UX uplift (CSS-only, scoped to .obs-dashboard)
   Brings the Live Trace Explorer design language (glass + indigo→pink accents
   + motion) to the existing lab shell. No structure/JS changes; fully
   reversible by removing the <link>. 2026-06-10
   ========================================================================= */

/* ---- Tab bar → frosted pill rail ---- */
.obs-dashboard .obs-tabs {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,0,113,.18);
  border-radius: 14px;
  padding: 7px;
  gap: 5px;
  box-shadow: 0 10px 32px -14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04);
}
.obs-dashboard .obs-tab {
  border-radius: 9px;
  padding: 9px 15px;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.obs-dashboard .obs-tab.active {
  background: linear-gradient(120deg, #ff0071, #ec4899);
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(236,72,153,.5), inset 0 0 0 1px rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.obs-dashboard .obs-tab:hover:not(.active) {
  background: rgba(255,0,113,.14);
  color: #fff;
  transform: translateY(-1px);
}

/* ---- Cards → soft glass with hover accent ---- */
.obs-dashboard .obs-card {
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.6));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(228,228,233,.9);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 36px -20px rgba(0,0,0,.7);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.obs-dashboard .obs-card:hover {
  border-color: rgba(255,0,113,.32);
  box-shadow: 0 16px 40px -22px rgba(255,0,113,.4);
}

/* ---- KPI tiles → lift on hover, thicker accent rail ---- */
.obs-dashboard .obs-kpi {
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.obs-dashboard .obs-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(255,0,113,.4);
  box-shadow: 0 14px 30px -18px rgba(255,0,113,.55);
}
.obs-dashboard .obs-kpi::before { width: 4px; border-radius: 4px 0 0 4px; }

/* ---- Buttons → gradient + motion ---- */
.obs-dashboard .obs-btn {
  border-radius: 9px;
  padding: 9px 15px;
  background: linear-gradient(120deg, #ff0071, #7c5cff);
  box-shadow: 0 5px 16px -6px rgba(255,0,113,.6);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.obs-dashboard .obs-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 9px 24px -6px rgba(255,0,113,.7);
}
.obs-dashboard .obs-btn.secondary {
  background: rgba(255,255,255,.8);
  box-shadow: none;
}
.obs-dashboard .obs-btn.secondary:hover { border-color: #ff0071; }
.obs-dashboard .obs-btn.ok { background: linear-gradient(120deg, #10b981, #059669); box-shadow: 0 5px 16px -6px rgba(16,185,129,.6); }
.obs-dashboard .obs-btn.danger { background: linear-gradient(120deg, #ef4444, #dc2626); box-shadow: 0 5px 16px -6px rgba(239,68,68,.55); }

/* ---- Panel transition on tab switch ---- */
.obs-dashboard .obs-panel.active { animation: obsFade .34s cubic-bezier(.4,0,.2,1); }
@keyframes obsFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .obs-dashboard .obs-tab, .obs-dashboard .obs-btn, .obs-dashboard .obs-kpi { transition: none; }
  .obs-dashboard .obs-panel.active { animation: none; }
}