/* ── GLASS COMPONENT ─────────────────────── */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-rim), var(--glass-shadow);
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.glass::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.90) 25%, rgba(255,255,255,.90) 75%, transparent);
  pointer-events: none;
  z-index: 2;
}
.glass:hover {
  box-shadow: var(--glass-rim), var(--glass-hover);
  transform: translateY(-2px);
}

/* ── NAV GLASS ───────────────────────────── */
.nav-bar {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-rim), 0 4px 24px rgba(10,5,40,.08);
  position: relative;
}
[data-theme="dark"] .nav-bar { box-shadow: var(--glass-rim), 0 4px 24px rgba(0,0,0,.35); }
.nav-bar::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.85) 20%, rgba(255,255,255,.85) 80%, transparent 100%);
}

/* ── CATEGORY PILLS (glass variant) ─────── */
.cat {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .4375rem .9375rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 500; color: var(--text-2); cursor: pointer;
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  border: 1px solid rgba(255,255,255,.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 8px rgba(10,5,40,.06);
  transition: all .15s;
}
[data-theme="dark"] .cat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.cat:hover, .cat.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.5); }
.cat-n { font-size: .6875rem; font-weight: 700; color: var(--text-3); }
.cat.active .cat-n, .cat:hover .cat-n { color: var(--accent); }