/* Import zmp-ui default stylesheet */
/**
 * Zaui undefined
 * Zalo Mini App UI Library
 * https://mini.zalo.me
 *
 * Copyright 2022-2026 Zalo Mini App
 *
 * Released under the ISC License
 *
 * Released on: March 24, 2026
 */
:root {
  --zaui-light-color-primary: #006af5;
  --zaui-dark-color-primary: #006af5;
  --zaui-light-color-on-primary: #ffffff;
  --zaui-dark-color-on-primary: #ffffff;
  --zaui-light-text-color: #141415;
  --zaui-dark-text-color: #f4f5f6;
  --zaui-avatar-text-color: #ffffff;
  --zaui-avatar-background-gradient-01: linear-gradient(45deg, #006af5 0%, #8fc1ff 100%);
  --zaui-avatar-background-gradient-02: linear-gradient(45deg, #6a40bf 0%, #52a0ff 100%);
  --zaui-avatar-background-gradient-03: linear-gradient(45deg, #12aee2 0%, #66d68f 100%);
  --zaui-avatar-background-gradient-04: linear-gradient(45deg, #34b764 0%, #99e5b5 100%);
  --zaui-mask-overlay-color: #000000b3;
  --zaui-light-body-background-color: #e9ebed;
  --zaui-light-avatar-border: #ffffff;
  --zaui-light-avatar-status-background: #ffffff;
  --zaui-light-avatar-status-online: #34b764;
  --zaui-light-avatar-status-blocked: #dc1f18;
  --zaui-light-avatar-story-contour-color: linear-gradient(45deg, #006af5 0%, #5fcbf2 100%);
  --zaui-light-avatar-uploading: linear-gradient(90deg, rgba(95, 203, 242, 0) 0%, #006af5 100%);
  --zaui-light-avatar-story-seen: #d6d9dc;
  --zaui-light-avatar-counter-background: #e9ebed;
  --zaui-light-bottom-navigation-color: #767a7f;
  --zaui-light-bottom-navigation-active-color: #006af5;
  --zaui-light-bottom-navigation-divider-color: #e9ebed;
  --zaui-light-bottom-navigation-background-color: #ffffff;
  --zaui-light-button-primary-background: var(--zaui-light-color-primary);
  --zaui-light-button-primary-background-pressed: #0250b6;
  --zaui-light-button-primary-text: var(--zaui-light-color-on-primary);
  --zaui-light-button-primary-icon: var(--zaui-light-color-on-primary);
  --zaui-light-button-primary-danger-background: #dc1f18;
  --zaui-light-button-primary-danger-background-pressed: #a51712;
  --zaui-light-button-primary-danger-text: #ffffff;
  --zaui-light-button-secondary-background: #d6e9ff;
  --zaui-light-button-secondary-background-pressed: #b8d9ff;
  --zaui-light-button-secondary-text: #006af5;
  --zaui-light-button-secondary-icon: #006af5;
  --zaui-light-button-secondary-danger-background: #fed8d7;
  --zaui-light-button-secondary-danger-background-pressed: #fcbdba;
  --zaui-light-button-secondary-danger-text: #dc1f18;
  --zaui-light-button-secondary-danger-icon: #dc1f18;
  --zaui-light-button-secondary-neutral-background: #e9ebed;
  --zaui-light-button-secondary-neutral-background-pressed: #d6d9dc;
  --zaui-light-button-secondary-neutral-text: #141415;
  --zaui-light-button-secondary-neutral-icon: #141415;
  --zaui-light-button-tertiary-background-pressed: #ebf4ff;
  --zaui-light-button-tertiary-text: #006af5;
  --zaui-light-button-tertiary-icon: #006af5;
  --zaui-light-button-tertiary-danger-background-pressed: #ffebeb;
  --zaui-light-button-tertiary-danger-text: #dc1f18;
  --zaui-light-button-tertiary-danger-icon: #dc1f18;
  --zaui-light-button-tertiary-neutral-background-pressed: #e9ebed;
  --zaui-light-button-tertiary-neutral-text: #141415;
  --zaui-light-button-tertiary-neutral-icon: #141415;
  --zaui-light-button-background-disabled: #d6d9dc;
  --zaui-light-button-text-disabled: #b9bdc1;
  --zaui-light-button-icon-disabled: #b9bdc1;
  --zaui-light-checkbox-border-color: #b9bdc1;
  --zaui-light-checkbox-uncheck-background: #ffffff;
  --zaui-light-checkbox-checked-background: #006af5;
  --zaui-light-checkbox-checked-mark-color: #ffffff;
  --zaui-light-checkbox-disabled-checked-background: #8fc1ff;
  --zaui-light-checkbox-disabled-checked-mark-color: #ffffffcc;
  --zaui-light-checkbox-disabled-uncheck-background: #d6d9dc;
  --zaui-light-checkbox-disabled-label: #b9bdc1;
  --zaui-light-header-color: #141415;
  --zaui-light-header-background-color: #ffffff;
  --zaui-light-header-divider: #e9ebed;
  --zaui-light-input-text-color: var(--zaui-light-text-color);
  --zaui-light-input-border-color: #b9bdc1;
  --zaui-light-input-hover-border-color: #006af5;
  --zaui-light-input-placeholder-color: #b9bdc1;
  --zaui-light-input-background-color: #ffffff;
  --zaui-light-input-helper-text-color: #767a7f;
  --zaui-light-input-helper-icon-background-color: #767a7f;
  --zaui-light-input-error-text-color: #dc1f18;
  --zaui-light-input-error-icon-background-color: #dc1f18;
  --zaui-light-input-clear-icon-color: #141415;
  --zaui-light-input-status-success-icon-focus-visible-color: #34b764;
  --zaui-light-input-status-success-icon-color: #34b764;
  --zaui-light-input-status-error: #dc1f18;
  --zaui-light-input-disabled-color: #767a7f;
  --zaui-light-input-disabled-background-color: #0000001a;
  --zaui-dark-input-text-color: var(--zaui-dark-text-color);
  --zaui-dark-input-border-color: #767a7f;
  --zaui-dark-input-hover-border-color: #006af5;
  --zaui-dark-input-placeholder-color: #53575a;
  --zaui-dark-input-background-color: #141415;
  --zaui-dark-input-helper-text-color: #8f9499;
  --zaui-dark-input-helper-icon-background-color: #8f9499;
  --zaui-dark-input-error-text-color: #dc1f18;
  --zaui-dark-input-error-icon-background-color: #dc1f18;
  --zaui-dark-input-clear-icon-color: #f4f5f6;
  --zaui-dark-input-status-success-icon-focus-visible-color: #f4f5f6;
  --zaui-dark-input-status-success-icon-color: #34b764;
  --zaui-dark-input-status-error: #dc1f18;
  --zaui-dark-input-disabled-color: #8f9499;
  --zaui-dark-input-disabled-background-color: #ffffff1a;
  --zaui-light-list-item-brackets-color: #767a7f;
  --zaui-light-list-item-subtitle-color: #767a7f;
  --zaui-light-list-item-icon-color: #767a7f;
  --zaui-light-list-item-icon-link-color: #006af5;
  --zaui-light-list-item-divider-color: #e9ebed;
  --zaui-light-modal-background: #ffffff;
  --zaui-light-modal-divider: #e9ebed;
  --zaui-light-picker-title-color: #141415;
  --zaui-light-picker-option-selected-color: #006af5;
  --zaui-light-picker-option-2nd-color: #767a7f;
  --zaui-light-picker-option-color: #b9bdc1;
  --zaui-light-picker-selected-background-color: #f4f5f6;
  --zaui-light-progress-completed: #006af5;
  --zaui-light-progress-background: #ffffff;
  --zaui-light-radio-border-color: #b9bdc1;
  --zaui-light-radio-uncheck-background: #ffffff;
  --zaui-light-radio-checked-background: #006af5;
  --zaui-light-radio-checked-mark-color: #ffffff;
  --zaui-light-radio-disabled-checked-background: #8fc1ff;
  --zaui-light-radio-disabled-checked-mark-color: #ffffffcc;
  --zaui-light-radio-disabled-uncheck-background: #d6d9dc;
  --zaui-light-radio-disabled-label: #b9bdc1;
  --zaui-light-option-selected-color: #006af5;
  --zaui-light-option-divider-color: #e9ebed;
  --zaui-light-option-color: #141415;
  --zaui-light-option-group-color: #767a7f;
  --zaui-light-pressed-bg-color: #e9ebed;
  --zaui-light-select-title-color: #141415;
  --zaui-light-close-btn-color: #141415;
  --zaui-light-option-color-disabled: #767a7f;
  --zaui-light-sheet-title: #141415;
  --zaui-light-sheet-divider: #e9ebed;
  --zaui-light-sheet-container: #ffffff;
  --zaui-light-sheet-handler: #e9ebed;
  --zaui-light-action-sheet-title: #767a7f;
  --zaui-light-action-sheet-divider: #e9ebed;
  --zaui-light-action-sheet-group-divider: #f4f5f6;
  --zaui-light-slider-track-bg-color: #d6d9dc;
  --zaui-light-slider-track-active-bg-color: #006af5;
  --zaui-light-slider-thumb-bg-color: #006af5;
  --zaui-light-slider-mark-bg-color: #d6d9dc;
  --zaui-light-slider-mark-filled-bg-color: #006af5;
  --zaui-light-slider-label-color: #767a7f;
  --zaui-light-slider-value-color: #141415;
  --zaui-light-slider-prefix-suffix-color: #767a7f;
  --zaui-light-snackbar-background: #252627;
  --zaui-light-snackbar-text-color: #ffffff;
  --zaui-light-snackbar-action-color: #52a0ff;
  --zaui-light-snackbar-default-icon-color: #767a7f;
  --zaui-light-snackbar-success-color: #34b764;
  --zaui-light-snackbar-info-color: #52a0ff;
  --zaui-light-snackbar-error-color: #dc1f18;
  --zaui-light-snackbar-warning-color: #e8ba02;
  --zaui-light-snackbar-download-color: #767a7f;
  --zaui-light-snackbar-disconnect-color: #767a7f;
  --zaui-light-snackbar-connect-color: #34b764;
  --zaui-light-snackbar-progress-color: #52a0ff;
  --zaui-light-countdown-bg-color: #ffffff;
  --zaui-light-countdown-progress-color: #52a0ff;
  --zaui-light-countdown-counter-color: #ffffff;
  --zaui-light-spinner-border-color: #d6d9dc;
  --zaui-light-spinner-dot-color: #006af5;
  --zaui-light-switch-bg-color: #006af5;
  --zaui-light-switch-disabled-bg-color: #8fc1ff;
  --zaui-light-switch-off-bg-color: #b9bdc1;
  --zaui-light-switch-off-disabled-bg-color: #d6d9dc;
  --zaui-light-switch-handler-bg-color: #ffffff;
  --zaui-light-switch-handler-disabled-bg-color: #ffffff;
  --zaui-light-switch-label-color: #141415;
  --zaui-light-switch-label-disabled-color: #b9bdc1;
  --zaui-light-tabbar-divider: #e9ebed;
  --zaui-light-tabbar-background: #ffffff;
  --zaui-light-tabbar-label: #767a7f;
  --zaui-light-tabbar-label-active: #141415;
  --zaui-light-tabbar-active-line: #006af5;
  --zaui-dark-body-background-color: #000000e6;
  --zaui-dark-avatar-border: #141415;
  --zaui-dark-avatar-status-background: #141415;
  --zaui-dark-avatar-status-online: #34b764;
  --zaui-dark-avatar-status-blocked: #dc1f18;
  --zaui-dark-avatar-story-contour-color: linear-gradient(45deg, #006af5 0%, #5fcbf2 100%);
  --zaui-dark-avatar-uploading: linear-gradient(90deg, rgba(95, 203, 242, 0) 0%, #006af5 100%);
  --zaui-dark-avatar-story-seen: #53575a;
  --zaui-dark-avatar-counter-background: #36383a;
  --zaui-dark-bottom-navigation-color: #8f9499;
  --zaui-dark-bottom-navigation-active-color: #52a0ff;
  --zaui-dark-bottom-navigation-divider-color: #36383a;
  --zaui-dark-bottom-navigation-background-color: #141415;
  --zaui-dark-button-primary-background: var(--zaui-dark-color-primary);
  --zaui-dark-button-primary-background-pressed: #0250b6;
  --zaui-dark-button-primary-text: var(--zaui-dark-color-on-primary);
  --zaui-dark-button-primary-icon: var(--zaui-dark-color-on-primary);
  --zaui-dark-button-primary-danger-background: #dc1f18;
  --zaui-dark-button-primary-danger-background-pressed: #a51712;
  --zaui-dark-button-primary-danger-text: #ffffff;
  --zaui-dark-button-primary-danger-icon: #ffffff;
  --zaui-dark-button-secondary-background: #03316d;
  --zaui-dark-button-secondary-background-pressed: #03244e;
  --zaui-dark-button-secondary-text: #8fc1ff;
  --zaui-dark-button-secondary-icon: #8fc1ff;
  --zaui-dark-button-secondary-danger-background: #650e0b;
  --zaui-dark-button-secondary-danger-background-pressed: #490a08;
  --zaui-dark-button-secondary-danger-text: #f89996;
  --zaui-dark-button-secondary-danger-icon: #f89996;
  --zaui-dark-button-secondary-neutral-background: #36383a;
  --zaui-dark-button-secondary-neutral-background-pressed: #252627;
  --zaui-dark-button-secondary-neutral-text: #ffffff;
  --zaui-dark-button-secondary-neutral-icon: #ffffff;
  --zaui-dark-button-tertiary-background-pressed: #03316d;
  --zaui-dark-button-tertiary-text: #52a0ff;
  --zaui-dark-button-tertiary-icon: #52a0ff;
  --zaui-dark-button-tertiary-danger-background-pressed: #650e0b;
  --zaui-dark-button-tertiary-danger-text: #f1645f;
  --zaui-dark-button-tertiary-danger-icon: #f1645f;
  --zaui-dark-button-tertiary-neutral-background-pressed: #36383a;
  --zaui-dark-button-tertiary-neutral-text: #ffffff;
  --zaui-dark-button-tertiary-neutral-icon: #ffffff;
  --zaui-dark-button-background-disabled: #36383a;
  --zaui-dark-button-text-disabled: #53575a;
  --zaui-dark-button-icon-disabled: #53575a;
  --zaui-dark-checkbox-border-color: #767a7f;
  --zaui-dark-checkbox-uncheck-background: #141415;
  --zaui-dark-checkbox-checked-background: #006af5;
  --zaui-dark-checkbox-checked-mark-color: #ffffff;
  --zaui-dark-checkbox-disabled-checked-background: #033e8c;
  --zaui-dark-checkbox-disabled-checked-mark-color: #ffffff99;
  --zaui-dark-checkbox-disabled-uncheck-background: #36383a;
  --zaui-dark-checkbox-disabled-label: #53575a;
  --zaui-dark-header-color: #f4f5f6;
  --zaui-dark-header-background-color: #141415;
  --zaui-dark-header-divider: #36383a;
  --zaui-dark-list-item-brackets-color: #8f9499;
  --zaui-dark-list-item-subtitle-color: #8f9499;
  --zaui-dark-list-item-icon-color: #767a7f;
  --zaui-dark-list-item-icon-link-color: #006af5;
  --zaui-dark-list-item-divider-color: #36383a;
  --zaui-dark-modal-background: #252627;
  --zaui-dark-modal-divider: #36383a;
  --zaui-dark-picker-title-color: #f4f5f6;
  --zaui-dark-picker-option-selected-color: #006af5;
  --zaui-dark-picker-option-2nd-color: #8f9499;
  --zaui-dark-picker-option-color: #53575a;
  --zaui-dark-picker-selected-background-color: #252627;
  --zaui-dark-progress-completed: #52a0ff;
  --zaui-dark-progress-background: #ffffff33;
  --zaui-dark-radio-border-color: #767a7f;
  --zaui-dark-radio-uncheck-background: #141415;
  --zaui-dark-radio-checked-background: #006af5;
  --zaui-dark-radio-checked-mark-color: #ffffff;
  --zaui-dark-radio-disabled-checked-background: #033e8c;
  --zaui-dark-radio-disabled-checked-mark-color: #ffffff99;
  --zaui-dark-radio-disabled-uncheck-background: #36383a;
  --zaui-dark-radio-disabled-label: #53575a;
  --zaui-dark-option-selected-color: #006af5;
  --zaui-dark-option-divider-color: #36383a;
  --zaui-dark-option-color: #f4f5f6;
  --zaui-dark-option-group-color: #8f9499;
  --zaui-dark-pressed-bg-color: #36383a;
  --zaui-dark-select-title-color: #f4f5f6;
  --zaui-dark-close-btn-color: #f4f5f6;
  --zaui-dark-option-color-disabled: #8f9499;
  --zaui-dark-sheet-title: #f4f5f6;
  --zaui-dark-sheet-divider: #36383a;
  --zaui-dark-sheet-container: #252627;
  --zaui-dark-sheet-handler: #36383a;
  --zaui-dark-action-sheet-title: #8f9499;
  --zaui-dark-action-sheet-divider: #36383a;
  --zaui-dark-action-sheet-group-divider: #000000;
  --zaui-dark-slider-track-bg-color: #d6d9dc;
  --zaui-dark-slider-track-active-bg-color: #006af5;
  --zaui-dark-slider-thumb-bg-color: #006af5;
  --zaui-dark-slider-mark-bg-color: #d6d9dc;
  --zaui-dark-slider-mark-filled-bg-color: #006af5;
  --zaui-dark-slider-label-color: #8f9499;
  --zaui-dark-slider-value-color: #f4f5f6;
  --zaui-dark-slider-prefix-suffix-color: #d6d9dc;
  --zaui-dark-snackbar-background: #53575a;
  --zaui-dark-snackbar-text-color: #ffffff;
  --zaui-dark-snackbar-action-color: #52a0ff;
  --zaui-dark-snackbar-default-icon-color: #8f9499;
  --zaui-dark-snackbar-success-color: #34b764;
  --zaui-dark-snackbar-info-color: #52a0ff;
  --zaui-dark-snackbar-error-color: #dc1f18;
  --zaui-dark-snackbar-warning-color: #e8ba02;
  --zaui-dark-snackbar-download-color: #8f9499;
  --zaui-dark-snackbar-disconnect-color: #8f9499;
  --zaui-dark-snackbar-connect-color: #34b764;
  --zaui-dark-countdown-bg-color: #ffffff;
  --zaui-dark-countdown-progress-color: #52a0ff;
  --zaui-dark-countdown-counter-color: #ffffff;
  --zaui-dark-snackbar-progress-color: #52a0ff;
  --zaui-dark-spinner-border-color: #d6d9dc;
  --zaui-dark-spinner-dot-color: #006af5;
  --zaui-dark-switch-bg-color: #006af5;
  --zaui-dark-switch-disabled-bg-color: #033e8c;
  --zaui-dark-switch-off-bg-color: #53575a;
  --zaui-dark-switch-off-disabled-bg-color: #36383a;
  --zaui-dark-switch-handler-bg-color: #ffffff;
  --zaui-dark-switch-handler-disabled-bg-color: #ffffff99;
  --zaui-dark-switch-label-color: #f4f5f6;
  --zaui-dark-switch-label-disabled-color: #53575a;
  --zaui-dark-tabbar-divider: #36383a;
  --zaui-dark-tabbar-background: #141415;
  --zaui-dark-tabbar-label: #8f9499;
  --zaui-dark-tabbar-label-active: #f4f5f6;
  --zaui-dark-tabbar-active-line: #006af5;
}
@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1, 1);
  }
  50% {
    opacity: 0.1;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes cursorAnimate {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.zaui-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--zaui-mask-overlay-color, #000000b3);
  -webkit-overflow-scrolling: touch;
  display: none;
}
.zaui-mask-hidden {
  visibility: visible;
}
.zaui-mask-no-mask {
  background: transparent;
  background-color: transparent;
}
.zaui-mask-enter,
.zaui-mask-appear {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-play-state: paused;
  display: unset;
}
.zaui-mask-exit {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-play-state: paused;
  display: unset;
}
.zaui-mask-enter.zaui-mask-enter-active,
.zaui-mask-appear.zaui-mask-appear-active {
  animation-name: fadeIn;
  animation-play-state: running;
  display: unset;
}
.zaui-mask-enter-done {
  display: unset;
}
.zaui-mask-exit.zaui-mask-exit-active {
  animation-name: fadeOut;
  animation-play-state: running;
}
.zaui-mask-exit-done {
  display: none;
}
.zaui-modal-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  outline: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-overflow-scrolling: touch;
}
.zaui-btn {
  padding: 12px 24px;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: none;
  cursor: pointer;
  border-radius: 48px;
  user-select: none;
  touch-action: manipulation;
  -moz-appearance: button;
       appearance: button;
  -webkit-appearance: button;
  text-decoration: none;
  box-shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  margin: 0;
  background-color: var(--zaui-light-button-primary-background, #006af5);
  color: var(--zaui-light-button-primary-text, #ffffff);
  min-width: 120px;
  height: 48px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}
.zaui-btn,
.zaui-btn:hover,
.zaui-btn:active,
.zaui-btn:focus {
  outline: 0;
  box-shadow: none;
}
.zaui-btn:not([disabled]):hover {
  text-decoration: none;
}
.zaui-btn:not([disabled]):active {
  outline: 0;
  box-shadow: none;
}
.zaui-btn[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}
.zaui-btn[disabled] > * {
  pointer-events: none;
}
.zaui-btn:active,
.zaui-btn:focus-visible {
  background-color: var(--zaui-light-button-primary-background-pressed, #0250b6);
}
.zaui-btn-disabled[disabled],
.zaui-btn-primary.zaui-btn-disabled[disabled],
.zaui-btn-secondary.zaui-btn-disabled[disabled] {
  background-color: var(--zaui-light-button-background-disabled, #d6d9dc);
  color: var(--zaui-light-button-text-disabled, #b9bdc1);
}
.zaui-btn .zaui-btn-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.zaui-btn-tertiary.zaui-btn-disabled[disabled] {
  background-color: transparent;
  color: var(--zaui-light-button-text-disabled, #b9bdc1);
}
.zaui-btn-small {
  min-width: 72px;
  height: 32px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  padding: 8px 16px;
}
.zaui-btn-large {
  min-width: 120px;
  height: 48px;
}
.zaui-btn-medium {
  min-width: 96px;
  height: 40px;
  padding: 8px 24px;
}
.zaui-btn-full-width {
  width: 100%;
  min-width: unset;
}
.zaui-btn-primary,
.zaui-btn-primary.zaui-btn-highlight {
  background-color: var(--zaui-light-button-primary-background, #006af5);
  color: var(--zaui-light-button-primary-text, #ffffff);
}
.zaui-btn-primary:active,
.zaui-btn-primary.zaui-btn-highlight:active,
.zaui-btn-primary:focus-visible,
.zaui-btn-primary.zaui-btn-highlight:focus-visible {
  background-color: var(--zaui-light-button-primary-background-pressed, #0250b6);
}
.zaui-btn-secondary,
.zaui-btn-secondary.zaui-btn-highlight {
  background-color: var(--zaui-light-button-secondary-background, #d6e9ff);
  color: var(--zaui-light-button-secondary-text, #006af5);
}
.zaui-btn-secondary:active,
.zaui-btn-secondary.zaui-btn-highlight:active,
.zaui-btn-secondary:focus-visible,
.zaui-btn-secondary.zaui-btn-highlight:focus-visible {
  background-color: var(--zaui-light-button-secondary-background-pressed, #b8d9ff);
}
.zaui-btn-tertiary,
.zaui-btn-tertiary.zaui-btn-highlight {
  background-color: transparent;
  color: var(--zaui-light-button-tertiary-text, #006af5);
}
.zaui-btn-tertiary:active,
.zaui-btn-tertiary.zaui-btn-highlight:active,
.zaui-btn-tertiary:focus-visible,
.zaui-btn-tertiary.zaui-btn-highlight:focus-visible {
  background-color: var(--zaui-light-button-tertiary-background-pressed, #ebf4ff);
}
.zaui-btn-danger,
.zaui-btn-primary.zaui-btn-danger {
  background-color: var(--zaui-light-button-primary-danger-background, #dc1f18);
  color: var(--zaui-light-button-primary-danger-text, #ffffff);
}
.zaui-btn-danger:active,
.zaui-btn-primary.zaui-btn-danger:active,
.zaui-btn-danger:focus-visible,
.zaui-btn-primary.zaui-btn-danger:focus-visible {
  background-color: var(--zaui-light-button-primary-danger-background-pressed, #a51712);
}
.zaui-btn-secondary.zaui-btn-danger {
  background-color: var(--zaui-light-button-secondary-danger-background, #fed8d7);
  color: var(--zaui-light-button-secondary-danger-text, #dc1f18);
}
.zaui-btn-secondary.zaui-btn-danger:active,
.zaui-btn-secondary.zaui-btn-danger:focus-visible {
  background-color: var(--zaui-light-button-secondary-danger-background-pressed, #fcbdba);
}
.zaui-btn-tertiary.zaui-btn-danger {
  background-color: transparent;
  color: var(--zaui-light-button-tertiary-danger-text, #dc1f18);
}
.zaui-btn-tertiary.zaui-btn-danger:active,
.zaui-btn-tertiary.zaui-btn-danger:focus-visible {
  background-color: var(--zaui-light-button-tertiary-danger-background-pressed, #ffebeb);
}
.zaui-btn-secondary.zaui-btn-neutral {
  background-color: var(--zaui-light-button-secondary-neutral-background, #e9ebed);
  color: var(--zaui-light-button-secondary-neutral-text, #141415);
}
.zaui-btn-secondary.zaui-btn-neutral:active,
.zaui-btn-secondary.zaui-btn-neutral:focus-visible {
  background-color: var(--zaui-light-button-secondary-neutral-background-pressed, #d6d9dc);
}
.zaui-btn-tertiary.zaui-btn-neutral {
  background-color: transparent;
  color: var(--zaui-light-button-tertiary-neutral-text, #141415);
}
.zaui-btn-tertiary.zaui-btn-neutral:active,
.zaui-btn-tertiary.zaui-btn-neutral:focus-visible {
  background-color: var(--zaui-light-button-tertiary-neutral-background-pressed, #e9ebed);
}
.zaui-btn-loading {
  position: relative;
  pointer-events: none;
}
.zaui-btn-loading > * {
  visibility: hidden;
}
.zaui-btn-loading-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zaui-btn-loading .zaui-btn-loading-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  animation: loadingCircle 1s infinite linear;
}
.zaui-btn-small.zaui-btn-loading .zaui-btn-loading-icon {
  width: 16px;
  height: 16px;
}
.zaui-btn-small .zaui-btn-icon .zaui-icon {
  font-size: 16px;
}
.zaui-btn-icon-only {
  min-width: unset;
  width: 48px;
  height: 48px;
  padding: 12px 12px;
  line-height: 1;
}
.zaui-btn-icon-only .zaui-btn-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  display: inline-block;
}
.zaui-btn-icon-only .zaui-btn-icon .zaui-icon {
  font-size: 24px;
}
.zaui-btn-icon-only.zaui-btn-small {
  width: 32px;
  height: 32px;
  padding: 8px 8px;
}
.zaui-btn-icon-only.zaui-btn-small .zaui-btn-icon {
  width: 16px;
  height: 16px;
}
.zaui-btn-icon-only.zaui-btn-small .zaui-icon {
  font-size: 16px;
}
.zaui-btn-icon-only.zaui-btn-medium {
  width: 40px;
  height: 40px;
  padding: 8px 8px;
}
.zaui-btn-icon-only.zaui-btn-medium .zaui-icon {
  font-size: 24px;
}
.zaui-btn-suffix-icon .zaui-btn-icon {
  width: 24px;
  height: 24px;
  margin-left: 8px;
}
.zaui-btn-suffix-icon.zaui-btn-small .zaui-btn-icon {
  width: 16px;
  height: 16px;
  margin-left: 8px;
}
.zaui-btn-prefix-icon .zaui-btn-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.zaui-btn-prefix-icon.zaui-btn-small .zaui-btn-icon {
  width: 16px;
  height: 16px;
  margin-left: 4px;
}
body[zaui-theme="dark"] .zaui-btn {
  background-color: var(--zaui-light-button-primary-background, #006af5);
  color: var(--zaui-light-button-primary-text, #ffffff);
  background-color: var(--zaui-dark-button-primary-background, #006af5);
  background: var(--zaui-dark-button-primary-background, #006af5);
  color: var(--zaui-dark-button-primary-text, #ffffff);
}
body[zaui-theme="dark"] .zaui-btn:active,
body[zaui-theme="dark"] .zaui-btn:focus-visible {
  background-color: var(--zaui-light-button-primary-background-pressed, #0250b6);
}
body[zaui-theme="dark"] .zaui-btn:active,
body[zaui-theme="dark"] .zaui-btn:focus-visible {
  background-color: var(--zaui-dark-button-primary-background-pressed, #0250b6);
  background: var(--zaui-dark-button-primary-background-pressed, #0250b6);
}
body[zaui-theme="dark"] .zaui-btn-disabled[disabled],
body[zaui-theme="dark"] .zaui-btn-primary.zaui-btn-disabled[disabled],
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-disabled[disabled] {
  background-color: var(--zaui-dark-button-background-disabled, #36383a);
  color: var(--zaui-dark-button-text-disabled, #53575a);
}
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-disabled[disabled] {
  background-color: transparent;
  color: var(--zaui-dark-button-text-disabled, #53575a);
}
body[zaui-theme="dark"] .zaui-btn-primary,
body[zaui-theme="dark"] .zaui-btn-primary.zaui-btn-highlight {
  background-color: var(--zaui-light-button-primary-background, #006af5);
  background-color: var(--zaui-dark-button-primary-background, #006af5);
  color: var(--zaui-light-button-primary-text, #ffffff);
}
body[zaui-theme="dark"] .zaui-btn-primary:active,
body[zaui-theme="dark"] .zaui-btn-primary.zaui-btn-highlight:active,
body[zaui-theme="dark"] .zaui-btn-primary:focus-visible,
body[zaui-theme="dark"] .zaui-btn-primary.zaui-btn-highlight:focus-visible {
  background-color: var(--zaui-light-button-primary-background-pressed, #0250b6);
}
body[zaui-theme="dark"] .zaui-btn-primary:active,
body[zaui-theme="dark"] .zaui-btn-primary.zaui-btn-highlight:active,
body[zaui-theme="dark"] .zaui-btn-primary:focus-visible,
body[zaui-theme="dark"] .zaui-btn-primary.zaui-btn-highlight:focus-visible {
  background-color: var(--zaui-dark-button-primary-background-pressed, #0250b6);
}
body[zaui-theme="dark"] .zaui-btn-secondary,
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-highlight {
  background-color: var(--zaui-light-button-secondary-background, #d6e9ff);
  background-color: var(--zaui-dark-button-secondary-background, #03316d);
  color: var(--zaui-light-button-secondary-text, #006af5);
}
body[zaui-theme="dark"] .zaui-btn-secondary:active,
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-highlight:active,
body[zaui-theme="dark"] .zaui-btn-secondary:focus-visible,
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-highlight:focus-visible {
  background-color: var(--zaui-light-button-secondary-background-pressed, #b8d9ff);
}
body[zaui-theme="dark"] .zaui-btn-secondary:active,
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-highlight:active,
body[zaui-theme="dark"] .zaui-btn-secondary:focus-visible,
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-highlight:focus-visible {
  background-color: var(--zaui-light-button-secondary-background-pressed, #b8d9ff);
}
body[zaui-theme="dark"] .zaui-btn-tertiary,
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-highlight {
  color: var(--zaui-light-button-tertiary-text, #006af5);
  background-color: transparent;
  color: var(--zaui-dark-button-tertiary-text, #52a0ff);
}
body[zaui-theme="dark"] .zaui-btn-tertiary:active,
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-highlight:active,
body[zaui-theme="dark"] .zaui-btn-tertiary:focus-visible,
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-highlight:focus-visible {
  background-color: var(--zaui-light-button-tertiary-background-pressed, #ebf4ff);
}
body[zaui-theme="dark"] .zaui-btn-tertiary:active,
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-highlight:active,
body[zaui-theme="dark"] .zaui-btn-tertiary:focus-visible,
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-highlight:focus-visible {
  background-color: var(--zaui-dark-button-tertiary-background-pressed, #03316d);
}
body[zaui-theme="dark"] .zaui-btn-danger,
body[zaui-theme="dark"] .zaui-btn-primary.zaui-btn-danger {
  background-color: var(--zaui-dark-button-primary-danger-background, #dc1f18);
  color: var(--zaui-dark-button-primary-danger-text, #ffffff);
}
body[zaui-theme="dark"] .zaui-btn-danger:active,
body[zaui-theme="dark"] .zaui-btn-primary.zaui-btn-danger:active,
body[zaui-theme="dark"] .zaui-btn-danger:focus-visible,
body[zaui-theme="dark"] .zaui-btn-primary.zaui-btn-danger:focus-visible {
  background-color: var(--zaui-dark-button-primary-danger-background-pressed, #a51712);
}
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-danger {
  background-color: var(--zaui-dark-button-secondary-danger-background, #650e0b);
  color: var(--zaui-dark-button-secondary-danger-text, #f89996);
}
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-danger:active,
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-danger:focus-visible {
  background-color: var(--zaui-dark-button-secondary-danger-background-pressed, #490a08);
}
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-danger {
  background-color: transparent;
  color: var(--zaui-dark-button-tertiary-danger-text, #f1645f);
}
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-danger:active,
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-danger:focus-visible {
  background-color: var(--zaui-dark-button-tertiary-danger-background-pressed, #650e0b);
}
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-neutral {
  background-color: var(--zaui-dark-button-secondary-neutral-background, #36383a);
  color: var(--zaui-dark-button-secondary-neutral-text, #ffffff);
}
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-neutral:active,
body[zaui-theme="dark"] .zaui-btn-secondary.zaui-btn-neutral:focus-visible {
  background-color: var(--zaui-dark-button-secondary-neutral-background-pressed, #252627);
}
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-neutral {
  background-color: transparent;
  color: var(--zaui-dark-button-tertiary-neutral-text, #ffffff);
}
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-neutral:active,
body[zaui-theme="dark"] .zaui-btn-tertiary.zaui-btn-neutral:focus-visible {
  background-color: var(--zaui-dark-button-tertiary-neutral-background-pressed, #36383a);
}
:root {
  --zaui-safe-area-inset-top: env(safe-area-inset-top, 0px);
  --zaui-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --zaui-safe-area-inset-left: env(safe-area-inset-left, 0px);
  --zaui-safe-area-inset-right: env(safe-area-inset-right, 0px);
}
* {
  box-sizing: border-box;
}
html {
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  height: 100%;
  overflow: auto;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--zaui-light-body-background-color, #e9ebed);
  color: var(--zaui-light-text-color, #141415);
}
body[zaui-theme="dark"] {
  background-color: var(--zaui-light-body-background-color, #e9ebed);
  color: var(--zaui-light-text-color, #141415);
  background-color: var(--zaui-dark-body-background-color, #000000e6);
  color: var(--zaui-dark-text-color, #f4f5f6);
}
@font-face {
  font-family: "zaui-icons";
  font-style: normal;
  font-weight: 400;
  src: url("https://h5.zadn.vn/static/fonts/ZMPIcons-Regular-v3.woff2");
  src: url("https://h5.zadn.vn/static/fonts/ZMPIcons-Regular-v3.woff2") format("woff2"), url("https://h5.zadn.vn/static/fonts/ZMPIcons-Regular-v3.woff") format("woff"), url("https://h5.zadn.vn/static/fonts/ZMPIcons-Regular-v3.ttf") format("truetype");
}
.zaui-icon {
  vertical-align: middle;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  font-family: "zaui-icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  width: 1em;
  height: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
  text-align: center;
}
.zaui-list {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zaui-list-no-spacing.zaui-list .zaui-list-item:not(:last-child) {
  margin-bottom: 0;
}
.zaui-list .zaui-list-item:not(:last-child) {
  margin-bottom: 24px;
}
.zaui-list .zaui-list-item:not(:last-child) .zaui-list-item-right::after {
  content: '';
  height: 0.5px;
  background-color: var(--zaui-light-list-item-divider-color, #e9ebed);
  width: 100%;
  position: absolute;
  bottom: -16px;
  left: 0;
}
.zaui-list-no-divider > .zaui-list-item > .zaui-list-item-right::after {
  display: none;
}
.zaui-list-item {
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: row;
}
.zaui-list-item-subtitle {
  color: var(--zaui-light-list-item-subtitle-color, #767a7f);
  font-size: 14px;
  line-height: 18px;
}
.zaui-list-item-brackets {
  color: var(--zaui-light-list-item-brackets-color, #767a7f);
  display: inline-block;
  margin-left: 4px;
  font-size: 15px;
  line-height: 20px;
}
.zaui-list-item-title {
  display: inline-block;
  font-size: 16px;
  line-height: 22px;
}
.zaui-list-item-title-container {
  white-space: nowrap;
  overflow: hidden;
}
.zaui-list-item-content {
  flex: 1;
  overflow-wrap: anywhere;
}
.zaui-list-item-prefix {
  margin-right: 16px;
}
.zaui-list-item-suffix {
  margin-left: 16px;
}
.zaui-list-item-right {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
body[zaui-theme="dark"] .zaui-list {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[zaui-theme="dark"] .zaui-list .zaui-list-item-subtitle {
  color: var(--zaui-dark-list-item-subtitle-color, #8f9499);
}
body[zaui-theme="dark"] .zaui-list .zaui-list-item-brackets {
  color: var(--zaui-dark-list-item-brackets-color, #8f9499);
}
body[zaui-theme="dark"] .zaui-list .zaui-list-item:not(:last-child) .zaui-list-item-right::after {
  background-color: var(--zaui-dark-list-item-divider-color, #36383a);
}
.zaui-input {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  font-family: inherit;
  background-color: transparent;
  color: var(--zaui-light-input-text-color, #141415);
  border-radius: 8px;
  height: 48px;
  width: 100%;
  border: 1px solid var(--zaui-light-input-border-color, #b9bdc1);
  padding: 0 12px;
  margin: 4px 0px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.zaui-input::-moz-placeholder {
  color: var(--zaui-light-input-placeholder-color, #b9bdc1);
}
.zaui-input::placeholder {
  color: var(--zaui-light-input-placeholder-color, #b9bdc1);
}
.zaui-input:-ms-input-placeholder {
  color: var(--zaui-light-input-placeholder-color, #b9bdc1);
}
.zaui-input::-ms-input-placeholder {
  color: var(--zaui-light-input-placeholder-color, #b9bdc1);
}
.zaui-input-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  color: var(--zaui-light-input-text-color, #141415);
}
.zaui-input-label {
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
.zaui-input-helper-text {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 13px;
  line-height: 18px;
  color: var(--zaui-light-input-helper-text-color, #767a7f);
}
.zaui-input-helper-text-icon {
  padding-right: 0;
  margin-right: 4px;
  margin-top: calc(calc(18px - 16px) / 2);
}
.zaui-input-helper-text-content {
  flex: 1;
  display: inline-flex;
  line-height: 18px;
}
.zaui-input-helper-text-has-error {
  color: var(--zaui-light-input-error-text-color, #dc1f18);
}
.zaui-input-helper-text-hidden {
  display: none;
}
.zaui-input-clear-btn {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}
.zaui-input-clear-btn-hidden {
  display: none;
}
.zaui-input-clear-icon {
  color: var(--zaui-light-input-clear-icon-color, #141415);
}
.zaui-input:not(:focus) ~ .zaui-input-suffix .zaui-input-clear-icon-display-mode-focus {
  visibility: hidden;
}
.zaui-input-status-success {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding-right: 12px;
}
.zaui-input-status-success-icon {
  color: var(--zaui-light-input-status-success-icon-color, #34b764);
}
.zaui-input-password-icon {
  margin-right: 12px;
}
.zaui-input-small {
  min-width: unset;
  height: 32px;
}
.zaui-input-medium {
  min-width: unset;
  height: 48px;
}
.zaui-input-large {
  min-width: unset;
  height: 56px;
}
.zaui-input:hover,
.zaui-input:focus,
.zaui-input:focus-visible {
  border-color: var(--zaui-light-input-hover-border-color, #006af5);
}
.zaui-input:hover.zaui-input-status-error,
.zaui-input:focus.zaui-input-status-error,
.zaui-input:focus-visible.zaui-input-status-error {
  border-color: var(--zaui-light-input-status-error, #dc1f18);
}
.zaui-input-status-error {
  border-color: var(--zaui-light-input-status-error, #dc1f18);
}
.zaui-input-disabled {
  color: var(--zaui-light-input-disabled-color, #767a7f);
  background-color: var(--zaui-light-input-disabled-background-color, #0000001a);
  border: none;
}
.zaui-input-affix-wrapper {
  background-color: var(--zaui-light-input-background-color, #ffffff);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  border: 1px solid var(--zaui-light-input-border-color, #b9bdc1);
  border-radius: 8px;
  margin: 4px 0px;
}
.zaui-input-affix-wrapper-focused {
  border-color: var(--zaui-light-input-hover-border-color, #006af5);
}
.zaui-input-affix-wrapper .zaui-input {
  border: none;
  margin: 0;
}
.zaui-input-affix-wrapper .zaui-input-suffix {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.zaui-input-affix-wrapper-status-error {
  border-color: var(--zaui-light-input-status-error, #dc1f18);
}
.zaui-input-affix-wrapper-disabled {
  border: none;
  color: var(--zaui-light-input-disabled-color, #767a7f);
  background-color: var(--zaui-light-input-disabled-background-color, #0000001a);
}
.zaui-input-affix-wrapper-disabled .zaui-input-disabled {
  background-color: transparent;
}
.zaui-input-affix-wrapper-disabled .zaui-input-suffix {
  background-color: transparent;
}
.zaui-input-affix-wrapper:hover,
.zaui-input-affix-wrapper:focus,
.zaui-input-affix-wrapper:focus-visible {
  border-color: var(--zaui-light-input-hover-border-color, #006af5);
}
.zaui-input-affix-wrapper:hover.zaui-input-affix-wrapper-status-error,
.zaui-input-affix-wrapper:focus.zaui-input-affix-wrapper-status-error,
.zaui-input-affix-wrapper:focus-visible.zaui-input-affix-wrapper-status-error {
  border-color: var(--zaui-light-input-status-error, #dc1f18);
}
.zaui-input-textarea {
  resize: none;
  padding: 12px;
  font-family: inherit;
}
.zaui-input-textarea::-webkit-resizer {
  -webkit-appearance: none;
}
.zaui-input-textarea-min-height {
  min-height: 120px;
}
.zaui-input-textarea::-webkit-scrollbar {
  display: none;
}
.zaui-input-textarea-affix-wrapper {
  align-items: flex-start;
  padding: 12px 0;
}
.zaui-input-textarea-affix-wrapper .zaui-input-textarea {
  padding-top: 0;
  padding-bottom: 0;
}
.zaui-input-textarea ~ .zaui-input-suffix .zaui-input-show-count-suffix {
  position: absolute;
  bottom: 12px;
  right: 12px;
}
.zaui-input-textarea-has-show-count {
  margin-bottom: 24px !important;
}
.zaui-input-otp {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 56px;
  padding: 11px 16px;
  font-weight: 500;
  font-size: 27px;
  line-height: 34px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.zaui-input-otp:hover,
.zaui-input-otp:focus,
.zaui-input-otp:focus-visible {
  border-color: var(--zaui-light-input-border-color, #b9bdc1);
}
.zaui-input-otp-wrapper {
  position: relative;
}
.zaui-input-otp-hidden-input {
  position: absolute;
  width: 100%;
  opacity: 0;
  height: 0;
}
.zaui-input-otp-list {
  display: flex;
}
.zaui-input-otp-list .zaui-input-otp:not(:last-child) {
  margin-right: 8px;
}
.zaui-input-otp-active {
  border-color: var(--zaui-light-input-hover-border-color, #006af5);
  border-width: 2px;
}
.zaui-input-otp-active:hover,
.zaui-input-otp-active:focus,
.zaui-input-otp-active:focus-visible {
  border-color: var(--zaui-light-input-hover-border-color, #006af5);
}
.zaui-input-otp-cursor::after {
  position: absolute;
  content: "";
  width: 1px;
  background: var(--zaui-light-input-hover-border-color, #006af5);
  height: 32px;
  animation: cursorAnimate 0.9s infinite;
}
.zaui-input-otp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--zaui-light-input-text-color, #141415);
}
body[zaui-theme="dark"] .zaui-input {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  font-family: inherit;
  background-color: transparent;
  color: var(--zaui-light-input-text-color, #141415);
  border-radius: 8px;
  height: 48px;
  width: 100%;
  border: 1px solid var(--zaui-light-input-border-color, #b9bdc1);
  padding: 0 12px;
  margin: 4px 0px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  color: var(--zaui-dark-input-text-color, #f4f5f6);
  border-color: var(--zaui-dark-input-border-color, #767a7f);
}
body[zaui-theme="dark"] .zaui-input::-moz-placeholder {
  color: var(--zaui-light-input-placeholder-color, #b9bdc1);
}
body[zaui-theme="dark"] .zaui-input::placeholder {
  color: var(--zaui-light-input-placeholder-color, #b9bdc1);
}
body[zaui-theme="dark"] .zaui-input:-ms-input-placeholder {
  color: var(--zaui-light-input-placeholder-color, #b9bdc1);
}
body[zaui-theme="dark"] .zaui-input::-moz-placeholder {
  color: var(--zaui-dark-input-placeholder-color, #53575a);
}
body[zaui-theme="dark"] .zaui-input::placeholder {
  color: var(--zaui-dark-input-placeholder-color, #53575a);
}
body[zaui-theme="dark"] .zaui-input:-ms-input-placeholder {
  color: var(--zaui-dark-input-placeholder-color, #53575a);
}
body[zaui-theme="dark"] .zaui-input::-ms-input-placeholder {
  color: var(--zaui-dark-input-placeholder-color, #53575a);
}
body[zaui-theme="dark"] .zaui-input-wrapper {
  color: var(--zaui-dark-input-text-color, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-input-affix-wrapper {
  background-color: var(--zaui-dark-input-background-color, #141415);
}
body[zaui-theme="dark"] .zaui-input-affix-wrapper .zaui-input {
  border: none;
  margin: 0;
}
body[zaui-theme="dark"] .zaui-input-affix-wrapper-focused {
  border-color: var(--zaui-dark-input-hover-border-color, #006af5);
}
body[zaui-theme="dark"] .zaui-input-affix-wrapper-status-error {
  border-color: var(--zaui-dark-input-status-error, #dc1f18);
}
body[zaui-theme="dark"] .zaui-input-affix-wrapper-disabled {
  color: var(--zaui-dark-input-disabled-color, #8f9499);
  background-color: var(--zaui-dark-input-disabled-background-color, #ffffff1a);
}
body[zaui-theme="dark"] .zaui-input-affix-wrapper-disabled .zaui-input-disabled {
  background-color: transparent;
}
body[zaui-theme="dark"] .zaui-input-affix-wrapper-disabled .zaui-input-disabled {
  background-color: transparent;
}
body[zaui-theme="dark"] .zaui-input-affix-wrapper-disabled .zaui-input-suffix {
  background-color: transparent;
}
body[zaui-theme="dark"] .zaui-input-suffix {
  background-color: var(--zaui-dark-input-background-color, #141415);
}
body[zaui-theme="dark"] .zaui-input-helper-text {
  color: var(--zaui-dark-input-helper-text-color, #8f9499);
}
body[zaui-theme="dark"] .zaui-input-helper-text-has-error {
  color: var(--zaui-dark-input-error-text-color, #dc1f18);
}
body[zaui-theme="dark"] .zaui-input-clear-icon {
  color: var(--zaui-dark-input-clear-icon-color, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-input-status-success-icon {
  color: var(--zaui-dark-input-status-success-icon-color, #34b764);
}
body[zaui-theme="dark"] .zaui-input-status-error {
  border-color: var(--zaui-dark-input-status-error, #dc1f18);
}
body[zaui-theme="dark"] .zaui-input-disabled {
  color: var(--zaui-dark-input-disabled-color, #8f9499);
  background-color: var(--zaui-dark-input-disabled-background-color, #ffffff1a);
  border: none;
}
body[zaui-theme="dark"] .zaui-input:hover,
body[zaui-theme="dark"] .zaui-input:focus,
body[zaui-theme="dark"] .zaui-input:focus-visible {
  border-color: var(--zaui-dark-input-hover-border-color, #006af5);
}
body[zaui-theme="dark"] .zaui-input:hover.zaui-input-affix-wrapper-status-error,
body[zaui-theme="dark"] .zaui-input:focus.zaui-input-affix-wrapper-status-error,
body[zaui-theme="dark"] .zaui-input:focus-visible.zaui-input-affix-wrapper-status-error {
  border-color: var(--zaui-dark-input-status-error, #dc1f18);
}
body[zaui-theme="dark"] .zaui-input:hover ~ .zaui-input-suffix .zaui-input-status-success-icon,
body[zaui-theme="dark"] .zaui-input:focus-visible ~ .zaui-input-suffix .zaui-input-status-success-icon {
  color: var(--zaui-dark-input-status-success-icon-focus-visible-color, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-input-otp {
  width: 52px;
  height: 56px;
  padding: 11px 16px;
  font-weight: 500;
  font-size: 27px;
  line-height: 34px;
}
body[zaui-theme="dark"] .zaui-input-otp:hover,
body[zaui-theme="dark"] .zaui-input-otp:focus,
body[zaui-theme="dark"] .zaui-input-otp:focus-visible {
  border-color: var(--zaui-dark-input-border-color, #767a7f);
}
body[zaui-theme="dark"] .zaui-input-otp-active {
  border-color: var(--zaui-dark-input-hover-border-color, #006af5);
  border-width: 2px;
}
body[zaui-theme="dark"] .zaui-input-otp-active:hover,
body[zaui-theme="dark"] .zaui-input-otp-active:focus,
body[zaui-theme="dark"] .zaui-input-otp-active:focus-visible {
  border-color: var(--zaui-dark-input-hover-border-color, #006af5);
}
body[zaui-theme="dark"] .zaui-input-otp-cursor::after {
  background: var(--zaui-dark-input-hover-border-color, #006af5);
}
body[zaui-theme="dark"] .zaui-input-otp-dot {
  background: var(--zaui-dark-input-text-color, #f4f5f6);
}
.zaui-avatar {
  width: var(--zaui-avatar-size, 48px);
  height: var(--zaui-avatar-size, 48px);
  position: relative;
  border-radius: 100%;
  display: inline-block;
  background: linear-gradient(45deg, #34b764 0%, #99e5b5 100%);
  vertical-align: middle;
  text-align: center;
  color: var(--zaui-avatar-text-color, #ffffff);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}
.zaui-avatar-online {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  width: 10px;
  height: 10px;
  content: '';
  background-color: var(--zaui-light-avatar-status-online, #34b764);
  border: solid 2px var(--zaui-light-avatar-status-background, #ffffff);
  border-radius: 100%;
  position: absolute;
  box-sizing: content-box;
  bottom: calc(calc(var(--zaui-avatar-size, 48px) * 0.1464) - calc(10px * 0.75));
  right: calc(calc(var(--zaui-avatar-size, 48px) * 0.1464) - calc(10px * 0.75));
}
.zaui-avatar-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.zaui-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: inherit;
}
.zaui-avatar-blocked {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  width: 12px;
  height: 12px;
  border: solid 2px var(--zaui-light-avatar-status-background, #ffffff);
  border-radius: 100%;
  position: absolute;
  box-sizing: content-box;
  bottom: calc(calc(var(--zaui-avatar-size, 48px) * 0.1464) - calc(12px * 0.75));
  right: calc(calc(var(--zaui-avatar-size, 48px) * 0.1464) - calc(12px * 0.75));
}
.zaui-avatar-blocked svg {
  position: absolute;
  left: 0;
  top: 0;
}
.zaui-avatar-blocked path.zaui-avatar-block-icon-bg {
  fill: var(--zaui-light-avatar-status-background, #ffffff);
}
.zaui-avatar-story,
.zaui-avatar-story-seen {
  z-index: 1;
  cursor: pointer;
}
.zaui-avatar-story .zaui-avatar-image,
.zaui-avatar-story-seen .zaui-avatar-image,
.zaui-avatar-story .zaui-avatar-inner,
.zaui-avatar-story-seen .zaui-avatar-inner {
  width: calc(var(--zaui-avatar-size, 48px) - calc(2px * 4));
  height: calc(var(--zaui-avatar-size, 48px) - calc(2px * 4));
  left: calc(2px * 2);
  top: calc(2px * 2);
}
.zaui-avatar-story::before,
.zaui-avatar-story-seen::before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: absolute;
  content: '';
  border-radius: 100%;
  z-index: -1;
  width: calc(var(--zaui-avatar-size, 48px) - calc(2px * 2));
  height: calc(var(--zaui-avatar-size, 48px) - calc(2px * 2));
  border: solid 2px var(--zaui-light-avatar-border, #ffffff);
  background: transparent;
  top: 2px;
  left: 2px;
}
.zaui-avatar-story::after,
.zaui-avatar-story-seen::after {
  position: absolute;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  content: '';
  border-radius: 100%;
  z-index: -2;
  top: 0;
  left: 0;
  width: var(--zaui-avatar-size, 48px);
  height: var(--zaui-avatar-size, 48px);
  background: var(--zaui-light-avatar-story-contour-color, linear-gradient(45deg, #006af5 0%, #5fcbf2 100%));
}
.zaui-avatar-story-seen::after {
  background: var(--zaui-light-avatar-story-seen, #d6d9dc);
}
.zaui-avatar-text-small {
  font-size: 13px;
  line-height: 18px;
}
.zaui-avatar-text-xsmall {
  font-size: 10px;
  line-height: 14px;
}
.zaui-avatar-text-medium {
  font-size: 15px;
  line-height: 20px;
}
.zaui-avatar-text-large {
  font-size: 18px;
  line-height: 24px;
}
.zaui-avatar-color-01 {
  background: var(--zaui-avatar-background-gradient-01, linear-gradient(45deg, #006af5 0%, #8fc1ff 100%));
}
.zaui-avatar-color-02 {
  background: var(--zaui-avatar-background-gradient-02, linear-gradient(45deg, #6a40bf 0%, #52a0ff 100%));
}
.zaui-avatar-color-03 {
  background: var(--zaui-avatar-background-gradient-03, linear-gradient(45deg, #12aee2 0%, #66d68f 100%));
}
.zaui-avatar-color-04 {
  background: var(--zaui-avatar-background-gradient-04, linear-gradient(45deg, #34b764 0%, #99e5b5 100%));
}
.zaui-avatar-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: calc(calc(24px * 2) + calc(2px * 4));
  width: -moz-max-content;
  width: max-content;
  justify-content: center;
  align-items: center;
  padding: 2px;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}
.zaui-avatar-group.zaui-avatar-group-horizontal {
  flex-wrap: nowrap;
  max-width: unset;
  width: -moz-max-content;
  width: max-content;
}
.zaui-avatar-group.zaui-avatar-group-horizontal .zaui-avatar-group-item:not(:first-child) {
  margin-left: -8px;
}
.zaui-avatar-group.zaui-avatar-group-horizontal .zaui-avatar-group-item:nth-child(1) {
  z-index: 1;
  margin-top: 0;
}
.zaui-avatar-group.zaui-avatar-group-horizontal .zaui-avatar-group-item:nth-child(2) {
  z-index: 2;
  margin-top: 0;
}
.zaui-avatar-group.zaui-avatar-group-horizontal .zaui-avatar-group-item:nth-child(3),
.zaui-avatar-group.zaui-avatar-group-horizontal .zaui-avatar-group-item:nth-child(3):last-child {
  z-index: 3;
  margin-top: 0;
}
.zaui-avatar-group.zaui-avatar-group-horizontal .zaui-avatar-group-item:nth-child(4) {
  z-index: 4;
  margin-top: 0;
}
.zaui-avatar-group .zaui-avatar-group-item {
  border: solid 2px var(--zaui-light-avatar-border, #ffffff);
  flex-wrap: wrap;
}
.zaui-avatar-group .zaui-avatar-group-item .zaui-avatar-inner {
  border: solid 2px var(--zaui-light-avatar-border, #ffffff);
}
.zaui-avatar-group .zaui-avatar-group-item:nth-child(1) {
  z-index: 2;
}
.zaui-avatar-group .zaui-avatar-group-item:nth-child(2) {
  z-index: 3;
  margin-left: calc(2px * -2);
}
.zaui-avatar-group .zaui-avatar-group-item:nth-child(3) {
  z-index: 1;
  margin-top: calc(2px * -2);
}
.zaui-avatar-group .zaui-avatar-group-item:nth-child(3):last-child {
  margin-top: calc(2px * -4);
}
.zaui-avatar-group .zaui-avatar-group-item:nth-child(4) {
  z-index: 4;
  margin-left: calc(2px * -2);
  margin-top: calc(2px * -2);
}
body[zaui-theme="dark"] .zaui-avatar-online {
  background-color: var(--zaui-dark-avatar-status-online, #34b764);
  border: solid 2px var(--zaui-dark-avatar-status-background, #141415);
}
body[zaui-theme="dark"] .zaui-avatar-blocked {
  border: solid 2px var(--zaui-dark-avatar-status-background, #141415);
}
body[zaui-theme="dark"] .zaui-avatar-blocked path.zaui-avatar-block-icon-bg {
  fill: var(--zaui-dark-avatar-status-background, #141415);
}
body[zaui-theme="dark"] .zaui-avatar-story::before,
body[zaui-theme="dark"] .zaui-avatar-story-seen::before {
  border: solid 2px var(--zaui-dark-avatar-border, #141415);
}
body[zaui-theme="dark"] .zaui-avatar-story::after,
body[zaui-theme="dark"] .zaui-avatar-story-seen::after {
  background: var(--zaui-dark-avatar-story-contour-color, linear-gradient(45deg, #006af5 0%, #5fcbf2 100%));
}
body[zaui-theme="dark"] .zaui-avatar-story-seen::after {
  background: var(--zaui-dark-avatar-story-seen, #53575a);
}
body[zaui-theme="dark"] .zaui-avatar-group .zaui-avatar-group-item .zaui-avatar-inner {
  border: solid 2px var(--zaui-dark-avatar-border, #141415);
}
.zaui-modal-content {
  background: var(--zaui-light-modal-background, #ffffff);
  background-color: var(--zaui-light-modal-background, #ffffff);
  border-radius: 12px;
  position: relative;
  margin: auto;
  width: calc(100vw - 64px);
  max-width: 480px;
  max-height: 80%;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.zaui-modal-content .zaui-modal-content-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  margin-bottom: 12px;
}
.zaui-modal-content-main {
  padding: 24px;
  overflow-y: auto;
}
.zaui-modal-content-cover {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
}
.zaui-modal-content-cover img {
  width: 100%;
  height: auto;
  display: block;
}
.zaui-modal-content-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 12px 16px;
  position: relative;
}
.zaui-modal-content-actions::before {
  width: calc(100% - calc(2 * 24px));
  height: 1px;
  position: absolute;
  content: '';
  left: 24px;
  top: 0;
  background: var(--zaui-light-modal-divider, #e9ebed);
}
.zaui-modal-content-actions-no-divider::before {
  display: none;
}
.zaui-modal-content-actions .zaui-modal-content-action {
  min-width: unset;
  padding: 8px;
}
.zaui-modal-content-actions .zaui-modal-content-action:active,
.zaui-modal-content-actions .zaui-modal-content-action:focus,
.zaui-modal-content-actions .zaui-modal-content-action:hover {
  background-color: transparent;
}
.zaui-modal-content-actions .zaui-modal-content-action:not(:last-child) {
  margin-right: 8px;
  width: -moz-max-content;
  width: max-content;
}
.zaui-modal-content-actions-vertical {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.zaui-modal-content-actions-vertical .zaui-modal-content-action:not(:last-child) {
  margin-right: 0;
}
.zaui-modal-content-enter,
.zaui-modal-content-appear {
  opacity: 0;
  animation-fill-mode: both;
  transition-duration: 0.3s;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-play-state: paused;
}
.zaui-modal-content-exit {
  animation-fill-mode: both;
  transition-duration: 0.3s;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
  animation-play-state: paused;
}
.zaui-modal-content-enter-active,
.zaui-modal-content-appear-active {
  animation-name: zoomIn;
  animation-play-state: running;
}
.zaui-modal-content-exit-active {
  animation-name: zoomOut;
  animation-play-state: running;
}
body[zaui-theme="dark"] .zaui-modal-content {
  background: var(--zaui-dark-modal-background, #252627);
  background-color: var(--zaui-dark-modal-background, #252627);
}
body[zaui-theme="dark"] .zaui-modal-content-actions::before {
  background: var(--zaui-dark-modal-divider, #36383a);
}
.zaui-sheet-wrapper {
  overflow: hidden;
  display: block;
  height: 100%;
  width: 100%;
}
.zaui-sheet-content.zaui-sheet-content-hug-content {
  height: auto;
  min-height: unset;
}
.zaui-sheet-content {
  background: var(--zaui-light-sheet-container, #ffffff);
  background-color: var(--zaui-light-sheet-container, #ffffff);
  border-radius: 16px 16px 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 50%;
  max-height: 100vh;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0px -2px 6px 0px #14141524;
  touch-action: none;
  padding-bottom: var(--zaui-safe-area-inset-bottom);
}
.zaui-sheet-content .zaui-sheet-content-handler-wrapper {
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.zaui-sheet-content .zaui-sheet-content-handler-wrapper .zaui-sheet-content-handler {
  display: inline-block;
  width: 48px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--zaui-light-sheet-handler, #e9ebed);
  margin: calc(calc(24px - 6px) / 2) 0;
}
.zaui-sheet-content .zaui-sheet-content-header {
  display: flex;
  flex-direction: row;
  height: 48px;
  width: 100%;
  align-items: center;
}
.zaui-sheet-content .zaui-sheet-content-header .zaui-sheet-content-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  flex: 1;
}
.zaui-sheet-content-main {
  padding: 24px;
  overflow-y: auto;
}
.zaui-sheet-content-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 12px 16px;
  position: relative;
}
.zaui-sheet-content-actions::before {
  width: calc(100% - calc(2 * 24px));
  height: 1px;
  position: absolute;
  content: '';
  left: 24px;
  top: 0;
  background: var(--zaui-light-sheet-divider, #e9ebed);
}
.zaui-sheet-content-actions-no-divider::before {
  display: none;
}
.zaui-sheet-content-actions .zaui-sheet-content-action {
  min-width: unset;
  padding: 8px;
}
.zaui-sheet-content-actions .zaui-sheet-content-action:not(:last-child) {
  margin-right: 8px;
  width: -moz-max-content;
  width: max-content;
}
.zaui-sheet-content-actions-vertical {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.zaui-sheet-content-actions-vertical .zaui-sheet-content-action:not(:last-child) {
  margin-right: 0;
}
.zaui-sheet-content-enter,
.zaui-sheet-content-appear {
  transform: translateY(100%);
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: ease-in;
  animation-play-state: paused;
}
.zaui-sheet-content-exit {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  transition-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-play-state: paused;
}
.zaui-sheet-content-enter-active,
.zaui-sheet-content-appear-active {
  animation-name: slideUp;
  animation-play-state: running;
}
.zaui-sheet-content-exit-active {
  animation-name: slideDown;
  animation-play-state: running;
}
.zaui-action-sheet .zaui-sheet-content {
  height: -moz-max-content;
  height: max-content;
  min-height: unset;
  padding-bottom: var(--zaui-safe-area-inset-bottom);
}
.zaui-action-sheet-title-wrapper {
  padding: 16px;
}
.zaui-action-sheet-title-wrapper .zaui-action-sheet-title {
  color: var(--zaui-light-action-sheet-title, #767a7f);
  font-size: 14px;
  line-height: 18px;
  padding: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.zaui-action-sheet-actions-groups {
  flex: 1;
}
.zaui-action-sheet-actions-group {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.zaui-action-sheet-actions-group:first-child {
  border-top: 1px solid var(--zaui-light-action-sheet-divider, #e9ebed);
}
.zaui-action-sheet-actions-group:not(:first-child) {
  border-top: 4px solid var(--zaui-light-action-sheet-divider, #e9ebed);
}
.zaui-action-sheet-action {
  list-style-type: none;
  height: 56px;
}
.zaui-action-sheet-action:not(:last-child) {
  border-bottom: 1px solid var(--zaui-light-action-sheet-divider, #e9ebed);
}
.zaui-action-sheet-action-button.zaui-btn {
  border-radius: 0;
  height: 100%;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
body[zaui-theme="dark"] .zaui-sheet-content {
  background: var(--zaui-dark-sheet-container, #252627);
  background-color: var(--zaui-dark-sheet-container, #252627);
}
body[zaui-theme="dark"] .zaui-sheet-content-actions::before {
  background: var(--zaui-dark-sheet-divider, #36383a);
}
body[zaui-theme="dark"] .zaui-sheet-content .zaui-sheet-content-handler-wrapper .zaui-sheet-content-handler {
  background-color: var(--zaui-dark-sheet-handler, #36383a);
}
.zaui-tabs {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.zaui-tabs-content {
  display: flex;
  width: 100%;
}
.zaui-tabs-content-holder {
  flex: auto;
}
.zaui-tabs-tabpane {
  width: 100%;
  flex: none;
}
.zaui-tabs-tabbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background-color: var(--zaui-light-tabbar-background, #ffffff);
  position: relative;
}
.zaui-tabs-tabbar.zaui-tabs-tabbar-scrollable {
  overflow-x: auto;
}
.zaui-tabs-tabbar.zaui-tabs-tabbar-scrollable .zaui-tabs-tabbar-item {
  text-overflow: unset;
  overflow: unset;
  max-width: unset;
  min-width: unset;
}
.zaui-tabs-tabbar::after {
  height: 0.5px;
  width: var(--zaui-tabbar-width, 100%);
  position: absolute;
  content: '';
  background-color: var(--zaui-light-tabbar-divider, #e9ebed);
  bottom: 0;
  left: 0;
  z-index: 1;
}
.zaui-tabs-tabbar::-webkit-scrollbar {
  display: none;
}
.zaui-tabs-tabbar-center {
  justify-content: center;
}
.zaui-tabs-tabbar-item {
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--zaui-light-tabbar-label, #767a7f);
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 200px;
  min-width: 72px;
}
.zaui-tabs-tabbar-item::before {
  display: block;
  font-weight: 500;
  height: 1px;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}
.zaui-tabs-tabbar-item.zaui-tabs-tabbar-item-active {
  font-weight: 500;
  color: var(--zaui-light-tabbar-label-active, #141415);
  position: relative;
}
.zaui-tabs-tabbar-item:focus,
.zaui-tabs-tabbar-item:active {
  outline: none;
}
.zaui-tabs-tabbar-active-line {
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  content: '';
  position: absolute;
  background-color: var(--zaui-light-tabbar-active-line, #006af5);
  z-index: 2;
  transition: left 0.3s ease-in-out, width 0.3s 0.1s;
}
.zaui-tabs-bottom .zaui-tabs-tabbar .zaui-tabs-tabbar-active-line {
  border-radius: 0 0 2px 2px;
  bottom: unset;
  top: 0;
}
body[zaui-theme="dark"] .zaui-tabs-tabbar {
  background-color: var(--zaui-dark-tabbar-background, #141415);
}
body[zaui-theme="dark"] .zaui-tabs-tabbar::after {
  background-color: var(--zaui-dark-tabbar-divider, #36383a);
}
body[zaui-theme="dark"] .zaui-tabs-tabbar-item {
  color: var(--zaui-dark-tabbar-label, #8f9499);
}
body[zaui-theme="dark"] .zaui-tabs-tabbar-item.zaui-tabs-tabbar-item-active {
  color: var(--zaui-dark-tabbar-label-active, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-tabs-tabbar-active-line {
  background-color: var(--zaui-dark-tabbar-active-line, #006af5);
}
.zaui-routes {
  display: grid;
  overflow: hidden;
}
.zaui-routes .zaui-routes-item {
  grid-area: 1 / 1 / 2 / 2;
  max-width: 100vw;
  max-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-forward-enter-active,
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-forward-exit-active,
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-backward-enter-active,
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-backward-exit-active {
  transition: transform 400ms ease;
}
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-no-animation-enter-active,
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-no-animation-exit-active {
  transition: transform 200ms ease;
}
.zaui-routes .zaui-routes-no-animation-enter {
  transform: translateX(0);
  opacity: 0;
}
.zaui-routes .zaui-routes-no-animation-enter-active {
  opacity: 1;
}
.zaui-routes .zaui-routes-no-animation-exit {
  transform: translateX(0);
  opacity: 1;
}
.zaui-routes .zaui-routes-no-animation-exit-active {
  opacity: 0;
}
.zaui-routes .zaui-routes-backward-enter {
  transform: translateX(-100%);
}
.zaui-routes .zaui-routes-backward-enter-active {
  transform: translateX(0);
}
.zaui-routes .zaui-routes-backward-exit {
  transform: translateX(0);
}
.zaui-routes .zaui-routes-backward-exit-active {
  transform: translateX(100%);
}
.zaui-routes .zaui-routes-forward-enter {
  transform: translateX(100%);
}
.zaui-routes .zaui-routes-forward-enter-active {
  transform: translateX(0);
}
.zaui-routes .zaui-routes-forward-exit {
  transform: translateX(0);
}
.zaui-routes .zaui-routes-forward-exit-active {
  transform: translateX(-100%);
}
.zaui-page {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.zaui-page-hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.zaui-page-hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.zaui-page.disable-scrolling {
  overflow: hidden;
}
.zaui-text {
  display: block;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}
.zaui-text-bold {
  font-weight: 500;
}
.zaui-text-xLarge {
  font-size: 18px;
  line-height: 24px;
}
.zaui-text-large {
  font-size: 16px;
  line-height: 22px;
}
.zaui-text-normal {
  font-size: 15px;
  line-height: 20px;
}
.zaui-text-small {
  font-size: 14px;
  line-height: 18px;
}
.zaui-text-xSmall {
  font-size: 13px;
  line-height: 18px;
}
.zaui-text-xxSmall {
  font-size: 12px;
  line-height: 16px;
}
.zaui-text-xxxSmall {
  font-size: 11px;
  line-height: 16px;
}
.zaui-text-xxxxSmall {
  font-size: 10px;
  line-height: 14px;
}
.zaui-text-header {
  font-weight: 500;
  display: block;
  font-size: 16px;
  line-height: 22px;
}
.zaui-text-header-normal {
  font-size: 16px;
  line-height: 22px;
}
.zaui-text-header-small {
  font-size: 15px;
  line-height: 22px;
}
.zaui-text-title {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.zaui-text-title-normal {
  font-size: 18px;
  line-height: 24px;
}
.zaui-text-title-xLarge {
  font-size: 22px;
  line-height: 26px;
}
.zaui-text-title-large {
  font-size: 20px;
  line-height: 26px;
}
.zaui-text-title-small {
  font-size: 15px;
  line-height: 20px;
}
.zaui-box {
  padding: 0px;
  margin: 0px;
  display: block;
}
.zaui-box-justify-flex-start {
  justify-content: flex-start;
}
.zaui-box-justify-flex-end {
  justify-content: flex-end;
}
.zaui-box-justify-center {
  justify-content: center;
}
.zaui-box-justify-space-between {
  justify-content: space-between;
}
.zaui-box-justify-space-around {
  justify-content: space-around;
}
.zaui-box-justify-space-evenly {
  justify-content: space-evenly;
}
.zaui-box-justify-initial {
  justify-content: initial;
}
.zaui-box-align-items-flex-start {
  align-items: flex-start;
}
.zaui-box-align-items-flex-end {
  align-items: flex-end;
}
.zaui-box-align-items-stretch {
  align-items: stretch;
}
.zaui-box-align-items-baseline {
  align-items: baseline;
}
.zaui-box-align-items-center {
  align-items: center;
}
.zaui-box-align-items-initial {
  align-items: initial;
}
.zaui-box-align-content-stretch {
  align-items: stretch;
}
.zaui-box-align-content-center {
  align-items: center;
}
.zaui-box-align-content-flex-start {
  align-items: flex-start;
}
.zaui-box-align-content-flex-end {
  align-items: flex-end;
}
.zaui-box-align-content-space-between {
  align-items: space-between;
}
.zaui-box-align-content-space-around {
  align-items: space-around;
}
.zaui-box-align-content-space-evenly {
  align-items: space-evenly;
}
.zaui-box-align-content-initial {
  align-items: initial;
}
.zaui-box-text-align-left {
  text-align: left;
}
.zaui-box-text-align-right {
  text-align: right;
}
.zaui-box-text-align-center {
  text-align: center;
}
.zaui-box-text-align-justify {
  text-align: justify;
}
.zaui-box-text-align-initial {
  text-align: initial;
}
.zaui-box-text-align-inherit {
  text-align: inherit;
}
.zaui-box-vertical-align-baseline {
  vertical-align: baseline;
}
.zaui-box-vertical-align-sub {
  vertical-align: sub;
}
.zaui-box-vertical-align-super {
  vertical-align: super;
}
.zaui-box-vertical-align-top {
  vertical-align: top;
}
.zaui-box-vertical-align-text-top {
  vertical-align: text-top;
}
.zaui-box-vertical-align-middle {
  vertical-align: middle;
}
.zaui-box-vertical-align-bottom {
  vertical-align: bottom;
}
.zaui-box-vertical-align-text-bottom {
  vertical-align: text-bottom;
}
.zaui-box-vertical-align-initial {
  vertical-align: initial;
}
.zaui-box-vertical-align-inherit {
  vertical-align: inherit;
}
.zaui-box-m-0 {
  margin: calc(0*4px);
}
.zaui-box-p-0 {
  padding: calc(0*4px);
}
.zaui-box-mt-0 {
  margin-top: calc(0*4px);
}
.zaui-box-ml-0 {
  margin-left: calc(0*4px);
}
.zaui-box-mb-0 {
  margin-bottom: calc(0*4px);
}
.zaui-box-mr-0 {
  margin-right: calc(0*4px);
}
.zaui-box-mx-0 {
  margin-left: calc(0*4px);
  margin-right: calc(0*4px);
}
.zaui-box-my-0 {
  margin-top: calc(0*4px);
  margin-bottom: calc(0*4px);
}
.zaui-box-p-0 {
  padding: calc(0*4px);
}
.zaui-box-p-0 {
  padding: calc(0*4px);
}
.zaui-box-pt-0 {
  padding-top: calc(0*4px);
}
.zaui-box-pl-0 {
  padding-left: calc(0*4px);
}
.zaui-box-pb-0 {
  padding-bottom: calc(0*4px);
}
.zaui-box-pr-0 {
  padding-right: calc(0*4px);
}
.zaui-box-px-0 {
  padding-left: calc(0*4px);
  padding-right: calc(0*4px);
}
.zaui-box-py-0 {
  padding-top: calc(0*4px);
  padding-bottom: calc(0*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-1 {
  margin: calc(1*4px);
}
.zaui-box-p-1 {
  padding: calc(1*4px);
}
.zaui-box-mt-1 {
  margin-top: calc(1*4px);
}
.zaui-box-ml-1 {
  margin-left: calc(1*4px);
}
.zaui-box-mb-1 {
  margin-bottom: calc(1*4px);
}
.zaui-box-mr-1 {
  margin-right: calc(1*4px);
}
.zaui-box-mx-1 {
  margin-left: calc(1*4px);
  margin-right: calc(1*4px);
}
.zaui-box-my-1 {
  margin-top: calc(1*4px);
  margin-bottom: calc(1*4px);
}
.zaui-box-p-1 {
  padding: calc(1*4px);
}
.zaui-box-p-1 {
  padding: calc(1*4px);
}
.zaui-box-pt-1 {
  padding-top: calc(1*4px);
}
.zaui-box-pl-1 {
  padding-left: calc(1*4px);
}
.zaui-box-pb-1 {
  padding-bottom: calc(1*4px);
}
.zaui-box-pr-1 {
  padding-right: calc(1*4px);
}
.zaui-box-px-1 {
  padding-left: calc(1*4px);
  padding-right: calc(1*4px);
}
.zaui-box-py-1 {
  padding-top: calc(1*4px);
  padding-bottom: calc(1*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-2 {
  margin: calc(2*4px);
}
.zaui-box-p-2 {
  padding: calc(2*4px);
}
.zaui-box-mt-2 {
  margin-top: calc(2*4px);
}
.zaui-box-ml-2 {
  margin-left: calc(2*4px);
}
.zaui-box-mb-2 {
  margin-bottom: calc(2*4px);
}
.zaui-box-mr-2 {
  margin-right: calc(2*4px);
}
.zaui-box-mx-2 {
  margin-left: calc(2*4px);
  margin-right: calc(2*4px);
}
.zaui-box-my-2 {
  margin-top: calc(2*4px);
  margin-bottom: calc(2*4px);
}
.zaui-box-p-2 {
  padding: calc(2*4px);
}
.zaui-box-p-2 {
  padding: calc(2*4px);
}
.zaui-box-pt-2 {
  padding-top: calc(2*4px);
}
.zaui-box-pl-2 {
  padding-left: calc(2*4px);
}
.zaui-box-pb-2 {
  padding-bottom: calc(2*4px);
}
.zaui-box-pr-2 {
  padding-right: calc(2*4px);
}
.zaui-box-px-2 {
  padding-left: calc(2*4px);
  padding-right: calc(2*4px);
}
.zaui-box-py-2 {
  padding-top: calc(2*4px);
  padding-bottom: calc(2*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-3 {
  margin: calc(3*4px);
}
.zaui-box-p-3 {
  padding: calc(3*4px);
}
.zaui-box-mt-3 {
  margin-top: calc(3*4px);
}
.zaui-box-ml-3 {
  margin-left: calc(3*4px);
}
.zaui-box-mb-3 {
  margin-bottom: calc(3*4px);
}
.zaui-box-mr-3 {
  margin-right: calc(3*4px);
}
.zaui-box-mx-3 {
  margin-left: calc(3*4px);
  margin-right: calc(3*4px);
}
.zaui-box-my-3 {
  margin-top: calc(3*4px);
  margin-bottom: calc(3*4px);
}
.zaui-box-p-3 {
  padding: calc(3*4px);
}
.zaui-box-p-3 {
  padding: calc(3*4px);
}
.zaui-box-pt-3 {
  padding-top: calc(3*4px);
}
.zaui-box-pl-3 {
  padding-left: calc(3*4px);
}
.zaui-box-pb-3 {
  padding-bottom: calc(3*4px);
}
.zaui-box-pr-3 {
  padding-right: calc(3*4px);
}
.zaui-box-px-3 {
  padding-left: calc(3*4px);
  padding-right: calc(3*4px);
}
.zaui-box-py-3 {
  padding-top: calc(3*4px);
  padding-bottom: calc(3*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-4 {
  margin: calc(4*4px);
}
.zaui-box-p-4 {
  padding: calc(4*4px);
}
.zaui-box-mt-4 {
  margin-top: calc(4*4px);
}
.zaui-box-ml-4 {
  margin-left: calc(4*4px);
}
.zaui-box-mb-4 {
  margin-bottom: calc(4*4px);
}
.zaui-box-mr-4 {
  margin-right: calc(4*4px);
}
.zaui-box-mx-4 {
  margin-left: calc(4*4px);
  margin-right: calc(4*4px);
}
.zaui-box-my-4 {
  margin-top: calc(4*4px);
  margin-bottom: calc(4*4px);
}
.zaui-box-p-4 {
  padding: calc(4*4px);
}
.zaui-box-p-4 {
  padding: calc(4*4px);
}
.zaui-box-pt-4 {
  padding-top: calc(4*4px);
}
.zaui-box-pl-4 {
  padding-left: calc(4*4px);
}
.zaui-box-pb-4 {
  padding-bottom: calc(4*4px);
}
.zaui-box-pr-4 {
  padding-right: calc(4*4px);
}
.zaui-box-px-4 {
  padding-left: calc(4*4px);
  padding-right: calc(4*4px);
}
.zaui-box-py-4 {
  padding-top: calc(4*4px);
  padding-bottom: calc(4*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-5 {
  margin: calc(5*4px);
}
.zaui-box-p-5 {
  padding: calc(5*4px);
}
.zaui-box-mt-5 {
  margin-top: calc(5*4px);
}
.zaui-box-ml-5 {
  margin-left: calc(5*4px);
}
.zaui-box-mb-5 {
  margin-bottom: calc(5*4px);
}
.zaui-box-mr-5 {
  margin-right: calc(5*4px);
}
.zaui-box-mx-5 {
  margin-left: calc(5*4px);
  margin-right: calc(5*4px);
}
.zaui-box-my-5 {
  margin-top: calc(5*4px);
  margin-bottom: calc(5*4px);
}
.zaui-box-p-5 {
  padding: calc(5*4px);
}
.zaui-box-p-5 {
  padding: calc(5*4px);
}
.zaui-box-pt-5 {
  padding-top: calc(5*4px);
}
.zaui-box-pl-5 {
  padding-left: calc(5*4px);
}
.zaui-box-pb-5 {
  padding-bottom: calc(5*4px);
}
.zaui-box-pr-5 {
  padding-right: calc(5*4px);
}
.zaui-box-px-5 {
  padding-left: calc(5*4px);
  padding-right: calc(5*4px);
}
.zaui-box-py-5 {
  padding-top: calc(5*4px);
  padding-bottom: calc(5*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-6 {
  margin: calc(6*4px);
}
.zaui-box-p-6 {
  padding: calc(6*4px);
}
.zaui-box-mt-6 {
  margin-top: calc(6*4px);
}
.zaui-box-ml-6 {
  margin-left: calc(6*4px);
}
.zaui-box-mb-6 {
  margin-bottom: calc(6*4px);
}
.zaui-box-mr-6 {
  margin-right: calc(6*4px);
}
.zaui-box-mx-6 {
  margin-left: calc(6*4px);
  margin-right: calc(6*4px);
}
.zaui-box-my-6 {
  margin-top: calc(6*4px);
  margin-bottom: calc(6*4px);
}
.zaui-box-p-6 {
  padding: calc(6*4px);
}
.zaui-box-p-6 {
  padding: calc(6*4px);
}
.zaui-box-pt-6 {
  padding-top: calc(6*4px);
}
.zaui-box-pl-6 {
  padding-left: calc(6*4px);
}
.zaui-box-pb-6 {
  padding-bottom: calc(6*4px);
}
.zaui-box-pr-6 {
  padding-right: calc(6*4px);
}
.zaui-box-px-6 {
  padding-left: calc(6*4px);
  padding-right: calc(6*4px);
}
.zaui-box-py-6 {
  padding-top: calc(6*4px);
  padding-bottom: calc(6*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-7 {
  margin: calc(7*4px);
}
.zaui-box-p-7 {
  padding: calc(7*4px);
}
.zaui-box-mt-7 {
  margin-top: calc(7*4px);
}
.zaui-box-ml-7 {
  margin-left: calc(7*4px);
}
.zaui-box-mb-7 {
  margin-bottom: calc(7*4px);
}
.zaui-box-mr-7 {
  margin-right: calc(7*4px);
}
.zaui-box-mx-7 {
  margin-left: calc(7*4px);
  margin-right: calc(7*4px);
}
.zaui-box-my-7 {
  margin-top: calc(7*4px);
  margin-bottom: calc(7*4px);
}
.zaui-box-p-7 {
  padding: calc(7*4px);
}
.zaui-box-p-7 {
  padding: calc(7*4px);
}
.zaui-box-pt-7 {
  padding-top: calc(7*4px);
}
.zaui-box-pl-7 {
  padding-left: calc(7*4px);
}
.zaui-box-pb-7 {
  padding-bottom: calc(7*4px);
}
.zaui-box-pr-7 {
  padding-right: calc(7*4px);
}
.zaui-box-px-7 {
  padding-left: calc(7*4px);
  padding-right: calc(7*4px);
}
.zaui-box-py-7 {
  padding-top: calc(7*4px);
  padding-bottom: calc(7*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-8 {
  margin: calc(8*4px);
}
.zaui-box-p-8 {
  padding: calc(8*4px);
}
.zaui-box-mt-8 {
  margin-top: calc(8*4px);
}
.zaui-box-ml-8 {
  margin-left: calc(8*4px);
}
.zaui-box-mb-8 {
  margin-bottom: calc(8*4px);
}
.zaui-box-mr-8 {
  margin-right: calc(8*4px);
}
.zaui-box-mx-8 {
  margin-left: calc(8*4px);
  margin-right: calc(8*4px);
}
.zaui-box-my-8 {
  margin-top: calc(8*4px);
  margin-bottom: calc(8*4px);
}
.zaui-box-p-8 {
  padding: calc(8*4px);
}
.zaui-box-p-8 {
  padding: calc(8*4px);
}
.zaui-box-pt-8 {
  padding-top: calc(8*4px);
}
.zaui-box-pl-8 {
  padding-left: calc(8*4px);
}
.zaui-box-pb-8 {
  padding-bottom: calc(8*4px);
}
.zaui-box-pr-8 {
  padding-right: calc(8*4px);
}
.zaui-box-px-8 {
  padding-left: calc(8*4px);
  padding-right: calc(8*4px);
}
.zaui-box-py-8 {
  padding-top: calc(8*4px);
  padding-bottom: calc(8*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-9 {
  margin: calc(9*4px);
}
.zaui-box-p-9 {
  padding: calc(9*4px);
}
.zaui-box-mt-9 {
  margin-top: calc(9*4px);
}
.zaui-box-ml-9 {
  margin-left: calc(9*4px);
}
.zaui-box-mb-9 {
  margin-bottom: calc(9*4px);
}
.zaui-box-mr-9 {
  margin-right: calc(9*4px);
}
.zaui-box-mx-9 {
  margin-left: calc(9*4px);
  margin-right: calc(9*4px);
}
.zaui-box-my-9 {
  margin-top: calc(9*4px);
  margin-bottom: calc(9*4px);
}
.zaui-box-p-9 {
  padding: calc(9*4px);
}
.zaui-box-p-9 {
  padding: calc(9*4px);
}
.zaui-box-pt-9 {
  padding-top: calc(9*4px);
}
.zaui-box-pl-9 {
  padding-left: calc(9*4px);
}
.zaui-box-pb-9 {
  padding-bottom: calc(9*4px);
}
.zaui-box-pr-9 {
  padding-right: calc(9*4px);
}
.zaui-box-px-9 {
  padding-left: calc(9*4px);
  padding-right: calc(9*4px);
}
.zaui-box-py-9 {
  padding-top: calc(9*4px);
  padding-bottom: calc(9*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-m-10 {
  margin: calc(10*4px);
}
.zaui-box-p-10 {
  padding: calc(10*4px);
}
.zaui-box-mt-10 {
  margin-top: calc(10*4px);
}
.zaui-box-ml-10 {
  margin-left: calc(10*4px);
}
.zaui-box-mb-10 {
  margin-bottom: calc(10*4px);
}
.zaui-box-mr-10 {
  margin-right: calc(10*4px);
}
.zaui-box-mx-10 {
  margin-left: calc(10*4px);
  margin-right: calc(10*4px);
}
.zaui-box-my-10 {
  margin-top: calc(10*4px);
  margin-bottom: calc(10*4px);
}
.zaui-box-p-10 {
  padding: calc(10*4px);
}
.zaui-box-p-10 {
  padding: calc(10*4px);
}
.zaui-box-pt-10 {
  padding-top: calc(10*4px);
}
.zaui-box-pl-10 {
  padding-left: calc(10*4px);
}
.zaui-box-pb-10 {
  padding-bottom: calc(10*4px);
}
.zaui-box-pr-10 {
  padding-right: calc(10*4px);
}
.zaui-box-px-10 {
  padding-left: calc(10*4px);
  padding-right: calc(10*4px);
}
.zaui-box-py-10 {
  padding-top: calc(10*4px);
  padding-bottom: calc(10*4px);
}
.zaui-box-inline {
  display: inline-block;
}
.zaui-box-no-space {
  margin: 0;
  padding: 0;
}
.zaui-box-flex {
  display: flex;
}
.zaui-box-flex-row {
  display: flex;
  flex-direction: row;
}
.zaui-box-flex-column {
  display: flex;
  flex-direction: column;
}
.zaui-box-flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}
.zaui-box-flex-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}
.zaui-box-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.zaui-box-flex-nowrap {
  display: flex;
  flex-wrap: wrap;
}
.zaui-checkbox-group {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.zaui-checkbox-group-item:not(:last-child) {
  margin-right: 8px;
}
.zaui-checkbox-group .zaui-checkbox-wrapper:not(:last-child) {
  margin-right: 8px;
}
.zaui-checkbox {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.zaui-checkbox-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  background-color: var(--zaui-light-checkbox-uncheck-background, #ffffff);
  border-radius: 8px;
  border: 2px solid var(--zaui-light-checkbox-border-color, #b9bdc1);
}
.zaui-checkbox-disabled .zaui-checkbox-inner {
  background-color: var(--zaui-light-checkbox-disabled-uncheck-background, #d6d9dc);
}
.zaui-checkbox-checked .zaui-checkbox-inner {
  background-color: var(--zaui-light-checkbox-checked-background, #006af5);
  border: none !important;
  color: var(--zaui-light-checkbox-checked-mark-color, #ffffff);
}
.zaui-checkbox-checked .zaui-checkbox-inner-check-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 11px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.zaui-checkbox-checked.zaui-checkbox-disabled .zaui-checkbox-inner {
  background-color: var(--zaui-light-checkbox-disabled-checked-background, #8fc1ff);
  color: var(--zaui-light-checkbox-disabled-checked-mark-color, #ffffffcc);
}
.zaui-checkbox-indeterminate .zaui-checkbox-inner-check-icon {
  display: none;
}
.zaui-checkbox-indeterminate .zaui-checkbox-inner::after {
  position: absolute;
  width: 60%;
  height: 60%;
  content: "";
  border-radius: 2px;
  background-color: var(--zaui-light-checkbox-checked-background, #006af5);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.zaui-checkbox-indeterminate.zaui-checkbox-disabled .zaui-checkbox-inner::after {
  background-color: var(--zaui-light-checkbox-disabled-checked-background, #8fc1ff);
}
.zaui-checkbox-small .zaui-checkbox {
  width: 16px;
  height: 16px;
}
.zaui-checkbox-small .zaui-checkbox-inner {
  border: 1.5px solid var(--zaui-light-checkbox-border-color, #b9bdc1);
  border-radius: 4px;
}
.zaui-checkbox-small .zaui-checkbox-inner-check-icon {
  width: 10px;
  height: 8px;
}
.zaui-checkbox-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.zaui-checkbox-wrapper.zaui-checkbox-small {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.zaui-checkbox-input {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  opacity: 0;
  display: block;
}
.zaui-checkbox + span {
  margin-left: 8px;
  display: inline-block;
  flex: 1;
}
body[zaui-theme="dark"] .zaui-checkbox-inner {
  background-color: var(--zaui-dark-checkbox-uncheck-background, #141415);
  border: 2px solid var(--zaui-dark-checkbox-border-color, #767a7f);
}
body[zaui-theme="dark"] .zaui-checkbox-disabled .zaui-checkbox-inner {
  background-color: var(--zaui-dark-checkbox-disabled-uncheck-background, #36383a);
}
body[zaui-theme="dark"] .zaui-checkbox-checked .zaui-checkbox-inner {
  background-color: var(--zaui-dark-checkbox-checked-background, #006af5);
  border: none !important;
  color: var(--zaui-dark-checkbox-checked-mark-color, #ffffff);
}
body[zaui-theme="dark"] .zaui-checkbox-checked.zaui-checkbox-disabled .zaui-checkbox-inner {
  background-color: var(--zaui-dark-checkbox-disabled-checked-background, #033e8c);
  color: var(--zaui-dark-checkbox-disabled-checked-mark-color, #ffffff99);
}
body[zaui-theme="dark"] .zaui-checkbox-indeterminate .zaui-checkbox-inner::after {
  background-color: var(--zaui-dark-checkbox-checked-background, #006af5);
}
body[zaui-theme="dark"] .zaui-checkbox-indeterminate.zaui-checkbox-disabled .zaui-checkbox-inner::after {
  background-color: var(--zaui-dark-checkbox-disabled-checked-background, #033e8c);
}
body[zaui-theme="dark"] .zaui-checkbox-small .zaui-checkbox-inner {
  border: 1.5px solid var(--zaui-dark-checkbox-border-color, #767a7f);
}
.zaui-radio-group {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.zaui-radio-group-item:not(:last-child) {
  margin-right: 8px;
}
.zaui-radio-group .zaui-radio-wrapper:not(:last-child) {
  margin-right: 8px;
}
.zaui-radio {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: 24px;
  height: 24px;
}
.zaui-radio-checkmark {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  background-color: var(--zaui-light-radio-uncheck-background, #ffffff);
  border-radius: 12px;
  border: 2px solid var(--zaui-light-radio-border-color, #b9bdc1);
}
.zaui-radio-disabled .zaui-radio-checkmark {
  background-color: var(--zaui-light-radio-disabled-uncheck-background, #d6d9dc);
}
.zaui-radio-checked .zaui-radio-checkmark {
  background-color: var(--zaui-light-radio-checked-background, #006af5);
  border: none !important;
  color: var(--zaui-light-radio-checked-mark-color, #ffffff);
}
.zaui-radio-checked .zaui-radio-checkmark::after {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--zaui-light-radio-checked-mark-color, #ffffff);
  content: '';
}
.zaui-radio-checked.zaui-radio-disabled .zaui-radio-checkmark {
  background-color: var(--zaui-light-radio-disabled-checked-background, #8fc1ff);
}
.zaui-radio-checked.zaui-radio-disabled .zaui-radio-checkmark::after {
  background-color: var(--zaui-light-radio-disabled-checked-mark-color, #ffffffcc);
}
.zaui-radio-small .zaui-radio {
  width: 16px;
  height: 16px;
}
.zaui-radio-small .zaui-radio-checkmark {
  border: 1.5px solid var(--zaui-light-radio-border-color, #b9bdc1);
  border-radius: 8px;
}
.zaui-radio-small .zaui-radio-checkmark::after {
  width: 6px;
  height: 6px;
}
.zaui-radio-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.zaui-radio-wrapper.zaui-radio-small {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.zaui-radio-input {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  opacity: 0;
  display: block;
}
.zaui-radio + span {
  margin-left: 8px;
  display: inline-block;
  flex: 1;
}
body[zaui-theme="dark"] .zaui-radio-checkmark {
  background-color: var(--zaui-dark-radio-uncheck-background, #141415);
  border: 2px solid var(--zaui-dark-radio-border-color, #767a7f);
}
body[zaui-theme="dark"] .zaui-radio-disabled .zaui-radio-checkmark {
  background-color: var(--zaui-dark-radio-disabled-uncheck-background, #36383a);
}
body[zaui-theme="dark"] .zaui-radio-checked .zaui-radio-checkmark {
  background-color: var(--zaui-dark-radio-checked-background, #006af5);
  border: none !important;
}
body[zaui-theme="dark"] .zaui-radio-checked .zaui-radio-checkmark::after {
  background-color: var(--zaui-dark-radio-checked-mark-color, #ffffff);
}
body[zaui-theme="dark"] .zaui-radio-checked.zaui-radio-disabled .zaui-radio-checkmark {
  background-color: var(--zaui-dark-radio-disabled-checked-background, #033e8c);
}
body[zaui-theme="dark"] .zaui-radio-checked.zaui-radio-disabled .zaui-radio-checkmark::after {
  background-color: var(--zaui-dark-radio-disabled-checked-mark-color, #ffffff99);
}
body[zaui-theme="dark"] .zaui-radio-small .zaui-radio-checkmark {
  border: 1.5px solid var(--zaui-dark-radio-border-color, #767a7f);
}
/* == COMMON == */
/* == LIGHT == */
/* == DARK == */
.zaui-switch {
  flex: none;
  position: relative;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  border-radius: 20px;
  width: 40px;
  height: 24px;
  background-color: var(--zaui-light-switch-off-bg-color, #b9bdc1);
  margin: 0;
}
.zaui-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--zaui-light-switch-handler-bg-color, #ffffff);
  transition: transform 150ms ease;
}
.zaui-switch:disabled {
  background-color: var(--zaui-light-switch-off-disabled-bg-color, #d6d9dc);
}
.zaui-switch:disabled::before {
  background-color: var(--zaui-light-switch-handler-disabled-bg-color, #ffffff);
}
.zaui-switch:checked {
  background-color: var(--zaui-light-switch-bg-color, #006af5);
}
.zaui-switch:checked:disabled {
  background-color: var(--zaui-light-switch-disabled-bg-color, #8fc1ff);
}
.zaui-switch:checked::before {
  transform: translate(16px);
}
.zaui-switch-wrapper {
  display: inline-flex;
  align-items: center;
}
.zaui-switch-small {
  width: 28px;
  height: 16px;
}
.zaui-switch-small::before {
  width: 12px;
  height: 12px;
}
.zaui-switch-small:checked::before {
  transform: translate(12px);
}
.zaui-switch-label {
  line-height: 18px;
  flex: auto;
  font-size: 14px;
  margin-left: 8px;
}
.zaui-switch-label-small {
  font-size: 13px;
  margin-left: 4px;
}
.zaui-switch:disabled ~ .zaui-switch-label {
  color: var(--zaui-light-switch-label-disabled-color, #b9bdc1);
}
body[zaui-theme="dark"] .zaui-switch {
  background-color: var(--zaui-dark-switch-off-bg-color, #53575a);
}
body[zaui-theme="dark"] .zaui-switch::before {
  background-color: var(--zaui-dark-switch-handler-bg-color, #ffffff);
}
body[zaui-theme="dark"] .zaui-switch:disabled {
  background-color: var(--zaui-dark-switch-off-bg-color, #53575a);
}
body[zaui-theme="dark"] .zaui-switch:disabled::before {
  background-color: var(--zaui-dark-switch-handler-disabled-bg-color, #ffffff99);
}
body[zaui-theme="dark"] .zaui-switch:checked {
  background-color: var(--zaui-dark-switch-bg-color, #006af5);
}
body[zaui-theme="dark"] .zaui-switch:checked:disabled {
  background-color: var(--zaui-dark-switch-disabled-bg-color, #033e8c);
}
body[zaui-theme="dark"] .zaui-switch:disabled ~ body[zaui-theme="dark"] .zaui-switch-label {
  color: var(--zaui-dark-switch-label-disabled-color, #53575a);
}
.zaui-slider-header {
  display: flex;
  justify-content: space-between;
  margin: 0 0 12px 0;
}
.zaui-slider-label {
  flex-grow: 1;
  word-break: break-word;
  color: var(--zaui-light-slider-label-color, #767a7f);
}
.zaui-slider-value {
  word-break: break-word;
  color: var(--zaui-light-slider-value-color, #141415);
}
.zaui-slider-handler {
  height: 16px;
  display: flex;
  flex: auto;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.zaui-slider-track {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--zaui-light-slider-track-bg-color, #d6d9dc);
  border-radius: 8px;
}
.zaui-slider-track-bar {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  background-color: var(--zaui-light-slider-track-active-bg-color, #006af5);
  border-radius: 8px;
}
.zaui-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background-color: var(--zaui-light-slider-thumb-bg-color, #006af5);
}
.zaui-slider-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 8px;
  border-radius: 8px;
  background-color: var(--zaui-light-slider-mark-bg-color, #d6d9dc);
}
.zaui-slider-mark-filled {
  background-color: var(--zaui-light-slider-mark-filled-bg-color, #006af5);
}
.zaui-slider-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zaui-slider-prefix,
.zaui-slider-suffix {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--zaui-light-slider-prefix-suffix-color, #767a7f);
}
.zaui-slider-prefix {
  margin-right: 16px;
}
.zaui-slider-suffix {
  margin-left: 16px;
}
body[zaui-theme="dark"] .zaui-slider-label {
  color: var(--zaui-dark-slider-label-color, #8f9499);
}
body[zaui-theme="dark"] .zaui-slider-value {
  color: var(--zaui-dark-slider-value-color, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-slider-track {
  background-color: var(--zaui-dark-slider-track-bg-color, #d6d9dc);
}
body[zaui-theme="dark"] .zaui-slider-thumb {
  background-color: var(--zaui-dark-slider-thumb-bg-color, #006af5);
}
body[zaui-theme="dark"] .zaui-slider-mark {
  background-color: var(--zaui-dark-slider-mark-bg-color, #d6d9dc);
}
body[zaui-theme="dark"] .zaui-slider-mark-filled {
  background-color: var(--zaui-dark-slider-mark-filled-bg-color, #006af5);
}
body[zaui-theme="dark"] .zaui-slider-prefix,
body[zaui-theme="dark"] .zaui-slider-suffix {
  color: var(--zaui-dark-slider-prefix-suffix-color, #d6d9dc);
}
.zaui-progress {
  display: inline-block;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.zaui-progress-outer {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
}
.zaui-progress-show-label {
  display: inline-flex;
}
.zaui-progress-show-label-outer {
  margin-right: calc(-2em - 8px);
  padding-right: calc(2em + 8px);
}
.zaui-progress-inner {
  background-color: var(--zaui-light-progress-background, #ffffff);
  width: 100%;
  height: 4px;
  border-radius: 4px;
}
.zaui-progress-completed {
  background-color: var(--zaui-light-progress-completed, #006af5);
  height: 100%;
  border-radius: 4px;
  transition: all 0.5s linear;
}
.zaui-progress-label {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  margin-left: 8px;
  width: 2em;
}
body[zaui-theme="dark"] .zaui-progress-inner {
  background-color: var(--zaui-dark-progress-background, #ffffff33);
}
body[zaui-theme="dark"] .zaui-progress-completed {
  background-color: var(--zaui-dark-progress-completed, #52a0ff);
}
.zaui-spinner {
  position: relative;
  width: 62px;
  height: 62px;
}
.zaui-spinner::after {
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  content: '';
  border: 1px solid var(--zaui-light-spinner-border-color, #d6d9dc);
}
.zaui-spinner-ring {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 calc(100% - calc(4px - 1px)));
  mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 calc(100% - calc(4px - 1px)));
  background: conic-gradient(from 90deg at 50% 50%, rgba(255, 255, 255, 0.0001) -89.96deg, rgba(255, 255, 255, 0.0001) 180.44deg, #0088FF 258.75deg, #0088FF 270deg, rgba(255, 255, 255, 0.0001) 270.04deg, rgba(255, 255, 255, 0.0001) 540.44deg);
  animation: loadingCircle 1.2s infinite linear;
}
.zaui-spinner-dot {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  animation: loadingCircle 1.2s infinite linear;
}
.zaui-spinner-dot::after {
  content: '';
  width: 4px;
  height: 4px;
  background-color: var(--zaui-light-spinner-dot-color, #006af5);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  border-radius: 100%;
}
.zaui-spinner-logo {
  position: absolute;
  width: calc(100% - calc(calc(4px * 2) + calc(3px * 2)));
  height: calc(100% - calc(calc(4px * 2) + calc(3px * 2)));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  overflow: hidden;
}
.zaui-spinner-logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body[zaui-theme="dark"] .zaui-spinner::after {
  border: 1px solid var(--zaui-dark-spinner-border-color, #d6d9dc);
}
body[zaui-theme="dark"] .zaui-spinner-ring {
  background: conic-gradient(from 90deg at 50% 50%, rgba(255, 255, 255, 0.0001) -89.96deg, rgba(255, 255, 255, 0.0001) 180.44deg, #0088FF 258.75deg, #0088FF 270deg, rgba(255, 255, 255, 0.0001) 270.04deg, rgba(255, 255, 255, 0.0001) 540.44deg);
}
body[zaui-theme="dark"] .zaui-spinner-dot::after {
  background-color: var(--zaui-dark-spinner-dot-color, #006af5);
}
.zaui-header {
  position: fixed;
  top: 0;
  left: 0;
  height: calc(var(--zaui-safe-area-inset-top, 0px) + 44px);
  width: 100%;
  max-width: 100vw;
  min-width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--zaui-light-header-background-color, #ffffff);
  color: var(--zaui-light-header-color, #141415);
  padding: calc(var(--zaui-safe-area-inset-top, 0px) + 16px) 12px 16px 12px;
  display: flex;
  align-items: center;
  margin-bottom: 1px;
  z-index: 999;
}
.zaui-header::after {
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--zaui-light-header-divider, #e9ebed);
  content: '';
  left: 0;
  bottom: 0;
}
.zaui-header-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
}
.zaui-header-back {
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-block;
}
.zaui-header-back-btn {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.zaui-header > *:not(:first-child) {
  margin-left: 8px;
}
body[zaui-theme="dark"] .zaui-header {
  background: var(--zaui-dark-header-background-color, #141415);
  color: var(--zaui-dark-header-color, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-header::after {
  background: var(--zaui-dark-header-divider, #36383a);
}
.zaui-select {
  text-overflow: ellipsis;
}
.zaui-select-icon {
  margin-right: 12px;
}
.zaui-select-options {
  overflow-y: auto;
  overflow-x: hidden;
}
.zaui-select-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.zaui-select-group {
  color: var(--zaui-light-option-group-color, #767a7f);
  font-size: 14px;
  line-height: 18px;
  cursor: default;
  padding: 8px 16px;
}
.zaui-select-option + .zaui-select-group {
  margin-top: 16px;
}
.zaui-select-header {
  display: flex;
  flex-direction: row;
  min-height: 56px;
}
.zaui-select-close-icon,
.zaui-select .zaui-btn.zaui-btn-icon-only.zaui-btn-medium.zaui-select-close-icon {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 0px;
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--zaui-light-select-title-color, #141415);
}
.zaui-select-title {
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  color: var(--zaui-light-select-title-color, #141415);
  text-align: center;
  flex: 1;
  padding: 16px 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.zaui-select-option {
  padding: 16px 32px 16px 16px;
  font-size: 16px;
  line-height: 22px;
  color: var(--zaui-light-option-color, #141415);
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.zaui-select-option::after {
  width: 100%;
  height: 0.5px;
  content: '';
  background-color: var(--zaui-light-option-divider-color, #e9ebed);
  bottom: 0;
  left: 0;
  position: absolute;
}
.zaui-select-option-disabled {
  color: var(--zaui-light-option-color-disabled, #767a7f);
  pointer-events: none;
}
.zaui-select-option-check-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.zaui-select-option-selected {
  color: var(--zaui-light-option-selected-color, #006af5);
}
.zaui-select-option:focus,
.zaui-select-option:active {
  background-color: var(--zaui-light-pressed-bg-color, #e9ebed);
}
body[zaui-theme="dark"] .zaui-select-group {
  color: var(--zaui-dark-option-group-color, #8f9499);
}
body[zaui-theme="dark"] .zaui-select-close-icon,
body[zaui-theme="dark"] .zaui-select .zaui-btn.zaui-btn-icon-only.zaui-btn-medium.zaui-select-close-icon {
  color: var(--zaui-dark-select-title-color, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-select-title {
  color: var(--zaui-dark-select-title-color, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-select-option {
  color: var(--zaui-dark-option-color, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-select-option::after {
  background-color: var(--zaui-dark-option-divider-color, #36383a);
}
body[zaui-theme="dark"] .zaui-select-option-disabled {
  color: var(--zaui-dark-option-color-disabled, #8f9499);
}
body[zaui-theme="dark"] .zaui-select-option-selected {
  color: var(--zaui-dark-option-selected-color, #006af5);
}
body[zaui-theme="dark"] .zaui-select-option:focus,
body[zaui-theme="dark"] .zaui-select-option:active {
  background-color: var(--zaui-dark-pressed-bg-color, #36383a);
}
.zaui-snackbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 1001;
  transition: opacity 150ms, transform 150ms;
  width: calc(100vw - 24px);
  background-color: var(--zaui-light-snackbar-background, #252627);
  color: var(--zaui-light-snackbar-text-color, #ffffff);
  padding: 12px 16px;
  border-radius: 8px;
  flex-direction: row;
  justify-content: space-between;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}
.zaui-snackbar > *:not(:last-child) {
  margin-right: 8px;
}
.zaui-snackbar-desc-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.zaui-snackbar-desc-wrapper > *:not(:last-child) {
  margin-right: 8px;
}
.zaui-snackbar-prefix-icon {
  width: 24px;
  height: 24px;
}
.zaui-snackbar-content {
  flex: 1;
}
.zaui-snackbar-content > *:not(:last-child) {
  margin-bottom: 8px;
}
.zaui-snackbar-text-only {
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 24px);
}
.zaui-snackbar-text-only .zaui-snackbar-desc {
  text-align: center;
}
.zaui-snackbar-vertical-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.zaui-snackbar-vertical-action > * {
  margin-right: 0;
}
.zaui-snackbar-vertical-action > *:not(:last-child) {
  margin-right: 0;
  margin-bottom: 8px;
}
.zaui-snackbar-vertical-action .zaui-snackbar-content {
  width: 100%;
}
.zaui-snackbar-success {
  color: var(--zaui-light-snackbar-success-color, #34b764);
}
.zaui-snackbar-error {
  color: var(--zaui-light-snackbar-error-color, #dc1f18);
}
.zaui-snackbar-warning {
  color: var(--zaui-light-snackbar-warning-color, #e8ba02);
}
.zaui-snackbar-info {
  color: var(--zaui-light-snackbar-info-color, #52a0ff);
}
.zaui-snackbar-action {
  height: 40px;
  font-weight: 500;
  color: var(--zaui-light-snackbar-action-color, #52a0ff);
  padding: 10px 8px;
}
.zaui-snackbar-loading {
  animation: loadingCircle 1s infinite linear;
}
.zaui-snackbar-progress .zaui-progress-completed {
  background-color: var(--zaui-light-snackbar-progress-color, #52a0ff);
}
.zaui-snackbar-wifi-connected {
  color: var(--zaui-light-snackbar-connect-color, #34b764);
}
.zaui-snackbar-wifi-disconnected {
  color: var(--zaui-light-snackbar-disconnect-color, #767a7f);
}
.zaui-snackbar-top {
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  top: 12px;
}
.zaui-snackbar-top-visible {
  transform: translateX(-50%) translateY(0);
}
.zaui-snackbar-bottom {
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  bottom: 12px;
}
.zaui-snackbar-bottom-visible {
  transform: translateX(-50%) translateY(0);
}
.zaui-snackbar-appear,
.zaui-snackbar-exit-active {
  opacity: 0;
}
.zaui-snackbar-enter {
  opacity: 1;
}
.zaui-snackbar-enter-top,
.zaui-snackbar-exit-active-top {
  transform: translate(-50%, -12px);
}
.zaui-snackbar-enter-bottom,
.zaui-snackbar-exit-active-bottom {
  transform: translate(-50%, 12px);
}
.zaui-snackbar-enter-active-top,
.zaui-snackbar-enter-active-bottom {
  transform: translate(-50%, 0px);
}
.zaui-snackbar-countdown-background,
.zaui-snackbar-countdown-progress {
  fill: none;
}
.zaui-snackbar-countdown-background {
  stroke: var(--zaui-light-countdown-bg-color, #ffffff);
}
.zaui-snackbar-countdown-progress {
  transition: stroke-dashoffset 0.5s ease-in-out;
  stroke: var(--zaui-light-countdown-progress-color, #52a0ff);
  stroke-linecap: round;
  transform-origin: center;
}
.zaui-snackbar-countdown-counter {
  font-size: 12px;
  fill: var(--zaui-light-countdown-counter-color, #ffffff);
  transform: translate(0 50%);
}
body[zaui-theme="dark"] .zaui-snackbar {
  background-color: var(--zaui-dark-snackbar-background, #53575a);
  color: var(--zaui-dark-snackbar-text-color, #ffffff);
}
body[zaui-theme="dark"] .zaui-snackbar-success {
  color: var(--zaui-dark-snackbar-success-color, #34b764);
}
body[zaui-theme="dark"] .zaui-snackbar-error {
  color: var(--zaui-dark-snackbar-error-color, #dc1f18);
}
body[zaui-theme="dark"] .zaui-snackbar-warning {
  color: var(--zaui-dark-snackbar-warning-color, #e8ba02);
}
body[zaui-theme="dark"] .zaui-snackbar-info {
  color: var(--zaui-dark-snackbar-info-color, #52a0ff);
}
body[zaui-theme="dark"] .zaui-snackbar-action {
  color: var(--zaui-dark-snackbar-action-color, #52a0ff);
}
body[zaui-theme="dark"] .zaui-snackbar-progress .zaui-progress-completed {
  background-color: var(--zaui-dark-snackbar-progress-color, #52a0ff);
}
body[zaui-theme="dark"] .zaui-snackbar-wifi-connected {
  color: var(--zaui-dark-snackbar-connect-color, #34b764);
}
body[zaui-theme="dark"] .zaui-snackbar-wifi-disconnected {
  color: var(--zaui-dark-snackbar-disconnect-color, #8f9499);
}
body[zaui-theme="dark"] .zaui-snackbar-countdown-background {
  stroke: var(--zaui-dark-countdown-bg-color, #ffffff);
}
body[zaui-theme="dark"] .zaui-snackbar-countdown-progress {
  stroke: var(--zaui-dark-countdown-progress-color, #52a0ff);
}
body[zaui-theme="dark"] .zaui-snackbar-countdown-counter {
  fill: var(--zaui-dark-countdown-counter-color, #ffffff);
}
.zaui-picker {
  padding: 0 16px 24px 16px;
}
.zaui-picker *,
.zaui-picker *:before,
.zaui-picker *:after {
  box-sizing: border-box;
}
.zaui-picker-header {
  display: flex;
  flex-direction: row;
  min-height: 56px;
  margin-bottom: 16px;
}
.zaui-picker-close-icon,
.zaui-picker .zaui-btn.zaui-btn-icon-only.zaui-btn-medium.zaui-picker-close-icon {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 0px;
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--zaui-light-picker-title-color, #141415);
}
.zaui-picker-title {
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  color: var(--zaui-light-picker-title-color, #141415);
  text-align: center;
  flex: 1;
  padding: 16px 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.zaui-picker-inner {
  position: relative;
  display: flex;
  justify-content: center;
  height: 100%;
}
.zaui-picker-column {
  position: relative;
  flex: 1;
  max-height: 100%;
  overflow: hidden;
}
.zaui-picker-column:not(:last-child) {
  margin-right: 8px;
}
.zaui-picker-scroller {
  transition: 300ms;
  transition-timing-function: ease-out;
}
.zaui-picker-item {
  position: relative;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 56px;
  width: 100%;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--zaui-light-picker-option-color, #b9bdc1);
  height: 52px;
}
.zaui-picker-item-selected {
  color: var(--zaui-light-picker-option-selected-color, #006af5);
  background: var(--zaui-light-picker-selected-background-color, #f4f5f6);
  border-radius: 8px;
  font-size: 15px;
  line-height: 20px;
  height: calc(52px + 4px);
  transition: all 200ms ease-out;
}
.zaui-picker-item-2nd {
  font-size: 14px;
  line-height: 18px;
  color: var(--zaui-light-picker-option-2nd-color, #767a7f);
  height: calc(52px + 2px);
}
.zaui-picker-action {
  margin-top: 16px;
}
.zaui-date-picker-suffix {
  margin-right: 12px;
}
.zaui-bottom-navigation {
  width: 100%;
  height: auto;
}
.no-safe-area .zaui-bottom-navigation-content {
  padding-bottom: unset;
}
.zaui-bottom-navigation-content {
  position: relative;
  display: flex;
  height: calc(var(--zaui-safe-area-inset-bottom) + 48px);
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: var(--zaui-light-bottom-navigation-background-color, #ffffff);
  padding-bottom: var(--zaui-safe-area-inset-bottom);
}
.zaui-bottom-navigation-content::after {
  content: '';
  top: -0.5px;
  left: 0;
  position: absolute;
  width: 100%;
  height: 0.5px;
  background-color: var(--zaui-light-bottom-navigation-divider-color, #e9ebed);
}
.zaui-bottom-navigation-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
}
.zaui-bottom-navigation-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  color: var(--zaui-light-bottom-navigation-color, #767a7f);
  flex: 1;
  padding: 0;
}
.zaui-bottom-navigation-item .zaui-bottom-navigation-item-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
}
.zaui-bottom-navigation-item .zaui-bottom-navigation-item-icon ~ .zaui-bottom-navigation-item-label {
  margin-top: 2px;
}
.zaui-bottom-navigation-item .zaui-bottom-navigation-item-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.zaui-bottom-navigation-item-active {
  color: var(--zaui-light-bottom-navigation-active-color, #006af5);
}
body[zaui-theme="dark"] .zaui-bottom-navigation-content {
  background-color: var(--zaui-dark-bottom-navigation-background-color, #141415);
}
body[zaui-theme="dark"] .zaui-bottom-navigation-content::after {
  background-color: var(--zaui-dark-bottom-navigation-divider-color, #36383a);
}
body[zaui-theme="dark"] .zaui-bottom-navigation-item {
  color: var(--zaui-dark-bottom-navigation-color, #8f9499);
  flex: 1;
}
body[zaui-theme="dark"] .zaui-bottom-navigation-item-active {
  color: var(--zaui-dark-bottom-navigation-active-color, #52a0ff);
}
.zaui-swiper {
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 12px;
}
.zaui-swiper-wrapper {
  width: auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  touch-action: none;
}
.zaui-swiper-item {
  display: block;
  width: 100%;
  min-width: 100%;
  overflow: hidden;
  font-size: unset;
}
.zaui-swiper-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #00000033;
  display: flex;
  padding: 4px;
  border-radius: 100px;
  align-items: center;
  transition: all 0.3s ease;
}
.zaui-swiper-dots-item {
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #ffffff99;
  border-radius: 100%;
}
.zaui-swiper-dots-item:not(:last-child) {
  margin-right: 4px;
}
.zaui-swiper-dots-item-active {
  width: 6px;
  height: 6px;
  background-color: #ffffff;
}
.zaui-image-viewer .zaui-image-container {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.zaui-image-viewer .zaui-image-container .zaui-image {
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  overflow: hidden;
  -o-object-position: center;
     object-position: center;
  touch-action: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}
.zaui-image-viewer-container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
.zaui-image-viewer-images {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.zaui-image-viewer-swiper {
  position: absolute;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
}
.zaui-image-viewer-swiper .zaui-swiper-wrapper {
  height: 100%;
}
.zaui-image-viewer-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10000;
  padding: calc(var(--zaui-safe-area-inset-top, 0px) + 16px) 12px 16px 12px;
  color: #ffffff;
  background-color: #00000080;
}
.zaui-image-viewer-header .zaui-image-viewer-close-button {
  color: #ffffff;
  min-width: unset;
  width: auto;
  padding: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}
.zaui-image-viewer-nav-btn {
  position: absolute;
  z-index: 10000;
  top: 50%;
  transform: translateY(-50%);
  background-color: #00000080;
  color: #ffffff;
}
.zaui-image-viewer-nav-btn:focus,
.zaui-image-viewer-nav-btn:active,
.zaui-image-viewer-nav-btn:hover {
  background-color: #00000080;
}
.zaui-image-viewer-nav-btn:disabled,
.zaui-image-viewer-nav-btn.zaui-btn-disabled:disabled {
  background-color: #00000033;
  color: #ffffff80;
}
.zaui-image-viewer-nav-btn-next {
  right: 8px;
}
.zaui-image-viewer-nav-btn-prev {
  left: 8px;
}
body[zaui-theme="dark"] .zaui-image-viewer-nav-btn {
  background-color: #00000080;
  color: #ffffff;
}
body[zaui-theme="dark"] .zaui-image-viewer-nav-btn:focus,
body[zaui-theme="dark"] .zaui-image-viewer-nav-btn:active,
body[zaui-theme="dark"] .zaui-image-viewer-nav-btn:hover {
  background-color: #00000080;
}
body[zaui-theme="dark"] .zaui-image-viewer-nav-btn:disabled {
  background-color: #00000033;
  color: #ffffff80;
}
.zaui-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.zaui-stack > * + * {
  margin-block-start: var(--s1);
}
.zaui-zbox {
  display: block;
  padding: var(--s1);
  border-width: var(--border-thin);
  /* ↓ For high contrast mode */
  outline: var(--border-thin) solid transparent;
  outline-offset: calc(var(--border-thin) * -1);
}
.zaui-center {
  display: block;
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
}
.zaui-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.zaui-grid {
  display: grid;
  grid-gap: var(--s1);
  align-content: start;
  grid-template-columns: 100%;
}
.zaui-calendar .item-enter {
  opacity: 0;
}
.zaui-calendar .item-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.zaui-calendar .item-exit {
  opacity: 1;
}
.zaui-calendar .item-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-in;
}
.zaui-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zaui-calendar-header-title {
  cursor: pointer;
  color: var(--zaui-light-calendar-title-color, #141415);
}
.zaui-calendar-header-title:hover {
  color: var(--zaui-light-calendar-title-hover-color, #006af5);
}
.zaui-calendar-panel {
  text-align: center;
  background: var(--zaui-light-calendar-bg-color, #ffffff);
  border-radius: 8px;
}
.zaui-calendar-full .zaui-calendar-panel {
  display: block;
  width: 100%;
  text-align: right;
}
.zaui-calendar-panel-month tr,
.zaui-calendar-panel-year tr,
.zaui-calendar-panel-decade tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 480px;
  margin: auto;
}
.zaui-calendar-panel-month td,
.zaui-calendar-panel-year td,
.zaui-calendar-panel-decade td {
  width: 120px;
}
.zaui-calendar-panel-body th {
  height: auto;
}
.zaui-calendar-full .zaui-calendar-panel-body th {
  padding-inline-end: 12px;
  padding-bottom: 4px;
  line-height: 18px;
}
.zaui-calendar-panel-content {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.zaui-calendar-panel-cell {
  padding: 6px 0;
  color: var(--zaui-light-calendar-cell-text-color, #0000004d);
  cursor: pointer;
}
.zaui-calendar-full .zaui-calendar-panel-cell {
  padding: 0;
}
.zaui-calendar-panel-cell-in-view {
  color: var(--zaui-light-calendar-cell-text-color, #000000e6);
}
.zaui-calendar-panel-cell-in-view.zaui-calendar-panel-cell-selected:not(.zaui-calendar-panel-cell-disabled) .zaui-calendar-cell-inner {
  color: var(--zaui-light-calendar-cell-selected-text-color, #ffffff);
  background: var(--zaui-light-calendar-cell-selected-background, #006af5);
}
.zaui-calendar-panel-cell-in-view.zaui-calendar-panel-cell-selected:not(.zaui-calendar-panel-cell-disabled) .zaui-calendar-cell-inner-content {
  color: var(--zaui-light-calendar-cell-selected-background, #006af5);
}
.zaui-calendar-full .zaui-calendar-panel-cell-in-view.zaui-calendar-panel-cell-selected:not(.zaui-calendar-panel-cell-disabled) .zaui-calendar-cell-inner {
  background: var(--zaui-light-calendar-cell-selected-background, #ebf4ff);
}
.zaui-calendar-full .zaui-calendar-panel-cell-in-view.zaui-calendar-panel-cell-selected:not(.zaui-calendar-panel-cell-disabled) .zaui-calendar-cell-inner-label {
  color: var(--zaui-light-calendar-cell-selected-text-color, #006af5);
}
.zaui-calendar-panel-cell-disabled {
  color: var(--zaui-light-calendar-cell-text-color, #0000004d);
  pointer-events: none;
}
.zaui-calendar-panel-cell-disabled .zaui-calendar-cell-inner {
  background: transparent;
}
.zaui-calendar-cell-inner {
  position: relative;
  z-index: 2;
  display: inline-block;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  transition: background 0.2s;
}
.zaui-calendar-cell-inner::before {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.zaui-calendar-full .zaui-calendar-cell-inner::before {
  display: none;
}
.zaui-calendar-panel-cell-in-view.zaui-calendar-panel-cell-today:not(.zaui-calendar-panel-cell-disabled) .zaui-calendar-cell-inner::before {
  position: absolute;
  top: 0;
  left: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 1;
  border: 1px solid var(--zaui-light-calendar-selected-background, #006af5);
  border-radius: 4px;
  content: "";
}
.zaui-calendar-full .zaui-calendar-panel-cell-in-view.zaui-calendar-panel-cell-today:not(.zaui-calendar-panel-cell-disabled) .zaui-calendar-cell-inner {
  border-color: var(--zaui-light-calendar-selected-background, #006af5);
}
.zaui-calendar-full .zaui-calendar-cell-inner {
  display: block;
  width: auto;
  height: auto;
  margin: 0 4px;
  padding: 4px 8px 0;
  border: 0;
  border-top: 2px solid rgba(5, 5, 5, 0.06);
  border-radius: 0;
  transition: background 0.3s;
}
.zaui-calendar-full .zaui-calendar-cell-inner-content {
  position: static;
  width: auto;
  height: 86px;
  overflow-y: auto;
  color: var(--zaui-light-calendar-cell-text-color, #000000e6);
  line-height: 1.57142857;
  text-align: start;
  scrollbar-width: thin;
}
.zaui-calendar-cell-inner-label {
  padding: 0 8px;
}
body[zaui-theme="dark"] .zaui-calendar-header-title {
  color: var(--zaui-dark-calendar-title-color, #f4f5f6);
}
body[zaui-theme="dark"] .zaui-calendar-header-title:hover {
  color: var(--zaui-light-calendar-title-hover-color, #006af5);
}
body[zaui-theme="dark"] .zaui-calendar-panel {
  background: var(--zaui-dark-calendar-bg-color, #252627);
}
body[zaui-theme="dark"] .zaui-calendar-panel-cell {
  color: var(--zaui-dark-calendar-cell-text-color, rgba(185, 189, 193, 0.25));
}
body[zaui-theme="dark"] .zaui-calendar-panel-cell-in-view {
  color: var(--zaui-dark-calendar-cell-text-color, rgba(185, 189, 193, 0.85));
}
body[zaui-theme="dark"] .zaui-calendar-panel-cell-disabled {
  color: var(--zaui-dark-calendar-cell-text-color, rgba(185, 189, 193, 0.25));
}
body[zaui-theme="dark"] .zaui-calendar-full .zaui-calendar-cell-inner {
  border-top-color: #36383a;
}
body[zaui-theme="dark"] .zaui-calendar-full .zaui-calendar-cell-inner-content {
  color: var(--zaui-dark-calendar-cell-text-color, rgba(185, 189, 193, 0.85));
}
/* ── Brand Design Tokens ─────────────────────────────────── */
:root {
  --ga-primary: #0b1929;
  --ga-secondary: #1B4965;
  --ga-header: #0b1929;
  --ga-bg: #FAF5F0;
  --ga-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Global resets */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Montserrat", "Noto Sans", "Noto Sans Vietnamese", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ga-bg);
}
/* The body background shows through the iOS home-indicator safe area at the very
   bottom (and the status-bar area at top). On the full-bleed dark onboarding
   screens (welcome + register) the default light --ga-bg rendered as an ugly
   pale stripe there. Match the body to the navy canvas while a dark page is
   mounted (onboarding + the now-dark owner dashboard). */
body:has(.gw-page-host),
body:has(.rw-page-host),
body:has(.od-page) {
  background: #070e1a;
}
/* Solid, native-app feel.
   1. The iOS rubber-band overscroll reveals the <html> backdrop *behind* the
      body — which was the default light canvas, flashing an ugly pale stripe
      when the content was pulled. Darken html itself while a dark page is
      mounted so any overscroll shows the same navy, not cream.
   2. overscroll-behavior: none disables the bounce/scroll-chaining entirely
      (iOS 16+), so the content sits fixed like an app instead of dragging. */
html:has(.gw-page-host),
html:has(.rw-page-host),
html:has(.od-page) {
  background: #070e1a;
}
html,
body,
.page {
  overscroll-behavior: none;
}
/* zmp-ui's page (.zaui-page) is the scroller, and it must be bounded to the
   viewport so it scrolls INTERNALLY. On the web build the height:100% chain was
   missing on #app, so .zaui-page grew to its full content height — a dead
   overflow:auto box that, combined with .page's overscroll-behavior:none,
   swallowed the scroll gesture instead of chaining it to <body>. Long pages
   (e.g. Reviews) were clipped and unscrollable. Restoring the height chain
   makes .zaui-page a real viewport-height scroller again. Harmless on the Zalo
   Mini App, where the runtime already sets this up. */
html,
body,
#app {
  height: 100%;
}
#app > .zaui-page,
.zaui-page.page {
  height: 100%;
}
.page {
  background: var(--ga-bg);
  /* Action bar + status bar hidden. Small top inset so content uses the top
     row; the top-RIGHT corner is reserved per-header (padding-right) for
     Zalo's floating close/more control instead of pushing everything down. */
  padding-top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px));
}
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
/* ============================
   Guesti Layout
   ============================ */
.guesti-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.guesti-header {
  background: var(--ga-header);
  padding: 20px 16px 16px;
  flex-shrink: 0;
}
.guesti-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.guesti-header-badge {
  background: #E67E22;
  padding: 3px 10px;
  border-radius: 12px;
}
/* ============================
   Filter Chips
   ============================ */
.guesti-filters {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid #e9ebed;
  -webkit-overflow-scrolling: touch;
}
.guesti-filter-chip {
  white-space: nowrap;
  padding: 6px 14px;
  border: 1.5px solid #d6d9dc;
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.guesti-filter-chip:active {
  transform: scale(0.96);
}
.guesti-filter-active {
  background: var(--ga-primary);
  color: #fff;
  border-color: var(--ga-primary);
}
/* ============================
   Feed List
   ============================ */
.guesti-feed {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guesti-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  text-align: center;
}
/* ============================
   Feed Card
   ============================ */
.feed-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--ga-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.feed-card:active {
  transform: scale(0.99);
}
.feed-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feed-card-cat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.feed-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.feed-card-status {
  padding: 2px 8px;
  border-radius: 8px;
}
.feed-card-brief {
  line-height: 1.45;
  color: #333;
}
.feed-card-ai {
  line-height: 1.4;
  margin-top: 2px;
  font-style: italic;
}
.feed-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.feed-action-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.feed-action-btn:active {
  transform: scale(0.97);
}
.feed-action-primary {
  background: var(--ga-primary);
  color: #fff;
}
.feed-action-complete {
  background: #E8F5E9;
  color: #2E7D32;
}
.feed-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}
/* ============================
   Header Sub-bar (below native Header)
   ============================ */
.guesti-header-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px;
  flex-shrink: 0;
}
/* ============================
   Header Logo Row
   ============================ */
.guesti-header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.guesti-header-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.3);
}
/* ============================
   Tab Bar (Live / History)
   ============================ */
.feed-tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #e9ebed;
  flex-shrink: 0;
}
.feed-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #8c8c8c;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.feed-tab-active {
  color: var(--ga-primary);
  border-bottom-color: var(--ga-primary);
}
/* Native Tabs branding override */
.feed-tabs .zaui-tabs-tabbar-item-active {
  color: var(--ga-primary) !important;
}
.feed-tabs .zaui-tabs-tabbar-indicator {
  background-color: var(--ga-primary) !important;
}
/* ============================
   History Card (muted)
   ============================ */
.history-card {
  opacity: 0.72;
  border-left: 3px solid #27ae60;
}
.history-card-status {
  background: #E8F5E9;
}
/* ============================
   Branding Panel
   ============================ */
.branding-toggle {
  margin-top: 16px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--ga-card-shadow);
  -webkit-tap-highlight-color: transparent;
}
.branding-form {
  background: #fff;
  border-radius: 0 0 12px 12px;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--ga-card-shadow);
  margin-top: -2px;
}
.branding-label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  margin-top: 6px;
}
.branding-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #d6d9dc;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.branding-input:focus {
  border-color: var(--ga-primary);
}
.branding-input-color {
  flex: 1;
}
.branding-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.branding-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #d6d9dc;
  flex-shrink: 0;
}
.branding-logo-preview {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  margin-top: 8px;
  border: 1px solid #e9ebed;
}
.branding-save-btn {
  margin-top: 12px;
  padding: 10px 0;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.branding-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* ============================
   Cancel Button
   ============================ */
.feed-action-cancel {
  background: #FDEDEE;
  color: #C0392B;
}
/* ============================
   Staff Login Selector
   ============================ */
.staff-login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--ga-bg);
}
.staff-login-header {
  padding: 40px 20px 24px;
  text-align: center;
}
.staff-login-body {
  flex: 1;
  padding: 20px 16px;
}
.staff-login-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.staff-login-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--ga-card-shadow);
  cursor: pointer;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  width: 100%;
}
.staff-login-card:active {
  transform: scale(0.98);
}
.staff-login-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.staff-login-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* ============================
   Staff Switch Button
   ============================ */
.staff-switch-btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.staff-switch-btn:active {
  background: rgba(255,255,255,0.35);
}
/* ============================
   Pulse Section (Manager)
   ============================ */
.pulse-section {
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #e9ebed;
}
.pulse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.pulse-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
/* ============================
   Action Modal
   ============================ */
.action-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.action-modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.action-modal-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d6d9dc;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.action-modal-textarea:focus {
  border-color: var(--ga-primary);
}
.action-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.action-modal-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.action-modal-btn:active {
  transform: scale(0.97);
}
.action-modal-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}
.action-modal-btn-secondary {
  background: #f0f2f5;
  color: #555;
}
/* ============================
   Staff Management
   ============================ */
.staff-mgmt-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.staff-mgmt-header {
  padding: 20px 16px 16px;
  flex-shrink: 0;
}
.staff-mgmt-body {
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
}
.staff-mgmt-card {
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--ga-card-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.staff-mgmt-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.staff-mgmt-card-actions {
  display: flex;
  gap: 6px;
}
.staff-mgmt-icon-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.staff-mgmt-add-form {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--ga-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.staff-mgmt-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #d6d9dc;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}
.staff-mgmt-input:focus {
  border-color: var(--ga-primary);
}
.staff-mgmt-select {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #d6d9dc;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  outline: none;
}
.staff-mgmt-save-btn {
  padding: 10px 0;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.staff-mgmt-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.staff-mgmt-dept-group {
  margin-bottom: 16px;
}
.staff-mgmt-dept-title {
  margin-bottom: 8px;
}
/* ============================
   Dev Login Backdoor Button
   ============================ */
.dev-login-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #E67E22, #D35400);
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
  text-align: left;
  transition: transform 0.1s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.dev-login-btn:active {
  transform: scale(0.97);
}
.dev-login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}
.dev-login-icon {
  font-size: 24px;
  flex-shrink: 0;
}
/* Dev Login Section — always visible at bottom */
.dev-login-section {
  margin-top: 24px;
  padding-top: 0;
}
.dev-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.dev-login-divider-line {
  flex: 1;
  height: 1px;
  background: #e0e2e5;
}
/* ============================
   Menu Management
   ============================ */
.menu-mgmt-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.menu-mgmt-header {
  padding: 20px 16px 16px;
  flex-shrink: 0;
}
.menu-mgmt-body {
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
}
.menu-mgmt-group {
  margin-bottom: 16px;
}
.menu-mgmt-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
/* Card */
.menu-mgmt-card {
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--ga-card-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  transition: opacity 0.2s;
}
.menu-mgmt-card-dimmed {
  opacity: 0.6;
}
/* Thumbnail */
.menu-mgmt-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.menu-mgmt-thumb-fallback {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Info column */
.menu-mgmt-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-mgmt-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
/* Right side (badge + edit button) */
.menu-mgmt-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
/* Availability badge */
.menu-mgmt-avail-badge {
  padding: 3px 10px;
  border-radius: 10px;
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.menu-mgmt-avail-badge:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.menu-mgmt-avail-in {
  background: #E8F5E9;
  color: #2E7D32;
}
/* ============================
   Analytics Tab
   ============================ */
.analytics-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.analytics-section {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--ga-card-shadow);
}
.analytics-section-title {
  margin-bottom: 12px;
  color: #333;
}
/* ── Stat Cards (Today vs Yesterday) ── */
.analytics-stat-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.analytics-stat-card {
  flex: 1;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.analytics-stat-number {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}
.analytics-stat-label {
  font-size: 12px;
  color: #8c8c8c;
  font-weight: 600;
}
.analytics-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
  align-self: center;
}
.analytics-change-up {
  background: #E8F5E9;
  color: #2E7D32;
}
.menu-mgmt-avail-out {
  background: #FDEDEE;
  color: #C0392B;
}
.analytics-change-down {
  background: #FDEDEE;
  color: #C0392B;
}
/* Edit form */
.menu-mgmt-edit-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-mgmt-label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  margin-top: 4px;
}
.menu-mgmt-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #d6d9dc;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.menu-mgmt-textarea:focus {
  border-color: var(--ga-primary);
}
.menu-mgmt-price-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.menu-mgmt-vnd-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 36px;
  background: #f0f2f5;
  border: 1.5px solid #d6d9dc;
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #555;
  flex-shrink: 0;
}
.menu-mgmt-price-input {
  border-radius: 0 8px 8px 0 !important;
}
.menu-mgmt-img-preview {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  margin-top: 4px;
  border: 1px solid #e9ebed;
}
.analytics-change-neutral {
  background: #f0f2f5;
  color: #8c8c8c;
}
/* ── Bar Chart Rows ── */
.analytics-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.analytics-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.analytics-bar-label {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
.analytics-bar-track {
  flex: 1;
  height: 22px;
  background: #f0f2f5;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.analytics-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 2px;
}
.analytics-bar-value {
  width: 48px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  text-align: right;
}
/* ── Response Time Color Scale ── */
.analytics-bar-green  { background: #27ae60; }
.analytics-bar-yellow { background: #f39c12; }
.analytics-bar-red    { background: #e74c3c; }
/* ── Top Items ── */
.analytics-item-bar {
  background: var(--ga-primary);
  opacity: 0.85;
}
/* ── Empty State ── */
.analytics-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  text-align: center;
  gap: 4px;
}
/* ============================
   Low Stock Badge & Panel
   ============================ */
.low-stock-badge {
  background: #E67E22;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: low-stock-pulse 2s ease-in-out infinite;
}
@keyframes low-stock-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.low-stock-section {
  border-bottom: 1px solid #e9ebed;
}
.low-stock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #E67E22;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.low-stock-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.low-stock-list {
  background: #FFF8F0;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.low-stock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.low-stock-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.low-stock-tag {
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  margin-left: 8px;
}
.low-stock-tag-out {
  background: #FDEDEE;
}
.low-stock-tag-low {
  background: #FFF3E0;
}
/* ============================
   Logo Upload Area
   ============================ */
.branding-logo-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 2px dashed #d6d9dc;
  border-radius: 12px;
  background: #f8f9fa;
  text-align: center;
}
.branding-logo-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.branding-logo-upload-btn:active {
  transform: scale(0.97);
}
.branding-logo-upload-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}
/* ============================
   Overview Dashboard
   ============================ */
.ov-subheader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 12px;
}
.ov-stats {
  display: flex;
  gap: 10px;
  padding: 16px;
}
.ov-stat-card {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  padding: 16px 8px;
  text-align: center;
  box-shadow: var(--ga-card-shadow);
}
.ov-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 16px;
}
.ov-tile {
  position: relative;
  background: #fff;
  border: 1.5px solid #e9ebed;
  border-radius: 14px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ov-tile:active {
  transform: scale(0.97);
}
.ov-tile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.ov-section {
  padding: 16px;
}
.ov-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f1f3;
}
.ov-activity-row:last-child {
  border-bottom: none;
}
/* ============================
   Register Hotel Page
   ============================ */
.register-body {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.register-welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--ga-card-shadow);
}
.register-welcome-icon {
  font-size: 32px;
  margin-bottom: 2px;
}
.register-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--ga-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.register-label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  margin-top: 8px;
}
.register-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d6d9dc;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.register-input:focus {
  border-color: var(--ga-primary);
}
.register-input-color {
  flex: 1;
}
.register-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.register-swatch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #d6d9dc;
  flex-shrink: 0;
}
.register-select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d6d9dc;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.register-select:focus {
  border-color: var(--ga-primary);
}
.register-submit-btn {
  margin-top: 16px;
  padding: 14px 0;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.register-submit-btn:active {
  transform: scale(0.98);
}
.register-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}
/* ── Language Grid (Register) ── */
.register-lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.register-lang-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px;
  border: 1.5px solid #d6d9dc;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.register-lang-chip:active {
  transform: scale(0.96);
}
.register-lang-chip-active {
  border-width: 2px;
}
.register-lang-flag {
  font-size: 20px;
  line-height: 1;
}
.register-lang-label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
}
.register-lang-check {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ga-primary);
}
/* ── Login Section (Register) ── */
.register-login-section {
  margin-top: 8px;
}
.register-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.register-login-divider-line {
  flex: 1;
  height: 1px;
  background: #e0e2e5;
}
.register-login-btn {
  width: 100%;
  padding: 12px 0;
  border: 2px solid;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.register-login-btn:active {
  transform: scale(0.98);
  background: #f8f9fa;
}
.register-login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}
/* ============================
   Auth Gate Loading Screen
   ============================ */
.auth-gate-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 12px;
  background: var(--ga-bg);
}
/* ============================
   Dev Mode Badge (header)
   ============================ */
.dev-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(230, 126, 34, 0.2);
  border: 1px dashed #E67E22;
  font-size: 10px;
  color: #E67E22;
  font-weight: 600;
}
/* ============================
   Welcome Page (gw-*)
   ============================ */
/* Dark the zmp Page host AND drop its safe-area top padding so the animated
   canvas runs full-bleed to the very top edge (no gap). The notch/status-bar
   inset is re-applied to the topbar below so content still clears the notch. */
/* Push welcome content (logo + headlines) down below any top chrome — iPhone
   Dynamic Island / notch on iOS, OR the Zalo system buttons (…/X) row on
   Android & web. max(48px, ...) gives a consistent inset on every device so
   the design always avoids the top, not just on notched iPhones. The absolute
   .gw-topbar positions relative to .gw-page (below this padding) — so the
   language pill stays aligned with the Zalo system buttons regardless. */
.gw-page-host { background: #070e1a; padding-top: max(48px, env(safe-area-inset-top, 0px)); }
.gw-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  /* Dark, AI-native canvas — near-black navy with a cyan glow up top. */
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #070e1a 0%, #0a1422 100%);
  padding: 0 20px;
}
/* ── Animated background: drifting cyan/indigo glow orbs + faint dot grid ── */
.gw-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gw-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.55;
  will-change: transform;
}
.gw-orb-1 {
  width: 340px; height: 340px; top: -90px; left: -70px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.40), transparent 70%);
  animation: gw-drift-1 22s ease-in-out infinite;
}
.gw-orb-2 {
  width: 300px; height: 300px; bottom: -70px; right: -80px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.32), transparent 70%);
  animation: gw-drift-2 27s ease-in-out infinite;
}
.gw-orb-3 {
  width: 240px; height: 240px; top: 42%; left: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 70%);
  animation: gw-drift-3 32s ease-in-out infinite;
}
.gw-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 32%, #000 0%, transparent 82%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 32%, #000 0%, transparent 82%);
}
@keyframes gw-drift-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(46px,62px) scale(1.18); } }
@keyframes gw-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-52px,-44px) scale(1.12); } }
@keyframes gw-drift-3 { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-42%,-64%) scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .gw-orb { animation: none !important; } }
/* .gw-hero removed — logo area handles this now */
.gw-logo-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ga-primary), #1B4965);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(42, 157, 143, 0.3);
  margin-bottom: 16px;
}
.gw-logo-inner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gw-logo-svg {
  border-radius: 50%;
  margin-bottom: 16px;
}
/*
 * Page uses flexbox to position the logo area.
 * During loading: justify-content centers the logo vertically.
 * When ready: switches to flex-start so logo sits at the top.
 * The logo-area transitions smoothly via margin changes.
 */
.gw-page-loading {
  justify-content: center;
}
.gw-page-ready {
  justify-content: flex-start;
}
/* Utility: hide elements with fade.
   IMPORTANT: opacity:0 alone is NOT enough — Android's Zalo WebView leaks
   opacity:0 text through during the loading→ready transition, so the hidden
   loading line ("Đang liên kết…") ghosts on top of the tagline/promo. iOS
   WebKit composites it away, which is why it only reproduces on Android.
   Adding visibility:hidden guarantees the element is not painted on every
   webview; the delayed visibility transition keeps the fade-out smooth. */
.gw-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease;
}
/* ── Logo area — single instance, always in the DOM ── */
.gw-logo-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Margin clears the top-bar row (EN pill on left, Zalo …/X on right at the
     same y) so the logo doesn't compete horizontally with them. Disabled during
     the loading phase — the logo is centered then and we don't want extra inset. */
  margin-top: 56px;
  transition: margin 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
}
.gw-page-loading .gw-logo-area { margin-top: 0; }
/* Spinner ring wrapping the logo */
.gw-loading-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
}
.gw-loading-ring > svg {
  position: relative;
  z-index: 1;
  /* drop-shadow follows the logo's alpha channel — unlike box-shadow which
     draws around the rendering box and renders as a flat square halo on
     some webviews (Zalo iOS being one). */
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.55));
  transition: width 0.6s ease, height 0.6s ease, filter 0.6s ease;
}
.gw-loading-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(56, 189, 248, 0.18);
  border-top-color: #38bdf8;
  animation: gw-spin 1s linear infinite;
  transition: opacity 0.5s ease;
}
.gw-ring-hide::after {
  opacity: 0;
}
@keyframes gw-spin {
  to { transform: rotate(360deg); }
}
/* Signing text + brand name/tagline share the same space */
.gw-signing {
  color: #94a3b8;
  margin-top: 16px;
  transition: opacity 0.5s ease;
}
/* ── Main content — fades in below the logo ── */
.gw-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s,
              transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
  pointer-events: none;
}
.gw-content-in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gw-brand-name {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  transition: opacity 0.5s ease 0.2s;
}
.gw-brand-tagline {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 8px;
  letter-spacing: 0.03em;
  transition: opacity 0.5s ease 0.3s;
}
/* ── Top bar (language picker) ── */
/* Left-aligned so the language pill clears Zalo's native ⋯/✕ controls,
   which sit in the top-right corner of the Mini App. */
.gw-topbar {
  /* Absolute, positioned at the very top of .gw-page (the page's safe-area
     inset is already handled by .gw-page-host's padding-top, so do NOT add
     env(safe-area-inset-top) again here — that would double-count and push the
     EN pill far below the Zalo system buttons). */
  position: absolute;
  top: 6px;
  left: 20px;
  z-index: 3;
  display: flex;
  justify-content: flex-start;
  transition: opacity 0.5s ease 0.2s;
}
/* Glass language pill — scoped to the welcome only (the shared base trigger
   stays light for the dashboard). Dark translucent + cyan hairline + blur,
   matching the website navbar. */
.gw-topbar .od-lang-trigger {
  height: 38px;
  min-width: 38px;
  padding: 0 13px;
  border-radius: 11px;
  background: rgba(13, 27, 42, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: #e2e8f0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
              0 0 18px rgba(56, 189, 248, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.gw-topbar .od-lang-trigger:hover {
  background: rgba(18, 35, 56, 0.72);
  border-color: rgba(56, 189, 248, 0.45);
}
.gw-topbar .od-lang-trigger-code { color: #ffffff; }
/* Language trigger — plain inline text, no chrome */
.gw-lang-trigger {
  font-size: 13px;
  font-weight: 500;
  color: #8c8c8c;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  letter-spacing: 0.02em;
  padding: 4px 0;
}
/* Language sheet rows */
.gw-lang-sheet {
  padding: 8px 16px 20px;
}
.gw-lang-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.gw-lang-row:active { background: #f5f6f7; }
.gw-lang-row-active {
  background: rgba(42, 157, 143, 0.06);
}
.gw-lang-row-flag {
  font-size: 22px;
  line-height: 1;
}
/* ── Value proposition section ── */
.gw-promo-title {
  text-align: center;
  color: #ffffff;
  margin: 28px 0 24px;
  letter-spacing: -0.01em;
}
.gw-promo-steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 40px;
}
.gw-promo-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 22px;
}
/* Gentle hairline divider between the three steps (not after the last) */
.gw-promo-step:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gw-promo-step:last-child {
  padding-bottom: 0;
}
/* SVG icon container — clean, no bg box */
.gw-step-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gw-step-icon svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.55));
  animation: gw-icon-glow 3.4s ease-in-out infinite;
}
/* All step icons share the brand cyan + a soft pulsing glow (like the CTA),
   instead of shifting through unrelated colors. */
.gw-step-icon svg :is(rect, path, circle, ellipse, line) {
  stroke: #38bdf8;
}
/* Stagger the glow so the three breathe out of sync */
.gw-promo-step:nth-child(2) .gw-step-icon svg { animation-delay: -1.1s; }
.gw-promo-step:nth-child(3) .gw-step-icon svg { animation-delay: -2.3s; }
@keyframes gw-icon-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.40)); }
  50%      { filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .gw-step-icon svg { animation: none; filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.5)); }
}
.gw-promo-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 2px;
}
/* ── Animated glow CTA button ── */
.gw-glow-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 54px;
  border-radius: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 12px;
  box-shadow: 0 10px 30px -6px rgba(56, 189, 248, 0.45);
}
.gw-glow-wrap:active { transform: scale(0.97); }
/* Spinning conic-gradient border */
.gw-glow-border {
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: conic-gradient(
    from var(--gw-glow-angle, 0deg),
    var(--ga-primary),
    #38bdf8,
    var(--ga-primary),
    #0b1929,
    var(--ga-primary)
  );
  animation: gw-glow-spin 3s linear infinite;
  filter: blur(0.5px);
}
@keyframes gw-glow-spin {
  to { --gw-glow-angle: 360deg; }
}
/* Houdini fallback — animate via transform for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .gw-glow-border {
    background: linear-gradient(135deg, var(--ga-primary), #38bdf8, var(--ga-primary));
  }
}
@property --gw-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
/* Inner button face */
.gw-glow-btn {
  position: absolute;
  inset: 1px;
  border-radius: 12px;
  border: none;
  background: #0b1929;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.gw-glow-btn:active {
  background: #0b1929;
}
/* Footer */
.gw-footer {
  text-align: center;
  padding: 16px 0 24px;
  flex-shrink: 0;
  margin-top: auto;
}
/* ============================
   Login Page (gl-*)
   ============================ */
.gl-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--ga-bg);
}
.gl-header {
  background: var(--ga-primary);
  padding: 20px 16px 20px;
  flex-shrink: 0;
}
.gl-back-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.gl-back-btn:active { opacity: 0.7; }
.gl-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}
.gl-hotel-list,
.gl-staff-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gl-hotel-card,
.gl-staff-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--ga-card-shadow);
  cursor: pointer;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.gl-hotel-card:active,
.gl-staff-card:active { transform: scale(0.98); }
.gl-hotel-card-left,
.gl-staff-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gl-hotel-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.gl-hotel-logo-fallback {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gl-staff-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gl-owner-card {
  border-left: 3px solid #C0392B;
}
.gl-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.gl-divider-line {
  flex: 1;
  height: 1px;
  background: #e0e2e5;
}
/* ============================
   Registration Wizard (rw-*)
   ============================ */
.rw-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--ga-bg);
}
.rw-page-flat {
  background: #ffffff;
}
.rw-header {
  padding: 20px 16px 20px;
  flex-shrink: 0;
}
/* Onboarding is a full-bleed dark header: drop the global cream top inset
   so no strip shows above the navy bar; the inset is re-added inside the
   dark header itself (below) so the status-bar/notch area stays dark. */
.rw-page-host {
  padding-top: 0;
  /* Dark canvas on the Page itself (not just the inner .rw-page Box) so no cream
     --ga-bg shows in the safe-area insets. */
  background: #070e1a;
}
.rw-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 12px;
  /* Clear the safe-area top (status bar / Dynamic Island) with a little breathing
     room so the back arrow + title aren't clipped, while still sitting near the
     Zalo system buttons. max() floor keeps a safe gap on non-notch devices. */
  padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
  flex-shrink: 0;
}
.rw-back-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.rw-back-arrow:active { opacity: 0.6; }
/* Compact language picker inside the onboarding header — the shared
   .od-lang-trigger (44px) is too chunky here; shrink + keep centered. */
.rw-header-row .od-lang-trigger {
  height: 30px;
  min-width: 0;
  padding: 0 9px;
  gap: 5px;
  border-radius: 9px;
  align-self: center;
}
.rw-header-row .od-lang-trigger-flag { font-size: 14px; }
.rw-header-row .od-lang-trigger-code { font-size: 11px; }
/* ── Clean 4-segment progress bar ── */
.rw-progress-bar {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  background: #e9ebed;
}
.rw-progress-bar-seg {
  flex: 1;
  height: 3px;
  background: #e0e2e5;
  transition: background-color 0.35s ease;
}
.rw-progress-bar-seg-active {
  background: #38BDF8;
}
/* ── Flat body (no nested card) ── */
.rw-body-flat {
  flex: 1;
  padding: 14px 20px 120px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
/* Each wizard step is wrapped in a key={step} div that replays this on mount,
   so steps glide (fade + lift) instead of hard-cutting between pages. */
.rw-step-anim {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: rwStepIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rwStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Spinner inside the bottom "Next / Setting up your hotel…" button, so the user
   knows it's working and shouldn't leave the page. Reuses @keyframes rw-spin. */
.rw-btn-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rw-spin 0.7s linear infinite;
}
/* ── Step Hotel: flat layout ── */
.rw-step-hotel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.rw-step-title {
  color: #111827;
  text-align: center;
  letter-spacing: -0.01em;
  font-size: 19px;
  line-height: 1.2;
}
.rw-step-subtitle {
  color: #8c8c8c;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 12px;
}
/* ── Avatar Upload Circle ── */
.rw-avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 28px;
  -webkit-tap-highlight-color: transparent;
}
.rw-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f2f5 0%, #d6d9dc 100%);
  border: 2.5px dashed #c0c5cc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(11, 25, 41, 0.10);
}
.rw-avatar-upload:active .rw-avatar-placeholder {
  border-color: #0b1929;
  box-shadow: 0 4px 20px rgba(11, 25, 41, 0.25);
}
.rw-avatar-plus {
  font-size: 32px;
  font-weight: 300;
  color: #0b1929;
  line-height: 1;
}
.rw-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #d6d9dc;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.rw-avatar-hint {
  color: #8c8c8c;
  font-weight: 500;
}
/* ── Underlined Input (variant='underlined') ── */
.rw-underlined-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-top: 8px;
  align-self: flex-start;
  width: 100%;
}
.rw-underlined-input {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 2px solid #e0e2e5;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: #111827;
  outline: none;
  transition: border-color 0.2s ease;
}
.rw-underlined-input::placeholder {
  color: #c0c5cc;
}
.rw-underlined-input:focus {
  border-bottom-color: #0b1929;
}
/* ── Fixed Bottom Navigation ── */
.rw-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid #f0f1f3;
  z-index: 100;
}
.rw-nav-next-v2 {
  flex: 1;
  background: #d6d9dc;
  color: #fff;
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.1s;
}
.rw-nav-next-v2-active {
  background: #0b1929 !important;
  box-shadow: 0 6px 20px rgba(11, 25, 41, 0.4);
}
.rw-nav-next-v2-active:active {
  transform: scale(0.98);
}
/* ── Keep old progress for backwards compat but hide ── */
.rw-progress {
  display: flex;
  gap: 4px;
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.rw-progress-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
/* Card entrance animation */
.rw-card-anim {
  animation: rw-slide-in 0.35s ease-out;
}
@keyframes rw-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
/* Nav Row */
.rw-nav-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.rw-nav-btn {
  flex: 1;
  padding: 14px 0;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.rw-nav-btn:active { transform: scale(0.98); }
.rw-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rw-nav-back {
  background: #f0f2f5;
  color: #555;
}
.rw-nav-next {
  color: #fff;
}
/* Review rows */
.rw-review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f1f3;
}
.rw-review-row:last-child {
  border-bottom: none;
}
/* ============================
   Step 1: Search & Place Card
   ============================ */
/* ── Search wrap with animated glow border ── */
.rw-search-wrap {
  position: relative;
  border-radius: 12px;
}
.rw-search-glow-border {
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--rw-glow-angle, 0deg),
    #0b1929, #D4AF37, #1B4965, #D4AF37, #0b1929
  );
  animation: rw-glow-spin 2s linear infinite;
  z-index: 0;
}
@property --rw-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rw-glow-spin {
  to { --rw-glow-angle: 360deg; }
}
.rw-search-box {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid #e0e2e5;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rw-search-glow .rw-search-box {
  border-color: transparent;
}
.rw-search-box:focus-within {
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(11, 25, 41, 0.06);
}
.rw-search-glow .rw-search-box:focus-within {
  border-color: transparent;
  box-shadow: none;
}
.rw-search-icon { font-size: 16px; flex-shrink: 0; }
.rw-search-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e0e2e5;
  border-top-color: #111827;
  border-radius: 50%;
  animation: rw-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes rw-spin { to { transform: rotate(360deg); } }
/* ── Pull-to-refresh (PullToRefresh.tsx) ─────────────────────── */
.ptr-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.ptr-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(56, 189, 248, 0.25);
  border-top-color: #38bdf8;
  will-change: transform;
}
.ptr-spinner-spin {
  animation: ptr-spin 0.7s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }
.rw-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  color: #111827;
  outline: none;
}
.rw-search-input::placeholder { color: #c0c5cc; }
.rw-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid #e9ebed;
  border-radius: 12px;
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}
.rw-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.rw-search-result:active { background: #f5f6f7; }
.rw-place-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: none;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  /* Full-bleed: cancel the body's 28px top + 20px side padding so the
     card runs edge-to-edge and flush under the header (no white gap). */
  margin: -28px -20px 16px;
}
/* ── Image wrapper with overlays ── */
.rw-place-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  background: #f0f2f5;
  overflow: hidden;
}
.rw-place-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rw-place-photo-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ebed);
}
/* Rating badge — bottom-right of image */
.rw-place-rating-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 4px 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.rw-place-rating-count {
  font-weight: 500;
  opacity: 0.75;
  margin-left: 1px;
}
/* ── Details section ── */
.rw-place-details {
  padding: 12px 18px 14px;
  text-align: center;
}
.rw-place-name {
  font-size: 1.0rem;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 6px;
}
.rw-place-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}
.rw-place-detail-row svg { flex-shrink: 0; margin-top: 1px; }
/* ── Skeleton Loader (place card) ── */
@keyframes rw-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.rw-skeleton-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #e9ebed 25%, #f5f6f7 37%, #e9ebed 63%);
  background-size: 800px 100%;
  animation: rw-shimmer 1.4s ease-in-out infinite;
}
.rw-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e9ebed 25%, #f5f6f7 37%, #e9ebed 63%);
  background-size: 800px 100%;
  animation: rw-shimmer 1.4s ease-in-out infinite;
  margin: 0 auto;
}
.rw-skeleton-line-lg { width: 60%; height: 16px; margin-bottom: 10px; }
.rw-skeleton-line-md { width: 80%; margin-bottom: 8px; }
.rw-skeleton-line-sm { width: 40%; }
/* ── Hero photo: shimmer skeleton over the image slot until it paints ──
   The card's text (name/address/rating) shows immediately; only the photo
   area holds a shimmer, then the image cross-fades in once loaded/cached. */
.rw-place-img-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.rw-place-photo-fade {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.rw-place-photo-fade.rw-place-photo-in {
  opacity: 1;
  position: relative;
  z-index: 2; /* sit above the skeleton as it fades out */
}
/* Smooth, deliberate reveal of the hotel card after the preparing stall. */
@keyframes rw-place-reveal {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.rw-place-card-reveal {
  animation: rw-place-reveal 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── Tips Card ── */
.rw-tips-card {
  background: #fefdf6;
  border: 1px solid #f0e6c8;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 4px;
}
.rw-tip-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}
.rw-tip-row svg { flex-shrink: 0; margin-top: 2px; }
/* ============================
   Steps 2-4: Upload Zone
   ============================ */
.rw-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 20px 16px;
  border: 2px dashed #d6d9dc;
  border-radius: 12px;
  background: #f8f9fa;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  margin-top: 6px;
}
.rw-upload-zone:active {
  border-color: #0b1929;
  background: #f0f2f5;
}
.rw-file-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.rw-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e9ebed;
  border-radius: 12px;
}
.rw-file-remove {
  background: none;
  border: none;
  color: #C0392B;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.rw-feedback {
  padding: 10px 14px;
  border-radius: 12px;
  margin-top: 4px;
}
.rw-feedback-ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.rw-feedback-warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
}
/* ============================
   Step 2: Menus & Services
   ============================ */
.rw-menu-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1.5px solid #d6d9dc;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.rw-menu-chip:hover:not(:disabled) {
  border-color: #D4AF37;
  background: #fefdf6;
}
.rw-menu-chip:disabled {
  border-color: #D4AF37;
  background: rgba(212, 175, 55, 0.12);
  color: #92750e;
  cursor: default;
  opacity: 0.75;
}
.rw-menu-chip-active {
  border-color: #D4AF37;
  background: rgba(212, 175, 55, 0.12);
  color: #92750e;
  cursor: pointer;
}
/* Description-style preset chips */
.rw-menu-chip-desc {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 8px 12px;
  width: calc(50% - 4px);
  box-sizing: border-box;
}
.rw-menu-chip-top {
  font-weight: 600;
  font-size: 12px;
}
.rw-menu-chip-sub {
  font-size: 10px;
  color: #8c8c8c;
  line-height: 1.3;
  font-weight: 400;
}
.rw-menu-chip-active .rw-menu-chip-sub {
  color: #92750e;
}
.rw-menu-entry {
  border: 1.5px solid #e9ebed;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fafbfc;
  margin-top: 4px;
}
.rw-menu-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rw-upload-zone-sm {
  padding: 13px 12px;
}
.rw-upload-zone-sm svg {
  width: 20px;
  height: 20px;
}
/* ============================
   Step 5: Done / QR
   ============================ */
.rw-done-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 16px;
}
.rw-done-status {
  margin-top: 8px;
  padding: 16px 20px;
  background: #fefdf6;
  border: 1.5px solid #D4AF37;
  border-radius: 12px;
  text-align: center;
  width: 100%;
}
.rw-done-qr {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid #e9ebed;
  border-radius: 12px;
  width: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.rw-qr-frame {
  padding: 12px;
  background: #fff;
  border: 2px solid #111827;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ============================
   Overview Dashboard v2 (od-*)
   Matches the welcome/login (gw-*) design language
   ============================ */
.od-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(56, 189, 248, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--ga-bg) 0%, #e8f0ec 100%);
  padding: 0 0 32px;
}
/* ── Top bar (sticky brand + lang/logout) ─────────── */
.od-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Carry the safe-area top inset on the bar itself (host padding is zeroed via
     .od-page-host) — same setup as the onboarding header — so the bell + gear
     align with the Zalo system buttons instead of sitting too low. Right pad
     reserves the top-right corner for Zalo's floating close/more control.
     Floor is 28px, not 14px: Android Zalo webviews (e.g. Galaxy S21 Ultra)
     report env(safe-area-inset-top)=0, so the floor IS the clearance there —
     14px jammed the bar under the OS status bar. iOS is unchanged (its inset
     always exceeds the floor, so max() picks the inset). */
  padding: max(28px, calc(env(safe-area-inset-top, 0px) + 8px)) 92px 8px 18px;
  background: transparent;
}
/* Dashboard topbar: settings gear on the LEFT, Guesti wordmark CENTERED,
   both top-aligned with Zalo's system buttons. The wordmark is absolutely
   centered on the full bar width (clears the left gear and the right Zalo
   buttons). */
.od-topbar-dashboard {
  align-items: center;
  /* Nudge the gear + wordmark up ~6px so their centerline matches Zalo's
     floating ⋯|✕ system buttons (which sit a touch higher than the default
     topbar inset). Floor 22px = base 28px − 6px, so the nudge holds on Android
     (inset=0) too; iOS still picks the larger real inset. */
  padding-top: max(22px, calc(env(safe-area-inset-top, 0px) + 2px));
}
.od-topbar-dashboard .od-topbar-brand {
  /* Fill the space between the left control (flag/gear) and the bar's right
     reserve (Zalo's ⋯|✕ capsule) and centre the name/wordmark inside it. */
  flex: 1;
  min-width: 0;
  justify-content: center;
}
/* DEV preview only (DevZaloChrome): push the app below the faux status bar.
   Paint the band with the app's own top color so there's no seam. */
body[data-fake-zalo="1"] #app { padding-top: 50px; background: #070e1a; }
/* …and compensate that 50px inset on the page containers. Otherwise the faux
   chrome's padding stacks on top of every page's `min-height:100vh`, making the
   document 50px taller than the viewport — so you can scroll down into empty
   space on EVERY page. Scoped to the dev faux-chrome flag, so production web and
   the real Zalo Mini App (no flag) are unaffected. */
body[data-fake-zalo="1"] .page,
body[data-fake-zalo="1"] .od-page,
body[data-fake-zalo="1"] .od-loader-page {
  min-height: calc(100vh - 50px) !important;
}
.od-topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.od-topbar-brand-text {
  font-size: 16px;
  font-weight: 800;
  color: #0b1929;
  letter-spacing: -0.01em;
}
.od-topbar-brand-text .od-topbar-tld {
  color: rgba(11, 25, 41, 0.45);
  font-weight: 600;
}
/* Staff dashboard header: which hotel + role they're signed into, centered. */
.od-topbar-staff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.od-topbar-staff-hotel {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  max-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-topbar-staff-role {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  padding: 1px 9px;
  border-radius: 999px;
}
/* Staff settings sheet (gear → Settings: rows + Sign out; a Language row
   opens the language picker sheet). */
.od-settings {
  padding: 6px 16px 22px;
}
.od-settings-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  padding: 6px 4px 14px;
}
.od-settings-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.od-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.od-settings-row:active { background: rgba(255, 255, 255, 0.08); }
.od-settings-row-icon {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.od-settings-row-label {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex: 1;
}
.od-settings-row-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.od-settings-row-flag { font-size: 17px; line-height: 1; }
.od-settings-row-chevron {
  color: rgba(255, 255, 255, 0.35);
  font-size: 20px;
  margin-left: 2px;
  flex-shrink: 0;
}
.od-settings-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 14px;
  background: rgba(220, 38, 38, 0.10);
  color: #f87171;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.od-settings-signout:active { background: rgba(220, 38, 38, 0.18); }
.od-topbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.od-topbar-cat-icon {
  font-size: 18px;
  line-height: 1;
}
.od-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.od-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(11, 25, 41, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
  font-size: 14px;
  color: #0b1929;
}
.od-icon-btn:active {
  transform: scale(0.94);
  background: rgba(11, 25, 41, 0.08);
}
/* ── Topbar greeting (subtle) ─────────────────────── */
.od-topbar-greeting {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Compact hotel-info row (single-line venue identity) ── */
.od-hotel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 14px;
}
.od-hotel-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(11, 25, 41, 0.08);
}
/* "+ Add hotel" button on the right edge of the hotel row.
   Tucked here because Owners rarely need it (vs. Tools row). */
.od-hotel-add {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px dashed rgba(11, 25, 41, 0.2);
  border-radius: 14px;
  background: transparent;
  color: #4B5563;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.od-hotel-add:hover {
  background: rgba(11, 25, 41, 0.04);
  border-color: rgba(11, 25, 41, 0.35);
  color: #0b1929;
}
.od-hotel-add:active { transform: scale(0.94); }
.od-hotel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.od-hotel-avatar span {
  font-size: 22px;
}
.od-hotel-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.od-hotel-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #0b1929;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-hotel-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #0b1929;
  flex-shrink: 0;
}
.od-hotel-rating-star {
  color: #f59e0b;
  font-size: 13px;
  line-height: 1;
}
.od-hotel-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-hotel-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  color: #0b1929;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.od-hotel-role-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38bdf8;
}
.od-hotel-address {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.od-hotel-dev {
  flex-shrink: 0;
}
/* ── KPI ribbon (4 small cards, action-relevant) ─── */
.od-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 4px 18px 14px;
}
.od-kpis.od-kpis-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.od-staffbar-room {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.od-kpi {
  background: #fff;
  border-radius: 14px;
  padding: 12px 8px 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(11, 25, 41, 0.05);
  position: relative;
}
.od-kpi-num {
  font-size: 22px;
  font-weight: 900;
  color: #0b1929;
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.od-kpi-sub {
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  letter-spacing: 0;
  margin-left: 1px;
}
.od-kpi-label {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-kpi-alert .od-kpi-num { color: #c2410c; }
.od-kpi-pulse {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: #ef4444;
  animation: od-pulse 1.6s ease-in-out infinite;
}
@keyframes od-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
/* ── Section head meta (e.g. "· 2 need attention") ── */
.od-section-meta {
  font-size: 11px;
  font-weight: 600;
  color: #c2410c;
  margin-left: 2px;
}
/* ── Open Requests — actionable rows ───────────────── */
.od-reqs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.od-req {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  background: rgba(13, 27, 42, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.12);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: background 0.12s;
}
.od-req:active { background: rgba(255, 255, 255, 0.04); }
.od-req::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.od-req-ok::before    { background: transparent; }
.od-req-warn::before  { background: #fb923c; }
.od-req-alert::before { background: #ef4444; }
.od-req-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.od-req-body {
  flex: 1;
  min-width: 0;
}
.od-req-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}
.od-req-cat {
  font-weight: 600;
  font-size: 11px;
}
.od-req-status-pill {
  font-size: 8px;
  color: #2563eb;
  margin-left: 2px;
}
.od-req-room { font-weight: 800; }
.od-req-msg {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.od-req-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.od-req-age {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.od-req-age-ok    { background: rgba(255, 255, 255, 0.06); color: #94a3b8; }
.od-req-age-warn  { background: rgba(251, 146, 60, 0.16); color: #c2410c; }
.od-req-age-alert {
  background: rgba(239, 68, 68, 0.16);
  color: #b91c1c;
  animation: od-pulse 1.8s ease-in-out infinite;
}
.od-req-actions {
  display: flex;
  gap: 4px;
}
.od-req-btn {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, background 0.15s;
}
.od-req-btn:active { transform: scale(0.92); }
.od-req-btn-primary {
  background: #16a34a;
  color: #fff;
}
.od-req-btn-primary:hover  { background: #15803d; }
.od-req-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.od-req-btn-secondary {
  background: rgba(11, 25, 41, 0.07);
  color: #0b1929;
}
.od-req-btn-secondary:hover { background: rgba(11, 25, 41, 0.13); }
/* All clear banner — empty state for open requests */
.od-allclear {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 14px;
  border: 1px solid rgba(34, 197, 94, 0.18);
}
.od-allclear-emoji { font-size: 22px; color: #34d399; }
.od-allclear-text {
  font-size: 13px;
  font-weight: 600;
  color: #34d399;
}
/* ── Tools — 2-col grid of compact tiles (14px radius) ── */
.od-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px 18px 12px;
}
@media (min-width: 380px) {
  .od-tools {
    grid-template-columns: repeat(4, 1fr);
  }
}
.od-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11, 25, 41, 0.06);
  background: #fff;
  color: #0b1929;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 1px 4px rgba(11, 25, 41, 0.04);
  overflow: hidden;
}
.od-tool::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--od-tool-c, #38bdf8);
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.od-tool:active {
  transform: scale(0.97);
  border-color: color-mix(in srgb, var(--od-tool-c, #38bdf8) 35%, transparent);
}
.od-tool:active::before {
  opacity: 0.06;
}
.od-tool-icon {
  font-size: 22px;
  line-height: 1;
  position: relative;
}
.od-tool-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  position: relative;
}
/* ── Activity section ─────────────────────────────── */
.od-section {
  margin: 4px 18px 0;
}
.od-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 10px;
}
.od-section-title {
  font-size: 13px;
  font-weight: 800;
  color: #0b1929;
  letter-spacing: 0.01em;
}
.od-section-link {
  font-size: 12px;
  font-weight: 600;
  color: #38bdf8;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  padding: 0;
}
.od-activity {
  background: #fff;
  border-radius: 14px;
  padding: 4px 12px;
  box-shadow: 0 2px 10px rgba(11, 25, 41, 0.05);
}
.od-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #f0f1f3;
}
.od-activity-row:last-child {
  border-bottom: none;
}
.od-activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--od-act-bg, rgba(11, 25, 41, 0.06));
}
.od-activity-body {
  flex: 1;
  min-width: 0;
}
.od-activity-title {
  font-size: 13px;
  font-weight: 700;
  color: #0b1929;
}
.od-activity-msg {
  font-size: 11px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.od-activity-time {
  font-size: 10px;
  color: #9CA3AF;
  white-space: nowrap;
  flex-shrink: 0;
}
.od-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 12px;
}
.od-empty-emoji {
  font-size: 28px;
}
.od-empty-text {
  font-size: 12px;
  color: #9CA3AF;
}
/* ── Footer ───────────────────────────────────────── */
/* ── Category usage bar (iPhone storage style) ─────── */
.od-usage-bar {
  display: flex;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  gap: 2px;
  background: rgba(11, 25, 41, 0.04);
}
.od-usage-seg {
  border-radius: 99px;
  min-width: 6px;
  transition: flex 0.4s ease;
}
.od-usage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
}
.od-usage-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #6B7280;
  font-weight: 500;
}
.od-usage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.od-usage-label {
  color: #4B5563;
}
.od-usage-num {
  font-weight: 700;
  color: #0b1929;
}
.od-footer {
  text-align: center;
  padding: 24px 0 8px;
}
.od-footer-text {
  font-size: 11px;
  color: #adb5bd;
}
.od-footer-text-brand {
  color: #38bdf8;
  font-weight: 700;
}
/* ── Trial Banner ─────────────────────────────────── */
.od-trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  margin: 0 0 4px;
}
.od-trial-banner-info {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
}
.od-trial-banner-warn {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
}
.od-trial-banner-alert {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}
.od-trial-banner-body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.od-trial-banner-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.od-trial-banner-text {
  color: #374151;
  font-weight: 600;
  line-height: 1.4;
}
.od-trial-banner-plan {
  color: #9CA3AF;
  font-weight: 400;
}
.od-trial-banner-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 8px;
  border: none;
  background: #0b1929;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.od-trial-banner-btn:active {
  opacity: 0.85;
}
/* ── Back button + topbar avatar (inner pages) ────── */
.od-back-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(11, 25, 41, 0.06);
  color: #0b1929;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.od-back-btn:active {
  transform: scale(0.92);
  background: rgba(11, 25, 41, 0.12);
}
.od-topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(11, 25, 41, 0.1);
}
.od-topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ── Filter chips (segmented control) ──────────────── */
.od-filters {
  display: flex;
  gap: 8px;
  padding: 8px 18px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.od-filters::-webkit-scrollbar { display: none; }
.od-filter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11, 25, 41, 0.10);
  background: #fff;
  color: #4B5563;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}
.od-filter:active { transform: scale(0.96); }
.od-filter-active {
  background: #0b1929;
  color: #fff;
  border-color: #0b1929;
}
.od-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(11, 25, 41, 0.08);
  color: inherit;
  font-size: 10px;
  font-weight: 800;
}
.od-filter-active .od-filter-count {
  background: rgba(255, 255, 255, 0.18);
}
/* ── Danger action button variant ──────────────────── */
.od-req-btn-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.od-req-btn-danger:hover { background: rgba(239, 68, 68, 0.2); }
.od-req-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
/* ──────────────────────────────────────────────────── *
 *   Action Modal (od-modal-*)
 *   Replaces zmp-ui Modal — same visual language as the
 *   request rows (rounded, soft shadow, accent stripe).
 * ──────────────────────────────────────────────────── */
.od-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7, 14, 26, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: od-fade-in 0.18s ease-out;
}
@media (min-width: 480px) {
  .od-modal-backdrop { align-items: center; padding: 16px; }
}
@keyframes od-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.od-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 14px 14px 0 0;
  padding: 22px 20px 20px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  animation: od-slide-up 0.22s cubic-bezier(0.2, 0.9, 0.4, 1);
  border-top: 4px solid var(--od-modal-accent, #38bdf8);
}
@media (min-width: 480px) {
  .od-modal {
    border-radius: 14px;
    border-top-width: 0;
    border-left: 4px solid var(--od-modal-accent, #38bdf8);
  }
}
.od-modal-complete { --od-modal-accent: #16a34a; }
.od-modal-cancel   { --od-modal-accent: #ef4444; }
@keyframes od-slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.od-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.od-modal-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  background: color-mix(in srgb, var(--od-modal-accent) 14%, transparent);
  color: var(--od-modal-accent);
}
.od-modal-titles {
  flex: 1;
  min-width: 0;
}
.od-modal-title {
  font-size: 16px;
  font-weight: 800;
  color: #0b1929;
  letter-spacing: -0.01em;
}
.od-modal-desc {
  margin-top: 4px;
  font-size: 12px;
  color: #6B7280;
  line-height: 1.5;
}
.od-modal-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(11, 25, 41, 0.06);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.od-modal-close:hover { background: rgba(11, 25, 41, 0.1); }
.od-modal-close:active { transform: scale(0.92); }
.od-modal-close:disabled { opacity: 0.5; cursor: not-allowed; }
.od-modal-body { margin-bottom: 18px; }
.od-modal-textarea {
  width: 100%;
  min-height: 88px;
  padding: 12px 14px;
  border: 1.5px solid #e0e5ec;
  border-radius: 14px;
  background: #FAF5F0;
  font-size: 14px;
  font-family: inherit;
  color: #0b1929;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.od-modal-textarea::placeholder { color: #9CA3AF; }
.od-modal-textarea:focus {
  background: #fff;
  border-color: var(--od-modal-accent, #38bdf8);
}
.od-modal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
}
.od-modal-hint { color: #ef4444; font-weight: 600; }
.od-modal-count { color: #9CA3AF; }
.od-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.od-modal-btn {
  flex: 1;
  padding: 12px 18px;
  border-radius: 14px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, opacity 0.15s, background 0.15s;
}
.od-modal-btn:active { transform: scale(0.97); }
.od-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.od-modal-btn-ghost {
  background: rgba(11, 25, 41, 0.06);
  color: #4B5563;
  flex: 0 0 auto;
}
.od-modal-btn-ghost:hover { background: rgba(11, 25, 41, 0.1); }
.od-modal-btn-primary {
  background: #16a34a;
  color: #fff;
}
.od-modal-btn-primary:hover { background: #15803d; }
.od-modal-btn-danger {
  background: #ef4444;
  color: #fff;
}
.od-modal-btn-danger:hover { background: #dc2626; }
/* ── Tabs (Live / History / Analytics) ───────────── */
.od-tabs {
  display: flex;
  gap: 4px;
  padding: 4px 18px 0;
  border-bottom: 1px solid rgba(11, 25, 41, 0.08);
}
.od-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6B7280;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, border-color 0.15s;
}
.od-tab:active { transform: scale(0.97); }
.od-tab-active {
  color: #0b1929;
  border-bottom-color: #38bdf8;
}
.od-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(11, 25, 41, 0.08);
  color: inherit;
  font-size: 9px;
  font-weight: 800;
}
.od-tab-active .od-tab-count {
  background: rgba(56, 189, 248, 0.18);
  color: #0369a1;
}
/* ── Warning banner (low stock, etc.) ──────────────── */
.od-banner {
  margin: 4px 18px 12px;
  border-radius: 14px;
  background: rgba(251, 146, 60, 0.10);
  border: 1px solid rgba(251, 146, 60, 0.24);
  overflow: hidden;
}
.od-banner-warn {
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.10), rgba(255, 255, 255, 0.6));
}
.od-banner-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  font-family: inherit;
}
.od-banner-icon { font-size: 16px; line-height: 1; }
.od-banner-text { flex: 1; font-size: 12px; font-weight: 700; color: #c2410c; }
.od-banner-toggle { color: #c2410c; font-size: 14px; }
.od-banner-list {
  padding: 4px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.od-banner-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(11, 25, 41, 0.06);
}
.od-banner-item-name {
  font-size: 12px;
  font-weight: 600;
  color: #0b1929;
}
.od-banner-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
.od-banner-tag-out {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}
.od-banner-tag-low {
  background: rgba(251, 146, 60, 0.16);
  color: #c2410c;
}
.od-banner-link {
  margin-top: 6px;
  background: none;
  border: none;
  color: #0369a1;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  padding: 4px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* ── History row variant (read-only, muted) ────────── */
.od-req-history {
  cursor: default;
}
.od-req-history:active { background: transparent; }
.od-req-history .od-req-room { color: #4B5563; }
.od-req-history .od-req-msg  { color: #9CA3AF; }
.od-req-history-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.od-req-history-done {
  background: rgba(34, 197, 94, 0.12);
  color: #047857;
}
.od-req-history-cancelled {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
}
/* ── Primary CTA (full-width, used for "Add staff" etc.) ── */
.od-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, opacity 0.15s, background 0.15s;
}
.od-cta:active { transform: scale(0.98); }
.od-cta:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
/* The primary CTA was near-black on a near-black page — it read as disabled
   chrome rather than the main action. Sky (#38bdf8) is the theme's bright
   accent, already used for links, active nav and focus rings. Dark ink on it
   because sky is too light to carry white text at AA. */
.od-cta-primary {
  background: #38bdf8;
  color: #07121f;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.28);
}
.od-cta-primary:hover { background: #7dd3fc; }
.od-cta-primary:active { background: #0ea5e9; }
.od-cta-primary .od-cta-icon { color: inherit; }
.od-cta-icon {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
/* ── Inline form card (Add Staff, etc.) ──────────────── */
.od-form {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(11, 25, 41, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.od-form-title {
  font-size: 13px;
  font-weight: 800;
  color: #0b1929;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.od-form-help {
  font-size: 11px;
  color: #6B7280;
  font-style: italic;
}
.od-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
/* ── Inputs (shared) ──────────────────────────────────── */
.od-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e0e5ec;
  border-radius: 10px;
  background: #FAF5F0;
  font-size: 14px;
  color: #0b1929;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.od-input::placeholder { color: #9CA3AF; }
.od-input:focus {
  background: #fff;
  border-color: #38bdf8;
}
.od-input-inline {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}
select.od-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%236B7280' d='M4 6l4 4 4-4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
/* ── Department chips (selectable grid) ───────────────── */
.od-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
}
.od-dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid #e0e5ec;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #4B5563;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}
.od-dept-chip:active { transform: scale(0.96); }
.od-dept-chip-active {
  border-width: 1.5px;
  font-weight: 700;
}
.od-dept-chip-emoji { font-size: 14px; line-height: 1; }
.od-dept-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Staff row tweaks (override default cursor on od-req) ── */
.od-staff-row {
  cursor: default;
}
.od-staff-row:active { background: transparent; }
/* ── Staff row layout ──────────────────────────────────────────
   The shared .od-req row was built for an icon + one-line message + tiny
   square icon buttons. Staff rows add a (sometimes long) name, up to two
   status badges, and TEXT action buttons ("Invite", "👑 Owner") that were
   being crushed into the fixed 28px icon-button slot and overflowing. Let the
   header wrap, ellipsize the name, let the actions wrap, and give the text
   buttons real width (icon buttons stay square). */
.od-staff-row .od-req-head {
  flex-wrap: wrap;
  row-gap: 4px;
}
.od-staff-row .od-req-room {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.od-staff-row .od-req-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.od-staff-row .od-req-btn-text {
  width: auto !important;
  padding: 0 12px;
  white-space: nowrap;
}
/* Invite / 👑 Owner are the row's primary CTAs — the dark-theme navy primary
   nearly vanishes on the dark card, so give them the brand sky so they read
   as tappable buttons. */
.od-staff-row .od-req-btn-text.od-req-btn-primary {
  background: #38bdf8 !important;
  color: #07223a !important;
}
/* ── Menu rows (thumb + price + availability toggle) ── */
.od-menu-row {
  cursor: default;
  align-items: center;
  /* The pending-photo hint hangs above the row: .od-req clips (overflow:hidden)
     and isn't positioned, so without these the popover would be anchored to the
     wrong ancestor AND cut off. Menu rows don't rely on the clip — the thumb
     rounds itself. */
  position: relative;
  overflow: visible;
}
.od-menu-row:active { background: transparent; }
.od-menu-row-out {
  opacity: 0.55;
}
.od-menu-row-editing {
  align-items: flex-start;
  background: rgba(56, 189, 248, 0.04);
}
.od-menu-thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
}
.od-menu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ── Item whose AI photo hasn't been generated yet ──────────
   An empty square read as broken. A ring that's visibly turning says "working
   on it", and the row explains itself on hover (desktop) or tap (phone) —
   mockups arrive minutes after onboarding, so an owner WILL land here first. */
.od-menu-thumb-pending {
  position: relative;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Guesti blue, dead-centre inside the ring. The emoji this replaced sat on the
   text baseline (so it rode low) and the system font painted it yellow — it read
   as a warning badge rather than "we're working on it". */
.od-menu-thumb-sparkle {
  width: 20px;
  height: 20px;
  display: block;
  color: #38bdf8;
  opacity: 0.9;
}
.od-menu-thumb-spin {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(56, 189, 248, 0.22);
  border-top-color: #38bdf8;
  animation: gw-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .od-menu-thumb-spin { animation-duration: 2.4s; }
}
.od-menu-mockup-hint {
  position: absolute;
  /* Anchored to the thumbnail it explains and capped — stretched edge-to-edge it
     read as a broken banner swallowing the category header, not a tooltip. */
  left: 8px;
  max-width: min(320px, calc(100% - 16px));
  bottom: calc(100% - 10px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0b1728;
  border: 1px solid rgba(56, 189, 248, 0.32);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.45;
  color: #94a3b8;
  text-align: left;
}
.od-menu-mockup-hint strong { color: #7dd3fc; font-weight: 700; }
.od-menu-price {
  font-size: 12px;
  font-weight: 800;
  color: #0b1929;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  margin-left: auto;
}
.od-menu-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.od-menu-currency {
  font-size: 14px;
  font-weight: 700;
  color: #6B7280;
}
.od-menu-img-preview {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 4px;
}
/* ── Toggle switch (in-stock / out-of-stock) ──────── */
.od-toggle {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  border: none;
  background: #d1d5db;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s;
  padding: 0;
  flex-shrink: 0;
}
.od-toggle:disabled { opacity: 0.6; cursor: not-allowed; }
.od-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s;
}
.od-toggle-on {
  background: #16a34a;
}
.od-toggle-on .od-toggle-knob {
  transform: translateX(16px);
}
/* ── Topbar Settings button — bare icon, no box ── */
.od-topbar-settings {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #0b1929;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, transform 0.1s;
  padding: 6px;
}
.od-topbar-settings:hover { opacity: 0.7; }
.od-topbar-settings:active { transform: scale(0.96); }
.od-topbar-settings svg { flex-shrink: 0; color: #0b1929; }
/* ── Language trigger (44px mobile touch target) ──── */
.od-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(11, 25, 41, 0.06);
  background: #fff;
  color: #0b1929;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.od-lang-trigger:hover {
  background: #f8fafc;
  border-color: rgba(11, 25, 41, 0.10);
}
.od-lang-trigger:active { transform: scale(0.96); }
.od-lang-trigger-flag { font-size: 18px; line-height: 1; }
.od-lang-trigger-code { font-size: 12px; }
/* Sheet rows already 14px padding — already touch-friendly. */
/* ── Language sheet (bottom drawer rows) ──────────── */
.od-lang-sheet {
  padding: 8px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.od-lang-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  border: none;
  border-radius: 10px;
  background: none;
  color: #0b1929;
  font-family: inherit;
  font-size: 15px;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.od-lang-row:active { background: rgba(11, 25, 41, 0.05); }
.od-lang-row-active { background: rgba(56, 189, 248, 0.08); }
.od-lang-row-flag { font-size: 22px; line-height: 1; flex-shrink: 0; }
.od-lang-row-check { color: #0b1929; font-weight: 700; }
/* Dark brand theme for the language sheet (the only zmp Sheet in the app). */
/* Lift the whole sheet (mask + content) above the fixed bottom nav (z-index
   100), or the "Next" button pokes through the dim overlay. */
.zaui-sheet, .zaui-modal-wrapper, .zaui-sheet-wrapper { z-index: 1000; }
.zaui-sheet-content {
  background: #0d1b2a;
  border-top: 1px solid rgba(56, 189, 248, 0.14);
}
/* Style only the small handle bar (not its full-width wrapper, which created a
   grey band). Lang sheet only — the rating popup is now a full-screen overlay. */
.zaui-sheet-content-handler-wrapper { background: transparent; }
.zaui-sheet-content-handler { background: rgba(255, 255, 255, 0.3); }
.od-lang-row { color: #ffffff; }
.od-lang-row:active { background: rgba(255, 255, 255, 0.06); }
.od-lang-row-active { background: rgba(56, 189, 248, 0.14); }
.od-lang-row-check { color: #38bdf8; }
/* ──────────────────────────────────────────────────── *
 *   Professional polish (override the chunky pastel
 *   category styling for a more refined look).
 *   All cards use 10–12px radii. Categories carry
 *   meaning via a left-edge color stripe + text color,
 *   not a saturated pastel container.
 * ──────────────────────────────────────────────────── */
/* Cards stay subtle */
.od-page { background: #f7f8fa; }
.od-reqs,
.od-form,
.od-banner,
.od-allclear { border-radius: 12px; }
.od-kpi { border-radius: 12px; }
.od-tool { border-radius: 12px; }
.od-hotel-avatar { border-radius: 10px; }
/* Request rows: monochrome icon container — colour comes from
   the category text + the left urgency stripe, not a pastel bg. */
.od-req-icon {
  background: rgba(11, 25, 41, 0.04) !important;
  color: #0b1929 !important;
  font-size: 16px;
}
/* Smaller, neutral text accents — the colour-by-category pastel
   labels were too playful. Single accent line only. */
.od-req-cat {
  color: #6B7280 !important;
  font-weight: 600 !important;
  font-size: 11px;
}
.od-req-sep {
  color: #d1d5db;
  font-weight: 600;
  font-size: 11px;
}
.od-req-room {
  color: #0b1929;
  font-weight: 700;
  font-size: 13px;
}
.od-req-room-lg {
  color: #0b1929;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.od-req-inprogress {
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2563eb;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.10);
}
/* Action buttons — smaller, less round, neutral by default */
.od-req-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.od-req-btn-primary {
  background: #16a34a !important;
  color: #fff !important;
}
.od-req-btn-primary:hover { background: #15803d !important; }
.od-req-btn-secondary {
  background: rgba(56, 189, 248, 0.14) !important;
  color: #7dd3fc !important;
}
.od-req-btn-danger {
  background: #f3f4f6 !important;
  color: #b91c1c !important;
}
/* Age chip — neutral by default, subtle warn/alert */
.od-req-age {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  letter-spacing: 0 !important;
}
.od-req-age-ok {
  background: transparent !important;
  color: #9CA3AF !important;
}
.od-req-age-warn {
  background: rgba(234, 88, 12, 0.10) !important;
  color: #c2410c !important;
}
.od-req-age-alert {
  background: rgba(220, 38, 38, 0.10) !important;
  color: #b91c1c !important;
  animation: none !important;
}
/* Left urgency stripe stays the only "loud" cue */
.od-req-warn::before  { background: #f97316; }
.od-req-alert::before { background: #dc2626; }
/* KPIs — flatter, less chunky */
.od-kpi {
  padding: 10px 8px 8px !important;
  border: 1px solid rgba(11, 25, 41, 0.05);
}
.od-kpi-num {
  font-size: 20px !important;
  font-weight: 800 !important;
}
.od-kpi-label {
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  color: #9CA3AF !important;
}
.od-kpi-sub {
  font-size: 10px !important;
  color: #9CA3AF !important;
  font-weight: 500 !important;
}
/* Tappable KPI tile (e.g. Reviews entry) — subtle interactive hint */
.od-kpi-tap {
  cursor: pointer;
}
.od-kpi-tap:active { transform: scale(0.97); }
/* Reviews KPI tile — a clearly-tappable upsell: blue brand background.
   Content is flex-centered (rating + label) with even padding. */
.od-kpi-reviews {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding-top: 10px !important;
  background: linear-gradient(150deg, rgba(56, 189, 248, 0.26), rgba(37, 99, 235, 0.34)) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.10) inset, 0 4px 14px rgba(14, 165, 233, 0.18);
}
/* Let "REVIEWS BOOSTER" wrap to two lines instead of being clipped. */
.od-kpi-reviews .od-kpi-label {
  color: #bae6fd !important;
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.12 !important;
  letter-spacing: 0.03em !important;
  max-width: 96%;
}
/* ── Reviews booster: ACTIVE vs OFF ─────────────────────────────
   ACTIVE → a slow sweeping gradient ring + a soft glow "breathe", so the
   owner can tell at a glance the booster is live and working.
   OFF → no motion, but an invitingly tappable dashed brand outline that
   reads "turn me on". */
/* Sweeping ring (enhancement). Needs @property to animate the angle; where it
   isn't supported the ring is simply absent and the glow breathe below still
   signals "active". */
@property --od-rev-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.od-kpi-reviews-on::before {
  content: "";
  position: absolute;
  inset: -1px;                 /* sit on the card's 1px border */
  border-radius: inherit;
  padding: 1.5px;              /* ring thickness */
  background: conic-gradient(from var(--od-rev-angle),
    #38bdf8, #7dd3fc, #fbbf24, #a78bfa, #38bdf8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: od-rev-spin 4.5s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes od-rev-spin { to { --od-rev-angle: 360deg; } }
/* Glow breathe — the reliable "it's alive" cue (no @property dependency). */
.od-kpi-reviews-on {
  animation: od-rev-glow 4.5s ease-in-out infinite;
}
@keyframes od-rev-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.10) inset, 0 4px 14px rgba(14, 165, 233, 0.18); }
  50%      { box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.22) inset, 0 6px 24px rgba(56, 189, 248, 0.45); }
}
/* Keep the rating + label above the ring. */
.od-kpi-reviews-on .od-kpi-num,
.od-kpi-reviews-on .od-kpi-label { position: relative; z-index: 1; }
/* OFF — static, dimmer, dashed brand outline that invites a tap to activate. */
.od-kpi-reviews-off {
  background: linear-gradient(150deg, rgba(56, 189, 248, 0.10), rgba(37, 99, 235, 0.14)) !important;
  border: 1.5px dashed rgba(56, 189, 248, 0.60) !important;
  box-shadow: 0 0 16px -6px rgba(56, 189, 248, 0.35) !important;
}
@media (prefers-reduced-motion: reduce) {
  .od-kpi-reviews-on,
  .od-kpi-reviews-on::before { animation: none !important; }
}
/* Top-left PRO marker (the gold crown badge — see ProBadge.tsx) */
.od-kpi-pro {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  line-height: 0;
}
/* Section header tightening */
.od-section-title {
  font-size: 12px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6B7280 !important;
}
.od-section-meta {
  font-weight: 600 !important;
  text-transform: none;
  letter-spacing: 0;
}
/* Count badge next to a section title (e.g. "OPEN REQUESTS  50") */
.od-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  margin-inline-start: 8px;
  border-radius: 10px;
  background: rgba(11, 25, 41, 0.08);
  color: #0b1929;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  line-height: 1;
}
.od-section-count-alert {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.od-section-link {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4B5563 !important;
  font-weight: 700 !important;
}
/* Hotel row tighter */
.od-hotel-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.od-hotel-rating {
  font-size: 11px !important;
  color: #6B7280;
  font-weight: 600 !important;
}
.od-hotel-rating-star { font-size: 12px !important; }
.od-hotel-role {
  background: #f3f4f6 !important;
  color: #4B5563 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9px !important;
}
.od-hotel-role-dot { display: none; }
.od-hotel-sub {
  font-size: 11px !important;
  color: #9CA3AF !important;
}
/* Topbar greeting smaller */
.od-topbar-greeting {
  font-size: 11px !important;
  color: #9CA3AF !important;
}
.od-topbar-brand-text {
  font-size: 14px !important;
  font-weight: 700 !important;
}
/* Page-level rhythm — generous whitespace */
.od-section { margin: 6px 16px 0; }
.od-hotel-row { padding: 12px 16px 14px; }
.od-kpis { padding: 0 16px 12px; gap: 8px; }
.od-tools { padding: 16px 16px 12px; gap: 8px; }
/* ── Platforms strip ──────────────────────────────── */
.od-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 14px;
}
.od-platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 25, 41, 0.08);
  background: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
  position: relative;
}
.od-platform:active { transform: scale(0.96); }
.od-platform:disabled { opacity: 0.6; cursor: not-allowed; }
.od-platform-on {
  color: #0b1929;
  border-color: var(--od-pf-c, #0b1929);
  background: color-mix(in srgb, var(--od-pf-c, #0b1929) 8%, #fff);
}
.od-platform-on::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--od-pf-c, #0b1929);
  margin-right: 1px;
}
.od-platform-off {
  text-decoration: line-through;
  text-decoration-color: rgba(11,25,41,0.25);
  text-decoration-thickness: 1px;
}
.od-platform-name { letter-spacing: 0.01em; }
/* ──────────────────────────────────────────────────── *
 *   Department grid (dashboard's "where are issues?")
 *   Each square: glyph, count, name, sub-status.
 *   Tappable → drills into Service Requests filtered.
 * ──────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────── *
 *   Department grid — calm cards, single corner chip
 *   for urgent count. No left-edge stripes.
 * ──────────────────────────────────────────────────── */
.od-depts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 420px) {
  .od-depts { grid-template-columns: repeat(3, 1fr); }
}
.od-dept {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11, 25, 41, 0.05);
  background: #fff;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.18s, border-color 0.15s;
  box-shadow: 0 1px 2px rgba(11, 25, 41, 0.03);
  overflow: hidden;
  min-height: 100px;
}
.od-dept:hover {
  border-color: rgba(11, 25, 41, 0.10);
  box-shadow: 0 4px 14px rgba(11, 25, 41, 0.06);
}
.od-dept:active { transform: scale(0.98); }
.od-dept-glyph {
  font-size: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(11, 25, 41, 0.04);
  color: #4B5563;
  flex-shrink: 0;
}
.od-dept-num {
  font-size: 24px;
  font-weight: 800;
  color: #0b1929;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: auto;
}
.od-dept-empty .od-dept-num {
  color: #d1d5db;
  font-weight: 600;
}
.od-dept-name {
  font-size: 12px;
  font-weight: 700;
  color: #0b1929;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-dept-empty .od-dept-name { color: #6B7280; }
.od-dept-sub {
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}
/* Urgency chip — one decisive cue in the corner */
.od-urgency-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25);
}
/* ──────────────────────────────────────────────────── *
 *   Hotel hero — proper venue card (replaces od-hotel-row)
 * ──────────────────────────────────────────────────── */
.od-hero {
  display: flex;
  gap: 14px;
  padding: 8px 16px 16px;
  align-items: center;
}
/* Photo wrapper — relative so the notification bell can overlay the corner
   (the photo itself clips with overflow:hidden, so the bell can't live inside). */
.od-hero-photo-wrap {
  position: relative;
  flex-shrink: 0;
}
/* Settings gear + notification bell grouped together at the top-left of the
   dashboard topbar, aligned on the same line as Zalo's system buttons. */
.od-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* The bell sits beside the gear as a matching BARE icon (no frosted button).
   When there are unread items it gives a little ring every few seconds + a
   subtle red dot (no number — bell + number together read as cluttered). */
.od-topbar-bell .od-bell-wrap { display: flex; }
.od-topbar-bell .od-bell {
  width: auto;
  height: auto;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #38bdf8;
}
.od-topbar-bell .od-bell:active { transform: scale(0.92); }
.od-topbar-bell .od-bell svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.9;
  transform-origin: 50% 4px;
}
.od-topbar-bell .od-bell-has svg {
  animation: od-bell-ring 4s ease-in-out infinite;
}
/* Collapse the numeric badge into a small attention dot. */
.od-topbar-bell .od-bell-badge {
  top: 3px;
  right: 3px;
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  font-size: 0;
  border-width: 1.5px;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.7);
}
@keyframes od-bell-ring {
  0%, 82%, 100% { transform: rotate(0); }
  85% { transform: rotate(13deg); }
  88% { transform: rotate(-11deg); }
  91% { transform: rotate(8deg); }
  94% { transform: rotate(-5deg); }
  97% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .od-hero-bell .od-bell-has svg { animation: none; }
}
.od-hero-photo {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  background: rgba(11, 25, 41, 0.04);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 2px 8px rgba(11, 25, 41, 0.08);
}
.od-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.od-hero-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.od-hero-name {
  font-size: 16px;
  font-weight: 700;
  color: #0b1929;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.od-hero-line2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  color: #6B7280;
}
.od-hero-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex-shrink: 0;
}
.od-hero-rating-star { color: #f59e0b; font-size: 11px; }
.od-hero-rating-num { color: #0b1929; font-weight: 700; }
.od-hero-rating-count { color: #9CA3AF; font-weight: 500; font-size: 10px; }
.od-hero-address {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.od-hero-line3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.od-hero-role {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(11, 25, 41, 0.06);
  color: #4B5563;
}
.od-hero-dev {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.12);
  color: #0369a1;
}
/* ──────────────────────────────────────────────────── *
 *   Collapsible Open Requests
 * ──────────────────────────────────────────────────── */
.od-collapsible-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(11, 25, 41, 0.06);
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: start;
  transition: background 0.12s;
}
.od-collapsible-head:active { background: #f8fafc; }
.od-collapsible-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6B7280;
}
.od-collapsible-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(11, 25, 41, 0.06);
  color: #0b1929;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.od-collapsible-meta {
  font-size: 11px;
  font-weight: 600;
  color: #c2410c;
  text-transform: none;
  letter-spacing: 0;
}
.od-collapsible-chevron {
  font-size: 16px;
  color: #9CA3AF;
  transition: transform 0.18s;
  font-weight: 700;
}
.od-collapsible-chevron.open { transform: rotate(90deg); }
.od-collapsible-viewall {
  width: 100%;
  padding: 10px;
  border: none;
  background: none;
  color: #4B5563;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-top: 1px solid rgba(11, 25, 41, 0.05);
}
.od-collapsible-viewall:active { background: #f8fafc; }
/* ──────────────────────────────────────────────────── *
 *   Settings — hub (categorized list, tap → detail)
 * ──────────────────────────────────────────────────── */
.od-hub-group {
  margin: 18px 16px 0;
}
.od-hub-group:first-of-type { margin-top: 14px; }
.od-hub-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9CA3AF;
  padding: 0 6px 8px;
}
.od-hub-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(11, 25, 41, 0.05);
  box-shadow: 0 1px 3px rgba(11, 25, 41, 0.04);
  overflow: hidden;
}
.od-hub-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  background: #fff;
  border: none;
  border-bottom: 1px solid rgba(11, 25, 41, 0.055);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}
.od-hub-row:last-child { border-bottom: none; }
.od-hub-row:active { background: #f4f6f8; }
.od-hub-row-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
}
.od-hub-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.od-hub-row-label {
  font-size: 14.5px;
  font-weight: 600;
  color: #0b1929;
  letter-spacing: -0.01em;
}
.od-hub-row-label-danger { color: #dc2626; }
.od-hub-row-value {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Unlike -value (one nowrap line, a current setting), a hint is a sentence and
   wraps — clamped to two lines so a long translation can't stretch the row. */
.od-hub-row-hint {
  font-size: 11.5px;
  color: #9CA3AF;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.od-hub-row-chevron {
  flex: 0 0 auto;
  font-size: 20px;
  color: #C4C9D0;
  font-weight: 400;
  transition: transform 0.16s ease;
}
/* Points down while the row's inline panel is open (the Account language list). */
.od-hub-row-chevron-open { transform: rotate(90deg); }
/* ── Inline expansion under a hub row ──
   The Account language list opens in place instead of routing to a panel.
   Recessed and indented to the row's label (38px icon + 13px gap + 14px pad)
   so it reads as belonging to the row above, not as more top-level rows.
   Capped and scrollable: nine languages must not push Sign out off-screen. */
.od-hub-inline {
  background: rgba(11, 25, 41, 0.025);
  border-bottom: 1px solid rgba(11, 25, 41, 0.055);
  padding: 4px 6px;
  max-height: 296px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.od-hub-inline-anchor { position: relative; }
.od-settings-nav { width: 100%; }
/* Language, hotel and personal-alert settings all use the same compact picker
   surface. It stays attached to the control that opened it instead of routing
   the operator away from the queue. */
.od-hub-picker {
  padding: 7px;
  max-height: min(360px, calc(100vh - 32px));
}
.od-hub-picker-title {
  padding: 7px 9px 8px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.od-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #dbe8f3;
  font: 600 13px/1.25 inherit;
  text-align: left;
  cursor: pointer;
}
.od-picker-row:hover,
.od-picker-row:focus-visible { background: rgba(56, 189, 248, 0.09); outline: none; }
.od-picker-row-active { background: rgba(56, 189, 248, 0.14); color: #f3fbff; }
.od-picker-row-icon,
.od-picker-row-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  flex: 0 0 26px;
  color: #7dd3fc;
  font-size: 18px;
}
.od-picker-row-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-picker-row-check { color: #7dd3fc; font-size: 16px; font-weight: 900; }
.od-hub-status-light {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 2px solid #0b1929;
  border-radius: 50%;
  box-sizing: content-box;
}
.od-hub-status-light-on { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.65); }
.od-hub-status-light-off { background: #64748b; }
.od-alert-settings { padding: 12px; }
.od-alert-settings-head { display: flex; align-items: center; gap: 10px; }
.od-alert-settings-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 11px;
  background: rgba(0, 104, 255, 0.15);
  color: #7dd3fc;
}
.od-alert-settings-head > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.od-alert-settings-head strong { color: #f1f7fb; font-size: 14px; }
.od-alert-settings-head small { margin-top: 2px; color: #6ee7b7; font-size: 11px; font-weight: 700; }
.od-alert-settings p { margin: 11px 2px; color: #91a5b8; font-size: 12px; line-height: 1.45; }
.od-alert-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.06);
  color: #dceaf4;
  font: 700 12px/1.25 inherit;
  text-align: left;
  cursor: pointer;
}
.od-alert-toggle-row:disabled { opacity: 0.55; cursor: wait; }
.od-hub-inline .od-lang-row {
  padding: 9px 10px 9px 59px;
  font-size: 14px;
}
.od-hub-inline .od-lang-row-flag { font-size: 18px; }
/* The row itself carries aria-pressed, so the switch is presentational; it
   still needs to look interactive, hence no pointer-events of its own. */
.od-toggle-busy { opacity: 0.6; }
.od-hub-pill {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
}
.od-hub-pill-on  { background: rgba(16, 185, 129, 0.14); color: #059669; }
.od-hub-pill-off { background: rgba(11, 25, 41, 0.06);   color: #9CA3AF; }
/* ──────────────────────────────────────────────────── *
 *   Menu management — collapsible category sections
 * ──────────────────────────────────────────────────── */
.od-menu-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid rgba(11, 25, 41, 0.05);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(11, 25, 41, 0.04);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}
.od-menu-cat-head:active { background: #f4f6f8; }
.od-menu-cat-head-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
.od-menu-cat-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
}
.od-menu-cat-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.od-menu-cat-name {
  font-size: 14.5px;
  font-weight: 600;
  color: #0b1929;
  letter-spacing: -0.01em;
}
.od-menu-cat-sub {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 500;
}
.od-menu-cat-out { color: #d97706; }
/* Items AI ingest held off pending the owner's price — amber "needs you",
   distinct from the rose "out of stock" (which is the kitchen's call). */
.od-menu-cat-review { color: #f59e0b; font-weight: 600; }
.od-menu-cat-chevron {
  flex: 0 0 auto;
  font-size: 20px;
  color: #C4C9D0;
  transition: transform 0.18s ease;
}
.od-menu-cat-chevron.open { transform: rotate(90deg); }
/* ──────────────────────────────────────────────────── *
 *   Settings page
 * ──────────────────────────────────────────────────── */
.od-settings-section {
  margin: 14px 16px 0;
}
.od-settings-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B7280;
  padding: 0 4px 8px;
}
.od-settings-help {
  padding: 0 4px 8px;
  font-size: 11px;
  color: #9CA3AF;
  line-height: 1.5;
}
.od-settings-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(11, 25, 41, 0.05);
  overflow: hidden;
}
.od-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(11, 25, 41, 0.05);
}
.od-settings-row:last-child { border-bottom: none; }
.od-settings-row-label {
  flex: 0 0 30%;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  white-space: nowrap;
}
.od-settings-row-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.od-settings-row-readonly .od-settings-row-label {
  font-size: 16px;
  flex: 0 0 32px;
  color: #9CA3AF;
  text-align: center;
}
.od-settings-row-text {
  font-size: 13px;
  color: #cbd5e1;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.od-settings-input {
  flex: 1;
  font-size: 13px !important;
  padding: 8px 10px !important;
}
.od-settings-color {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(11, 25, 41, 0.1);
  background: none;
  cursor: pointer;
  padding: 0;
  appearance: none;
}
.od-settings-color::-webkit-color-swatch-wrapper { padding: 0; }
.od-settings-color::-webkit-color-swatch { border: none; border-radius: 8px; }
.od-settings-color::-moz-color-swatch { border: none; border-radius: 8px; }
.od-settings-color-hex {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  letter-spacing: 0.04em;
}
.od-settings-logo-row { gap: 12px; }
.od-settings-logo-preview,
.od-settings-logo-empty {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(11, 25, 41, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 24px;
  flex-shrink: 0;
}
.od-settings-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Settings — property photo gallery (logo picker) */
.od-logo-gallery {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(11, 25, 41, 0.06);
}
.od-logo-gallery-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9CA3AF;
  margin-bottom: 10px;
}
.od-logo-gallery-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.od-logo-gallery-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: rgba(11, 25, 41, 0.04);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, transform 0.1s;
}
.od-logo-gallery-thumb:active { transform: scale(0.94); }
.od-logo-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.od-logo-gallery-thumb-active {
  border-color: #0369a1;
  box-shadow: 0 0 0 2px rgba(3, 105, 161, 0.2);
}
.od-logo-gallery-check {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0369a1;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.od-logo-gallery-loading,
.od-logo-gallery-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  font-size: 12px;
  color: #9CA3AF;
}
.od-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(11, 25, 41, 0.08);
  background: #fff;
  color: #4B5563;
  font-family: inherit;
}
.od-settings-btn-ghost { background: rgba(11, 25, 41, 0.04); border-color: transparent; }
.od-settings-btn:active { transform: scale(0.96); }
.od-settings-link {
  color: #0369a1;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.od-settings-link:active { opacity: 0.7; }
/* Settings — platform rows (dot + name + toggle) */
.od-settings-platform {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(11, 25, 41, 0.05);
}
.od-settings-platform:last-child { border-bottom: none; }
.od-settings-platform-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid;
  flex-shrink: 0;
}
.od-settings-platform-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #0b1929;
}
/* Settings — action rows (button-like, full row) */
.od-settings-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 14px;
  border: none;
  background: none;
  color: #0b1929;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: start;
  border-bottom: 1px solid rgba(11, 25, 41, 0.05);
}
.od-settings-action:last-child { border-bottom: none; }
.od-settings-action:active { background: #f8fafc; }
.od-settings-action span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(11, 25, 41, 0.06);
  font-size: 14px;
  font-weight: 700;
}
.od-settings-action-danger { color: #b91c1c; }
.od-settings-action-danger span:first-child {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
}
/* Nav-style settings action — icon + label + chevron */
.od-settings-action-nav .od-settings-action-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #0b1929;
}
.od-settings-action-nav .od-settings-action-chevron {
  width: auto;
  height: auto;
  background: transparent;
  font-size: 20px;
  font-weight: 400;
  color: #c1c5cb;
}
/* Cleaner KPI palette — accent number only in the alert state */
.od-kpi-num { color: #0b1929; }
.od-kpi-alert .od-kpi-num { color: #b91c1c; }
/* Tighter shadows */
.od-reqs,
.od-allclear,
.od-form,
.od-tool,
.od-kpi {
  box-shadow: 0 1px 2px rgba(11, 25, 41, 0.04);
}
/* Tool tile colour bars instead of full backgrounds */
.od-tool {
  border: 1px solid rgba(11, 25, 41, 0.08);
}
/* ── Robust truncation for long content ───────────── */
.od-hotel-name,
.od-hotel-sub,
.od-topbar-brand-text,
.od-topbar-greeting,
.od-req-room,
.od-req-cat,
.od-req-msg,
.od-allclear-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.od-hotel-meta { min-width: 0; flex: 1; }
.od-hotel-row { min-width: 0; }
.od-topbar-brand { min-width: 0; flex: 1; }
/* Prevent flex children with min-width:0 from blowing out */
.od-req-body,
.od-req-head { min-width: 0; }
.od-req-head { gap: 6px; }
/* The ★ rating + role pill should never be squeezed */
.od-hotel-rating,
.od-hotel-role,
.od-hotel-add { flex-shrink: 0; }
/* ── Skeletons (used while data is loading) ───────── */
.od-skel {
  display: block;
  background: linear-gradient(90deg, rgba(11,25,41,0.05) 0%, rgba(11,25,41,0.10) 50%, rgba(11,25,41,0.05) 100%);
  background-size: 200% 100%;
  animation: od-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  height: 12px;
}
.od-skel-lg { height: 18px; }
.od-skel-sq { width: 44px; height: 44px; border-radius: 10px; }
.od-skel-circle { border-radius: 50%; }
@keyframes od-skel-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* ── Dashboard cold-load loader — branded, centered (not a box skeleton) ── */
.od-loader-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.od-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translateY(-6vh);
}
.od-loader-logo {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: od-loader-pulse 1.8s ease-in-out infinite;
}
.od-loader-logo svg {
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.55));
}
.od-loader-ring {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(56, 189, 248, 0.16);
  border-top-color: #38bdf8;
  animation: od-loader-spin 0.9s linear infinite;
}
.od-loader-word {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
}
.od-loader-word .od-topbar-tld { color: #38bdf8; }
.od-loader-dots { display: flex; gap: 6px; }
.od-loader-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  opacity: 0.3;
  animation: od-loader-dot 1.2s ease-in-out infinite;
}
.od-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.od-loader-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes od-loader-spin { to { transform: rotate(360deg); } }
@keyframes od-loader-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes od-loader-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .od-loader-logo, .od-loader-ring, .od-loader-dots span { animation: none; }
}
/* ============================
   Step 5: Role & Email (rw-role-*)
   ============================ */
.rw-role-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rw-role-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1.5px solid #e0e2e5;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.rw-role-option:active { transform: scale(0.99); }
.rw-role-option-active {
  border-color: #0b1929;
  background: #0b1929;
  box-shadow: 0 4px 16px rgba(11, 25, 41, 0.25);
}
/* ============================
   Step 6: Team (rw-team-*)
   ============================ */
.rw-team-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rw-team-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e0e2e5;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.rw-team-input:focus { border-color: #0b1929; }
.rw-team-input::placeholder { color: #c0c5cc; }
/* ════════════════════════════════════════════════════════════════════
   Onboarding wizard — dark AI-tech theme (overrides the light rw-* base;
   declared after all base rules so it wins the cascade). See docs/BRAND.md.
   ════════════════════════════════════════════════════════════════════ */
.rw-page-flat { background: #070e1a; position: relative; overflow: hidden; }
.rw-page-flat .gw-orb { opacity: 0.42; }
.rw-header-row { position: relative; z-index: 2; }
.rw-header-row .od-lang-trigger {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: #e2e8f0;
}
.rw-header-row .od-lang-trigger-code { color: #ffffff; }
.rw-progress-bar { background: rgba(255, 255, 255, 0.06); position: relative; z-index: 2; }
.rw-progress-bar-seg { background: rgba(255, 255, 255, 0.10); }
.rw-body-flat { position: relative; z-index: 1; }
/* Bottom nav — cyan primary CTA */
.rw-fixed-bottom { background: #0a1422; border-top-color: rgba(255, 255, 255, 0.08); }
.rw-nav-next-v2 { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.45); }
.rw-nav-next-v2-active { background: #38bdf8 !important; color: #07121f; box-shadow: 0 6px 22px rgba(56, 189, 248, 0.42); }
.rw-nav-back { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; }
/* Titles */
.rw-step-title { color: #ffffff; }
/* Hero hotel icon above "Your Property" — gentle float + glow; shrinks smoothly
   when search results appear so they have room. */
.rw-hero-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 104px;
  margin-top: 6px;
  overflow: visible; /* never clip the glow or the float */
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1), margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.rw-hero-icon svg {
  width: 88px;
  height: 88px;
  color: #38bdf8;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.38));
  animation: rw-hero-float 4.5s ease-in-out infinite;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.rw-hero-icon-sm { height: 44px; margin-top: 0; }
.rw-hero-icon-sm svg { width: 36px; height: 36px; }
@keyframes rw-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .rw-hero-icon svg { animation: none; } }
.rw-step-subtitle { color: #94a3b8; margin-bottom: 2px; }
/* Search */
.rw-search-box { background: #0d1b2a; border-color: rgba(56, 189, 248, 0.20); }
.rw-search-glow .rw-search-box { box-shadow: 0 0 16px rgba(56, 189, 248, 0.22); }
.rw-search-box:focus-within { border-color: rgba(56, 189, 248, 0.5); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12); }
.rw-search-input { color: #ffffff; }
.rw-search-input::placeholder { color: #5b6b7f; }
.rw-search-results { background: #0d1b2a; border-color: rgba(255, 255, 255, 0.08); gap: 0; max-height: min(56vh, 460px); }
.rw-search-result { background: transparent; }
.rw-search-result:not(:last-child) { border-bottom: 1px solid rgba(56, 189, 248, 0.14); }
.rw-search-result:active { background: rgba(255, 255, 255, 0.05); }
.rw-result-flag { margin-left: 8px; font-size: 21px; line-height: 1; flex-shrink: 0; align-self: center; }
.rw-search-spinner { border-color: rgba(56, 189, 248, 0.25); border-top-color: #38bdf8; }
.rw-search-glow-border {
  background: conic-gradient(from var(--rw-glow-angle, 0deg), #0b1929, #38bdf8, #7dd3fc, #38bdf8, #0b1929);
  filter: blur(1px);
  animation: rw-glow-spin 3s linear infinite;
}
/* Selected place card — square (no radius), dark image placeholder so there's
   no white flash before the photo loads. */
.rw-place-card { background: #0d1b2a; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); border-radius: 0; margin-bottom: 2px; }
.rw-place-name { color: #ffffff; }
.rw-place-img-wrap { background: linear-gradient(135deg, #0d1b2a, #122338); }
/* Dark-themed shimmer for the wizard skeletons (the rw-skeleton-* base is
   light-mode; the wizard is dark everywhere). Covers the preparing-loader card
   and the hero-photo skeleton overlay. */
.rw-skeleton-img,
.rw-skeleton-line {
  background: linear-gradient(90deg, rgba(148,163,184,0.06) 25%, rgba(148,163,184,0.16) 37%, rgba(148,163,184,0.06) 63%);
  background-size: 800px 100%;
}
.rw-place-img-skeleton { background-color: #0d1b2a; }
.rw-place-photo-empty { background: linear-gradient(135deg, #0d1b2a, #122338); }
/* Combine the "raise your rating" hint INTO the Google rating badge — one
   element: ★ 4.4 (495) │ ↑ Raise your rating (the lift part in brand cyan). */
.rw-place-rating-badge { gap: 5px; border: 1px solid rgba(56, 189, 248, 0.32); white-space: nowrap; }
.rw-rating-divider {
  width: 1px;
  height: 13px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}
.rw-rating-lift-text { color: #38bdf8; font-weight: 700; }
/* Animated rating: number eases to brand-blue while climbing; count grows + scales. */
.rw-rating-num { transition: color 0.6s ease; }
.rw-rating-up { color: #38bdf8; }
.rw-place-rating-count { transition: color 0.6s ease, transform 0.6s ease; }
.rw-rating-count-up { color: #7dd3fc; transform: scale(1.15); display: inline-block; }
.rw-rating-lift-btn:focus, .rw-rating-lift-btn:focus-visible { outline: none; }
.rw-rating-lift-arrow {
  color: #38bdf8;
  font-weight: 900;
  animation: rw-lift-rise 1.8s ease-in-out infinite;
}
@keyframes rw-lift-rise {
  0%, 100% { transform: translateY(1px);  opacity: 0.7; }
  50%      { transform: translateY(-2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .rw-rating-lift-arrow { animation: none; } }
/* The lift hint is a tappable button inside the rating badge → opens the explainer. */
.rw-rating-lift-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rw-rating-lift-btn:active { opacity: 0.65; }
.rw-rating-lift-info { color: rgba(56, 189, 248, 0.75); font-size: 10px; margin-left: 1px; }
/* ── Rating-boost explainer — full-screen overlay (covers the page + the Next
   button; "Got it" closes it). No dim-above, no handle, no double buttons. ── */
.rw-boost-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 100% 55% at 50% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #070e1a 0%, #0a1422 100%);
  padding: max(34px, calc(env(safe-area-inset-top, 0px) + 26px)) 24px max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  gap: 12px;
  animation: rw-boost-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rw-boost-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* Hero pinned top, rows flex to fill remaining height (no scroll — fits every
   screen by distributing the rows in the available space). */
.rw-boost-hero {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.rw-boost-icon { line-height: 0; filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.5)); }
.rw-boost-title { font-size: 21px; font-weight: 800; color: #ffffff; letter-spacing: -0.01em; line-height: 1.2; }
.rw-boost-subtitle { font-size: 13px; color: #94a3b8; line-height: 1.5; max-width: 320px; }
.rw-boost-rows {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 12px;
  padding: 8px 0;
}
.rw-boost-row { display: flex; gap: 13px; align-items: flex-start; }
.rw-boost-row-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.26);
  box-shadow: inset 0 0 14px rgba(56, 189, 248, 0.08);
}
.rw-boost-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rw-boost-row-title { display: block; font-size: 15.5px; font-weight: 700; color: #ffffff; }
.rw-boost-row-body { display: block; font-size: 12.5px; color: #94a3b8; line-height: 1.45; }
.rw-boost-cta {
  flex-shrink: 0;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: #38bdf8;
  color: #07121f;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.42);
  -webkit-tap-highlight-color: transparent;
}
.rw-boost-cta:active { transform: scale(0.98); }
/* Short screens (small Androids, iPhone SE): compact everything so the whole
   explainer still fits with no scroll. */
@media (max-height: 720px) {
  .rw-boost-overlay { padding-top: max(20px, calc(env(safe-area-inset-top, 0px) + 14px)); gap: 8px; }
  .rw-boost-hero { gap: 7px; }
  .rw-boost-icon svg { width: 38px; height: 38px; }
  .rw-boost-title { font-size: 19px; }
  .rw-boost-subtitle { font-size: 12px; line-height: 1.4; }
  .rw-boost-rows { gap: 8px; padding: 4px 0; }
  .rw-boost-row { gap: 11px; }
  .rw-boost-row-icon { width: 36px; height: 36px; border-radius: 10px; }
  .rw-boost-row-icon svg { width: 19px; height: 19px; }
  .rw-boost-row-title { font-size: 14px; }
  .rw-boost-row-body { font-size: 11.5px; line-height: 1.35; }
  .rw-boost-cta { padding: 13px; font-size: 15px; }
}
/* Tiny/legacy screens (iPhone SE 1st-gen): squeeze a little more. */
@media (max-height: 600px) {
  .rw-boost-icon svg { width: 32px; height: 32px; }
  .rw-boost-title { font-size: 18px; }
  .rw-boost-subtitle { font-size: 11.5px; line-height: 1.35; }
  .rw-boost-rows { gap: 6px; }
  .rw-boost-row-body { font-size: 11px; line-height: 1.3; }
  .rw-boost-cta { padding: 12px; }
}
/* ── Step 1 (uploads) — dark theme ── */
.rw-menu-chip { background: rgba(13, 27, 42, 0.6); border-color: rgba(255, 255, 255, 0.12); color: #cbd5e1; }
.rw-menu-chip:hover:not(:disabled) { border-color: rgba(56, 189, 248, 0.5); background: rgba(56, 189, 248, 0.08); }
.rw-menu-chip:disabled,
.rw-menu-chip-active { border-color: #38bdf8; background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }
.rw-menu-chip-sub { color: #94a3b8; }
.rw-menu-chip-active .rw-menu-chip-sub { color: #7dd3fc; }
.rw-menu-entry { background: rgba(13, 27, 42, 0.5); border-color: rgba(255, 255, 255, 0.10); }
.rw-upload-zone { background: rgba(13, 27, 42, 0.5); border-color: rgba(56, 189, 248, 0.30); }
.rw-upload-zone:active { background: rgba(56, 189, 248, 0.08); border-color: #38bdf8; }
/* Desktop drag-and-drop hover state (files dragged over the zone). */
.rw-upload-zone-drag {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16), 0 8px 24px rgba(56, 189, 248, 0.18);
}
.rw-file-row { background: rgba(13, 27, 42, 0.6); border-color: rgba(255, 255, 255, 0.10); }
.rw-feedback-ok { background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.32); }
.rw-feedback-warn { background: rgba(250, 204, 21, 0.10); border-color: rgba(250, 204, 21, 0.30); }
/* Tips card */
.rw-tips-card { background: rgba(56, 189, 248, 0.06); border-color: rgba(56, 189, 248, 0.18); }
/* Role + form inputs */
.rw-role-option { background: rgba(13, 27, 42, 0.6); border-color: rgba(255, 255, 255, 0.10); }
.rw-role-option-active { background: rgba(56, 189, 248, 0.16); border-color: #38bdf8; box-shadow: 0 4px 16px rgba(56, 189, 248, 0.22); }
.rw-team-input { background: rgba(13, 27, 42, 0.6); color: #ffffff; border-color: rgba(56, 189, 248, 0.18); }
.rw-team-input:focus { border-color: rgba(56, 189, 248, 0.5); }
/* Direction-aware step transitions: forward slides in from the right, back from the left */
.rw-step-fwd  { animation: rwStepFwd 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rw-step-back { animation: rwStepBack 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes rwStepFwd  { from { opacity: 0; transform: translateX(34px); }  to { opacity: 1; transform: none; } }
@keyframes rwStepBack { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rw-step-fwd, .rw-step-back { animation: none; } }
/* The step wrapper already does the directional slide — kill the inner card's
   own (always-from-the-right) entrance so "back" actually comes from the left. */
.rw-step-anim .rw-card-anim { animation: none; }
.rw-team-select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e0e2e5;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: #111827;
  background: #fff;
  outline: none;
  appearance: auto;
  box-sizing: border-box;
}
.rw-team-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0;
  border: 2px dashed #d6d9dc;
  border-radius: 10px;
  background: #f8f9fa;
  color: #0b1929;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.rw-team-add-btn:active { border-color: #0b1929; background: #f0f2f5; }
.rw-team-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* ============================
   Step 7: Rooms (rw-room-*)
   ============================ */
.rw-room-config {
  display: flex;
  gap: 12px;
}
.rw-room-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rw-room-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding: 2px;
}
.rw-room-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 18px 8px 12px;
  background: #fff;
  border: 1px solid #e9ebed;
  border-radius: 8px;
  min-width: 64px;
}
.rw-room-chip-x {
  position: absolute;
  top: 2px;
  right: 2px;
  background: none;
  border: none;
  color: #C0392B;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  font-family: inherit;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.rw-room-pin-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 20px;
  background: #f8f9fa;
  border-radius: 10px;
}
/* ── Verifying place loading state (step 0 → 1 transition) ── */
.rw-verifying-place {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.rw-verifying-spinner {
  width: 36px;
  height: 36px;
  margin-right: 0;
  border-width: 3px;
  border-color: rgba(56,189,248,0.2);
  border-top-color: #38bdf8;
}
/* ── Step 1 select sub-phase: full-width menus & services buttons ── */
.rw-svc-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.rw-svc-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(13, 27, 42, 0.6);
  color: #e2e8f0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.rw-svc-btn:active {
  transform: scale(0.985);
}
/* Guard hover so the cyan border doesn't "stick" after a tap on touch devices
   (which made a deselected row still look selected). */
@media (hover: hover) and (pointer: fine) {
  .rw-svc-btn:hover {
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(56, 189, 248, 0.08);
  }
}
.rw-svc-btn-active {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.16);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
}
.rw-svc-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.rw-svc-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rw-svc-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.rw-svc-desc {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  color: #94a3b8;
}
.rw-svc-btn-active .rw-svc-desc {
  color: #bae6fd;
}
/* Checkbox indicator — empty circle → filled cyan check when selected. */
.rw-svc-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  transition: border-color 0.2s, background 0.2s;
}
.rw-svc-mark-on {
  border-color: #38bdf8;
  background: #38bdf8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2307121f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* ── Upload step: "add a service" re-add chips ── */
.rw-readd-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.rw-readd-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rw-readd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  background: rgba(13, 27, 42, 0.6);
  color: #cbd5e1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.rw-readd-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .rw-readd-chip:hover { border-color: #38bdf8; background: rgba(56, 189, 248, 0.1); color: #fff; }
}
.rw-readd-plus { color: #38bdf8; font-weight: 800; font-size: 15px; line-height: 1; }
/* ── Upload step: confirm-remove dialog (dark brand, inline fixed overlay) ── */
.rw-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 7, 14, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: rwConfirmFade 0.18s ease both;
}
@keyframes rwConfirmFade { from { opacity: 0; } to { opacity: 1; } }
.rw-confirm-card {
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  padding: 22px 20px 18px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 18px;
  background: #0d1b2a;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  animation: rwConfirmPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes rwConfirmPop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.rw-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}
.rw-confirm-q {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 4px;
}
.rw-confirm-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: #94a3b8;
  margin-bottom: 18px;
}
.rw-confirm-actions {
  display: flex;
  gap: 10px;
}
.rw-confirm-btn {
  flex: 1;
  padding: 12px 10px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.rw-confirm-btn-cancel {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: #cbd5e1;
}
.rw-confirm-btn-cancel:active { background: rgba(255, 255, 255, 0.06); }
.rw-confirm-btn-danger {
  background: #f43f5e;
  color: #fff;
}
.rw-confirm-btn-danger:active { background: #e11d48; }
/* Upload step: a service section turns GREEN once the AI has read a good
   file/photo/link — so a completed service reads as done at a glance, distinct
   from one still waiting for an upload. */
.rw-menu-entry-done {
  border-color: rgba(52, 211, 153, 0.55) !important;
  background: rgba(16, 185, 129, 0.07) !important;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.10);
}
.rw-menu-entry-check {
  display: inline-flex;
  align-items: center;
  vertical-align: -3px;
  margin-left: 6px;
}
/* ── Full-screen setup loader (hotel being created) ── */
.rw-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(56, 189, 248, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #070e1a 0%, #0a1422 100%);
  animation: rwSetupFade 0.3s ease both;
}
@keyframes rwSetupFade { from { opacity: 0; } to { opacity: 1; } }
.rw-setup-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.rw-setup-orb-1 {
  width: 300px; height: 300px;
  left: -90px; top: 12%;
  background: rgba(56, 189, 248, 0.13);
  animation: rwSetupDrift 14s ease-in-out infinite alternate;
}
.rw-setup-orb-2 {
  width: 260px; height: 260px;
  right: -80px; bottom: 14%;
  background: rgba(129, 140, 248, 0.11);
  animation: rwSetupDrift 18s ease-in-out infinite alternate-reverse;
}
@keyframes rwSetupDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(36px, -28px) scale(1.12); }
}
/* Hotel icon floating inside a spinning progress ring */
.rw-setup-ring {
  position: relative;
  width: 124px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rw-setup-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(56, 189, 248, 0.15);
  border-top-color: #38bdf8;
  animation: rw-spin 1.1s linear infinite;
}
.rw-setup-ring svg {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.55));
  animation: rwSetupFloat 3.4s ease-in-out infinite;
}
@keyframes rwSetupFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.rw-setup-title {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.rw-setup-msg {
  margin-top: 10px;
  min-height: 38px;
  padding: 0 36px;
  font-size: 13px;
  line-height: 1.45;
  color: #94a3b8;
  text-align: center;
  animation: rwSetupMsgIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rwSetupMsgIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-setup-orb, .rw-setup-ring svg { animation: none; }
}
/* ── Step 3: You're Live! (dark, fills viewport, no scroll) ── */
.rw-body-live { padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
.rw-live {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rw-live-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  flex-shrink: 0;
}
.rw-live-check {
  line-height: 0;
  filter: drop-shadow(0 0 18px rgba(52, 211, 153, 0.45));
  animation: rwLivePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes rwLivePop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.rw-live-title { font-size: 24px; font-weight: 800; color: #ffffff; letter-spacing: -0.01em; }
.rw-live-sub { font-size: 13px; color: #94a3b8; line-height: 1.5; }
.rw-live-sub strong { color: #e2e8f0; }
/* status pill — cyan while processing, green when done, rose on error */
.rw-live-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.08);
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.rw-live-status-done { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.10); color: #6ee7b7; }
.rw-live-status-err  { border-color: rgba(244, 63, 94, 0.35);  background: rgba(244, 63, 94, 0.10);  color: #fda4af; }
.rw-live-pulse {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  animation: rwLivePulse 1.4s ease-in-out infinite;
}
@keyframes rwLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}
.rw-live-email {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #94a3b8;
  padding: 0 2px;
}
.rw-live-email svg { flex-shrink: 0; margin-top: 1px; }
/* QR card — the centerpiece; flexes into the remaining space */
.rw-live-qr-card {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: rgba(13, 27, 42, 0.55);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.08);
}
.rw-live-qr-title { font-size: 15px; font-weight: 700; color: #ffffff; }
.rw-live-qr-sub { font-size: 11.5px; color: #94a3b8; line-height: 1.4; max-width: 300px; }
.rw-live-qr-frame {
  margin-top: 6px;
  padding: 8px;
  border-radius: 12px;
  background: #ffffff;
  line-height: 0;
}
.rw-live-qr-frame img { width: 150px; height: 150px; display: block; }
.rw-live-pin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
}
.rw-live-pin strong { font-size: 18px; font-weight: 800; color: #ffffff; letter-spacing: 0.22em; }
.rw-live-err { font-size: 11.5px; color: #fda4af; text-align: center; }
.rw-live-cta {
  flex-shrink: 0;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: #38bdf8;
  color: #07121f;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.42);
  -webkit-tap-highlight-color: transparent;
}
.rw-live-cta:active { transform: scale(0.98); }
/* Short screens: shrink the QR + hero so everything still fits without scroll */
@media (max-height: 740px) {
  .rw-live-check svg { width: 42px; height: 42px; }
  .rw-live-title { font-size: 20px; }
  .rw-live-qr-frame img { width: 118px; height: 118px; }
  .rw-live-qr-sub { display: none; }
  .rw-live { gap: 8px; }
}
/* "You're Live!" on desktop web — the mobile column used to stretch edge-to-edge
   across the ~58vw panel (StepLive renders .rw-live directly, so it never hit
   the .rw-card-anim width cap the other steps use), reading as a blown-up phone
   screen. Pull it into a centred, capped success card sized for the big panel.
   The compound .rw-body-flat.rw-body-live selector out-specifies the generic
   .ga-web .rw-body-flat justify rule regardless of source order. */
@media (min-width: 900px) {
  .ga-web .rw-body-flat.rw-body-live { justify-content: center; }
  .ga-web .rw-live {
    flex: 0 1 auto;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    justify-content: center;
    gap: 18px;
    padding: 8px 0;
  }
  .ga-web .rw-live-title { font-size: 32px; }
  .ga-web .rw-live-sub { font-size: 14px; }
  .ga-web .rw-live-status { font-size: 13px; padding: 11px 16px; }
  .ga-web .rw-live-qr-card { margin: 2px 0; padding: 22px 22px 18px; }
  .ga-web .rw-live-qr-sub { display: block; font-size: 12.5px; }
  .ga-web .rw-live-qr-frame img { width: 180px; height: 180px; }
  .ga-web .rw-live-cta { max-width: 340px; margin: 4px auto 0; }
}
/* ── Step 2 rooms: free-form text input + deletable chips ── */
.rw-rooms-input {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(56, 189, 248, 0.22);
  background: rgba(13, 27, 42, 0.6);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rw-rooms-input:focus {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}
.rw-rooms-input::placeholder { color: #5b6b7e; }
.rw-room-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 34vh;
  overflow-y: auto;
  padding: 2px;
  margin-top: 2px;
}
.rw-rchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px 6px 11px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 9px;
  background: rgba(56, 189, 248, 0.10);
  color: #e2e8f0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .rw-rchip:hover { border-color: #f43f5e; background: rgba(244, 63, 94, 0.12); color: #fff; }
  .rw-rchip:hover .rw-rchip-x { color: #fda4af; }
}
.rw-rchip:active { transform: scale(0.95); }
.rw-rchip-x {
  font-size: 15px;
  line-height: 1;
  color: #7dd3fc;
  font-weight: 700;
}
/* Upload dropzone: while the AI validates an upload, disable it and blink so the
   user knows something is happening until the green "done" box appears. */
.rw-upload-zone-busy {
  cursor: default;
  pointer-events: none;
  animation: rwZoneBlink 0.95s ease-in-out infinite;
}
@keyframes rwZoneBlink {
  0%, 100% { opacity: 1;    border-color: rgba(56, 189, 248, 0.30); }
  50%      { opacity: 0.55; border-color: rgba(56, 189, 248, 0.80); }
}
.rw-zone-spinner {
  margin-right: 0;
  width: 22px;
  height: 22px;
  border-width: 2.5px;
  border-color: rgba(56, 189, 248, 0.25);
  border-top-color: #38bdf8;
}
@media (prefers-reduced-motion: reduce) {
  .rw-upload-zone-busy { animation: none; opacity: 0.7; }
}
/* Rooms step empty-state: friendly helper + faint ghost chips that preview what
   appears once the user starts typing. */
.rw-room-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  padding: 14px;
  border: 1px dashed rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  background: rgba(13, 27, 42, 0.4);
}
.rw-room-chips-ghost {
  margin-top: 0;
  opacity: 0.4;
  pointer-events: none;
}
.rw-rchip-ghost {
  border-style: dashed;
  border-color: rgba(56, 189, 248, 0.30);
  background: transparent;
  color: #94a3b8;
}
.rw-rchip-ghost .rw-rchip-x { color: #5b6b7e; }
/* ════════════════════════════════════════════════════════════════════
   OWNER DASHBOARD — dark AI-tech theme (BRAND.md). Appended last so these
   win the cascade over the light .od-* base rules above.
   ════════════════════════════════════════════════════════════════════ */
/* Canvas — navy with a cyan glow up top + faint masked dot grid feel */
.od-page {
  background:
    radial-gradient(ellipse 92% 50% at 50% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 58%),
    linear-gradient(180deg, #070e1a 0%, #0a1422 100%);
  color: #e2e8f0;
}
/* Zero the shared .page safe-area top padding — the .od-topbar carries the inset
   itself (mirrors the onboarding .rw-page-host setup) so the header aligns with
   the Zalo system buttons. */
.od-page-host { padding-top: 0; }
/* Same fix, automatic for EVERY page that has an in-page top bar: the
   .od-topbar already carries the safe-area inset, so the .page wrapper must
   not also add its top padding or the header sinks below a large gap. Only
   matches pages that actually have a topbar, so plain content pages keep
   their .page inset. */
.page:has(.od-topbar) { padding-top: 0; }
/* ── Topbar — glassy brand row ── */
.od-topbar-brand svg { filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5)); }
.od-topbar-brand-text { color: #ffffff; }
.od-topbar-brand-text .od-topbar-tld { color: #38bdf8; }
.od-icon-btn {
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: #cbd5e1;
}
.od-topbar-settings { color: #38bdf8; }
.od-topbar-settings svg { color: #38bdf8; }
.od-topbar-settings:hover { opacity: 0.7; background: transparent; }
.od-icon-btn:active { background: rgba(56, 189, 248, 0.18); }
.od-topbar .od-lang-trigger {
  background: rgba(13, 27, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.22);
}
.od-topbar .od-lang-trigger-code { color: #e2e8f0; }
/* ── Generic banner (reviews = gold accent on dark glass) ── */
.od-banner {
  background: rgba(13, 27, 42, 0.6);
  border: 1px solid rgba(250, 204, 21, 0.28);
}
.od-banner-text { color: #facc15; }
.od-banner-toggle { color: #facc15; }
.od-banner-warn { background: rgba(244, 63, 94, 0.10); border-color: rgba(244, 63, 94, 0.32); }
.od-banner-warn .od-banner-text,
.od-banner-warn .od-banner-toggle { color: #fda4af; }
/* ── Trial banner ── */
.od-trial-banner {
  background: rgba(13, 27, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.20);
}
.od-trial-banner-info { border-left: 3px solid #38bdf8; }
.od-trial-banner-warn { border-left: 3px solid #facc15; }
.od-trial-banner-alert { border-left: 3px solid #f43f5e; }
.od-trial-banner-text { color: #e2e8f0; }
.od-trial-banner-plan { color: #94a3b8; }
.od-trial-banner-btn { background: #38bdf8; color: #07121f; }
/* ── Hotel hero ── */
.od-hero-photo {
  background: rgba(13, 27, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.od-hero-name { color: #ffffff; }
.od-hero-rating-num { color: #f1f5f9; }
.od-hero-rating-count,
.od-hero-address { color: #94a3b8; }
.od-hero-role {
  background: rgba(56, 189, 248, 0.14);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.28);
}
.od-hero-dev { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }
/* ── KPI tiles — brand cards ── */
.od-kpi {
  background: rgba(13, 27, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}
.od-kpi-num { color: #ffffff; }
.od-kpi-sub { color: #94a3b8; }
.od-kpi-label { color: #94a3b8; }
.od-kpi-alert { border-color: rgba(251, 146, 60, 0.4); }
.od-kpi-alert .od-kpi-num { color: #fb923c; }
/* ── Section heads ── */
.od-section-title { color: #ffffff; }
.od-section-count { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }
.od-section-count-alert { background: rgba(251, 146, 60, 0.18); color: #fdba74; }
.od-section-link { color: #38bdf8; }
/* ── Department cards ── */
.od-dept {
  background: rgba(13, 27, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.od-dept-empty { background: rgba(13, 27, 42, 0.32); border-color: rgba(255, 255, 255, 0.04); }
.od-dept:hover { border-color: rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.06); }
.od-dept-num { color: #ffffff; }
.od-dept-empty .od-dept-num { color: #475569; }
.od-dept-name { color: #e2e8f0; }
.od-dept-empty .od-dept-name { color: #94a3b8; }
.od-dept-sub { color: #94a3b8; }
.od-urgency-chip { background: #f43f5e; color: #ffffff; box-shadow: 0 0 12px rgba(244, 63, 94, 0.4); }
/* ── Usage bar + footer ── */
.od-usage-bar { background: rgba(255, 255, 255, 0.06); }
.od-usage-label { color: #cbd5e1; }
.od-usage-num { color: #94a3b8; }
.od-footer-text { color: #64748b; }
.od-footer-text-brand { color: #38bdf8; }
/* ── Dashboard notification bell + panel ── */
.od-bell-wrap { position: relative; }
.od-bell {
  position: relative;
  /* Match the settings gear exactly (44px squircle) so the two header icons are
     a consistent set, not a circle next to a rounded square. */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: #cbd5e1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.od-bell:active { transform: scale(0.96); }
.od-bell-has { color: #e2e8f0; }
.od-bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #f43f5e;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a1422;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
}
.od-bell-panel {
  /* Anchor to the viewport's right edge (not the bell, which sits top-left) so a
     340px panel never runs off-screen, and drop it just below the topbar. */
  position: fixed;
  top: max(100px, calc(env(safe-area-inset-top, 0px) + 56px));
  right: 12px;
  left: auto;
  width: min(92vw, 340px);
  z-index: 200;
  border-radius: 14px;
  background: #0d1b2a;
  border: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: odBellIn 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes odBellIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Little pointer connecting the panel up to the bell, so it reads as belonging
   to it (tap the bell again, or the ✕, to close). Anchored to the bell so it
   tracks the icon regardless of viewport width. */
.od-bell-caret {
  position: absolute;
  top: calc(100% - 3px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid #0d1b2a;
  z-index: 201;
  filter: drop-shadow(0 -1px 0 rgba(56, 189, 248, 0.22));
}
.od-bell-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 8px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.od-bell-panel-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px -2px -4px 0;
  font-size: 14px;
  line-height: 1;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.od-bell-panel-close:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.06); }
.od-bell-panel-close:active { transform: scale(0.92); }
.od-bell-empty {
  padding: 8px 14px 18px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
}
.od-bell-list { display: flex; flex-direction: column; padding: 0 6px 6px; gap: 4px; }
.od-bell-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.od-bell-item:active { background: rgba(255, 255, 255, 0.07); }
.od-bell-item-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.od-bell-item-text { flex: 1; min-width: 0; line-height: 1.35; }
.od-bell-item-arrow { color: #64748b; font-size: 18px; flex-shrink: 0; }
.od-bell-item-info  { border-left: 3px solid #38bdf8; }
.od-bell-item-warn  { border-left: 3px solid #facc15; }
.od-bell-item-alert { border-left: 3px solid #f43f5e; }
/* ════════════════════════════════════════════════════════════════════
   INNER DASHBOARD PAGES — dark AI-tech theme (settings, service-requests,
   staff, menus, reviews, subscription, accuracy, request-detail …).
   All share the .od-* class family; these overrides win the cascade.
   ════════════════════════════════════════════════════════════════════ */
/* ── Back button — was dark-navy text on dark bg (invisible). Glass squircle. ── */
.od-back-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: #e2e8f0;
  font-size: 22px;
  line-height: 1;
  padding-bottom: 2px;
}
.od-back-btn:active { background: rgba(56, 189, 248, 0.20); }
.od-topbar-avatar { background: rgba(13, 27, 42, 0.6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.od-topbar-tld { color: #64748b; }
/* ── Settings hub (the section list) ── */
.od-hub-group-title { color: #94a3b8; }
.od-hub-card {
  background: rgba(13, 27, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.od-hub-row { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.06); }
.od-hub-row:active { background: rgba(56, 189, 248, 0.06); }
.od-hub-inline {
  background: rgba(0, 0, 0, 0.16);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.od-hub-inline .od-lang-row { color: #e2e8f0; }
.od-hub-inline .od-lang-row:hover { background: rgba(56, 189, 248, 0.08); }
.od-hub-inline .od-lang-row-active { background: rgba(56, 189, 248, 0.14); }
.od-hub-inline .od-lang-row-check { color: #38bdf8; }
.od-hub-row-icon { background: rgba(56, 189, 248, 0.10) !important; border: 1px solid rgba(255, 255, 255, 0.06); }
.od-hub-row-label { color: #f1f5f9; }
.od-hub-row-label-danger { color: #fda4af; }
.od-hub-row-value { color: #94a3b8; }
.od-hub-row-hint { color: #7c8899; }
.od-hub-row-chevron { color: #64748b; }
.od-hub-pill-on  { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.od-hub-pill-off { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }
/* "You are here" — the open section in the desktop rail, and the active hotel
   in the switcher. NOT inside the desktop media query on purpose: the hotel
   switcher is reachable at any width, and below 900px this highlight is the
   only thing marking which hotel you're on. */
.od-hub-row-active {
  background: rgba(56, 189, 248, 0.13);
  box-shadow: inset 2px 0 0 #38bdf8;
}
.od-hub-row-active .od-hub-row-label { color: #7dd3fc; font-weight: 700; }
/* ════════════════════════════════════════════════════════════════════
   SCROLLBARS — themed, thin, everywhere in the web build (.ga-web)
   The OS paints a light ~15px slab. On these near-black pages every scrollable
   area — the nav rail, a long settings list, a wide table — grew a grey bar
   that reads as a rendering fault rather than an affordance. Only classic
   scrollbars reserve space, so this is invisible on most Macs and obvious on
   Windows; it is NOT a "looks fine here" thing.

   Deliberately NOT hidden: a bar only appears where content really does
   overflow, so it's the one hint that there's more to see. It just stops
   shouting.

   `.ga-web` only — the Zalo Mini App is a published app and keeps its native
   scrolling. No media query: a phone browser on app.guesti.ai deserves this too.

   Engine split matters: adding `scrollbar-width: thin` alongside would look
   like belt-and-braces, but in Chrome it TAKES OVER and these pseudo-elements
   stop applying (measured: the 6px bar silently becomes 11px). So the standard
   properties go to Firefox only, which has no ::-webkit-scrollbar at all.
   ════════════════════════════════════════════════════════════════════ */
.ga-web ::-webkit-scrollbar { width: 6px; height: 6px; }
.ga-web ::-webkit-scrollbar-track { background: transparent; }
.ga-web ::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.28);
  border-radius: 999px;
}
.ga-web ::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.5); }
.ga-web ::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .ga-web, .ga-web * {
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.32) transparent;
  }
}
/* ════════════════════════════════════════════════════════════════════
   DESKTOP NAV SHELL — persistent rail + page  (.ga-web, ≥900px)
   The dashboard is phone-first, so on a wide screen every page stretched a
   13px row across ~1400px and the settings index vanished the moment you
   clicked into it. Here a nav rail sits permanently beside the page.

   Gated on BOTH `.ga-web` and the media query, per the rule in App.tsx: the
   Zalo Mini App must never get this layout however wide the device — it's a
   published app. Breakpoint is 900 to match the onboarding wizard (1024 left
   common windowed / half-screen desktop widths on the stretched-phone layout).
   Keep in step with hooks/useIsDesktop.ts, which gates the MARKUP the same way.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* ---------- The shell: rail | page ---------- */
  .ga-web .od-shell {
    display: flex;
    align-items: stretch;
    /* Inherit the #app height chain so .zaui-page inside stays a viewport
       scroller rather than growing to its content (see the note at the top). */
    height: 100%;
  }
  .ga-web .od-shell-rail {
    position: relative;
    /* Compact staff pickers and tooltips intentionally escape the 88px rail.
       Keep the whole rail in a stacking layer above the page sibling; without
       this, the later-painted dashboard column covers every escaped flyout
       even though the compact rail itself has overflow: visible. */
    z-index: 200;
    flex: 0 0 280px;
    width: 280px;
    height: 100%;
    /* The rail is a SIBLING of the page's scroller, so it never moves and
       scrolls on its own when the index is taller than the window. */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 8px 24px;
    background: rgba(6, 14, 24, 0.72);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
  }
  /* Rail scrollbar: see the app-wide rule near the top of the web section —
     this used to re-declare its own 6px/white-10% bar, which then disagreed
     with every other scroller on the page. */
  .ga-web .od-shell-main {
    position: relative;
    z-index: 0;
    flex: 1;
    min-width: 0;   /* let wide page content shrink instead of forcing a scrollbar */
    height: 100%;
    /* The rail carries its own background and always fills the window, but this
       column did not — so whenever .od-page was SHORTER than the viewport (a
       staff dashboard with an empty queue is ~200px tall) the zmp page canvas
       behind it showed through as a cream slab under the dark UI. The dark
       dashboards need a dark canvas of their own, not just dark cards. */
    background: #070e1a;
  }

  /* ---------- Brand, first row of the rail ---------- */
  .ga-web .od-shell-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .ga-web .od-shell-brand-text {
    font-size: 15px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
  }

  /* ---------- Signed-in person, second row ---------- */
  .ga-web .od-shell-me {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  /* Bell at the far end of the header row, opposite the name. margin-left:auto
     rather than a fixed position so it still lands correctly when there's no
     name to sit opposite (a staffer without a profile name). */
  .ga-web .od-shell-me-bell { margin-left: auto; flex: 0 0 auto; display: flex; }
  .ga-web .od-shell-me-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(56, 189, 248, 0.4);
  }
  .ga-web .od-shell-me-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: #38bdf8; color: #07121f;
    font-weight: 800; font-size: 15px;
  }
  .ga-web .od-shell-me-body { display: flex; flex-direction: column; min-width: 0; }
  .ga-web .od-shell-me-name {
    font-size: 13.5px; font-weight: 700; color: #f1f5f9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ga-web .od-shell-me-role {
    font-size: 11px; color: #64748b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---------- Rail rows: navigation, not touch targets ---------- */
  .ga-web .od-shell-rail .od-hub-group { margin-bottom: 12px; }
  .ga-web .od-shell-rail .od-hub-card { background: transparent; border: none; }
  .ga-web .od-shell-rail .od-hub-row { padding: 8px 10px; gap: 10px; border-bottom: none; border-radius: 9px; }
  .ga-web .od-shell-rail .od-hub-row-body { min-width: 0; }
  .ga-web .od-shell-rail .od-hub-row-icon { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
  .ga-web .od-shell-rail .od-hub-row-icon svg { width: 14px; height: 14px; }
  .ga-web .od-shell-rail .od-hub-row-label {
    font-size: 13px;
    /* A nav label is a destination, not prose — "Reviews Booster" wrapping to
       two lines beside its PRO pill made the row look broken. Ellipsis it. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .ga-web .od-shell-rail .od-hub-row-value {
    font-size: 11px;
    /* One line only — "Zalo, WhatsApp, Telegram" must not wrap the rail. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  /* The chevron means "drills down"; in the rail it swaps the page instead. */
  .ga-web .od-shell-rail .od-hub-row-chevron { display: none; }
  .ga-web .od-shell-rail .od-hub-row:hover { background: rgba(56, 189, 248, 0.07); }
  .ga-web .od-shell-rail .od-hub-row-active:hover { background: rgba(56, 189, 248, 0.13); }

  /* ---------- The rail replaces these ----------
     Scoped under .od-shell on purpose, for two reasons: it beats the later
     `.ga-web .od-topbar-user { display: flex }` rule on specificity rather than
     source order (so neither block has to move), and it means these only
     disappear when a rail is actually rendered to replace them. */
  /* Settings gear: the whole index is in the rail now, so the bell slides
     left into its place (they share .od-topbar-left, in that order). */
  .ga-web .od-shell .od-topbar-settings { display: none; }
  /* Notification bell: moved into the rail's header (the page still
     renders its own on phones, where there is no rail). */
  .ga-web .od-shell .od-topbar-bell { display: none; }
  /* Signed-in person: moved to the top of the rail. */
  .ga-web .od-shell .od-topbar-user { display: none; }
  /* Settings' own back arrow + "Settings" title: the rail is the way back. */
  .ga-web .od-shell .od-set-page .od-topbar { display: none; }
  /* The dashboard's whole top bar: it only ever held the bell, the brand and
     the person — all three now live in the rail, so the row was empty chrome.
     Dropping it lifts the hotel header and the stat tiles a row up. Other pages
     keep their bar: theirs carries a real title ("Staff · 5", "Food & Bev"). */
  .ga-web .od-shell .od-topbar-dashboard { display: none; }

  /* ---------- Notification panel: drop it under the bell ----------
     It was pinned to the viewport's right edge, back when the bell lived in the
     page's top-left and a 340px panel would have run off-screen. The bell is in
     the rail now, so the panel opens directly beneath it. Stays position:fixed
     on purpose — the rail is an overflow:auto scroller, so an absolutely
     positioned panel would be clipped by it. */
  .ga-web .od-shell .od-bell-panel {
    top: 58px;
    left: 10px;
    right: auto;
    width: min(320px, calc(100vw - 20px));
  }

  /* ---------- Settings content pane ---------- */
  .ga-web .od-set-pane {
    min-width: 0;
    max-width: 860px;
    padding: 18px 24px 24px;
  }
  .ga-web .od-set-pane-title {
    margin: 2px 0 14px;
    font-size: 19px; font-weight: 800; color: #f1f5f9;
    letter-spacing: -0.01em;
  }
  /* The panels were built as their own phone page: drop their edge padding
     now that the pane provides it. */
  .ga-web .od-set-pane .od-settings-section { padding-left: 0; padding-right: 0; }
  .ga-web .od-set-empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 320px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    background: rgba(13, 27, 42, 0.35);
  }
  .ga-web .od-set-empty-text { color: #64748b; font-size: 14px; margin: 0; }
  /* The hotel picker reuses the hub card; keep it readable in the pane. */
  .ga-web .od-set-pane .od-hub-card { max-width: 560px; }
}
/* ── Confirm dialog (od-modal) — was white ──────────────────────
   The base .od-modal is a light-theme card (background:#fff) from the older
   pages. On the dark dashboard it flash-banged: a white sheet with black text
   over a near-black page. These are the inner-dashboard overrides; the accent
   border (danger red / primary sky) is kept, it's the surface that changes. */
.od-modal {
  background: #0d1b2a;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(56, 189, 248, 0.14);
  border-top: 4px solid var(--od-modal-accent, #38bdf8);
}
@media (min-width: 480px) {
  .od-modal { border-top: 1px solid rgba(56, 189, 248, 0.14); border-left: 4px solid var(--od-modal-accent, #38bdf8); }
}
.od-modal-title { color: #f1f5f9; }
.od-modal-desc  { color: #94a3b8; }
.od-modal-close { color: #94a3b8; background: rgba(255, 255, 255, 0.06); }
.od-modal-close:hover { background: rgba(255, 255, 255, 0.12); }
.od-modal-backdrop { background: rgba(2, 8, 15, 0.62); }
/* Danger keeps its red, but as a tinted glyph rather than a light-mode chip. */
.od-modal-cancel .od-modal-icon   { background: rgba(244, 63, 94, 0.16); color: #fda4af; }
.od-modal-complete .od-modal-icon { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
/* ── Our own sheets: base (phone) chrome ────────────────────────
   Kept here rather than inline in the component: inline styles beat a
   stylesheet, so a desktop media query could never re-centre them. */
.ga-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ga-sheet-panel {
  position: relative;
  background: #0d1b2a;
  border: 1px solid rgba(56, 189, 248, 0.14);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px env(safe-area-inset-bottom, 16px);
  max-height: 70vh;
  overflow-y: auto;
}
/* ── Tutorial video ─────────────────────────────────────────────
   Trigger reads as a thumbnail, not a button: people click video posters.
   The player reuses .ga-sheet-panel, so it centres on desktop for free. */
.ga-tut-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  background: rgba(56, 189, 248, 0.08);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.ga-tut-trigger:hover { background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.4); }
.ga-tut-trigger-thumb {
  width: 72px; height: 41px;          /* 16:9 */
  object-fit: cover;
  border-radius: 7px;
  flex: 0 0 auto;
  background: #0b1929;
}
.ga-tut-trigger-play {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 72px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.ga-tut-trigger-body { display: flex; flex-direction: column; min-width: 0; }
.ga-tut-trigger-label {
  font-size: 13px; font-weight: 700; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ga-tut-trigger-meta { font-size: 11px; color: #7dd3fc; }
.ga-tut-panel { padding: 12px 12px 16px; }
.ga-tut-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ga-tut-title { font-size: 15px; font-weight: 700; color: #f1f5f9; }
.ga-tut-close {
  background: rgba(255, 255, 255, 0.06); border: none;
  width: 30px; height: 30px; border-radius: 8px;
  font-size: 18px; color: #94a3b8; cursor: pointer;
}
.ga-tut-close:hover { background: rgba(255, 255, 255, 0.12); }
.ga-tut-fallback { margin: 0 0 8px; font-size: 12px; color: #fbbf24; }
.ga-tut-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #000;
  display: block;
}
@media (min-width: 900px) {
  /* The video is a 1280x720 desktop walkthrough — give it room to stay legible,
     which is wider than the 460px a text sheet wants. */
  .ga-web .ga-tut-panel { width: min(880px, 92vw) !important; max-height: min(86vh, 720px); }
}
/* ── Bottom sheets → centered popup on desktop ──────────────────
   Every one of these slides up from the bottom edge: right on a phone, wrong on
   a 1440px screen where it becomes a wide band pinned to the bottom, miles from
   the pointer. On desktop web they become a centered modal instead.

   Covers BOTH sheet families in one place:
     .zaui-sheet          — zmp-ui's Sheet (language picker, staff settings)
     .ga-sheet-scrim/panel — our own sheets (staff replies, menu editor)
   Gated on .ga-web + 900px, same rule as the nav rail: the Zalo Mini App keeps
   its bottom sheets however wide the device is. */
@media (min-width: 900px) {
  /* -- zmp-ui Sheet -- */
  .ga-web .zaui-sheet {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ga-web .zaui-sheet-content {
    position: relative !important;
    inset: auto !important;
    width: min(460px, 92vw) !important;
    max-height: min(76vh, 640px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    transform: none !important;
  }
  /* The drag handle means "swipe me down" — meaningless once centered. */
  .ga-web .zaui-sheet-content-handler,
  .ga-web .zaui-sheet-content-handler-wrapper { display: none !important; }

  /* -- our own sheets -- */
  .ga-web .ga-sheet-scrim { justify-content: center; align-items: center; }
  .ga-web .ga-sheet-panel { border-bottom: 1px solid rgba(56, 189, 248, 0.16) !important; padding-bottom: 16px; }
  .ga-web .ga-sheet-panel {
    width: min(460px, 92vw);
    border-radius: 16px !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    max-height: min(76vh, 640px);
  }
  .ga-web .ga-sheet-handle { display: none; }
}
/* ── Settings detail cards / rows / buttons ── */
.od-settings-section { color: #e2e8f0; }
.od-settings-card { background: rgba(13, 27, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.07); }
.od-settings-row { border-bottom-color: rgba(255, 255, 255, 0.06); }
.od-settings-row-label { color: #f1f5f9; }
.od-settings-platform-name { color: #f1f5f9; }
.od-settings-platform { border-bottom-color: rgba(255, 255, 255, 0.06); }
.od-settings-row-value, .od-settings-row-hint, .od-settings-hint { color: #94a3b8; }
.od-settings-btn { background: rgba(56, 189, 248, 0.12); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.28); }
.od-settings-btn-ghost { background: rgba(255, 255, 255, 0.04); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.12); }
.od-settings-btn-primary { background: #38bdf8; color: #07121f; border: none; }
.od-settings-logo-preview, .od-settings-logo-empty { background: rgba(13, 27, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); }
/* ── Filter / segmented tabs (service-requests etc.) ── */
.od-filter {
  background: rgba(13, 27, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #cbd5e1;
}
.od-filter-active { background: rgba(56, 189, 248, 0.16); border-color: #38bdf8; color: #ffffff; }
.od-filter-count { background: rgba(255, 255, 255, 0.10); color: #cbd5e1; }
.od-filter-active .od-filter-count { background: rgba(56, 189, 248, 0.30); color: #fff; }
/* ── "All clear" empty state — was a white gradient bug on dark ── */
.od-allclear {
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.od-allclear-text { color: #6ee7b7; }
/* ── Generic list/request cards (staff, menus, accuracy, ai-knowledge…) ── */
.od-req { background: rgba(13, 27, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); }
.od-req:active { background: rgba(56, 189, 248, 0.06); }
.od-req-msg { color: #94a3b8; }
.od-req-cat { color: #cbd5e1; }
.od-req-room { color: #ffffff; }
/* ── Forms / inputs / toggles ── */
.od-input, .od-form-input, .od-textarea, .od-select {
  background: rgba(13, 27, 42, 0.6);
  border: 1.5px solid rgba(56, 189, 248, 0.18);
  color: #ffffff;
}
.od-input::placeholder, .od-form-input::placeholder, .od-textarea::placeholder { color: #5b6b7e; }
.od-form-label, .od-field-label { color: #cbd5e1; }
/* Focus: keep the field dark (base focus turns it #fff — blinding on dark). */
.od-input:focus, .od-form-input:focus, .od-textarea:focus, .od-select:focus {
  background: rgba(13, 27, 42, 0.85);
  border-color: #38bdf8;
}
/* Inline form card (add-staff, etc.) — was hardcoded #fff with dark text. */
.od-form { background: rgba(13, 27, 42, 0.6); border: 1px solid rgba(56, 189, 248, 0.12); box-shadow: none; }
.od-form-title { color: #ffffff; }
.od-form-help { color: #94a3b8; }
/* Role chips — dark-theme override (base was a light-theme white pill). The
   selected chip keeps its per-role accent via the inline DEPT_META style. */
.od-dept-chip { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: #cbd5e1; }
.od-dept-chip:not(.od-dept-chip-active):hover { background: #122338; border-color: rgba(56, 189, 248, 0.25); }
.od-modal-btn-ghost { background: rgba(255, 255, 255, 0.06); color: #cbd5e1; }
.od-modal-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.od-toggle-on { background: #38bdf8 !important; }
/* ── Empty/loading ── */
.od-empty { color: #94a3b8; }
/* Request / staff list container — was hardcoded #fff (washed the translucent
   dark rows out to grey on the dark theme). Dark glass card instead. */
.od-reqs {
  background: rgba(13, 27, 42, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.12);
  box-shadow: none;
}
/* Menu category accordion header — was hardcoded #fff with dark text. */
.od-menu-cat-head { background: rgba(13, 27, 42, 0.55); border-color: rgba(56, 189, 248, 0.12); box-shadow: none; gap: 12px; }
.od-menu-cat-head:active { background: rgba(56, 189, 248, 0.08); }
.od-menu-cat-name { color: #ffffff; }
/* Service switched OFF — dimmed, hidden from guests (kept on record). */
.od-menu-cat-off { opacity: 0.6; }
.od-menu-cat-off-tag { color: #fb7185; font-weight: 600; }
.od-menu-cat-head .od-toggle { flex-shrink: 0; }
/* Add item / add service controls */
.od-menu-add-row {
  width: 100%; padding: 11px; margin-top: 4px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px dashed rgba(56, 189, 248, 0.3);
  border-radius: 12px; color: #7dd3fc; font-weight: 700; font-size: 13px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.od-menu-add-row:active { background: rgba(56, 189, 248, 0.12); }
.od-menu-add-form {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
  padding: 12px; border-radius: 12px;
  background: rgba(13, 27, 42, 0.55); border: 1px solid rgba(56, 189, 248, 0.12);
}
/* Edit-item textarea — was light cream (#FAF5F0) on the dark edit form. */
.od-modal-textarea { background: rgba(13, 27, 42, 0.6); border-color: rgba(56, 189, 248, 0.18); color: #ffffff; }
.od-modal-textarea::placeholder { color: #5b6b7e; }
.od-modal-textarea:focus { background: rgba(13, 27, 42, 0.85); border-color: #38bdf8; }
/* Menu row actions — put the edit pencil BESIDE the toggle (not stacked under
   it) and restyle it from a pale square to a cyan ghost icon button. */
/* Item info line (price in ₫ + spa durations / tags / stock), between name and toggle. */
.od-menu-meta {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
}
.od-menu-meta-price { font-weight: 800; color: #7dd3fc; }
.od-menu-meta-dim { color: #94a3b8; }
.od-menu-meta-out { color: #fb7185; font-weight: 600; }
.od-menu-meta-review { color: #f59e0b; font-weight: 600; }
.od-menu-row .od-req-side { flex-direction: row; align-items: center; gap: 10px; }
.od-menu-row .od-req-btn-secondary {
  width: 34px; height: 34px; font-size: 15px;
  background: rgba(13, 27, 42, 0.7) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}
.od-menu-row .od-req-btn-secondary:hover { background: rgba(56, 189, 248, 0.18) !important; }
/* Settings hub icons — cyan SVG glyphs in the cyan tile (danger row = rose) */
.od-hub-row-icon { display: flex; align-items: center; justify-content: center; line-height: 0; color: #7dd3fc; }
.od-hub-row-icon-danger { background: rgba(244, 63, 94, 0.12) !important; border-color: rgba(244, 63, 94, 0.22) !important; color: #fda4af; }
.od-allclear-emoji { display: inline-flex; align-items: center; line-height: 0; color: #6ee7b7; }
/* ─────────────────────────────────────────────────────────────────────────
   Page transitions (Zalo Mini App only) — replace zmp-ui's horizontal SLIDE
   with a quick cross-FADE.

   zmp-ui's <AnimationRoutes> drives navigation with react-transition-group and
   slides pages via `translateX` over 0.4s (.zaui-routes-{forward,backward}-…).
   That slide feels heavy going into Settings (gear) and back. We override the
   generated classes below: the ENTERING page fades in (0.18s) on top while the
   EXITING page stays put underneath — both .od-page surfaces are opaque dark,
   so there's no mid-transition background flash. Direction no longer matters
   (forward == backward == fade), so the "wrong-way slide on back" is moot too.

   Web uses plain <Routes> (no .zaui-routes wrapper), so these rules are inert
   there — this only affects the Zalo runtime. !important beats zmp-ui's
   (non-important) rules regardless of stylesheet order.
   ───────────────────────────────────────────────────────────────────────── */
.zaui-routes .zaui-routes-forward-enter,
.zaui-routes .zaui-routes-backward-enter {
  transform: none !important;
  opacity: 0 !important;
}
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-forward-enter-active,
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-backward-enter-active {
  transform: none !important;
  opacity: 1 !important;
  transition: opacity 0.18s ease !important;
}
.zaui-routes .zaui-routes-forward-exit,
.zaui-routes .zaui-routes-backward-exit,
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-forward-exit-active,
.zaui-routes .zaui-routes-item:not(:only-child).zaui-routes-backward-exit-active {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
/* ── Reviews booster header: back (left) + plain title and the on/off switch,
   centered between the back button and Zalo's top-right ⋯|✕ system buttons. ── */
.od-topbar-reviews {
  align-items: center;
  padding-top: max(8px, calc(env(safe-area-inset-top, 0px) + 2px));
  /* Reserve the top-right zone for Zalo's floating system buttons. */
  padding-right: 120px;
}
.od-reviews-headline {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.od-reviews-headline-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Master on/off switch — the only button in the header; bigger now. */
.od-reviews-headline .od-mini-switch {
  flex-shrink: 0;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  border: none;
  padding: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  transition: background 0.16s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.od-reviews-headline .od-mini-switch.on { background: #38bdf8; box-shadow: 0 0 12px rgba(56, 189, 248, 0.45); }
.od-reviews-headline .od-mini-switch.off { background: rgba(255, 255, 255, 0.2); }
.od-reviews-headline .od-mini-switch:active { transform: scale(0.95); }
.od-reviews-headline .od-mini-switch-knob {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.16s;
}
.od-reviews-headline .od-mini-switch.on .od-mini-switch-knob { transform: translateX(22px); }
/* Image zoom overlay popup */
.od-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: od-fadeIn 0.2s ease-out;
}
.od-zoom-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s, transform 0.1s;
}
.od-zoom-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
.od-zoom-close:active {
  transform: scale(0.95);
}
.od-zoom-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  animation: od-zoomIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: transparent;
}
@keyframes od-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes od-zoomIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* ── Staff dashboard task cards — big, clear, older-staff-friendly.
      Scoped under .od-reqs-staff so it overrides the older incremental
      .od-req* rules without touching the manager/menu/history variants. ── */
.od-reqs-staff { gap: 10px; }
.od-reqs-staff .od-req {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px;
}
.od-reqs-staff .od-req-info { cursor: pointer; min-width: 0; }
.od-reqs-staff .od-req-head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.od-reqs-staff .od-req-room { font-size: 15px !important; font-weight: 800; color: #ffffff !important; }
.od-reqs-staff .od-req-sep  { color: #475569; font-size: 13px; }
.od-reqs-staff .od-req-cat  { font-size: 12px !important; font-weight: 600; color: #94a3b8 !important; }
.od-reqs-staff .od-req-age {
  margin-left: auto;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  letter-spacing: 0;
}
.od-reqs-staff .od-req-msg {
  font-size: 13px !important;
  line-height: 1.4;
  color: #cbd5e1 !important;
  margin-top: 3px;
  /* Bold lead + extra context, clamped to 2 lines with an ellipsis so the
     card stays compact and aligned across rows. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.od-reqs-staff .od-req-msg-title { font-weight: 800; color: #ffffff; }
.od-reqs-staff .od-req-msg-more { color: #94a3b8; }
.od-reqs-staff .od-req-chev {
  font-size: 15px;
  line-height: 1;
  color: #64748b;
  margin-left: 6px;
  transition: transform 0.18s;
}
.od-reqs-staff .od-req-chev-open { transform: rotate(180deg); }
.od-reqs-staff .od-req-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.od-reqs-staff .od-req-detail-photo {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
}
.od-reqs-staff .od-req-detail-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 3px;
}
.od-reqs-staff .od-req-detail-msg {
  font-size: 14px;
  line-height: 1.5;
  color: #cbd5e1;
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 9px 11px;
}
.od-reqs-staff .od-req-detail-ai {
  font-size: 13px;
  line-height: 1.5;
  color: #6ee7b7;
  white-space: pre-wrap;
  background: rgba(52, 211, 153, 0.07);
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 10px;
  padding: 9px 11px;
}
.od-reqs-staff .od-req-detail-meta { font-size: 11px; color: #64748b; }
.od-reqs-staff .od-req-actions { display: block; }
.od-reqs-staff .od-bigbtn {
  flex: 1;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, background 0.15s;
}
.od-reqs-staff .od-bigbtn-ic { font-size: 14px; line-height: 1; }
.od-reqs-staff .od-bigbtn:active { transform: scale(0.98); }
.od-reqs-staff .od-bigbtn:disabled { opacity: 0.5; cursor: not-allowed; }
.od-reqs-staff .od-bigbtn-start { background: #0284c7; color: #ffffff; }
.od-reqs-staff .od-bigbtn-start:active { background: #0369a1; }
.od-reqs-staff .od-bigbtn-done { background: #16a34a; color: #ffffff; }
.od-reqs-staff .od-bigbtn-done:active { background: #15803d; }
/* ── Staff at-a-glance strip — slim full-width counts above the task list,
      replacing both the hotel hero and the chunky KPI tiles. ── */
.od-staffbar {
  display: flex;
  align-items: stretch;
  background: rgba(13, 27, 42, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.12);
  border-radius: 12px;
  overflow: hidden;
  margin: 14px 16px 10px;   /* breathing room above; match the 16px gutter */
}
.od-staffbar-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  overflow: hidden;        /* so the auto-fit can measure label overflow */
  white-space: nowrap;
}
.od-staffbar-item + .od-staffbar-item { border-left: 1px solid rgba(255, 255, 255, 0.06); }
.od-staffbar-num { font-size: 17px; font-weight: 800; color: #ffffff; line-height: 1; }
.od-staffbar-lbl { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.od-staffbar-urgent .od-staffbar-num { color: #fb923c; }
.od-staffbar-urgent .od-staffbar-lbl { color: #fdba74; }
/* ── Compact staff ticket rows — dense list (50+ tickets). Overrides the
      older stacked card: collapsed = one tappable info line, actions live in
      the opened ticket. ── */
/* Left gutter holds the waiting time, OUTSIDE each card. */
/* No container box — tickets float on the page bg, so the gutter time sits on
   the bg too (not inside any element). */
.od-reqs-staff { gap: 8px; padding-left: 20px; background: transparent; border: none; border-radius: 0; }
.od-reqs-staff .od-req {
  position: relative;
  overflow: visible;           /* so the gutter time isn't clipped */
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.od-reqs-staff .od-req::before { border-radius: 12px 0 0 12px; }
.od-reqs-staff .od-req-row {
  display: flex;
  align-items: stretch;        /* swipe fills full row height (flush) */
  gap: 0;
  padding: 0;
}
.od-reqs-staff .od-req-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0 6px 14px;
}
/* Swipe pill — inset with breathing room on all sides. */
.od-reqs-staff .od-req-swipe { flex-shrink: 0; width: clamp(112px, 38%, 142px); padding: 6px 8px 6px 4px; }
.od-reqs-staff .od-req-text { min-width: 80px; }
/* Action word only, big. */
.od-swipe-big { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
/* Waiting time in the left gutter, outside the card, coloured by urgency. */
.od-reqs-staff .od-req-time {
  position: absolute;
  left: -36px;
  top: 0;
  bottom: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.od-reqs-staff .od-req-time-ok    { color: #64748b; }
.od-reqs-staff .od-req-time-warn  { color: #fb923c; }
.od-reqs-staff .od-req-time-alert { color: #fb7185; }
/* Red (overdue) tickets blink a little to pull the eye. */
@keyframes od-req-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0); }
  50%      { box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.45); }
}
.od-reqs-staff .od-req.od-req-alert { animation: od-req-blink 1.5s ease-in-out infinite; border-radius: 12px; }
/* Focus mode: when one ticket is open, dim + disable the rest so staff can't
   tap/swipe the wrong one. */
.od-reqs-staff.has-open .od-req:not(.od-req-open) {
  opacity: 0.38;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.od-reqs-staff .od-req-roomnum {
  flex-shrink: 0;
  min-width: 32px;
  font-size: 21px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}
.od-reqs-staff .od-req-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.od-reqs-staff .od-req-title { font-weight: 500; color: #ffffff; }
.od-reqs-staff .od-req-more { color: #94a3b8; }
.od-reqs-staff .od-req-progress-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
}
.od-reqs-staff .od-req-info .od-req-age { flex-shrink: 0; margin-left: 0; }
.od-reqs-staff .od-req-info .od-req-chev { flex-shrink: 0; margin-left: 2px; }
.od-reqs-staff .od-req-detail {
  margin-top: 0;
  padding: 12px 12px 13px;
}
.od-reqs-staff .od-req-cancel-swipe { margin-top: 2px; }
/* ───────────────────────────────────────────────────────────────
   Web onboarding (app.guesti.ai) — signed-in-as banner + desktop
   layout. The register wizard is mobile-first; on wider viewports
   it reads as a comfortable centered column instead of a phone-
   width strip. Zalo Mini App is always mobile, so these only bite
   on the standalone web build.
   ─────────────────────────────────────────────────────────────── */
/* A chip in the header row, not a band above the content — it's a reassurance
   ("yes, this is the account you just scanned with"), and a band charged every
   screen 43px of height to say it. Sits beside the language picker, which is
   where the dashboard already puts the same identity (.od-topbar-user). */
.rw-signed-in-as {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 4px;
  flex-shrink: 1;
  min-width: 0;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.22);
}
.rw-signed-in-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rw-signed-in-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #38bdf8;
  color: #05263a;
  font-size: 12px;
  font-weight: 700;
}
.rw-signed-in-text {
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rw-signed-in-name { color: #e2e8f0; font-weight: 600; }
/* Narrow web (a phone browser that reached the wizard directly): the header
   still carries its title here, so the chip drops to just the avatar rather
   than squeezing the title out. */
@media (max-width: 899px) {
  .rw-signed-in-as { padding: 3px; gap: 0; }
  .rw-signed-in-text { display: none; }
}
@media (min-width: 768px) {
  /* Centered reading column; chrome bars (header, progress) stay full-bleed. */
  .rw-body-flat {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 40px 150px;
  }
  /* Keep the fixed bottom bar's buttons aligned to the same 680px column. */
  .rw-fixed-bottom {
    padding-left: max(20px, calc(50% - 340px));
    padding-right: max(20px, calc(50% - 340px));
  }
}
/* =================================================================
   DESKTOP WEB EXPERIENCE — app.guesti.ai (onboarding + auth)
   -----------------------------------------------------------------
   Gated on BOTH `.ga-web` (web build only — added in app.tsx, never
   present in the Zalo Mini App) AND `min-width: 1024px`. Both gates
   must pass, so the Zalo Mini App and every mobile width stay 100%
   untouched. The onboarding wizard becomes a full-screen split: a
   branded left rail + the wizard filling the right half, edge to edge.
   ================================================================= */
/* Rendered on the web build; shown only on desktop (see media query below). */
.ga-web .rw-brand-rail { display: none; }
.ga-web .od-topbar-user { display: none; }
/* 900px, not 1024: a split needs horizontal room, but 1024 left common
   windowed / half-screen desktop widths (~900–1023px) on the stretched-mobile
   layout. 900 engages the split for far more real desktop windows while keeping
   the rail (~42%) + wizard (~58%) columns comfortable. Below 900 stays mobile. */
@media (min-width: 900px) {

  /* ---------- Onboarding wizard → full-screen split ---------- */
  .ga-web .rw-page-host { padding: 0; background: #05090f; }

  /* Left rail — fixed, fills the left ~42% of the viewport. */
  .ga-web .rw-brand-rail {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 42vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(48px, 6vh, 88px) clamp(40px, 4.5vw, 88px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background:
      radial-gradient(65% 45% at 22% 12%, rgba(56, 189, 248, 0.20), transparent 60%),
      radial-gradient(60% 50% at 92% 104%, rgba(99, 102, 241, 0.18), transparent 60%),
      linear-gradient(158deg, #0b1728 0%, #060b14 60%);
    z-index: 1;
  }
  .ga-web .rw-brand-rail .gw-orb { opacity: 0.5; }
  /* Existing-hotels switcher — a one-row grid of logo squares pinned to the top
     of the rail (rail-inner below it is margin:auto centered). Tapping one opens
     that hotel's dashboard. */
  .ga-web .rw-rail-hotels {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
    max-width: 100%;
  }
  .ga-web .rw-rail-hotels-label {
    width: 100%;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .ga-web .rw-rail-hotel {
    width: min(224px, 100%);
    min-height: 54px;
    flex: 0 1 224px;
    padding: 6px 10px 6px 6px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .ga-web .rw-rail-hotel:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);
  }
  .ga-web .rw-rail-hotel-media {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(56, 189, 248, 0.1);
  }
  .ga-web .rw-rail-hotel img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ga-web .rw-rail-hotel-fallback { font-size: 14px; font-weight: 800; color: #7dd3fc; }
  .ga-web .rw-rail-hotel-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ga-web .rw-rail-hotel-name {
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ga-web .rw-rail-hotel-role { color: rgba(255, 255, 255, 0.58); font-size: 11px; line-height: 1.2; }
  .ga-web .rw-rail-inner {
    position: relative;
    z-index: 1;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 460px;
  }
  .ga-web .rw-rail-brand { display: flex; align-items: center; gap: 12px; }
  .ga-web .rw-rail-brand-name {
    color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  }
  .ga-web .rw-rail-title {
    color: #fff;
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
  }
  .ga-web .rw-rail-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
    font-size: 13px; font-weight: 600;
  }
  .ga-web .rw-rail-steps {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
  }
  .ga-web .rw-rail-step {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px; font-weight: 600;
    transition: background 0.25s, color 0.25s;
  }
  .ga-web .rw-rail-step-num {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px; font-weight: 700;
  }
  .ga-web .rw-rail-step-active { background: rgba(56, 189, 248, 0.10); color: #fff; }
  .ga-web .rw-rail-step-active .rw-rail-step-num {
    background: #38bdf8; border-color: #38bdf8; color: #07121f;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.5);
  }
  .ga-web .rw-rail-step-done { color: rgba(255, 255, 255, 0.75); }
  .ga-web .rw-rail-step-done .rw-rail-step-num {
    background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.5); color: #34d399;
  }

  /* Right side — the wizard fills the remaining 58vw, full height. */
  /* Right side — the wizard fills whatever the fixed rail leaves.
     `width: auto`, NOT 58vw. The scroller here is .rw-page-host (overflow:auto),
     and once its vertical scrollbar appears it takes ~15px off the CONTENT box
     while vw keeps measuring the full viewport — so 42vw + 58vw lands exactly
     one scrollbar-width past the edge and the host grows a horizontal scrollbar.
     That bar then eats ~15px of HEIGHT, which re-triggers the vertical one via
     min-height below: both bars show on a page that nearly fits. Only classic
     scrollbars reserve space, so this is invisible on overlay-scrollbar machines
     (most Macs) and obvious on Windows — measured at 1369px: host clientW 1354
     vs .rw-page right edge 1369.
     width:auto computes to the same 58vw when no scrollbar is present, and
     self-corrects to 779px when one is. margin-left stays 42vw because it has to
     match the rail, which is position:fixed and therefore viewport-relative. */
  .ga-web .rw-page {
    margin-left: 42vw;
    width: auto;
    min-height: 100vh;
  }
  .ga-web .rw-page-flat .gw-orb { opacity: 0.16; }
  .ga-web .rw-header-row { padding: 20px 44px; }
  .ga-web .rw-back-arrow { font-size: 22px; }
  /* The brand rail already shows the title AND the current step, so a header
     title here just repeats it (and reads as stale — it never changed per step).
     Collapse the header to back arrow + language. Mobile / the Zalo Mini App
     have no rail, so they keep the title. */
  .ga-web .rw-header-title { display: none; }
  /* Anchor content near the top so it grows DOWNWARD as results/place details
     appear — vertical centering made the whole step re-center (jump/"enlarge")
     every time its height changed.
     No side padding: the hero photo runs edge-to-edge across the panel. The
     readable column is enforced per-child below instead, so nothing ever
     exceeds the body's width — .rw-body-flat is overflow-y:auto, which makes
     overflow-x compute to auto, so ANY horizontal spill would show a scrollbar
     (this is why 100vw / negative-margin bleeds cause one — we don't use them). */
  /* Tighter than it looks: the bottom padding sits BELOW .rw-fixed-bottom, which
     already carries 26px of its own, so 40px here was ~66px of dead space under
     the Next button — enough to push it off a 900px screen on its own. */
  .ga-web .rw-body-flat {
    max-width: none;
    padding: clamp(14px, 2.4vh, 28px) 0 20px;
    align-items: stretch;
    justify-content: flex-start;
  }
  .ga-web .rw-step-anim { width: 100%; max-width: none; flex: 0 0 auto; }
  /* Readable, centred column for everything EXCEPT the full-bleed hero photo. */
  .ga-web .rw-card-anim > *:not(.rw-place-card) {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Hero photo: full panel width, flush to both sides, zero overflow. */
  .ga-web .rw-place-card {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
  /* Bigger, more inviting drag-and-drop targets on desktop. */
  .ga-web .rw-upload-zone-sm { padding: 24px 16px; }
  .ga-web .rw-upload-zone-sm svg { width: 26px; height: 26px; }
  /* Centred on the header, not on the space left over beside the language
     picker — absolute so the back arrow's and picker's widths (which change
     with locale) can't drag it off centre. The header is position:relative and
     its title is hidden here, so there's nothing to collide with. */
  .ga-web .rw-signed-in-as {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .ga-web .rw-fixed-bottom {
    position: static;
    justify-content: center;
    gap: 14px;
    padding: 18px 8% 26px;
  }
  .ga-web .rw-fixed-bottom .rw-nav-btn { flex: 0 1 240px; min-width: 160px; }

  /* ---------- Staff role picker → chips sized to their words ----------
     The phone grid is repeat(auto-fill, minmax(100px, 1fr)), which pins every
     chip to ~100px — right on a 375px screen, but on desktop it kept that width
     against ~1000px of empty row and ellipsised the labels into "Housek…",
     "Mainte…", "Recepti…". Nothing was too long; the column was too narrow.
     Flex-wrap lets each chip take exactly the room its label needs. */
  .ga-web .od-dept-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ga-web .od-dept-chip {
    padding: 9px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* ---------- Login page → centered, capped column ---------- */
  .ga-web .gl-page { align-items: center; }
  .ga-web .gl-header,
  .ga-web .gl-body { width: 100%; max-width: 460px; }
  .ga-web .gl-body { padding: 24px 0 48px; }

  /* ---------- Welcome → cap the reading column ---------- */
  .ga-web .gw-content { max-width: 460px; }

  /* ---------- Dashboard → signed-in Zalo user chip (top-right) ---------- */
  .ga-web .od-topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    max-width: 260px;
  }
  .ga-web .od-topbar-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  }
  .ga-web .od-topbar-user-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: #38bdf8; color: #07121f;
    font-size: 15px; font-weight: 800;
  }
  .ga-web .od-topbar-user-name {
    color: #e2e8f0;
    font-size: 14px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
/* ── Web language dropdown (app.guesti.ai) — replaces the mobile bottom sheet.
   The dropdown markup renders only on the web build (LanguagePicker's IS_WEB
   branch), so the Zalo Mini App's native Sheet is untouched. Not media-gated:
   a dropdown is the right pattern at every web width. ── */
.od-lang-wrap { position: relative; display: inline-flex; }
.od-lang-trigger-caret {
  font-size: 9px;
  margin-left: 1px;
  opacity: 0.75;
  transition: transform 0.18s ease;
}
.od-lang-trigger-caret-open { transform: rotate(180deg); }
.od-lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 300;
  min-width: 210px;
  padding: 6px;
  border-radius: 14px;
  background: #0d1b2a;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 22px 55px -14px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(56, 189, 248, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: od-lang-drop-in 0.16s ease;
}
@keyframes od-lang-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.od-lang-drop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: none;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.od-lang-drop-row:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.od-lang-drop-flag { font-size: 18px; line-height: 1; }
.od-lang-drop-label { flex: 1; }
.od-lang-drop-row-active { background: rgba(56, 189, 248, 0.10); color: #fff; font-weight: 700; }
.od-lang-drop-check { color: #38bdf8; font-weight: 700; }
/* Lift the onboarding header (which hosts the language dropdown) above the
   progress bar + "signed in as" divider below it — otherwise those sibling bars
   (same stacking level) paint over the open dropdown. Web only. */
.ga-web .rw-header-row { z-index: 40; }
/* ── Smart Drop (desktop web onboarding) — single zone + live checklist.
   Renders only on the web build (IS_WEB gate), so the Zalo Mini App is
   unaffected; no media query needed. ── */
.rw-smartdrop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 44px 24px;
  border: 2px dashed rgba(56, 189, 248, 0.35);
  border-radius: 18px;
  background: rgba(13, 27, 42, 0.5);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: inherit;
}
.rw-smartdrop:hover { border-color: rgba(56, 189, 248, 0.6); background: rgba(56, 189, 248, 0.06); }
.rw-smartdrop-drag {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.14) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16), 0 12px 30px rgba(56, 189, 248, 0.18);
  transform: translateY(-1px);
}
.rw-smartdrop-icon svg { width: 34px; height: 34px; }
.rw-smartdrop-hint { color: #fff; font-size: 18px; font-weight: 700; }
.rw-smartdrop-sub { color: #94a3b8; font-size: 13px; text-align: center; max-width: 400px; line-height: 1.5; }
/* "What happens next" helper — three outcome lines + a formats footnote, shown
   under the drop zone until the first file lands (then it unmounts). Fills what
   was an empty panel and makes the AISetup step's payoff explicit. */
.rw-smartdrop-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.14);
  background: rgba(13, 27, 42, 0.4);
  animation: rwStepIn 0.35s ease both;
}
.rw-smartdrop-guide-title {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rw-smartdrop-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rw-smartdrop-guide-list li {
  color: #e2e8f0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}
.rw-smartdrop-guide-formats {
  color: #64748b;
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rw-smartdrop-list { display: flex; flex-direction: column; gap: 8px; }
.rw-smartdrop-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(13, 27, 42, 0.55);
  animation: rwStepIn 0.3s ease both;
}
.rw-smartdrop-row-done { border-color: rgba(52, 211, 153, 0.32); background: rgba(52, 211, 153, 0.08); }
.rw-smartdrop-row-pending { opacity: 0.9; }
.rw-smartdrop-row-unknown { border-color: rgba(250, 204, 21, 0.30); background: rgba(250, 204, 21, 0.08); }
.rw-smartdrop-check { display: inline-flex; }
.rw-smartdrop-emoji { font-size: 17px; }
.rw-smartdrop-label { flex: 1; min-width: 0; color: #e2e8f0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-smartdrop-count { color: #34d399; font-size: 13px; font-weight: 600; flex-shrink: 0; }
/* Remove-section X — never squeezed by a long label, quiet until hovered.
   display:flex + line-height:0 centre the SVG: .rw-file-remove is a plain
   button, so an inline <svg> sits on the text baseline and leaves descender
   space under it — the row centres the button, but the icon rides high. */
.rw-smartdrop-x {
  flex-shrink: 0;
  margin-left: 2px;
  opacity: 0.5;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.rw-smartdrop-row:hover .rw-smartdrop-x { opacity: 1; }
.rw-smartdrop-row-pending .rw-smartdrop-count { color: #7dd3fc; }
.rw-smartdrop-spin { margin-right: 0; vertical-align: middle; }
/* Left-rail helper paragraph (desktop split, upload step). */
.ga-web .rw-rail-help {
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.6;
  margin: 4px 0 0;
  max-width: 420px;
}
/* ════════════════════════════════════════════════════════════════════
   STAFF DESKTOP DESK
   A desktop-only master/detail workbench: queue on the left, guest context
   and role-appropriate response tools on the right. Reception receives the
   conversation/composer; department roles receive approved status updates.
   The Mini App never renders this markup, and every selector is additionally
   gated on .ga-web + 900px.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .ga-web .rd-workspace {
    /* ── One type scale for the whole desk ──
       The first pass shipped 7.5–10.5px body copy. On the 24" monitors this
       runs on all shift that is unreadable, and it made an operations tool
       feel like fine print. Nothing here goes below 11px, and everything the
       operator actually READS — ticket titles, the guest's words, the
       conversation, the composer — is 14px or more. */
    --rd-micro: 11px;   /* uppercase eyebrow labels — the floor */
    --rd-xs: 12px;      /* chips, counts, timestamps */
    --rd-sm: 13px;      /* secondary body */
    --rd-base: 14px;    /* body: messages, composer, search */
    --rd-md: 15px;      /* ticket titles */
    --rd-lg: 17px;      /* panel + section titles */
    --rd-xl: 20px;      /* selected-request title */
    --rd-num: 30px;     /* metric numerals */

    --rd-ink: #eaf3fc;
    --rd-ink-2: #a3b6ca; /* muted, but still legible — was #607289 */
    --rd-ink-3: #8598ad; /* faintest tier allowed */
    --rd-line: rgba(135, 178, 211, 0.14);
    --rd-accent: #38bdf8;

    width: min(100%, 1680px);
    margin: 0 auto;
    padding: 20px clamp(20px, 2.4vw, 40px) 22px;
    box-sizing: border-box;
    color: var(--rd-ink);
    /* Ages, counters and room numbers change every 30s — lining figures stop
       the queue from twitching sideways on each tick. */
    font-variant-numeric: tabular-nums;
  }

  /* One visible focus treatment for every control on the desk. Keyboard
     triage (↑/↓ through the queue) is useless if you can't see where you are. */
  .ga-web .rd-workspace :focus-visible {
    outline: 2px solid var(--rd-accent);
    outline-offset: 2px;
    border-radius: 8px;
  }

  /* Dark, thin scrollbars — the default light ones cut a bright stripe down
     the middle of a dark console. */
  .ga-web .rd-queue,
  .ga-web .rd-thread,
  .ga-web .rd-detail-body,
  .ga-web .rd-quick-replies {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 181, 207, 0.28) transparent;
  }
  .ga-web .rd-queue::-webkit-scrollbar,
  .ga-web .rd-thread::-webkit-scrollbar,
  .ga-web .rd-detail-body::-webkit-scrollbar,
  .ga-web .rd-quick-replies::-webkit-scrollbar { width: 9px; height: 9px; }
  .ga-web .rd-queue::-webkit-scrollbar-thumb,
  .ga-web .rd-thread::-webkit-scrollbar-thumb,
  .ga-web .rd-detail-body::-webkit-scrollbar-thumb,
  .ga-web .rd-quick-replies::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(148, 181, 207, 0.26);
    background-clip: content-box;
  }
  .ga-web .rd-queue::-webkit-scrollbar-track,
  .ga-web .rd-thread::-webkit-scrollbar-track,
  .ga-web .rd-detail-body::-webkit-scrollbar-track,
  .ga-web .rd-quick-replies::-webkit-scrollbar-track { background: transparent; }

  .ga-web .rd-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
  }
  .ga-web .rd-eyebrow {
    margin-bottom: 6px;
    color: #6ed0f7;
    font-size: var(--rd-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .ga-web .rd-header h1 {
    margin: 0;
    color: #f8fbff;
    font-size: clamp(26px, 2.1vw, 34px);
    font-weight: 820;
    letter-spacing: -0.035em;
    line-height: 1.08;
  }
  .ga-web .rd-header p {
    margin: 7px 0 0;
    color: var(--rd-ink-2);
    font-size: var(--rd-base);
  }
  .ga-web .rd-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }
  .ga-web .rd-done-today {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    min-height: 44px;
    padding: 10px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 11px;
    background: rgba(52, 211, 153, 0.07);
    color: var(--rd-ink-2);
    font-size: var(--rd-sm);
    font-weight: 650;
  }
  .ga-web .rd-done-today span {
    color: #6ee7b7;
    font-size: var(--rd-xl);
    font-weight: 850;
  }
  .ga-web .rd-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 11px;
    background: rgba(56, 189, 248, 0.08);
    color: #bcecff;
    font: 700 var(--rd-sm)/1 inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
  }
  .ga-web .rd-refresh:hover {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.48);
    transform: translateY(-1px);
  }
  .ga-web .rd-refresh:disabled { opacity: 0.55; cursor: wait; }
  .ga-web .rd-refresh:disabled svg { animation: rd-spin 0.8s linear infinite; }
  @keyframes rd-spin { to { transform: rotate(360deg); } }

  /* auto-fit rather than a fixed 6 — the tiles now carry 30px numerals, so a
     narrow window reflows them instead of crushing six into 140px each. */
  .ga-web .rd-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
    gap: 10px;
    margin-bottom: 13px;
  }
  .ga-web .rd-metric {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(17, 34, 52, 0.82), rgba(9, 21, 36, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }
  .ga-web .rd-metric::after {
    content: "";
    position: absolute;
    inset: auto -22px -34px auto;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.035;
  }
  .ga-web .rd-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    background: currentColor;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .ga-web .rd-metric-icon svg { color: #06111e; }
  .ga-web .rd-metric-open { color: #55c7f4; }
  .ga-web .rd-metric-waiting { color: #a5b4fc; }
  .ga-web .rd-metric-urgent { color: #fb7185; }
  .ga-web .rd-metric-progress { color: #fbbf24; }
  .ga-web .rd-metric-rooms { color: #5eead4; }
  .ga-web .rd-metric-followup { color: #c4b5fd; }
  .ga-web .rd-metric-followup.rd-metric-due {
    border-color: rgba(251, 113, 133, 0.3);
    color: #fb7185;
    box-shadow: inset 0 0 24px rgba(244, 63, 94, 0.05);
  }
  .ga-web .rd-metric-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .ga-web .rd-metric-copy strong {
    color: #f8fbff;
    font-size: var(--rd-num);
    font-weight: 850;
    line-height: 1;
  }
  .ga-web .rd-metric-copy small {
    margin-top: 6px;
    overflow: hidden;
    color: var(--rd-ink-2);
    font-size: var(--rd-micro);
    font-weight: 750;
    letter-spacing: 0.045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ga-web .rd-console {
    display: grid;
    grid-template-columns: minmax(400px, 0.9fr) minmax(560px, 1.3fr);
    gap: 16px;
    height: clamp(500px, calc(100dvh - 226px), 1060px);
    min-height: 500px;
  }
  .ga-web .rd-queue-panel,
  .ga-web .rd-detail-panel {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--rd-line);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(15, 31, 48, 0.93), rgba(8, 20, 34, 0.92));
    box-shadow:
      0 16px 46px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }
  .ga-web .rd-queue-panel {
    display: flex;
    flex-direction: column;
  }
  .ga-web .rd-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 12px;
  }
  .ga-web .rd-panel-head h2 {
    margin: 0;
    color: #eef6ff;
    font-size: var(--rd-lg);
    font-weight: 800;
    letter-spacing: -0.015em;
  }
  .ga-web .rd-panel-head span {
    display: block;
    margin-top: 4px;
    color: var(--rd-ink-2);
    font-size: var(--rd-sm);
  }
  .ga-web .rd-search-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(112px, 0.42fr) minmax(138px, 0.55fr);
    gap: 8px;
    margin: 0 16px 11px;
  }
  .ga-web .rd-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(148, 181, 207, 0.14);
    border-radius: 11px;
    background: rgba(3, 12, 22, 0.48);
    color: var(--rd-ink-3);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .ga-web .rd-search:focus-within {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.09);
    color: #7dd3fc;
  }
  .ga-web .rd-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--rd-ink);
    font: 500 var(--rd-base)/1 inherit;
  }
  .ga-web .rd-search input::placeholder { color: #6a7f94; }
  .ga-web .rd-search > button {
    width: 26px;
    height: 26px;
    padding: 0;
    flex: 0 0 auto;
    border: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--rd-ink-2);
    font: 18px/24px inherit;
    cursor: pointer;
  }
  .ga-web .rd-search > button:hover { background: rgba(255, 255, 255, 0.13); color: var(--rd-ink); }
  .ga-web .rd-compact-filter {
    min-width: 0;
    height: 46px;
    padding: 0 30px 0 11px;
    border: 1px solid rgba(148, 181, 207, 0.14);
    border-radius: 11px;
    outline: none;
    background-color: rgba(3, 12, 22, 0.48);
    color: var(--rd-ink-2);
    font: 700 var(--rd-xs)/1 inherit;
    cursor: pointer;
  }
  .ga-web .rd-compact-filter:hover,
  .ga-web .rd-compact-filter:focus {
    border-color: rgba(56, 189, 248, 0.4);
    color: #d3e2f0;
  }
  .ga-web .rd-filters {
    display: flex;
    gap: 6px;
    padding: 0 16px 12px;
    overflow-x: auto;
  }
  .ga-web .rd-filters button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--rd-ink-2);
    font: 700 var(--rd-sm)/1 inherit;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .ga-web .rd-filters button:hover { color: #d3e2f0; background: rgba(255, 255, 255, 0.05); }
  .ga-web .rd-filters button span {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: #b6c7d8;
    font-size: var(--rd-xs);
    line-height: 21px;
    text-align: center;
  }
  .ga-web .rd-filters .rd-filter-active {
    border-color: rgba(56, 189, 248, 0.3);
    background: rgba(56, 189, 248, 0.12);
    color: #b7ecff;
  }
  .ga-web .rd-filters .rd-filter-active span {
    background: rgba(56, 189, 248, 0.22);
    color: #ddf5ff;
  }
  .ga-web .rd-drag-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px 9px;
    color: var(--rd-ink-3);
    font-size: var(--rd-micro);
  }
  .ga-web .rd-drag-hint span {
    color: var(--rd-ink-2);
    font-size: 13px;
    letter-spacing: -2px;
  }

  .ga-web .rd-queue {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 8px;
    padding: 3px 10px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ga-web .rd-ticket {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 104px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.14s, box-shadow 0.14s;
  }
  .ga-web .rd-ticket::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #3e6079;
  }
  .ga-web .rd-ticket-warn::before { background: #f59e0b; }
  .ga-web .rd-ticket-alert::before { background: #fb7185; }
  .ga-web .rd-ticket:hover {
    border-color: rgba(125, 211, 252, 0.22);
    background: rgba(56, 189, 248, 0.05);
    transform: translateY(-1px);
  }
  .ga-web .rd-ticket-selected {
    border-color: rgba(56, 189, 248, 0.44);
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.04));
    box-shadow: inset 4px 0 0 var(--rd-accent), 0 7px 20px rgba(0, 0, 0, 0.14);
  }
  .ga-web .rd-ticket-selected::before { display: none; }
  .ga-web .rd-ticket-dragging {
    opacity: 0.38;
    transform: scale(0.985);
  }
  .ga-web .rd-ticket-followup-due {
    border-color: rgba(251, 113, 133, 0.32);
    box-shadow: inset 0 0 22px rgba(244, 63, 94, 0.04);
  }
  .ga-web .rd-priority-2:not(.rd-ticket-selected)::before { width: 4px; background: #fb7185; }
  .ga-web .rd-priority-1:not(.rd-ticket-selected)::before { width: 4px; background: #fbbf24; }
  .ga-web .rd-ticket-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 9px 13px 14px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .ga-web .rd-drag-handle {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    margin-left: -8px;
    color: #52697f;
    font-size: 15px;
    letter-spacing: -2px;
    cursor: grab;
  }
  .ga-web .rd-ticket:active .rd-drag-handle { cursor: grabbing; }
  .ga-web .rd-room {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 62px;
    flex: 0 0 58px;
    flex-direction: column;
    border: 1px solid rgba(125, 211, 252, 0.15);
    border-radius: 11px;
    background: rgba(2, 13, 24, 0.46);
  }
  .ga-web .rd-room small {
    color: #7d94a9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .ga-web .rd-room strong {
    margin-top: 3px;
    color: #eef8ff;
    font-size: 23px;
    font-weight: 850;
    line-height: 1;
  }
  .ga-web .rd-ticket-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
  .ga-web .rd-ticket-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rd-ink-2);
    font-size: var(--rd-micro);
    font-weight: 750;
    text-transform: uppercase;
  }
  .ga-web .rd-ticket-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ga-web .rd-ticket-meta .rd-age {
    margin-left: auto;
    padding: 3px 7px;
    flex: 0 0 auto;
    border-radius: 6px;
    background: rgba(100, 116, 139, 0.14);
    color: #a9bbcd;
  }
  .ga-web .rd-ticket-meta .rd-age-warn { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
  .ga-web .rd-ticket-meta .rd-age-alert { background: rgba(244, 63, 94, 0.16); color: #fb8da1; }
  .ga-web .rd-priority-chip,
  .ga-web .rd-reminder-chip {
    padding: 3px 7px;
    flex: 0 0 auto;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
  }
  .ga-web .rd-priority-chip-1 { background: rgba(251, 191, 36, 0.13); color: #fbbf24; }
  .ga-web .rd-priority-chip-2 { background: rgba(251, 113, 133, 0.14); color: #fb8da1; }
  .ga-web .rd-reminder-chip { background: rgba(196, 181, 253, 0.11); color: #c4b5fd; }
  .ga-web .rd-reminder-chip.rd-reminder-due {
    background: rgba(244, 63, 94, 0.16);
    color: #fda4af;
  }
  /* Two lines, not one: at 12px/nowrap the title was clipped mid-word
     ("…but no laundry servi…") on almost every real ticket. */
  .ga-web .rd-ticket-title {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: #eaf2fa;
    font-size: var(--rd-md);
    font-weight: 750;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .ga-web .rd-ticket-action {
    align-self: center;
    min-width: 92px;
    min-height: 42px;
    margin: 0 11px 0 3px;
    padding: 0 14px;
    border: 1px solid;
    border-radius: 10px;
    font: 800 var(--rd-sm)/1 inherit;
    cursor: pointer;
    transition: transform 0.12s, filter 0.12s;
  }
  .ga-web .rd-ticket-action:hover { transform: translateY(-1px); filter: brightness(1.12); }
  .ga-web .rd-ticket-action:disabled { opacity: 0.5; cursor: wait; }
  .ga-web .rd-action-start {
    border-color: rgba(56, 189, 248, 0.34) !important;
    background: rgba(56, 189, 248, 0.13) !important;
    color: #9be2ff !important;
  }
  .ga-web .rd-action-done {
    border-color: rgba(52, 211, 153, 0.32) !important;
    background: rgba(52, 211, 153, 0.12) !important;
    color: #7cebc0 !important;
  }
  .ga-web .rd-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    color: var(--rd-ink-2);
    font-size: var(--rd-base);
    text-align: center;
  }
  .ga-web .rd-empty-icon {
    display: inline-flex;
    padding: 13px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 13px;
    background: rgba(56, 189, 248, 0.05);
    color: #7cb9d4;
  }

  .ga-web .rd-detail-panel {
    display: flex;
    flex-direction: column;
  }
  .ga-web .rd-select-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 36px;
    flex-direction: column;
    text-align: center;
  }
  .ga-web .rd-select-empty > span {
    display: inline-flex;
    padding: 18px;
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 18px;
    background: rgba(56, 189, 248, 0.06);
    color: #7dd3fc;
  }
  .ga-web .rd-select-empty h2 { margin: 18px 0 8px; color: #eff7ff; font-size: var(--rd-xl); }
  .ga-web .rd-select-empty p { max-width: 420px; margin: 0; color: var(--rd-ink-2); font-size: var(--rd-base); line-height: 1.55; }
  .ga-web .rd-detail-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(3, 13, 24, 0.21);
  }
  .ga-web .rd-detail-room {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 62px;
    flex-direction: column;
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(56, 189, 248, 0.13), rgba(56, 189, 248, 0.03));
  }
  .ga-web .rd-detail-room span { color: #8aa5bd; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
  .ga-web .rd-detail-room strong { color: #f5fbff; font-size: 25px; font-weight: 850; line-height: 1.15; }
  .ga-web .rd-detail-heading { min-width: 0; }
  .ga-web .rd-detail-heading > div { display: flex; align-items: center; gap: 8px; }
  .ga-web .rd-category {
    overflow: hidden;
    color: #b0c2d4;
    font-size: var(--rd-micro);
    font-weight: 800;
    letter-spacing: 0.045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .ga-web .rd-status {
    padding: 4px 8px;
    flex: 0 0 auto;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.12);
    color: #b0bfd0;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .ga-web .rd-status-actioned { background: rgba(245, 158, 11, 0.13); color: #fbbf24; }
  /* The AI-constructed ticket is operational context, so the detail view must
     never hide part of it behind a line clamp. Queue cards remain compact. */
  .ga-web .rd-detail-heading h2 {
    margin: 7px 0 0;
    color: #f2f8fd;
    font-size: var(--rd-xl);
    font-weight: 780;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }
  .ga-web .rd-detail-heading p { margin: 6px 0 0; color: var(--rd-ink-2); font-size: var(--rd-sm); }
  .ga-web .rd-detail-actions { display: flex; align-items: center; gap: 8px; }
  .ga-web .rd-detail-actions button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid;
    border-radius: 10px;
    font: 800 var(--rd-sm)/1 inherit;
    cursor: pointer;
  }
  .ga-web .rd-detail-actions button:disabled,
  .ga-web .rd-staff-update-actions button:disabled {
    opacity: 0.48;
    cursor: wait;
    filter: saturate(0.6);
  }
  .ga-web .rd-detail-actions .rd-action-cancel {
    border-color: rgba(251, 113, 133, 0.24);
    background: rgba(251, 113, 133, 0.06);
    color: #eb9aa7;
  }
  .ga-web .rd-detail-actions .rd-action-cancel:hover { background: rgba(251, 113, 133, 0.12); color: #fda4af; }

  .ga-web .rd-guest-request {
    margin: 14px 18px 0;
    padding: 14px 16px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.045);
  }
  .ga-web .rd-guest-request span {
    display: block;
    color: #7f9db7;
    font-size: var(--rd-micro);
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }
  .ga-web .rd-guest-request p {
    margin: 7px 0 0;
    color: #edf6fd;
    font-size: var(--rd-base);
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .ga-web .rd-lifecycle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(3, 13, 24, 0.22);
  }
  .ga-web .rd-lifecycle span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 9px;
    flex: 0 0 auto;
    border: 1px solid rgba(148, 181, 207, 0.12);
    border-radius: 999px;
    color: var(--rd-ink-3);
    font-size: var(--rd-xs);
    font-weight: 750;
    white-space: nowrap;
  }
  .ga-web .rd-lifecycle span i {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 50%;
    background: rgba(148, 181, 207, 0.12);
    font-size: 10px;
    font-style: normal;
  }
  .ga-web .rd-lifecycle > b { color: #53697f; font-size: 12px; }
  .ga-web .rd-lifecycle .rd-life-active {
    border-color: rgba(56, 189, 248, 0.32);
    background: rgba(56, 189, 248, 0.1);
    color: #bcecff;
  }
  .ga-web .rd-lifecycle .rd-life-active i {
    background: #38bdf8;
    color: #06111e;
  }
  .ga-web .rd-lifecycle .rd-life-complete {
    border-color: rgba(52, 211, 153, 0.22);
    color: #6ee7b7;
  }
  .ga-web .rd-lifecycle .rd-life-complete i {
    background: rgba(52, 211, 153, 0.18);
  }

  .ga-web .rd-operational-context {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(210px, 1fr) minmax(280px, 1.4fr);
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }
  .ga-web .rd-operational-context > span {
    display: flex;
    min-width: 0;
    padding: 9px 11px;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
  }
  .ga-web .rd-operational-context small {
    color: var(--rd-ink-3);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .ga-web .rd-operational-context strong {
    overflow: hidden;
    color: #cfdcea;
    font-size: var(--rd-xs);
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
  }
  .ga-web .rd-operational-context .rd-booking-truth {
    border-color: rgba(251, 191, 36, 0.17);
    background: rgba(251, 191, 36, 0.045);
  }
  .ga-web .rd-booking-truth small { color: #f6c453; }

  .ga-web .rd-triage-tools {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(400px, 1.2fr);
    gap: 16px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(3, 13, 24, 0.3);
  }
  .ga-web .rd-tool-group {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
  }
  .ga-web .rd-tool-group > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rd-ink-2);
    font-size: var(--rd-micro);
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  /* The live countdown — the only durable read-out of a follow-up, since
     remind_at is stored absolute and no preset can be highlighted after a
     reload. It used to be 8px, absolutely positioned in the corner. */
  .ga-web .rd-reminder-state {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(196, 181, 253, 0.14);
    color: #cdbdff;
    font-size: var(--rd-xs);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
  }
  .ga-web .rd-reminder-state.rd-reminder-overdue {
    background: rgba(244, 63, 94, 0.18);
    color: #fda4af;
  }
  .ga-web .rd-segmented {
    display: flex;
    min-width: 0;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 10px;
    background: rgba(1, 9, 18, 0.42);
  }
  .ga-web .rd-segmented button {
    min-width: 0;
    min-height: 34px;
    padding: 0 10px;
    overflow: hidden;
    flex: 1;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--rd-ink-2);
    font: 700 var(--rd-xs)/1 inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .ga-web .rd-segmented button:hover { color: #d3e2f0; background: rgba(255, 255, 255, 0.045); }
  .ga-web .rd-segmented button.rd-segment-active {
    background: rgba(56, 189, 248, 0.14);
    color: #b7ecff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
  }
  .ga-web .rd-segmented button.rd-segment-priority-1 { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
  .ga-web .rd-segmented button.rd-segment-priority-2 { background: rgba(251, 113, 133, 0.16); color: #fda4af; }

  .ga-web .rd-detail-body {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 13px 18px 0;
    overflow-y: auto;
  }
  /* The request summary stays compact and always visible; the conversation
     takes every remaining pixel and scrolls inside itself, so the messages
     the operator came to read are on screen without scrolling the panel. */
  .ga-web .rd-request-context { flex: 0 0 auto; }
  .ga-web .rd-section-label {
    margin-bottom: 7px;
    color: var(--rd-ink-2);
    font-size: var(--rd-micro);
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .ga-web .rd-context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .ga-web .rd-context-grid > div {
    min-width: 0;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.025);
  }
  .ga-web .rd-context-grid > div > span {
    color: var(--rd-ink-2);
    font-size: var(--rd-micro);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .ga-web .rd-context-grid p {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: #cfdcea;
    font-size: var(--rd-base);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .ga-web .rd-context-grid .rd-ai-context {
    border-color: rgba(52, 211, 153, 0.12);
    background: rgba(52, 211, 153, 0.04);
  }
  .ga-web .rd-context-grid .rd-ai-context .rd-context-label-row > span {
    color: #6fcfb0;
  }
  .ga-web .rd-context-grid .rd-ai-context .rd-context-label-row strong {
    background: rgba(52, 211, 153, 0.1);
    color: #86efc2;
  }
  .ga-web .rd-translation-warning {
    display: block;
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.06);
    color: #f6cd70;
    font-size: var(--rd-xs);
    font-style: normal;
    line-height: 1.4;
  }
  .ga-web .rd-context-photo {
    width: 100%;
    max-height: 170px;
    margin-top: 10px;
    object-fit: cover;
    border-radius: 11px;
  }

  .ga-web .rd-conversation {
    display: flex;
    min-height: 210px;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 13px;
    background: rgba(1, 9, 18, 0.31);
  }
  .ga-web .rd-conversation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .ga-web .rd-conversation-head h3 { margin: 0; color: #e5eff9; font-size: var(--rd-md); font-weight: 780; }
  .ga-web .rd-conversation-head span { display: block; margin-top: 3px; color: var(--rd-ink-2); font-size: var(--rd-xs); }
  .ga-web .rd-conversation-head span strong { color: #7dd3fc; }
  .ga-web .rd-conversation-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid rgba(56, 189, 248, 0.14);
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.05);
    color: #7cb9d4;
    cursor: pointer;
  }
  .ga-web .rd-conversation-head button:hover { background: rgba(56, 189, 248, 0.12); color: #bfeaff; }
  .ga-web .rd-thread {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 13px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ga-web .rd-thread-loading,
  .ga-web .rd-thread-empty,
  .ga-web .rd-thread-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    flex: 1;
    color: var(--rd-ink-2);
    font-size: var(--rd-base);
    text-align: center;
  }
  .ga-web .rd-thread-error { color: #fda4af; }
  .ga-web .rd-message {
    display: flex;
    align-items: flex-start;
    max-width: 80%;
    flex-direction: column;
  }
  .ga-web .rd-message-guest { align-self: flex-start; }
  .ga-web .rd-message-guesti { align-self: flex-end; align-items: flex-end; }
  .ga-web .rd-message-author {
    margin: 0 6px 4px;
    color: var(--rd-ink-2);
    font-size: var(--rd-micro);
    font-weight: 750;
  }
  .ga-web .rd-message-author span {
    margin-left: 6px;
    color: #6cc5e6;
    font-size: 10px;
    font-weight: 700;
  }
  .ga-web .rd-message-bubble {
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px 13px 13px 13px;
    background: rgba(255, 255, 255, 0.055);
    color: #dde7f2;
    font-size: var(--rd-base);
    line-height: 1.5;
    white-space: pre-wrap;
  }
  .ga-web .rd-message-guesti .rd-message-bubble {
    border-color: rgba(56, 189, 248, 0.18);
    border-radius: 13px 5px 13px 13px;
    background: rgba(56, 189, 248, 0.11);
    color: #e5f8ff;
  }
  .ga-web .rd-message time {
    margin: 5px 6px 0;
    color: var(--rd-ink-3);
    font-size: var(--rd-micro);
  }
  .ga-web .rd-message-original {
    max-width: 100%;
    margin: 5px 6px 0;
    color: var(--rd-ink-2);
    font-size: var(--rd-xs);
  }
  .ga-web .rd-message-original summary { cursor: pointer; }
  .ga-web .rd-message-original p {
    margin: 6px 0 0;
    padding: 8px 10px;
    border-left: 2px solid rgba(148, 163, 184, 0.2);
    color: #93a9bf;
    font-size: var(--rd-sm);
    line-height: 1.45;
  }
  .ga-web .rd-message-delivered {
    max-width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.04);
  }
  .ga-web .rd-message-delivered span {
    display: block;
    color: #6cb4cd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .ga-web .rd-message-delivered p {
    margin: 4px 0 0;
    color: #a3c8d8;
    font-size: var(--rd-sm);
    line-height: 1.45;
  }

  .ga-web .rd-composer {
    padding: 11px 18px 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(4, 14, 25, 0.72);
  }
  .ga-web .rd-quick-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--rd-ink-2);
    font-size: var(--rd-micro);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ga-web .rd-quick-head small {
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    font-size: var(--rd-micro);
  }
  .ga-web .rd-quick-replies {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    margin-bottom: 8px;
    padding-bottom: 3px;
    overflow-x: auto;
  }
  .ga-web .rd-quick-replies button {
    max-width: 280px;
    min-height: 34px;
    padding: 0 13px;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.055);
    color: #a3cfe2;
    font: 650 var(--rd-sm)/1.2 inherit;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.13s, background 0.13s, border-color 0.13s;
  }
  .ga-web .rd-quick-replies button:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.12);
    color: #d5f3ff;
  }
  .ga-web .rd-compose-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 10px;
  }
  .ga-web .rd-compose-field {
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 12px;
    background: rgba(1, 9, 18, 0.52);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .ga-web .rd-compose-field:focus-within {
    border-color: rgba(56, 189, 248, 0.48);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.08);
  }
  .ga-web .rd-compose-field textarea {
    display: block;
    width: 100%;
    min-height: 60px;
    max-height: 170px;
    padding: 11px 14px 5px;
    resize: vertical;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    color: #eff7ff;
    font: 500 var(--rd-base)/1.5 inherit;
  }
  .ga-web .rd-compose-field textarea::placeholder { color: #5f7488; }
  .ga-web .rd-compose-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px 9px;
    color: var(--rd-ink-3);
    font-size: var(--rd-micro);
  }
  .ga-web .rd-compose-hint-right {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
  }
  .ga-web .rd-compose-hint kbd {
    padding: 2px 7px;
    border: 1px solid rgba(148, 181, 207, 0.2);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--rd-ink-2);
    font: 700 var(--rd-micro)/1.5 inherit;
  }
  .ga-web .rd-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    min-height: 82px;
    padding: 10px;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(56, 189, 248, 0.48);
    border-radius: 12px;
    background: linear-gradient(145deg, #24a9df, #177dad);
    box-shadow: 0 8px 20px rgba(14, 116, 161, 0.2);
    color: #f7fcff;
    font: 800 var(--rd-sm)/1.2 inherit;
    cursor: pointer;
    text-align: center;
    transition: transform 0.14s, box-shadow 0.14s, filter 0.14s;
  }

  .ga-web .rd-ticket-attachment {
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(4, 14, 25, 0.48);
  }

  .ga-web .rd-ticket-attachment .rd-context-photo {
    width: auto;
    max-width: min(320px, 100%);
    max-height: 220px;
    margin: 0;
    object-fit: contain;
  }
  .ga-web .rd-send:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(14, 116, 161, 0.3);
  }
  .ga-web .rd-send:disabled {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(148, 163, 184, 0.07);
    box-shadow: none;
    color: #6a7f94;
    cursor: not-allowed;
    filter: none;
    transform: none;
  }
}
/* A windowed desktop still gets the desktop controls and rail, but the
   master/detail panes stack so neither becomes a cramped phone-width column. */
@media (min-width: 900px) and (max-width: 1199px) {
  .ga-web .rd-console {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .ga-web .rd-queue-panel { min-height: 480px; max-height: 640px; }
  .ga-web .rd-detail-panel { min-height: 700px; }
  .ga-web .rd-triage-tools { grid-template-columns: minmax(0, 1fr); }
  .ga-web .rd-zero-state {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "art copy"
      "stats stats"
      "refresh refresh";
  }
  .ga-web .rd-zero-refresh { justify-self: end; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .ga-web .rd-workspace { padding-left: 20px; padding-right: 20px; }
  .ga-web .rd-console { grid-template-columns: minmax(360px, 0.85fr) minmax(500px, 1.15fr); }
  .ga-web .rd-search-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ga-web .rd-search { grid-column: 1 / -1; }
  .ga-web .rd-ticket-action { min-width: 76px; padding-left: 9px; padding-right: 9px; }
  .ga-web .rd-detail-actions { flex-direction: column; }
  .ga-web .rd-detail-actions button { width: 96px; min-height: 34px; }
  .ga-web .rd-triage-tools { grid-template-columns: minmax(0, 1fr); }
  /* The guest's own words stay on screen. The previous build hid this whole
     block at these widths, which left the operator replying to a ticket
     without the sentence that created it. Single column + clamp instead. */
  .ga-web .rd-context-grid { grid-template-columns: minmax(0, 1fr); }
  .ga-web .rd-context-grid p { -webkit-line-clamp: 3; }
  .ga-web .rd-operational-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ga-web .rd-operational-context .rd-booking-truth {
    grid-column: 1 / -1;
  }
  .ga-web .rd-quick-replies {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
/* Compact shift workstation: keep attention on urgency and the next action. */
@media (min-width: 900px) {
  .ga-web .od-shell-rail-compact {
    flex-basis: 88px;
    width: 88px;
    padding: 10px 9px 18px;
    /* Staff has a deliberately short icon set, so let translated tooltips and
       the language popover escape the rail instead of being clipped by the
       owner rail's independent scroller. */
    overflow: visible;
  }
  .ga-web .od-shell-rail-compact .od-shell-brand {
    justify-content: center;
    padding: 10px 0 14px;
  }
  .ga-web .od-shell-rail-compact .od-shell-brand-text,
  .ga-web .od-shell-rail-compact .od-shell-me-body,
  .ga-web .od-shell-rail-compact .od-hub-group-title,
  .ga-web .od-shell-rail-compact .od-hub-row-body,
  .ga-web .od-shell-rail-compact .od-hub-row-chevron,
  .ga-web .od-shell-rail-compact .od-hub-pill {
    display: none;
  }
  .ga-web .od-shell-rail-compact .od-shell-me {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 12px;
  }
  .ga-web .od-shell-rail-compact .od-shell-me-avatar {
    width: 40px;
    height: 40px;
  }
  .ga-web .od-shell-rail-compact .od-shell-me-bell {
    margin-left: 0;
  }
  .ga-web .od-shell-rail-compact .od-hub-group {
    position: relative;
    margin: 7px 0;
  }
  .ga-web .od-shell-rail-compact .od-hub-row {
    position: relative;
    justify-content: center;
    width: 56px;
    min-height: 52px;
    margin: 0 auto 5px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 14px;
  }
  .ga-web .od-shell-rail-compact .od-hub-row-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }
  .ga-web .od-shell-rail-compact .od-hub-row-icon svg {
    width: 21px;
    height: 21px;
  }
  .ga-web .od-shell-rail-compact .od-hub-row-active {
    border-color: rgba(56, 189, 248, 0.34);
    background: rgba(56, 189, 248, 0.12);
  }
  .ga-web .od-shell-rail-compact .od-hub-status-light {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 10px;
    height: 10px;
    border-color: #07121f;
  }
  .ga-web .od-shell-rail-compact .od-hub-row::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 120;
    top: 50%;
    left: calc(100% + 12px);
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 8px;
    background: #101f30;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
    color: #edf7ff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    pointer-events: none;
    opacity: 0;
    transform: translate(4px, -50%);
    transition: opacity 0.12s, transform 0.12s;
  }
  .ga-web .od-shell-rail-compact .od-hub-row:hover::after,
  .ga-web .od-shell-rail-compact .od-hub-row:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
  .ga-web .od-shell-rail-compact .od-hub-row[aria-expanded="true"]::after { display: none; }
  .ga-web .od-shell-rail-compact .od-toggle {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 13px;
    height: 13px;
    border: 2px solid #07121f;
    border-radius: 50%;
  }
  .ga-web .od-shell-rail-compact .od-toggle-knob { display: none; }
  .ga-web .od-shell-rail-compact .od-hub-inline {
    position: fixed;
    z-index: 110;
    top: 50%;
    left: 66px;
    bottom: auto;
    width: 248px;
    padding: 8px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 12px;
    background: #0c1928;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
    transform: translateY(-50%);
  }
  .ga-web .od-shell-rail-compact .od-alert-toggle-row .od-toggle {
    position: relative;
    right: auto;
    bottom: auto;
    width: 38px;
    height: 22px;
    border: 0;
    border-radius: 999px;
  }
  .ga-web .od-shell-rail-compact .od-alert-toggle-row .od-toggle-knob {
    display: block;
  }

  .ga-web .rd-header { align-items: center; margin-bottom: 10px; }
  .ga-web .rd-header-actions { align-items: stretch; }
  .ga-web .rd-live-clock,
  .ga-web .rd-room-counter {
    display: flex;
    justify-content: center;
    min-height: 48px;
    padding: 7px 13px;
    box-sizing: border-box;
    flex-direction: column;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 12px;
    background: rgba(5, 18, 31, 0.58);
  }
  .ga-web .rd-live-clock span {
    color: #f4f9ff;
    font-size: 22px;
    font-weight: 850;
    line-height: 1;
  }
  .ga-web .rd-live-clock small,
  .ga-web .rd-room-counter small {
    margin-top: 4px;
    color: #8ea4b8;
    font-size: 10px;
    font-weight: 750;
    text-transform: capitalize;
  }
  .ga-web .rd-room-counter {
    position: relative;
    min-width: 82px;
    padding-left: 38px;
  }
  .ga-web .rd-room-counter svg {
    position: absolute;
    left: 12px;
    color: #5eead4;
  }
  .ga-web .rd-room-counter strong { font-size: 17px; color: #eef8ff; }

  .ga-web .rd-metrics {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  .ga-web .rd-metric {
    min-width: 0;
    max-width: 178px;
    min-height: 48px;
    padding: 7px 11px;
    flex: 1 1 0;
    gap: 9px;
    border-radius: 11px;
  }
  .ga-web .rd-metric-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
  }
  .ga-web .rd-metric-icon svg { width: 16px; height: 16px; }
  .ga-web .rd-metric-copy { flex-direction: row; align-items: baseline; gap: 7px; }
  .ga-web .rd-metric-copy strong { font-size: 22px; }
  .ga-web .rd-metric-copy small {
    margin-top: 0;
    font-size: 9px;
    line-height: 1.2;
    white-space: normal;
  }
  .ga-web .rd-console {
    height: clamp(500px, calc(100dvh - 194px), 1060px);
  }
  .ga-web .rd-panel-head { padding: 13px 16px 8px; }
  .ga-web .rd-due-summary {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    padding: 6px 9px;
    border: 1px solid rgba(251, 113, 133, 0.28);
    border-radius: 8px;
    background: rgba(251, 113, 133, 0.09);
    color: #fda4af !important;
    font-weight: 850;
  }
  .ga-web .rd-search-row {
    display: flex;
    gap: 7px;
    margin: 0 12px 7px;
  }
  .ga-web .rd-search { height: 40px; flex: 1; }
  .ga-web .rd-filter-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
    padding: 0;
    flex: 0 0 42px;
    border: 1px solid rgba(148, 181, 207, 0.16);
    border-radius: 10px;
    background: rgba(3, 12, 22, 0.48);
    color: #8fa6bb;
    cursor: pointer;
  }
  .ga-web .rd-filter-toggle:hover,
  .ga-web .rd-filter-toggle-active {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.1);
    color: #aee7ff;
  }
  .ga-web .rd-filter-toggle span {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #38bdf8;
    color: #04111e;
    font-size: 10px;
    font-weight: 900;
    line-height: 17px;
  }
  .ga-web .rd-filters {
    gap: 4px;
    padding: 0 12px 8px;
  }
  .ga-web .rd-filters button {
    min-height: 30px;
    padding: 0 8px;
    gap: 5px;
    font-size: 12px;
    border-radius: 8px;
  }
  .ga-web .rd-filters button span {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    line-height: 18px;
  }
  .ga-web .rd-advanced-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 0 12px 8px;
    padding: 8px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 10px;
    background: rgba(2, 11, 20, 0.5);
  }
  .ga-web .rd-advanced-filters .rd-compact-filter { height: 36px; }

  .ga-web .rd-ticket::before {
    display: block;
    width: 4px;
    transform-origin: center;
  }
  /* Aging motion begins only after 20 minutes. Every ten minutes increases
     speed and glow; the fourth tier caps the intensity to avoid strobing. */
  .ga-web .rd-age-pulse-1::before,
  .ga-web .rd-age-pulse-2::before,
  .ga-web .rd-age-pulse-3::before,
  .ga-web .rd-age-pulse-4::before {
    animation-name: rd-ticket-signal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: calc(var(--rd-ticket-index, 0) * 90ms);
  }
  .ga-web .rd-age-pulse-1::before { animation-duration: 2.8s; --rd-signal-low: 0.58; --rd-signal-scale: 0.80; }
  .ga-web .rd-age-pulse-2::before { animation-duration: 2.1s; --rd-signal-low: 0.46; --rd-signal-scale: 0.72; }
  .ga-web .rd-age-pulse-3::before { animation-duration: 1.45s; --rd-signal-low: 0.34; --rd-signal-scale: 0.64; box-shadow: 0 0 15px rgba(251, 113, 133, 0.52); }
  .ga-web .rd-age-pulse-4::before { animation-duration: 0.95s; --rd-signal-low: 0.22; --rd-signal-scale: 0.56; box-shadow: 0 0 19px rgba(251, 113, 133, 0.68); }
  .ga-web .rd-ticket-selected {
    border-color: rgba(226, 237, 247, 0.24);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 0 0 1px rgba(226, 237, 247, 0.08), 0 7px 20px rgba(0, 0, 0, 0.14);
  }
  .ga-web .rd-ticket-selected::before { display: block; }
  .ga-web .rd-priority-2::before,
  .ga-web .rd-ticket-alert::before { width: 5px; background: #fb7185; box-shadow: 0 0 13px rgba(251, 113, 133, 0.4); }
  .ga-web .rd-priority-1::before,
  .ga-web .rd-ticket-warn::before { width: 5px; background: #fbbf24; box-shadow: 0 0 11px rgba(251, 191, 36, 0.3); }
  .ga-web .rd-ticket-selected.rd-priority-2,
  .ga-web .rd-ticket-selected.rd-ticket-alert {
    border-color: rgba(251, 113, 133, 0.38);
    background: linear-gradient(90deg, rgba(251, 113, 133, 0.10), rgba(255, 255, 255, 0.025));
  }
  .ga-web .rd-ticket-selected.rd-priority-1,
  .ga-web .rd-ticket-selected.rd-ticket-warn {
    border-color: rgba(251, 191, 36, 0.34);
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.08), rgba(255, 255, 255, 0.025));
  }
  @keyframes rd-ticket-signal {
    0%, 100% { opacity: var(--rd-signal-low, 0.62); transform: scaleY(var(--rd-signal-scale, 0.78)); }
    50% { opacity: 1; transform: scaleY(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ga-web .rd-workspace *,
  .ga-web .rd-workspace *::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ga-web .rd-ticket:hover,
  .ga-web .rd-refresh:hover,
  .ga-web .rd-send:hover,
  .ga-web .rd-ticket-action:hover { transform: none; }
}
/* ════════════════════════════════════════════════════════════════════
   WEB ADMIN DESKTOP SYSTEM — all signed-in roles
   The rail was already desktop-native; the pages beside it still inherited
   phone widths, full-width CTAs and touch-only spacing. These rules establish
   one readable content canvas across owner, manager and every department.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .ga-web .od-shell-main > .page {
    height: 100%;
    overflow: hidden;
  }
  .ga-web .od-shell-main .od-page {
    min-height: 100%;
    padding-bottom: 40px;
  }

  /* The rail is the way back on desktop. Remove mobile chevrons and turn each
     page's header into a calm desktop title row. */
  .ga-web .od-shell .od-back-btn { display: none; }
  .ga-web .od-shell-main .od-page > .od-topbar:not(.od-topbar-dashboard) {
    width: min(100%, 1440px);
    min-height: 70px;
    margin: 0 auto;
    padding: 22px clamp(24px, 3vw, 42px) 13px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }
  .ga-web .od-shell-main .od-topbar-brand-text,
  .ga-web .od-shell-main .od-topbar-center .od-topbar-brand-text {
    color: #f5f9fd;
    font-size: 22px;
    font-weight: 820;
    letter-spacing: -0.025em;
  }
  .ga-web .od-shell-main .od-topbar-tld {
    color: #71849a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
  }

  /* Consistent working width. No more 13px rows stretched from the rail to the
     far edge of an ultrawide monitor. */
  .ga-web .od-shell-main .od-page > .od-section,
  .ga-web .od-shell-main .od-page > .od-filters,
  .ga-web .od-shell-main .od-page > .od-banner,
  .ga-web .od-shell-main .od-page > .od-trial-banner,
  .ga-web .od-shell-main .od-page > .od-allclear,
  .ga-web .od-shell-main .od-page > .od-empty,
  .ga-web .od-shell-main .od-page > .od-footer {
    width: min(calc(100% - 48px), 1280px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .ga-web .od-shell-main .od-page > .od-section {
    padding-left: 0;
    padding-right: 0;
  }
  .ga-web .od-shell-main .od-page > .od-filters {
    justify-content: flex-start;
    padding: 12px 0 2px;
    overflow-x: auto;
  }
  .ga-web .od-shell-main .od-filter {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 12px;
    cursor: pointer;
  }
  .ga-web .od-shell-main .od-section-head { min-height: 38px; }
  .ga-web .od-shell-main .od-section-title {
    font-size: 15px;
    letter-spacing: -0.01em;
  }

  /* Lists become desktop tables/cards: restrained density, clear hover and
     keyboard focus, actions stay at the row's right edge. */
  .ga-web .od-shell-main .od-reqs {
    overflow: hidden;
    border-radius: 14px;
  }
  .ga-web .od-shell-main .od-req {
    min-height: 58px;
    padding: 11px 14px;
    transition: border-color 0.14s, background 0.14s, transform 0.14s;
  }
  .ga-web .od-shell-main .od-req:hover {
    border-color: rgba(56, 189, 248, 0.2);
    background: rgba(56, 189, 248, 0.045);
  }
  .ga-web .od-shell-main .od-req-btn,
  .ga-web .od-shell-main .od-modal-btn,
  .ga-web .od-shell-main button {
    font-family: inherit;
  }
  .ga-web .od-shell-main :where(button, input, textarea, select):focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.8);
    outline-offset: 2px;
  }

  /* Full-width phone CTAs/forms become deliberate desktop objects. */
  .ga-web .od-shell-main .od-cta {
    width: auto;
    min-width: 190px;
    max-width: 320px;
    min-height: 42px;
    margin-left: 0;
    padding: 0 20px;
    border-radius: 10px;
  }
  .ga-web .od-shell-main .od-form {
    max-width: 820px;
    padding: 22px;
    border-radius: 15px;
  }
  .ga-web .od-shell-main .od-form-actions {
    justify-content: flex-end;
  }
  .ga-web .od-shell-main .od-input {
    min-height: 40px;
    box-sizing: border-box;
  }
  .ga-web .od-shell-main .od-dept-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
  }

  /* Desktop switch: slightly larger hit area and an explicit high-contrast
     thumb. This also protects against a blank capsule if theme CSS changes. */
  .ga-web .od-toggle {
    width: 42px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
  }
  .ga-web .od-toggle-knob {
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(2, 8, 23, 0.16);
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.38);
  }
  .ga-web .od-toggle-on {
    border-color: rgba(125, 211, 252, 0.6);
    background: #38bdf8 !important;
  }
  .ga-web .od-toggle-on .od-toggle-knob { transform: translateX(18px); }

  /* Settings uses the full useful pane width. Individual cards are substantial
     but no longer span an empty 1400px canvas. */
  .ga-web .od-set-pane {
    width: min(100%, 1220px);
    max-width: none;
    margin: 0 auto;
    padding: 28px clamp(26px, 3.2vw, 46px) 36px;
    box-sizing: border-box;
  }
  .ga-web .od-set-pane-title {
    margin: 0 0 18px;
    font-size: 24px;
    letter-spacing: -0.025em;
  }
  .ga-web .od-set-pane .od-settings-card {
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
  }
  .ga-web .od-set-pane .od-settings-row {
    min-height: 58px;
    padding: 13px 15px;
    box-sizing: border-box;
  }
  .ga-web .od-set-pane .od-settings-help {
    max-width: 760px;
    line-height: 1.5;
  }

  /* Menu / knowledge accordion heads read like desktop modules. */
  .ga-web .od-shell-main .od-menu-cat-head {
    min-height: 72px;
    padding: 12px 16px;
    border-radius: 13px;
  }
  .ga-web .od-shell-main .od-menu-cat-head:hover {
    border-color: rgba(56, 189, 248, 0.24);
    background: rgba(56, 189, 248, 0.045);
  }
  .ga-web .od-shell-main .od-menu-cat-name { font-size: 15px; }
  .ga-web .od-shell-main .od-menu-add-row {
    max-width: 260px;
    min-height: 38px;
  }

  /* The footer belongs to the canvas, not the first phone-sized column. */
  .ga-web .od-shell-main .od-footer { padding-top: 24px; }
}
/* ════════════════════════════════════════════════════════════════════
   DEPARTMENT DESKTOP WORKSTATION
   Reception and department staff share the same dense master/detail shell.
   Role capabilities decide whether the right side is a conversation composer
   (Reception) or an approved guest-update console (Spa/other departments).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* The zmp Page itself used to remain cream below short staff dashboards.
     Paint every layer in the shell so an empty queue still fills the monitor. */
  .ga-web .od-shell-main,
  .ga-web .od-shell-main > .page,
  .ga-web .od-shell-main > .zaui-page {
    min-height: 100%;
    background:
      radial-gradient(ellipse 92% 50% at 50% 0%, rgba(56, 189, 248, 0.10), transparent 58%),
      #070e1a !important;
  }
  .ga-web .od-shell-main > .page {
    height: 100%;
    border: 0;
  }

  .ga-web .rd-workspace-spa {
    --rd-accent: #c084fc;
  }
  .ga-web .rd-workspace-spa .rd-eyebrow { color: #d8b4fe; }
  .ga-web .rd-workspace-spa .rd-refresh {
    border-color: rgba(192, 132, 252, 0.28);
    background: rgba(192, 132, 252, 0.08);
    color: #e9d5ff;
  }
  .ga-web .rd-workspace-spa .rd-refresh:hover {
    border-color: rgba(192, 132, 252, 0.48);
    background: rgba(192, 132, 252, 0.14);
  }
  .ga-web .rd-metric-done { color: #6ee7b7; }

  /* A real empty-state dashboard instead of a 170px dark strip above a blank
     page. It keeps the shift context visible without manufacturing busywork. */
  .ga-web .rd-zero-state {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) minmax(270px, auto);
    grid-template-areas:
      "art copy stats"
      "art copy refresh";
    align-items: center;
    gap: clamp(20px, 3vw, 42px);
    min-height: clamp(360px, calc(100vh - 310px), 620px);
    padding: clamp(36px, 5vw, 74px);
    overflow: hidden;
    border: 1px solid rgba(135, 178, 211, 0.14);
    border-radius: 22px;
    background:
      radial-gradient(circle at 12% 50%, rgba(56, 189, 248, 0.11), transparent 34%),
      linear-gradient(145deg, rgba(15, 31, 48, 0.94), rgba(7, 18, 31, 0.94));
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }
  .ga-web .rd-zero-art { grid-area: art; }
  .ga-web .rd-zero-copy { grid-area: copy; min-width: 0; }
  .ga-web .rd-zero-stats { grid-area: stats; }
  .ga-web .rd-zero-refresh {
    grid-area: refresh;
    justify-self: end;
  }
  .ga-web .rd-workspace-spa .rd-zero-state {
    background:
      radial-gradient(circle at 12% 50%, rgba(192, 132, 252, 0.13), transparent 35%),
      radial-gradient(circle at 82% 16%, rgba(45, 212, 191, 0.06), transparent 30%),
      linear-gradient(145deg, rgba(18, 29, 48, 0.96), rgba(8, 18, 32, 0.95));
  }
  .ga-web .rd-zero-art {
    position: relative;
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
  }
  .ga-web .rd-zero-art::before,
  .ga-web .rd-zero-art i {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 34px;
    background: rgba(56, 189, 248, 0.07);
    transform: rotate(9deg);
  }
  .ga-web .rd-zero-art i {
    inset: 12px;
    border-color: rgba(125, 211, 252, 0.15);
    border-radius: 26px;
    background: rgba(4, 18, 31, 0.72);
    transform: rotate(-16deg);
  }
  .ga-web .rd-workspace-spa .rd-zero-art::before {
    border-color: rgba(216, 180, 254, 0.25);
    background: rgba(192, 132, 252, 0.09);
  }
  .ga-web .rd-zero-art > span {
    position: relative;
    z-index: 1;
    font-size: 42px;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3));
  }
  .ga-web .rd-zero-copy { max-width: 620px; }
  .ga-web .rd-zero-kicker {
    display: inline-flex;
    padding: 6px 10px;
    border: 1px solid rgba(52, 211, 153, 0.22);
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.08);
    color: #6ee7b7;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .ga-web .rd-zero-copy h2 {
    margin: 14px 0 8px;
    color: #f6faff;
    font-size: clamp(25px, 2.4vw, 36px);
    font-weight: 820;
    letter-spacing: -0.035em;
  }
  .ga-web .rd-zero-copy p {
    max-width: 590px;
    margin: 0;
    color: #9fb2c5;
    font-size: 14px;
    line-height: 1.65;
  }
  .ga-web .rd-zero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(2, 12, 22, 0.35);
  }
  .ga-web .rd-zero-stats span {
    display: flex;
    min-width: 104px;
    padding: 13px 15px;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.055);
    color: #8398ad;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .ga-web .rd-zero-stats span:last-child { border-right: 0; }
  .ga-web .rd-zero-stats strong {
    color: #e9f3fc;
    font-size: 23px;
    line-height: 1;
  }
  .ga-web .rd-zero-refresh { align-self: center; }

  /* Language is operational context, not hidden metadata. Queue chips make it
     obvious that the visible summary is in the staff language. */
  .ga-web .rd-language-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border: 1px solid rgba(125, 211, 252, 0.13);
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.055);
    color: #88bfd5;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
  }

  .ga-web .rd-context-grid-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ga-web .rd-context-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .ga-web .rd-context-label-row > span {
    color: var(--rd-ink-2);
    font-size: var(--rd-micro);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .ga-web .rd-context-label-row strong {
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.09);
    color: #8bd6f2;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }
  .ga-web .rd-context-grid .rd-translation-context {
    border-color: rgba(56, 189, 248, 0.13);
    background: rgba(56, 189, 248, 0.045);
  }
  .ga-web .rd-context-grid .rd-original-context {
    border-color: rgba(196, 181, 253, 0.12);
    background: rgba(196, 181, 253, 0.035);
  }

  .ga-web .ga-sheet-preview-error {
    border-color: rgba(251, 113, 133, 0.28);
    background: rgba(251, 113, 133, 0.07);
  }
  .ga-web .ga-sheet-preview-error span,
  .ga-web .ga-sheet-preview-error p {
    color: #fda4af;
  }
  .ga-web .rd-original-context .rd-context-label-row strong {
    background: rgba(196, 181, 253, 0.1);
    color: #c9bcf5;
  }

  /* Department roles do not have Reception's free-text/transcript permission.
     Their pane prioritises the exact request and explicit approved updates. */
  .ga-web .rd-workspace-department .rd-console {
    grid-template-columns: minmax(390px, 0.82fr) minmax(540px, 1.18fr);
  }
  .ga-web .rd-workspace-department .rd-detail-body {
    padding-bottom: 16px;
  }
  .ga-web .rd-workspace-department .rd-context-grid p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
  .ga-web .rd-workspace-department .rd-detail-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    width: 100%;
  }
  .ga-web .rd-workspace-department .rd-detail-head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "room heading"
      "actions actions";
  }
  .ga-web .rd-workspace-department .rd-detail-room { grid-area: room; }
  .ga-web .rd-workspace-department .rd-detail-heading { grid-area: heading; }
  .ga-web .rd-workspace-department .rd-detail-actions { grid-area: actions; }
  .ga-web .rd-workspace-department .rd-detail-actions button {
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .ga-web .rd-detail-actions .rd-action-delay {
    border-color: rgba(251, 191, 36, 0.26);
    background: rgba(251, 191, 36, 0.07);
    color: #fcd66d;
  }
  .ga-web .rd-detail-actions .rd-action-delay:hover {
    background: rgba(251, 191, 36, 0.13);
  }
  .ga-web .rd-workspace-department .rd-ticket-action {
    width: 118px;
    min-width: 118px;
    padding: 9px 10px;
    line-height: 1.25;
    white-space: normal;
  }

  .ga-web .rd-staff-updates {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.2fr);
    align-items: center;
    gap: 22px;
    padding: 17px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background:
      linear-gradient(100deg, rgba(192, 132, 252, 0.055), rgba(4, 14, 25, 0.78) 42%);
  }
  .ga-web .rd-staff-updates-copy h3 {
    margin: 5px 0 0;
    color: #e5eef8;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
  }
  .ga-web .rd-staff-updates-copy > p {
    margin: 8px 0 0;
    color: #758ca2;
    font-size: 11px;
  }
  .ga-web .rd-language-route {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
  }
  .ga-web .rd-language-route span {
    display: flex;
    min-width: 0;
    padding: 7px 10px;
    flex-direction: column;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    background: rgba(2, 12, 22, 0.38);
    color: #788da1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .ga-web .rd-language-route strong {
    color: #cbd9e6;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
  }
  .ga-web .rd-language-route i {
    color: #8c6eaa;
    font-size: 18px;
    font-style: normal;
  }
  .ga-web .rd-staff-update-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .ga-web .rd-staff-update-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 9px 12px;
    gap: 7px;
    border: 1px solid;
    border-radius: 11px;
    font: 750 12px/1.3 inherit;
    cursor: pointer;
    transition: transform 0.14s, filter 0.14s, background 0.14s;
  }
  .ga-web .rd-staff-update-actions button:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
  }
  .ga-web .rd-staff-update-primary {
    border-color: rgba(56, 189, 248, 0.32) !important;
    background: rgba(56, 189, 248, 0.12);
    color: #a9e8ff;
  }
  .ga-web .rd-staff-update-complete {
    border-color: rgba(52, 211, 153, 0.28) !important;
    background: rgba(52, 211, 153, 0.1);
    color: #87ebc4;
  }
  .ga-web .rd-staff-update-delay {
    border-color: rgba(251, 191, 36, 0.25) !important;
    background: rgba(251, 191, 36, 0.08);
    color: #f6d16d;
  }
  .ga-web .rd-staff-update-cancel {
    border-color: rgba(251, 113, 133, 0.22) !important;
    background: rgba(251, 113, 133, 0.065);
    color: #f5a1ae;
  }

  /* Prepared-reply sheet: show both sides of the language handoff before the
     staffer sends. It uses the same mapping the submit handler will deliver. */
  .ga-web .ga-sheet-language-route {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 13px;
    padding: 9px 11px;
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.045);
  }
  .ga-web .ga-sheet-language-route > span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
  }
  .ga-web .ga-sheet-language-route small {
    color: #71879c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ga-web .ga-sheet-language-route strong {
    color: #cfdeea;
    font-size: 12px;
  }
  .ga-web .ga-sheet-language-route i {
    color: #6e9eb4;
    font-size: 16px;
    font-style: normal;
  }
  .ga-web .ga-sheet-guest-preview {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(52, 211, 153, 0.15);
    border-radius: 11px;
    background: rgba(52, 211, 153, 0.055);
  }
  .ga-web .ga-sheet-guest-preview span {
    display: block;
    color: #6fc7a8;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }
  .ga-web .ga-sheet-guest-preview p {
    margin: 6px 0 0;
    color: #d5e7e0;
    font-size: 13px;
    line-height: 1.5;
  }
}
.ga-sheet-delivery-warning {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 13px;
  padding: 11px 13px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 11px;
  background: rgba(251, 191, 36, 0.09);
}
.ga-sheet-delivery-warning strong {
  color: #fcd34d;
  font-size: 12px;
  font-weight: 850;
}
.ga-sheet-delivery-warning span {
  color: #e7d9af;
  font-size: 12px;
  line-height: 1.45;
}
.ga-delivery-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin: 12px 16px;
  padding: 12px 14px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 12px;
  background: rgba(120, 78, 8, 0.28);
  color: #f8e8b6;
}
.ga-delivery-warning-icon {
  color: #fcd34d;
  font-size: 16px;
}
.ga-delivery-warning p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.ga-delivery-warning button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8e8b6;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .ga-web .rd-workspace-department .rd-detail-actions {
    grid-column: 1 / -1;
  }
}
@media (min-width: 900px) and (max-width: 1260px) {
  /* Windowed laptops and browser zoom stack master/detail. The desktop shell
     normally clips page overflow, which made the entire detail pane unreachable
     once stacked; this breakpoint restores a single predictable page scroll. */
  .ga-web .od-shell-main > .page {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .ga-web .rd-zero-state {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "art copy"
      "stats stats"
      "refresh refresh";
    min-height: 320px;
    padding: 32px;
  }
  .ga-web .rd-zero-stats { justify-self: stretch; }
  .ga-web .rd-zero-refresh { display: none; }
  .ga-web .rd-workspace-department .rd-console {
    grid-template-columns: minmax(0, 1fr);
  }
  .ga-web .rd-workspace-department .rd-queue-panel {
    min-height: 480px;
    max-height: 620px;
  }
  .ga-web .rd-workspace-department .rd-detail-panel {
    min-height: 620px;
  }
  .ga-web .rd-staff-updates {
    grid-template-columns: minmax(0, 1fr);
  }
  .ga-web .rd-workspace-department .rd-detail-actions {
    grid-column: 1 / -1;
  }
}
@media (max-width: 899px) {
  .ga-sheet-language-route {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 9px 10px;
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.045);
  }
  .ga-sheet-language-route > span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
  }
  .ga-sheet-language-route small {
    color: #71879c;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .ga-sheet-language-route strong {
    color: #cfdeea;
    font-size: 12px;
  }
  .ga-sheet-language-route i {
    color: #6e9eb4;
    font-style: normal;
  }
  .ga-sheet-guest-preview {
    margin-top: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(52, 211, 153, 0.15);
    border-radius: 10px;
    background: rgba(52, 211, 153, 0.055);
  }
  .ga-sheet-guest-preview span {
    color: #6fc7a8;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
  }
  .ga-sheet-guest-preview p {
    margin: 5px 0 0;
    color: #d5e7e0;
    font-size: 13px;
    line-height: 1.45;
  }
}