:root {
  --zgs-panel-bg: rgba(250, 253, 254, 0.82);
  --zgs-card-bg: rgba(255, 255, 255, 0.9);
  --zgs-line: rgba(93, 135, 145, 0.2);
  --zgs-shadow: 0 10px 30px rgba(30, 84, 98, 0.1);
}

html,
body,
#app {
  min-height: 100%;
}

body {
  background-color: #dff4fb !important;
  background-image:
    linear-gradient(rgba(238, 250, 253, 0.34), rgba(245, 251, 252, 0.52)),
    url('/custom/assets/customer-background.webp') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

#app,
#app > div,
.n-layout,
.n-layout-scroll-container {
  background-color: transparent !important;
}

.n-layout-sider {
  background: rgba(251, 254, 255, 0.9) !important;
  border-right: 1px solid var(--zgs-line) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.n-layout-content {
  background: rgba(246, 251, 252, 0.6) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#app article > .flex-1,
#app article > .flex-1 > .cus-scroll-y {
  background-color: rgba(246, 251, 252, 0.3) !important;
}

.n-card,
.n-data-table,
.n-modal,
.n-dialog {
  border-color: var(--zgs-line) !important;
  background: var(--zgs-card-bg) !important;
  box-shadow: var(--zgs-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.n-data-table .n-data-table-th,
.n-data-table .n-data-table-td {
  background-color: rgba(255, 255, 255, 0.78) !important;
}

.n-menu-item-content::before {
  border-radius: 5px !important;
}

.zgs-customer-avatar {
  display: inline-block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(35, 104, 122, 0.22);
  vertical-align: middle;
}

.zgs-customer-avatar + svg {
  display: none !important;
}

.n-avatar.zgs-default-customer-avatar {
  color: transparent !important;
  background-image: url('/custom/assets/customer-avatar.webp') !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: 0 2px 10px rgba(35, 104, 122, 0.22);
}

.zgs-email-spam-notice {
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(224, 153, 35, 0.38);
  border-radius: 7px;
  color: #7a4d00;
  background: rgba(255, 247, 224, 0.94);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}

@media (max-width: 720px) {
  body {
    background-position: 64% center !important;
    background-attachment: scroll !important;
  }

  .n-layout-content {
    background: rgba(246, 251, 252, 0.56) !important;
  }

  .zgs-email-spam-notice {
    font-size: 12px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .n-layout-sider,
  .n-layout-content,
  .n-card,
  .n-data-table,
  .n-modal,
  .n-dialog {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}