.flash {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: flash-in .3s ease;
  max-width: calc(100vw - 40px);
  white-space: nowrap;
}
.flash--notice { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.flash--alert  { background: #fdecea; color: #c62828; border: 1px solid #ef9a9a; }
.flash .material-symbols-outlined { font-size: 20px; }
.flash-close { background: none; border: none; cursor: pointer; margin-left: 8px; opacity: .6; transition: opacity .15s; display: flex; align-items: center; }
.flash-close:hover { opacity: 1; }
.flash-close .material-symbols-outlined { font-size: 18px; }
@keyframes flash-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}