.place-1 .rank-avatar .winner-crown {
  width: 38px !important;
  height: 28px !important;
  top: -12px !important;
  right: -2px !important;
  transform: rotate(22deg) !important;
  filter:
    drop-shadow(1px 0 rgba(255, 255, 255, 0.95))
    drop-shadow(-1px 0 rgba(255, 255, 255, 0.95))
    drop-shadow(0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 -1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 4px 6px rgba(90, 35, 20, 0.24)) !important;
}

.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: max(8px, env(safe-area-inset-top)) 0 0 !important;
  overflow: hidden !important;
  background: rgba(23, 23, 27, 0.62) !important;
}

.app-shell:has(.modal-backdrop) > header,
.app-shell:has(.modal-backdrop) > nav,
.app-shell:has(.modal-backdrop) .screen-watermark {
  z-index: 1 !important;
}

.app-shell:has(.modal-backdrop) > main {
  z-index: 10000 !important;
}

.modal-backdrop .create-dialog {
  width: min(560px, 100%) !important;
  height: calc(100dvh - max(8px, env(safe-area-inset-top))) !important;
  max-height: none !important;
  margin: 0 auto !important;
  border-radius: 24px 24px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.modal-backdrop .create-dialog > header {
  flex: 0 0 auto !important;
  padding: 16px 20px 8px !important;
}

.modal-backdrop .create-dialog form {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 8px 20px calc(28px + env(safe-area-inset-bottom)) !important;
}

.modal-backdrop .lead-convert-dialog {
  height: calc(100dvh - max(8px, env(safe-area-inset-top))) !important;
  max-height: none !important;
  margin: 0 auto !important;
}

.modal-backdrop .create-dialog > header {
  gap: 10px !important;
  align-items: flex-start !important;
  min-height: 84px !important;
  position: relative !important;
  padding: 16px 214px 8px 18px !important;
}

.modal-backdrop .create-dialog > header h2 {
  margin: 3px 0 0 !important;
  font-size: 22px !important;
  line-height: 1.16 !important;
}

.modal-backdrop .create-dialog-header-actions {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.modal-backdrop .create-dialog-header-actions button {
  white-space: nowrap !important;
}

.modal-backdrop .create-check-duplicate,
.modal-backdrop .create-confirm-top {
  min-width: 66px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.modal-backdrop .create-confirm-top {
  color: #8d8f96 !important;
  background: #ececf0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.modal-backdrop .create-confirm-top.ready:not(:disabled) {
  color: #fff !important;
  background: linear-gradient(135deg, #ff86a1, #ec4d74) !important;
  box-shadow: 0 10px 24px rgba(236, 77, 116, 0.26) !important;
}

.modal-backdrop .create-close {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}

.modal-backdrop .create-dialog form {
  display: grid !important;
  gap: 9px !important;
  padding: 14px 18px calc(112px + env(safe-area-inset-bottom)) !important;
}

.modal-backdrop .create-dialog form label {
  gap: 6px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.modal-backdrop .create-dialog input,
.modal-backdrop .create-dialog select {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
}

.modal-backdrop .create-map-box {
  padding: 8px !important;
  gap: 6px !important;
}

.modal-backdrop .create-map-picker {
  height: min(42dvh, 360px) !important;
  min-height: 300px !important;
  border-radius: 15px !important;
  touch-action: none !important;
  user-select: none !important;
}

.modal-backdrop .create-map-picker img {
  backface-visibility: hidden !important;
  transition: none !important;
  will-change: transform !important;
}

.modal-backdrop .create-map-pin {
  width: 38px !important;
  height: 38px !important;
  background: #ec4d74 !important;
  border: 0 !important;
  border-radius: 50% 50% 50% 0 !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -100%) rotate(-45deg) !important;
  box-shadow: 0 10px 18px rgba(140, 21, 54, 0.32) !important;
}

.modal-backdrop .create-map-pin::before {
  display: none !important;
}

.modal-backdrop .create-map-pin::after {
  width: 15px !important;
  height: 15px !important;
  top: 11px !important;
  left: 11px !important;
  background: #fff !important;
  border-radius: 50% !important;
  transform: none !important;
}

.modal-backdrop .duplicate-warning-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  margin-top: 10px !important;
}

.modal-backdrop .duplicate-warning-actions button {
  height: 42px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.modal-backdrop .duplicate-cancel {
  color: #8f2545 !important;
  background: #fff !important;
  border: 1px solid #ffd4df !important;
}

.modal-backdrop .duplicate-submit {
  color: #fff !important;
  background: linear-gradient(135deg, #ff86a1, #ec4d74) !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(236, 77, 116, 0.24) !important;
}

.modal-backdrop .qianli-duplicate-hard-block {
  border: 1px solid #ffd1dc !important;
  background: #fff6f8 !important;
  color: #8f2545 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  box-shadow: 0 8px 20px rgba(236, 77, 116, 0.1) !important;
}

.modal-backdrop .qianli-duplicate-hard-block b {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
}

.modal-backdrop .qianli-duplicate-hard-block p {
  margin: 0 0 10px !important;
  color: #7b5d66 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.modal-backdrop .qianli-duplicate-hard-block > div {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
}

.modal-backdrop .create-map-status {
  margin: 0 2px !important;
  padding-bottom: 4px !important;
}

.modal-backdrop .create-map-picker {
  overflow: hidden !important;
  background: #f3f7ef !important;
}

.modal-backdrop .create-map-picker img {
  transform-origin: 50% 50% !important;
}

.modal-backdrop .qianli-live-coord {
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  z-index: 8 !important;
  max-width: calc(100% - 86px) !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #a22148 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 16px rgba(98, 31, 54, 0.14) !important;
  pointer-events: none !important;
}

.modal-backdrop .qianli-map-zoom-controls {
  position: absolute !important;
  left: 12px !important;
  bottom: 58px !important;
  z-index: 12 !important;
  display: grid !important;
  gap: 8px !important;
}

.modal-backdrop .qianli-map-zoom-controls button {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #ec4d74 !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(236, 77, 116, 0.32) !important;
}

.modal-backdrop .qianli-map-zoom-controls {
  display: none !important;
}

.modal-backdrop .qianli-map-hard-controls {
  position: absolute !important;
  left: 12px !important;
  bottom: 58px !important;
  z-index: 30 !important;
  display: grid !important;
  gap: 8px !important;
  pointer-events: auto !important;
}

.modal-backdrop .qianli-map-hard-controls button {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #ec4d74 !important;
  color: #fff !important;
  font-size: 24px !important;
  line-height: 44px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(236, 77, 116, 0.32) !important;
}

@media (max-height: 740px) {
  .modal-backdrop .create-dialog > header {
    min-height: 78px !important;
    padding-top: 12px !important;
  }

  .modal-backdrop .create-dialog form {
    gap: 7px !important;
    padding-top: 12px !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .modal-backdrop .create-map-picker {
    height: 300px !important;
    min-height: 300px !important;
  }
}

@media (max-width: 430px) {
  .modal-backdrop .create-dialog > header {
    padding-right: 198px !important;
  }

  .modal-backdrop .create-dialog-header-actions {
    right: 10px !important;
    gap: 5px !important;
  }

  .modal-backdrop .create-check-duplicate,
  .modal-backdrop .create-confirm-top {
    min-width: 58px !important;
    height: 36px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  .modal-backdrop .create-close {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }
}

/* Qianli global visual polish: presentation only, no behavior changes. */
:root {
  --ql-bg: #fff8fa;
  --ql-bg-soft: #fff1f5;
  --ql-surface: rgba(255, 255, 255, 0.96);
  --ql-surface-strong: #ffffff;
  --ql-primary: #ec4d74;
  --ql-primary-deep: #b81743;
  --ql-primary-soft: #ffe3eb;
  --ql-ink: #17171b;
  --ql-muted: #74636b;
  --ql-line: #f1dce4;
  --ql-green: #148566;
  --ql-shadow: 0 14px 36px rgba(116, 30, 59, 0.12);
  --ql-shadow-soft: 0 8px 22px rgba(116, 30, 59, 0.08);
}

html,
body {
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 111, 145, 0.16), transparent 34%),
    linear-gradient(180deg, #fffafb 0%, #fff4f7 48%, #fbf7f5 100%) !important;
  color: var(--ql-ink) !important;
}

.app-shell {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 209, 221, 0.48), transparent 30%),
    linear-gradient(180deg, var(--ql-bg) 0%, #fffaf7 100%) !important;
  box-shadow: 0 0 42px rgba(40, 16, 25, 0.08) !important;
}

.app-shell main {
  padding-inline: 16px !important;
}

.topbar {
  background: rgba(255, 248, 250, 0.9) !important;
  border-bottom: 1px solid rgba(241, 220, 228, 0.68) !important;
  box-shadow: 0 10px 28px rgba(80, 24, 37, 0.05) !important;
}

.topbar small,
.section-line span,
.map-point-list header span,
.notification-panel header span,
.expanded-map header span {
  color: var(--ql-primary-deep) !important;
}

.topbar h1,
.section-line h2,
.panel-title h3,
.map-point-list h3,
.profile h2,
.create-dialog h2,
.lead-convert-dialog h2 {
  color: var(--ql-ink) !important;
  letter-spacing: 0 !important;
}

.top-actions {
  gap: 10px !important;
}

.notification-button,
.top-avatar-button,
.create-locate-button,
.location-refresh,
.profile-menu-wrap > button {
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 10px 24px rgba(236, 77, 116, 0.18) !important;
}

.notification-button:not(.active) {
  color: #9d183a !important;
  background: linear-gradient(135deg, #fff0f5, #ffe1ea) !important;
}

.top-avatar-button,
.topbar button:not(.notification-button) {
  background: #17171b !important;
  color: #ffb5c5 !important;
}

button,
.menu button,
.profile-menu-pop button {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease !important;
}

button:active {
  transform: translateY(1px) scale(0.985);
}

button:disabled {
  cursor: not-allowed !important;
  opacity: 0.62 !important;
  box-shadow: none !important;
}

input,
select,
textarea {
  color: var(--ql-ink) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--ql-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  outline: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(236, 77, 116, 0.62) !important;
  box-shadow:
    0 0 0 4px rgba(236, 77, 116, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

input::placeholder,
textarea::placeholder {
  color: #a7959d !important;
}

.panel,
.profile,
.customer-card,
.lead-card,
.store-card,
.work-list article,
.metric-grid article,
.store-progress-card,
.map-point-list,
.real-map-card,
.analytics-card,
.notification-panel,
.profile-menu-pop,
.permission-banner,
.finance-hero,
.hero {
  border: 1px solid rgba(255, 214, 225, 0.8) !important;
  box-shadow: var(--ql-shadow-soft) !important;
}

.panel,
.profile,
.customer-card,
.lead-card,
.store-card,
.work-list article,
.metric-grid article,
.store-progress-card,
.map-point-list,
.real-map-card,
.analytics-card {
  background: var(--ql-surface) !important;
}

.panel,
.store-card,
.customer-card,
.lead-card,
.work-list article,
.map-point-list,
.real-map-card {
  border-radius: 18px !important;
}

.hero,
.finance-hero,
.work-create-card,
.permission-banner {
  border: 0 !important;
  box-shadow: var(--ql-shadow) !important;
}

.hero {
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 214, 102, 0.28), transparent 28%),
    linear-gradient(135deg, #2a1119, #7f1230 60%, #ec4d74) !important;
}

.finance-hero {
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.2), transparent 27%),
    linear-gradient(135deg, #174f42, #148566) !important;
}

.permission-banner {
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(135deg, #1c5266, #2c8aa3) !important;
}

.work-create-card {
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 214, 102, 0.22), transparent 30%),
    linear-gradient(135deg, #3b1523, #a81746 68%, #ff7b94) !important;
}

.search {
  gap: 10px !important;
}

.search input {
  min-height: 48px !important;
  border-radius: 16px !important;
}

.search button,
.quick-actions button,
.store-card footer button,
.work-list button,
.work-create-card button,
.push-enable,
.login-submit,
.code-row button,
.create-check-duplicate,
.create-confirm-top,
.duplicate-submit,
.duplicate-cancel {
  min-height: 42px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}

.search button,
.quick-actions button,
.store-card footer button,
.work-create-card button,
.push-enable,
.login-submit,
.code-row button {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #ff7d9a, var(--ql-primary) 58%, #d72255) !important;
  box-shadow: 0 10px 22px rgba(236, 77, 116, 0.22) !important;
}

.quick-actions button {
  min-height: 58px !important;
  color: #8f2545 !important;
  background: linear-gradient(135deg, #fff4f8, #ffe5ed) !important;
  border: 1px solid #ffd3df !important;
  box-shadow: none !important;
}

.section-line {
  margin-top: 20px !important;
}

.section-line h2 {
  font-size: 21px !important;
}

.store-card-main,
.customer-card-main,
.lead-card-main {
  min-width: 0 !important;
}

.card-title span,
.tags i,
.store-card footer small,
.intent-report-list em,
.customer-card .tag,
.lead-card .tag {
  border-radius: 999px !important;
}

.tags i,
.customer-card .tag,
.lead-card .tag {
  color: #8f2545 !important;
  background: #fff0f5 !important;
  border: 1px solid #ffd8e2 !important;
}

.store-facts,
.store-card > p,
.work-list p,
.profile p,
.notification-list p,
.map-point-row span,
.lead-point-row span {
  color: var(--ql-muted) !important;
}

.real-map-card,
.create-map-box,
.lead-convert-map-box {
  background: linear-gradient(135deg, #fff8fb, #fff) !important;
  border-color: #ffd0dc !important;
}

.real-map-card img,
.create-map-picker img,
.lead-convert-map-picker img {
  filter: saturate(1.08) contrast(1.04) brightness(1.01) !important;
}

.create-map-current,
.qianli-live-coord,
.real-map-overlay,
.create-map-hint {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 211, 223, 0.72) !important;
  box-shadow: 0 8px 20px rgba(116, 30, 59, 0.12) !important;
}

.map-toolbar button,
.filter-fold-button,
.profile-menu-pop button {
  border-radius: 14px !important;
}

.map-toolbar button {
  background: #fff !important;
  border: 1px solid #f0dfe5 !important;
  box-shadow: 0 5px 14px rgba(116, 30, 59, 0.07) !important;
}

.map-toolbar button.active {
  color: var(--ql-primary-deep) !important;
  background: #fff0f5 !important;
  border-color: #ff9eb6 !important;
}

.map-point-row,
.lead-point-row {
  background: #fff !important;
  border-color: #f1dfe5 !important;
  box-shadow: 0 7px 18px rgba(116, 30, 59, 0.06) !important;
}

.map-point-row.focused-row,
.lead-point-row.focused-row,
.lead-point-row.selected,
.map-point-row.selected {
  border-color: #ff8aa5 !important;
  background: linear-gradient(135deg, #fff2f6, #fff) !important;
  box-shadow: 0 10px 24px rgba(236, 77, 116, 0.16) !important;
}

.notification-panel {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(16px) !important;
}

.notification-list article {
  border: 1px solid #f2dfe6 !important;
  box-shadow: 0 7px 18px rgba(116, 30, 59, 0.07) !important;
}

.app-shell > nav {
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  align-items: stretch !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid rgba(241, 220, 228, 0.9) !important;
  box-shadow: 0 -12px 30px rgba(80, 24, 37, 0.08) !important;
}

.app-shell > nav button {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 8px 2px calc(7px + env(safe-area-inset-bottom)) !important;
  color: #939189 !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
}

.app-shell > nav span {
  height: 25px !important;
  margin: 0 0 2px !important;
  color: #9b9a92 !important;
  font-size: 22px !important;
  line-height: 25px !important;
}

.app-shell > nav button.active {
  color: var(--ql-primary-deep) !important;
}

.app-shell > nav button.active span {
  color: var(--ql-primary) !important;
}

.modal-backdrop {
  background: rgba(24, 18, 22, 0.58) !important;
  backdrop-filter: blur(9px) !important;
}

.modal-backdrop .create-dialog,
.modal-backdrop .lead-convert-dialog,
.expanded-map {
  background: #fff !important;
  border: 1px solid rgba(255, 215, 226, 0.86) !important;
  box-shadow: 0 -18px 44px rgba(80, 24, 37, 0.18) !important;
}

.modal-backdrop .create-dialog > header,
.lead-convert-dialog > header {
  border-bottom: 1px solid rgba(241, 220, 228, 0.72) !important;
  background: linear-gradient(180deg, #fff, #fff8fa) !important;
}

.modal-backdrop .create-dialog form label,
.lead-convert-dialog form label,
.login-form label {
  color: #4b303a !important;
  font-weight: 900 !important;
}

.modal-backdrop .create-check-duplicate {
  color: var(--ql-primary-deep) !important;
  background: #fff !important;
  border: 1px solid #ff9eb6 !important;
}

.modal-backdrop .create-confirm-top {
  color: #7d7f86 !important;
  background: #ececf0 !important;
}

.modal-backdrop .create-close,
.expanded-map header button,
.notification-panel header button {
  color: #111 !important;
  background: #f5f3ef !important;
  border: 0 !important;
  box-shadow: none !important;
}

.duplicate-warning-actions button,
.qianli-duplicate-hard-block button {
  min-height: 42px !important;
}

.qianli-duplicate-hard-block {
  box-shadow: 0 10px 24px rgba(236, 77, 116, 0.12) !important;
}

.rush-sea-page {
  border-color: #541221 !important;
  box-shadow: 0 18px 46px rgba(20, 0, 6, 0.32) !important;
}

.rush-store-list article {
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
}

.rush-store-list button {
  border-radius: 12px !important;
  min-height: 44px !important;
}

.login-card,
.login-users button {
  border-color: rgba(255, 211, 222, 0.9) !important;
  box-shadow: 0 18px 48px rgba(80, 24, 37, 0.12) !important;
}

.login-brand {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(135deg, #ff7892, #de1445 46%, #5d071e 100%) !important;
}

.screen-watermark {
  opacity: 0.032 !important;
}

@media (max-width: 430px) {
  .app-shell main {
    padding-inline: 14px !important;
  }

  .topbar {
    padding: 16px 16px 12px !important;
  }

  .topbar h1 {
    font-size: 24px !important;
  }

  .metric-grid {
    gap: 9px !important;
  }

  .panel,
  .store-card,
  .customer-card,
  .lead-card,
  .work-list article,
  .map-point-list,
  .real-map-card {
    border-radius: 17px !important;
  }

  .app-shell > nav button {
    font-size: 10px !important;
  }
}

/* Map tab marker linking and lead age visibility */
.real-map-card .map-coordinate-bubble {
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    opacity 0.12s ease !important;
}

.real-map-card .map-coordinate-bubble.focused {
  z-index: 12 !important;
  transform: translate(-50%, -50%) scale(1.12) translateZ(0) !important;
  box-shadow: 0 14px 30px rgba(132, 25, 62, 0.28) !important;
  outline: 3px solid rgba(255, 255, 255, 0.92) !important;
}

.real-map-card .map-coordinate-bubble.intent-lead {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #ffd65d !important;
  border: 2px solid #fff !important;
  box-shadow: 0 8px 18px rgba(132, 25, 62, 0.18) !important;
  display: grid !important;
  place-items: center !important;
}

.real-map-card .map-coordinate-bubble.intent-lead b {
  width: auto !important;
  height: auto !important;
  color: #9d183a !important;
  background: transparent !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.real-map-card .map-coordinate-bubble.intent-lead em {
  display: none !important;
}

.lead-point-row.focused-row,
.lead-point-row.qianli-linked-selected,
.map-point-row.qianli-linked-selected {
  border-color: #ff7897 !important;
  background: linear-gradient(135deg, #fff1f6, #fff) !important;
  box-shadow: 0 10px 24px rgba(236, 77, 116, 0.16) !important;
}

.load-more-customers {
  width: 100%;
  margin: 6px 0 18px;
  min-height: 44px;
  border: 1px solid rgba(236, 77, 116, 0.22);
  border-radius: 14px;
  background: #fff7fa;
  color: #c91f55;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(236, 77, 116, 0.1);
}

.sign-page .sign-photo {
  position: relative !important;
  cursor: pointer !important;
  min-height: 122px !important;
  overflow: hidden !important;
}

.sign-page .sign-photo input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  display: block !important;
  z-index: 5 !important;
  cursor: pointer !important;
}

.sign-page .sign-photo span,
.sign-page .sign-photo div,
.sign-page .sign-photo img {
  pointer-events: none !important;
}

.sign-page .sign-photo div {
  min-height: 86px !important;
  display: grid !important;
  place-items: center !important;
}

.sign-product-list article {
  grid-template-columns: minmax(0, 1fr) 116px 76px !important;
}

.sign-product-list span {
  color: #8b6a74 !important;
}

.sign-qty-stepper {
  height: 38px;
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  border: 1px solid #ffd4df;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.sign-qty-stepper button {
  height: 100%;
  border: 0;
  background: #fff3f7;
  color: #a1284b;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1;
}

.sign-qty-stepper button:disabled {
  color: #c7b4bb;
  background: #f2f2ee;
}

.sign-qty-stepper input {
  text-align: center;
  border: 0 !important;
  border-left: 1px solid #ffdce5 !important;
  border-right: 1px solid #ffdce5 !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100%;
  min-width: 0;
  padding: 0 !important;
  background: #fff !important;
  font-weight: 900;
}

.sign-qty-stepper input:disabled {
  color: #aaa !important;
  background: #f7f3f4 !important;
}

@media (max-width: 420px) {
  .sign-product-list article {
    grid-template-columns: minmax(0, 1fr) 108px 62px !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .sign-product-list strong {
    font-size: 11px !important;
  }

  .sign-qty-stepper {
    grid-template-columns: 28px 1fr 28px;
  }
}

/* 1.1.89: real-device safe areas and cleaner bottom navigation. */
:root {
  --ql-safe-top: max(24px, env(safe-area-inset-top, 0px));
  --ql-safe-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  --ql-tabbar-height: calc(64px + var(--ql-safe-bottom));
}

body {
  background: #fff8fb !important;
}

.app-shell {
  padding-top: 0 !important;
  padding-bottom: var(--ql-tabbar-height) !important;
  min-height: 100dvh !important;
}

.app-shell > header,
.topbar {
  padding-top: calc(var(--ql-safe-top) + 8px) !important;
}

.topbar {
  min-height: calc(var(--ql-safe-top) + 54px) !important;
  align-items: flex-end !important;
  background: linear-gradient(180deg, rgba(255, 247, 250, 0.98), rgba(255, 247, 250, 0.86)) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.topbar small {
  margin-top: 0 !important;
}

.top-actions {
  transform: translateY(1px) !important;
}

.app-shell main {
  padding-bottom: calc(var(--ql-tabbar-height) + 8px) !important;
}

.app-shell > nav {
  width: min(100%, 560px) !important;
  min-height: var(--ql-tabbar-height) !important;
  padding: 7px 8px var(--ql-safe-bottom) !important;
  border-top: 1px solid rgba(115, 65, 82, 0.09) !important;
  border-radius: 20px 20px 0 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 -12px 30px rgba(60, 25, 39, 0.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  gap: 0 !important;
}

.app-shell > nav button {
  min-width: 0 !important;
  gap: 2px !important;
  padding: 0 1px !important;
  color: #8d8588 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.app-shell > nav button span {
  width: 27px !important;
  height: 27px !important;
  margin-bottom: 1px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.app-shell > nav button span::before {
  color: #918c8e !important;
  font-family: "Segoe UI Symbol", "Microsoft YaHei", sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.app-shell > nav button:nth-child(1) span::before { content: "⌂"; }
.app-shell > nav button:nth-child(2) span::before { content: "⌕"; }
.app-shell > nav button:nth-child(3) span::before { content: "◇"; }
.app-shell > nav button:nth-child(4) span::before { content: "♙"; }
.app-shell > nav button:nth-child(5) span::before { content: "⌖"; }
.app-shell > nav button:nth-child(6) span::before { content: "⇄"; }
.app-shell > nav button:nth-child(7) span::before { content: "✓"; }
.app-shell > nav button:nth-child(8) span::before { content: "○"; }
.app-shell > nav button:nth-child(9) span::before { content: "￥"; }
.app-shell > nav button:nth-child(10) span::before { content: "▤"; }
.app-shell > nav button:nth-child(11) span::before { content: "◎"; }
.app-shell > nav button:nth-child(12) span::before { content: "◌"; }

.app-shell > nav button.active,
.app-shell > nav button[aria-current="page"],
.app-shell > nav button[aria-selected="true"] {
  color: #e9366d !important;
}

.app-shell > nav button.active span,
.app-shell > nav button[aria-current="page"] span,
.app-shell > nav button[aria-selected="true"] span {
  background: linear-gradient(135deg, #fff2f6, #ffe3ec) !important;
  box-shadow: 0 8px 18px rgba(233, 54, 109, 0.18) !important;
}

.app-shell > nav button.active span::before,
.app-shell > nav button[aria-current="page"] span::before,
.app-shell > nav button[aria-selected="true"] span::before {
  color: #e9366d !important;
}