/* Extracted from index.css L1050-L1089: View transitions + banner */

/* ===== VIEW TRANSITIONS ===== */
.view { 
  display: none; 
  position: relative;
  z-index: 1;
}
.view.active { 
  display: block; 
  animation: viewEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes viewEnter {
  from { 
    opacity: 0; 
    transform: translateY(12px) scale(0.99);
    filter: blur(4px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ===== BANNER ===== */
.banner { 
  background: var(--accent-yellow-dim);
  border: 1px solid rgba(251,191,36,0.15);
  border-radius: var(--radius);
  padding: 1rem 1.5rem; 
  margin-bottom: 1.5rem; 
  display: none;
  align-items: center;
  gap: 1rem;
}
.banner.show { display: flex; }
.banner-icon { font-size: 1.25rem; }
.banner-content { flex: 1; }
.banner-title { font-weight: 700; color: var(--accent-yellow); font-size: 0.85rem; }
.banner-text { color: var(--text-secondary); font-size: 0.8rem; margin-top: 0.2rem; }