:root {
  --bs-primary: #6366f1;
  --bs-primary-rgb: 99, 102, 241;
  --bs-body-bg: #fafafa;
  --bs-body-color: #18181b;
  --bs-secondary-color: #71717a;
  --bs-border-color: #e4e4e7;
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-primary);
  --bs-primary-bg-subtle: #eef2ff;
  --bs-primary-border-subtle: #c7d2fe;
  --bs-primary-text-emphasis: #4338ca;
}
.app-nav {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bs-border-color);
}
.host-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.07) !important; transform: translateY(-1px); }
.host-card { transition: box-shadow .15s, transform .15s; }
[data-period-toggle] button.active {
  background: var(--bs-primary); border-color: var(--bs-primary); color: #fff;
}
.graph-img { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); width: 100%; height: auto; display: block; }