@layer app {
  /* ============================================================
     Glassmorphism components
     ============================================================ */

  .glass-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .glass-nav {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 1px 8px rgba(30, 27, 75, 0.04);
  }
}