.maintenance-notice {
  position: fixed;
  z-index: 1040;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  gap: 0.625rem;
  width: min(28rem, calc(100% - 2rem));
  padding: 1rem;
  color: #303747;
  background: #fcfcfd;
  border: 1px solid #dce0e6;
  border-radius: 0.625rem;
  box-shadow: 0 8px 32px rgb(0 0 51 / 14%);
  font-family: inherit;
  animation: maintenance-notice-enter 180ms ease-out;
}

.maintenance-notice[hidden] {
  display: none !important;
}

.maintenance-notice__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #000033;
  background: #f4f0e4;
  border-radius: 50%;
}

.maintenance-notice__title {
  margin: 0 0 0.375rem;
  color: #000033;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.maintenance-notice__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.maintenance-notice__close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: #596173;
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  cursor: pointer;
}

.maintenance-notice__close:hover {
  color: #000033;
  background: #edf0f4;
}

.maintenance-notice__close:focus-visible {
  outline: 2px solid #000033;
  outline-offset: 2px;
}

@keyframes maintenance-notice-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .maintenance-notice { animation: none; }
}