html.regional-notice-open,
html.regional-notice-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.regional-notice {
  --notice-surface: #15151e;
  --notice-surface-soft: #1b1b27;
  --notice-text: #f4f3fa;
  --notice-muted: #b6b2c9;
  --notice-border: #57516b;
  --notice-divider: #373444;
  --notice-label-bg: #20243a;
  --notice-label-border: #3f496c;
  --notice-label-text: #b9c7ff;
  --notice-error: #ffb5ba;
  box-sizing: border-box;
  width: min(720px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--notice-border);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 100% 0, #34254b99 0, transparent 58%),
    linear-gradient(145deg, #191922 0%, var(--notice-surface) 66%);
  color: var(--notice-text);
  color-scheme: dark;
  box-shadow:
    0 34px 110px #000a,
    0 0 0 1px #8a9fff12,
    inset 0 1px 0 #ffffff0a;
  font-family: var(--ui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

:root[data-theme="light"] .regional-notice {
  --notice-surface: #fff;
  --notice-surface-soft: #f5f7fc;
  --notice-text: #171d32;
  --notice-muted: #56627a;
  --notice-border: #c9d1e3;
  --notice-divider: #dce2ef;
  --notice-label-bg: #edf1ff;
  --notice-label-border: #c7d2f4;
  --notice-label-text: #344da7;
  --notice-error: #a91e35;
  background:
    radial-gradient(ellipse at 100% 0, #dfe5ff 0, transparent 58%),
    linear-gradient(145deg, #fff 0%, #f7f8fc 72%);
  color-scheme: light;
  box-shadow:
    0 34px 100px #26335538,
    0 0 0 1px #405acb0d,
    inset 0 1px 0 #fff;
}

.regional-notice::backdrop {
  background: #030309d9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

:root[data-theme="light"] .regional-notice::backdrop {
  background: #1720398c;
}

.regional-notice-content {
  padding: 34px 36px 30px;
  font-size: 15px;
  line-height: 1.7;
}

.regional-notice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 21px;
}

.regional-notice-label {
  flex: none;
  margin: 1px 0 0;
  padding: 7px 10px;
  border: 1px solid var(--notice-label-border);
  border-radius: 7px;
  background: var(--notice-label-bg);
  color: var(--notice-label-text);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .015em;
  white-space: nowrap;
}

.regional-notice h2 {
  margin: 0;
  color: var(--notice-text);
  font: 600 28px/1.18 var(--ui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: -1px;
}

.regional-notice h2:focus {
  outline: none !important;
}

.regional-notice-copy {
  margin: 0 0 25px;
  color: var(--notice-muted);
  font-size: 14px;
  line-height: 1.75;
}

.regional-notice-copy p {
  margin: 0;
}

.regional-notice-copy p + p {
  margin-top: 17px;
}

.regional-notice-error {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--notice-error) 42%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--notice-error) 9%, transparent);
  color: var(--notice-error);
  font-size: 13px;
  line-height: 1.5;
}

.regional-notice-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--notice-divider);
}

.regional-notice-actions button {
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 9px;
  font: 650 14px/1.3 var(--ui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    filter .18s ease,
    transform .18s ease;
}

.regional-notice-ack {
  min-width: 144px;
  background: linear-gradient(120deg, #315ee5, #6550df);
  color: #fff;
  box-shadow: 0 10px 28px #4056d840;
}

.regional-notice-skip {
  border-color: var(--notice-border) !important;
  background: var(--notice-surface-soft);
  color: var(--notice-text);
}

@media (hover: hover) {
  .regional-notice-ack:hover {
    filter: brightness(1.1);
    box-shadow: 0 15px 38px #4d5fe25c;
    transform: translateY(-2px);
  }

  .regional-notice-skip:hover {
    border-color: #7f8bc2 !important;
    background: color-mix(in srgb, var(--notice-surface-soft) 86%, #8a9fff 14%);
    transform: translateY(-2px);
  }
}

.regional-notice-actions button:active {
  transform: translateY(0) scale(.985);
}

.regional-notice-actions button:focus-visible {
  outline: 2px solid #b4c7ff !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px #6f82e42e;
}

.regional-notice-actions button:disabled {
  cursor: wait;
  opacity: .58;
  filter: none;
  transform: none;
}

@media (max-width: 600px) {
  .regional-notice {
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 16px;
  }

  .regional-notice-content {
    padding: 26px 22px 22px;
  }

  .regional-notice-header {
    display: block;
    margin-bottom: 18px;
  }

  .regional-notice h2 {
    font-size: 24px;
    letter-spacing: -.7px;
  }

  .regional-notice-label {
    display: inline-flex;
    margin-top: 13px;
    white-space: normal;
  }

  .regional-notice-copy {
    margin-bottom: 21px;
    font-size: 13px;
    line-height: 1.7;
  }

  .regional-notice-copy p + p {
    margin-top: 14px;
  }

  .regional-notice-actions {
    flex-direction: column-reverse;
    padding-top: 18px;
  }

  .regional-notice-actions button {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .regional-notice-content {
    padding: 22px 18px 18px;
  }

  .regional-notice h2 {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .regional-notice-actions button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .regional-notice {
    border: 1px solid CanvasText;
  }

  .regional-notice-actions button {
    border: 1px solid ButtonText;
  }
}