.message-bar {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(196,94,255,0.15);
}
.message-bar .alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  max-width: 87.5rem;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.message-bar .alert h1,
.message-bar .alert h2,
.message-bar .alert h3,
.message-bar .alert h4 {
  font-family: var(--font-display);
  font-size: 0.875rem !important;
  font-weight: 600;
  margin: 0;
  text-align: center;
  letter-spacing: 0.01em;
}
.message-bar {
  background: rgba(174,83,62,0.12);
  border-bottom-color: rgba(174,83,62,0.25);
}
.message-bar .alert,
.message-bar .alert h1,
.message-bar .alert h2,
.message-bar .alert h3,
.message-bar .alert h4 {
  color: #f9c4a8;
}
.message-bar.alert-update-success,
.message-bar.alert-login-success {
  background: rgba(102,132,85,0.12) !important;
  border-bottom-color: rgba(102,132,85,0.28) !important;
}
.message-bar.alert-update-success .alert,
.message-bar.alert-update-success .alert h1,
.message-bar.alert-update-success .alert h2,
.message-bar.alert-update-success .alert h3,
.message-bar.alert-update-success .alert h4,
.message-bar.alert-login-success .alert,
.message-bar.alert-login-success .alert h1,
.message-bar.alert-login-success .alert h2,
.message-bar.alert-login-success .alert h3,
.message-bar.alert-login-success .alert h4 {
  color: #c8f0a8;
}
.message-bar.alert-account-delete {
  background: rgba(177,61,61,0.12) !important;
  border-bottom-color: rgba(177,61,61,0.28) !important;
}
.message-bar.alert-account-delete .alert,
.message-bar.alert-account-delete .alert h1,
.message-bar.alert-account-delete .alert h2,
.message-bar.alert-account-delete .alert h3,
.message-bar.alert-account-delete .alert h4 {
  color: #f9c1c1 !important;
}
.message-bar.alert-breaking {
  background: rgba(196,94,255,0.07);
  border-bottom-color: rgba(196,94,255,0.2);
  cursor: pointer;
  transition: background var(--t-fast, 0.15s);
}
.message-bar.alert-breaking::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196,94,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,94,255,0.03) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  pointer-events: none;
}
.message-bar.alert-breaking:hover {
  background: rgba(196,94,255,0.12);
}
.message-bar.alert-breaking a {
  text-decoration: none;
  display: block;
  width: 100%;
}
.message-bar.alert-breaking .alert {
  color: rgba(255,255,255,0.9);
  gap: 0.875rem;
  position: relative;
  z-index: 1;
}
.message-bar.alert-breaking .alert svg {
  width: 0.875rem;
  height: 1.375rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(196,94,255,0.5));
}
.message-bar.alert-breaking .alert strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}
.message-bar.alert-breaking .alert::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent, #c45eff);
  box-shadow: 0 0 6px var(--accent, #c45eff);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--accent, #c45eff); }
  50%       { opacity: 0.4; box-shadow: 0 0 2px var(--accent, #c45eff); }
}