/* Backend login only. Front login and main pages are intentionally untouched. */
body.admin-body.admin-login-view {
  width: 100vw;
  height: 100vh;
  overflow: hidden !important;
  background: #eafafa !important;
}

body.admin-body.admin-login-view .app-header {
  display: none !important;
}

body.admin-body.admin-login-view .admin-shell {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.admin-body.admin-login-view #adminContent {
  display: none !important;
}

body.admin-body.admin-login-view #loginCard.admin-login-page {
  position: relative !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  isolation: isolate !important;
  background:
    radial-gradient(820px 520px at 50% 15%, rgba(255,255,255,.94), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, #f7ffff 0%, #eafbfb 45%, #d9f6f5 100%) !important;
}

#loginCard .admin-login-return {
  position: absolute !important;
  z-index: 20 !important;
  top: clamp(18px, 2.2vh, 34px) !important;
  right: clamp(20px, 2.6vw, 46px) !important;
  height: 42px !important;
  min-width: 96px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(174,218,214,.78) !important;
  color: #0b6f6a !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(11,122,117,.08) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

#loginCard .admin-login-return:hover {
  transform: translateY(-1px) !important;
  background: rgba(246,255,254,.95) !important;
  box-shadow: 0 16px 34px rgba(11,122,117,.16) !important;
}

#loginCard .admin-login-title-stage {
  top: clamp(54px, 8.6vh, 132px) !important;
  width: min(960px, 92vw) !important;
}

#loginCard .admin-title-orbit {
  position: absolute;
  left: 50%;
  top: 36%;
  width: min(820px, 88vw);
  height: clamp(92px, 9vw, 154px);
  border: 1px solid rgba(11,122,117,.11);
  border-left-color: rgba(26,190,180,.18);
  border-right-color: rgba(255,255,255,.34);
  border-radius: 50%;
  transform: translate(-50%, -42%) rotate(-4deg);
  box-shadow:
    inset 0 0 28px rgba(255,255,255,.28),
    0 0 26px rgba(23,184,174,.06);
}

#loginCard .admin-login-title {
  font-size: clamp(62px, 5.4vw, 136px) !important;
  letter-spacing: clamp(5px, .56vw, 13px) !important;
}

#loginCard .admin-login-slogan {
  margin-top: clamp(8px, .8vh, 14px) !important;
  font-size: clamp(15px, 1.25vw, 29px) !important;
  letter-spacing: clamp(4px, .48vw, 12px) !important;
}

body.admin-body.admin-login-view #loginCard .admin-login-card {
  position: absolute !important;
  z-index: 8 !important;
  left: 50% !important;
  top: clamp(420px, 57vh, 690px) !important;
  transform: translate(-50%, -50%) !important;
  width: clamp(500px, 27vw, 760px) !important;
  min-height: auto !important;
  padding: clamp(30px, 2.2vw, 58px) clamp(34px, 2.5vw, 66px) clamp(34px, 2.5vw, 64px) !important;
  border-radius: clamp(28px, 1.8vw, 38px) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(239,253,251,.68) 58%, rgba(255,255,255,.78)) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  box-shadow:
    0 34px 88px rgba(10, 83, 80, .17),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;
  backdrop-filter: blur(24px) saturate(1.08) !important;
  overflow: hidden !important;
}

body.admin-body.admin-login-view #loginCard .admin-login-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(clamp(28px, 1.8vw, 38px) - 8px);
  border: 1px solid rgba(255,255,255,.38);
  pointer-events: none;
}

#loginCard .admin-login-mark {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, .8vw, 20px) !important;
  margin: 0 0 clamp(26px, 2.1vw, 46px) !important;
  white-space: nowrap !important;
}

#loginCard .admin-login-mark .login-logo {
  width: clamp(58px, 4vw, 92px) !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 18px rgba(11,122,117,.13)) !important;
}

#loginCard .admin-login-mark strong {
  font-size: clamp(22px, 1.65vw, 40px) !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  color: #087c77 !important;
  background: linear-gradient(90deg, #006d68, #0b8a82, #8c7012) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}

#loginCard .admin-form {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(15px, 1vw, 22px) !important;
  width: 100% !important;
}

#loginCard .admin-form label {
  display: grid !important;
  gap: 9px !important;
  color: #153040 !important;
  font-size: clamp(14px, .82vw, 18px) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

#loginCard .admin-form input[type="text"],
#loginCard .admin-form input[type="password"],
#loginCard .admin-form input:not([type]) {
  width: 100% !important;
  height: clamp(48px, 3.05vw, 66px) !important;
  border-radius: clamp(15px, 1vw, 20px) !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  background: rgba(255,255,255,.88) !important;
  color: #102033 !important;
  font-size: clamp(16px, 1vw, 22px) !important;
  font-weight: 650 !important;
  padding: 0 clamp(16px, 1vw, 24px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 24px rgba(12,89,85,.07) !important;
}

#loginCard .admin-form input::placeholder {
  color: rgba(67, 87, 104, .42) !important;
  font-weight: 650 !important;
}

#loginCard .admin-form input:focus {
  outline: none !important;
  border-color: rgba(35, 204, 194, .66) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow:
    0 0 0 5px rgba(45,212,191,.16),
    0 12px 30px rgba(0,62,70,.10) !important;
}

#loginCard .admin-form .admin-password-field-wrap {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
}

#loginCard .admin-form .admin-password-field-wrap #password {
  padding-right: clamp(58px, 3.45vw, 78px) !important;
}

#loginCard .admin-form .admin-password-toggle {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  right: clamp(7px, .5vw, 12px) !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(38px, 2.25vw, 50px) !important;
  height: clamp(38px, 2.25vw, 50px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: clamp(11px, .7vw, 15px) !important;
  background: rgba(11,122,117,.07) !important;
  color: rgba(42,75,88,.68) !important;
  cursor: pointer !important;
}

#loginCard .admin-form .admin-password-toggle:hover,
#loginCard .admin-form .admin-password-toggle:focus-visible {
  background: rgba(11,122,117,.14) !important;
  color: #0b7a75 !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(45,212,191,.14) !important;
}

#loginCard .admin-form .admin-password-toggle svg {
  width: clamp(19px, 1.15vw, 25px) !important;
  height: clamp(19px, 1.15vw, 25px) !important;
}

#loginCard .admin-form .admin-password-toggle .xk-eye-close {
  display: none !important;
}

#loginCard .admin-form .admin-password-toggle.is-visible .xk-eye-open {
  display: none !important;
}

#loginCard .admin-form .admin-password-toggle.is-visible .xk-eye-close {
  display: block !important;
}

#loginCard .admin-form .remember-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 28px !important;
  color: #33465a !important;
  font-size: clamp(14px, .82vw, 18px) !important;
  font-weight: 650 !important;
}

#loginCard .admin-form .remember-line input {
  width: clamp(15px, .85vw, 18px) !important;
  height: clamp(15px, .85vw, 18px) !important;
  accent-color: #0b9e94 !important;
}

#loginCard .admin-form .primary-btn {
  width: 100% !important;
  height: clamp(52px, 3.25vw, 72px) !important;
  margin-top: clamp(4px, .4vw, 10px) !important;
  border-radius: clamp(16px, 1vw, 20px) !important;
  color: #fff !important;
  font-size: clamp(18px, 1.15vw, 27px) !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  background: linear-gradient(135deg, #18b7ad, #0d9f94 58%, #078078) !important;
  border: 1px solid rgba(255,255,255,.56) !important;
  box-shadow:
    0 18px 42px rgba(0,119,112,.30),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

#loginCard .admin-form .primary-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 24px 52px rgba(0,119,112,.39),
    0 0 34px rgba(45,212,191,.24) !important;
}

#loginCard .login-hotspot i {
  background: url("/login-logo-white.png") center / contain no-repeat !important;
}

body.admin-body.admin-authenticated {
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--bg, #eef8f7) !important;
}

body.admin-body.admin-authenticated .app-header {
  display: flex !important;
}

body.admin-body.admin-authenticated .admin-shell {
  width: min(1780px, calc(100vw - 48px)) !important;
  max-width: none !important;
  height: auto !important;
  min-height: calc(100vh - 112px) !important;
  margin: 0 auto 44px !important;
  padding: 0 !important;
}

body.admin-body.admin-authenticated #loginCard {
  display: none !important;
}

body.admin-body.admin-authenticated #adminContent {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-height: 240px !important;
}

body.admin-body.admin-authenticated .admin-top-menu {
  display: flex !important;
  flex-wrap: wrap !important;
}

body.admin-body:not(.admin-login-view) #loginCard {
  display: none !important;
}

body.admin-body:not(.admin-login-view) #adminContent {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-height: 240px !important;
}

body.admin-body:not(.admin-login-view) .admin-top-menu {
  display: flex !important;
  flex-wrap: wrap !important;
}

@media (max-width: 900px) {
  #loginCard .admin-login-title-stage {
    top: 42px !important;
  }
  #loginCard .admin-login-title {
    font-size: clamp(42px, 10vw, 76px) !important;
    letter-spacing: .08em !important;
  }
  #loginCard .admin-login-slogan {
    font-size: clamp(14px, 3vw, 22px) !important;
    letter-spacing: .08em !important;
  }
  body.admin-body.admin-login-view #loginCard .admin-login-card {
    top: 58vh !important;
    width: calc(100vw - 34px) !important;
    padding: 28px 24px 30px !important;
  }
  #loginCard .admin-login-mark strong {
    font-size: 21px !important;
  }
  #loginCard .login-hotspot {
    display: none !important;
  }
}

@media (max-height: 760px) {
  #loginCard .admin-login-title-stage {
    top: 22px !important;
  }
  #loginCard .admin-login-title {
    font-size: clamp(40px, 5vw, 76px) !important;
  }
  #loginCard .admin-login-slogan {
    font-size: clamp(13px, 1.5vw, 20px) !important;
  }
  body.admin-body.admin-login-view #loginCard .admin-login-card {
    top: 61vh !important;
    transform: translate(-50%, -50%) scale(.94) !important;
  }
}

/* 后台主界面：按前台主页面形式改为左侧分组导航 + 右侧内容区 */
body.admin-body.admin-authenticated .admin-shell,
body.admin-body:not(.admin-login-view) .admin-shell {
  width: min(1880px, calc(100vw - 28px)) !important;
  min-height: calc(100vh - 104px) !important;
  margin: 0 auto 28px !important;
}

body.admin-body.admin-authenticated #adminContent,
body.admin-body:not(.admin-login-view) #adminContent {
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
  min-height: calc(100vh - 126px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.admin-body.admin-authenticated .admin-top-menu,
body.admin-body:not(.admin-login-view) .admin-top-menu {
  grid-column: 1 !important;
  grid-row: 1 / span 100 !important;
  position: sticky !important;
  top: 14px !important;
  z-index: 12 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 10px !important;
  max-height: calc(100vh - 130px) !important;
  overflow: auto !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(241,250,249,.62)) !important;
  box-shadow: 0 18px 48px rgba(20,31,45,.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
}

body.admin-body.admin-authenticated .admin-module,
body.admin-body:not(.admin-login-view) .admin-module {
  grid-column: 2 !important;
  min-width: 0 !important;
}

body.admin-body .admin-menu-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(193, 225, 222, .58);
}

body.admin-body .admin-menu-title {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.62);
  color: #33465a;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: default;
  box-shadow: none !important;
  transform: none !important;
}

body.admin-body .admin-menu-title::after {
  content: "";
  float: right;
  width: 7px;
  height: 7px;
  margin-top: 13px;
  border-radius: 999px;
  background: #78bbb5;
  box-shadow: 0 0 0 4px rgba(120,187,181,.14);
}

body.admin-body .admin-menu-list {
  display: grid;
  gap: 7px;
}

body.admin-body .admin-top-menu .menu-btn,
body.admin-body .admin-top-menu .admin-menu-action {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  padding: 0 14px;
  border-radius: 13px;
  border: 1px solid rgba(198, 224, 221, .8);
  background: rgba(255,255,255,.70);
  color: #243445;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
  box-shadow: none;
}

body.admin-body .admin-top-menu .menu-btn::before,
body.admin-body .admin-top-menu .admin-menu-action::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  margin-right: 10px;
  border-radius: 999px;
  background: rgba(11,122,117,.22);
  vertical-align: -4px;
}

body.admin-body .admin-top-menu .menu-btn:hover:not(:disabled),
body.admin-body .admin-top-menu .admin-menu-action:hover:not(:disabled) {
  transform: translateX(2px) !important;
  background: #f3faf9 !important;
  border-color: rgba(11,122,117,.22) !important;
  color: #0b7771 !important;
  box-shadow: 0 10px 22px rgba(11,122,117,.10) !important;
}

body.admin-body .admin-top-menu .menu-btn.active {
  background: linear-gradient(135deg, #e0f0ee, #f7fcfb) !important;
  border-color: rgba(11,122,117,.26) !important;
  color: #087c77 !important;
  box-shadow: inset 4px 0 0 #0b8f86, 0 10px 24px rgba(11,122,117,.10) !important;
}

body.admin-body .admin-top-menu .menu-btn.active::before {
  background: linear-gradient(180deg, #0b8f86, #d08a16);
}

body.admin-body .admin-menu-account .admin-menu-action {
  color: #b42318;
}

body.admin-body .admin-menu-account .admin-menu-action::before {
  background: rgba(180,35,24,.28);
}

@media (max-width: 980px) {
  body.admin-body.admin-authenticated #adminContent,
  body.admin-body:not(.admin-login-view) #adminContent {
    grid-template-columns: 1fr !important;
  }

  body.admin-body.admin-authenticated .admin-top-menu,
  body.admin-body:not(.admin-login-view) .admin-top-menu {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
    max-height: none !important;
  }

  body.admin-body.admin-authenticated .admin-module,
  body.admin-body:not(.admin-login-view) .admin-module {
    grid-column: 1 !important;
  }
}

/* Admin fixed shell: keep the browser page still and scroll only side/content panes. */
html:has(> body.admin-body.admin-authenticated),
html:has(> body.admin-body:not(.admin-login-view)) {
  height: 100vh !important;
  overflow: hidden !important;
}

body.admin-body.admin-authenticated,
body.admin-body:not(.admin-login-view) {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.admin-body.admin-authenticated .app-header,
body.admin-body:not(.admin-login-view) .app-header {
  position: relative !important;
  z-index: var(--layer-sticky) !important;
  flex: 0 0 76px !important;
  height: 76px !important;
  min-height: 76px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 24px !important;
  background: rgba(237, 247, 246, .96) !important;
  border-bottom: 1px solid rgba(11, 122, 117, .10) !important;
}

body.admin-body.admin-authenticated .admin-shell,
body.admin-body:not(.admin-login-view) .admin-shell {
  height: calc(100vh - 76px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  padding: 12px 0 18px !important;
}

body.admin-body.admin-authenticated #adminContent,
body.admin-body:not(.admin-login-view) #adminContent {
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  align-items: stretch !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body.admin-body.admin-authenticated .admin-top-menu,
body.admin-body:not(.admin-login-view) .admin-top-menu {
  position: relative !important;
  top: auto !important;
  grid-row: 1 !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-self: stretch !important;
}

body.admin-body.admin-authenticated .admin-module,
body.admin-body:not(.admin-login-view) .admin-module {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-row: 1 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-self: stretch !important;
  scrollbar-gutter: stable !important;
}

/* Unified backend data manager. */
#backupModule .unified-data-manager{display:flex;flex-direction:column;margin-top:10px;border:1px solid rgba(11,122,117,.13);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.78)}
#backupModule .data-manager-section{padding:16px 18px;background:linear-gradient(180deg,#f8fffe,#f1faf9)}
#backupModule .data-manager-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
#backupModule .data-manager-head>div{display:flex;align-items:baseline;gap:12px;min-width:0}
#backupModule .data-manager-head strong,#backupModule .data-manager-action-row strong{color:#0b6663;font-size:16px}
#backupModule .data-manager-head span{color:#6a7a84;font-size:12px}
#backupModule .data-manager-section-list,#backupModule .data-restore-section-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#backupModule .data-module-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:62px;margin:0;padding:9px 11px;border:1px solid rgba(11,122,117,.11);border-radius:8px;background:#fff;cursor:pointer;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
#backupModule .data-module-item:hover{background:#f3faf9;border-color:rgba(11,122,117,.28);box-shadow:0 7px 18px rgba(11,122,117,.06)}
#backupModule .data-module-item:has(input:checked){background:#e0f0ee;border-color:rgba(11,122,117,.34)}
#backupModule .data-module-item input{width:16px;height:16px;margin:0;accent-color:#0b7a75}
#backupModule .data-module-item span{display:flex;flex-direction:column;gap:3px;min-width:0}
#backupModule .data-module-item strong{color:#243640;font-size:13px;font-weight:800}
#backupModule .data-module-item em{color:#71808a;font-size:11px;font-style:normal;line-height:1.35}
#backupModule .data-module-item>b{color:#72818a;font-size:11px;font-weight:700;white-space:nowrap}
#backupModule .data-manager-action-row{display:grid;grid-template-columns:minmax(240px,1fr) auto;align-items:center;gap:16px;padding:15px 18px;border-top:1px solid rgba(11,122,117,.10)}
#backupModule .data-manager-action-row p{margin:4px 0 0;color:#71808a;font-size:12px}
#backupModule .data-manager-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
#backupModule .data-manager-actions .primary-btn,#backupModule .data-manager-actions .ghost-btn,#backupModule .data-manager-actions .danger-btn{min-height:36px;white-space:nowrap}
#backupModule .data-restore-preview,#backupModule .danger-clear-status{grid-column:1/-1;margin:2px 0 0;padding:12px;border-radius:10px;background:#f7fbfb;border:1px solid rgba(11,122,117,.10)}
#backupModule .data-restore-summary{margin-bottom:10px;color:#40545d;font-size:12px;font-weight:700}
#backupModule .data-restore-preview>.remember-line{margin:0 0 9px}
#backupModule .danger-data-row{background:rgba(255,249,247,.72)}
#backupModule .danger-data-row strong{color:#a23b31}
#backupModule .legacy-import-details{border-top:1px solid rgba(11,122,117,.10);padding:0 18px 14px}
#backupModule .legacy-import-details summary{padding:14px 0;color:#55666f;font-size:13px;font-weight:800;cursor:pointer}
#backupModule .legacy-import-details .legacy-db-card{padding:12px;border:1px solid rgba(11,122,117,.10);border-radius:10px;background:#f8fbfb}
@media(max-width:1180px){#backupModule .data-manager-section-list,#backupModule .data-restore-section-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#backupModule .data-manager-section-list,#backupModule .data-restore-section-list{grid-template-columns:1fr}#backupModule .data-manager-action-row{grid-template-columns:1fr}#backupModule .data-manager-actions{justify-content:flex-start}}