:root {
  --lx-font: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: var(--font-body);
}
html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-body) !important;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  letter-spacing: normal !important;
}

.flash,
.backoffice-shell .flash {
  position: fixed !important;
  z-index: 1300 !important;
  top: 72px !important;
  right: 20px !important;
  left: auto !important;
  bottom: auto !important;
  width: min(420px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  padding: 12px 14px 12px 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--lx-ink, #2b211c) !important;
  color: #fff !important;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .45) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  animation: flash-in .32s cubic-bezier(.32, .72, 0, 1);
}
.flash.flash-success,
.backoffice-shell .flash.flash-success {
  background: var(--lx-green, #23865f) !important;
}
.flash.flash-error,
.backoffice-shell .flash.flash-error {
  background: var(--lx-danger, #c83d37) !important;
}
.flash > span {
  flex: 1 1 auto;
}
.flash .icon-button,
.backoffice-shell .flash .icon-button {
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.flash.is-hiding {
  animation: flash-out .22s ease forwards;
}
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes flash-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@media (max-width: 760px) {
  .flash,
  .backoffice-shell .flash {
    top: 64px !important;
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flash {
    animation: none;
  }
}