.bento-tile,
.panel,
.card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--shadow-card);
  transition:
    background-color var(--dur-med) var(--ease-move),
    border-color var(--dur-med) var(--ease-move);
}

.tracker-item,
.artist-card {
  border-color: var(--border-soft);
}

.tracker-item:hover {
  border-color: var(--border);
}

/* Uniform blur behind every modal window.
   Exception: .reposters-modal-backdrop — measured paint-bound jank (24fps →
   60fps without blur): a full-screen blurred layer is re-composited on every
   frame of the Intel window's internal updates (tab switches, list renders). */
.artist-modal-backdrop,
.track-modal-backdrop,
.distro-modal-backdrop,
.mail-modal-backdrop,
.tracker-modal-backdrop,
.playlist-modal-backdrop,
.settings-modal-backdrop {
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: opacity 200ms var(--ease-out, ease);
}

/* A modal opened on top of another keeps the one underneath visible */
.artist-modal.is-stacked .artist-modal-backdrop,
.track-modal.is-stacked .track-modal-backdrop,
.distro-modal.is-stacked .distro-modal-backdrop,
.mail-modal.is-stacked .mail-modal-backdrop,
.tracker-modal.is-stacked .tracker-modal-backdrop,
.playlist-modal.is-stacked .playlist-modal-backdrop,
.settings-modal.is-stacked .settings-modal-backdrop,
.reposters-modal.is-stacked .reposters-modal-backdrop {
  opacity: 0;
}

/* Small pops — light blur is cheap on small surfaces */
.icon-pop,
.lookup-pop,
.notif-pop {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--shadow-pop);
}

/* Large modal panels — opaque, no backdrop blur (repaints whole panel area
   every frame when windows are stacked) */
.playlist-modal-panel,
.mail-modal-panel,
.tracker-modal-panel,
.reposters-modal-panel,
.distro-modal-panel,
.track-modal-panel,
.settings-modal-panel,
.artist-modal-panel {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 45%, var(--surface)) 0%,
    var(--surface) 120px
  );
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--shadow-pop);
  /* isolate repaints: scrolling inside one window never repaints the others */
  contain: layout paint style;
}

/* While the Intel window is open, drop the blur of the dashboard surfaces
   behind it. The backdrop already dims them to ~28% visibility, so the blur
   is imperceptible — but keeping full-screen blurred layers alive forces a
   re-composite on every frame of the window's own updates (measured:
   36–38fps → 60fps on tab switches). */
body.reposters-modal-open .bento-tile,
body.reposters-modal-open .panel,
body.reposters-modal-open .card,
body.reposters-modal-open .topbar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (prefers-reduced-transparency: reduce) {
  .bento-tile,
  .panel,
  .card {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .icon-pop,
  .lookup-pop {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}