/* 后台登录：居中卡片，不再铺满宽屏 */
.login {
  min-height: 100vh;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 56px;
  box-sizing: border-box;
  background: linear-gradient(165deg, #d5e6f8 0%, #f7fafc 46%, #e4eef8 100%) !important;
  background-image: none !important;
}
.login .login-form {
  flex: 0 0 auto;
  width: 400px !important;
  max-width: 400px !important;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 34px 32px 12px !important;
  box-shadow: 0 18px 48px rgba(22, 78, 138, 0.16);
}
.login .title {
  margin: 0 0 22px;
  color: #17324d;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.5px;
}
.login-form .el-input__inner {
  border-radius: 8px;
}
.login-form .el-button--primary {
  height: 40px;
  border-radius: 8px;
  background: #1d6fb8;
  border-color: #1d6fb8;
}
.el-login-footer {
  color: #60758a !important;
}

/* 左侧整栏蓝色，展开的子菜单白底。选择器要盖过菜单上的内联深色背景。 */
#app .sidebar-container,
#app .sidebar-container .el-scrollbar,
#app .sidebar-container .scrollbar-wrapper,
#app .sidebar-container .el-scrollbar__view,
#app .sidebar-container .el-menu,
#app .sidebar-logo-container,
#app .sidebar-logo-container .sidebar-logo-link {
  background-color: #1d6fb8 !important;
}
#app .sidebar-container .el-menu-item,
#app .sidebar-container .el-menu-item:hover,
#app .sidebar-container .el-menu-item:focus,
#app .sidebar-container .el-submenu__title,
#app .sidebar-container .el-submenu__title:hover,
#app .sidebar-container .el-submenu__title:focus,
#app .sidebar-container .submenu-title-noDropdown,
#app .sidebar-container .submenu-title-noDropdown:hover {
  background-color: #1d6fb8 !important;
  color: #f7fbff !important;
}
#app .sidebar-container .el-menu-item.is-active,
#app .sidebar-container .el-submenu.is-active > .el-submenu__title {
  background-color: #1668ad !important;
  color: #fff !important;
}
#app .sidebar-logo-container .sidebar-title,
#app .sidebar-container .el-menu-item span,
#app .sidebar-container .el-submenu__title span,
#app .sidebar-container .svg-icon,
#app .sidebar-container .el-submenu__icon-arrow {
  color: #f7fbff !important;
}
.sidebar-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #fff !important;
}
/* 子菜单白底，优先级高于原主题的 #000c17 */
#app .sidebar-container .theme-dark .el-submenu .el-menu,
#app .sidebar-container .el-submenu .el-menu,
#app .sidebar-container .el-menu--inline,
#app .sidebar-container .nest-menu .el-menu,
.el-menu--popup,
.el-menu--vertical > .el-menu--popup {
  background-color: #ffffff !important;
}
#app .sidebar-container .theme-dark .el-submenu .el-menu-item,
#app .sidebar-container .theme-dark .el-submenu .el-menu .el-submenu__title,
#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title,
#app .sidebar-container .el-submenu .el-menu-item,
#app .sidebar-container .el-submenu .el-menu .el-submenu__title,
.el-menu--popup .el-menu-item,
.el-menu--popup .el-submenu__title {
  background-color: #ffffff !important;
  color: #243447 !important;
}
#app .sidebar-container .theme-dark .el-submenu .el-menu-item span,
#app .sidebar-container .theme-dark .el-submenu .el-menu .el-submenu__title span,
#app .sidebar-container .el-submenu .el-menu-item span,
#app .sidebar-container .el-submenu .el-menu .el-submenu__title span,
.el-menu--popup .el-menu-item span {
  color: #243447 !important;
}
#app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover,
#app .sidebar-container .theme-dark .el-submenu .el-menu-item:focus,
#app .sidebar-container .theme-dark .el-submenu .el-menu-item.is-active,
#app .sidebar-container .theme-dark .el-submenu .el-menu .el-submenu__title:hover,
#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title:hover,
#app .sidebar-container .el-submenu .el-menu-item:hover,
#app .sidebar-container .el-submenu .el-menu-item.is-active,
.el-menu--popup .el-menu-item:hover,
.el-menu--popup .el-menu-item.is-active {
  background-color: #e8f3fc !important;
  color: #1d6fb8 !important;
}
#app .sidebar-container .el-submenu .el-menu-item .svg-icon,
#app .sidebar-container .el-submenu .el-menu .el-submenu__icon-arrow,
#app .sidebar-container .el-submenu .el-menu .svg-icon,
.el-menu--popup .svg-icon {
  color: #5c6b7a !important;
}

/* 首页分布式看板 */
.app-main { position: relative; }
body.dz-home-on .app-main {
  min-height: calc(100vh - 50px);
  background: #eef3f8;
}
body.dz-home-on .app-main > :not(#dz-home) { display: none !important; }
#dz-home {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: auto;
  padding: 20px 22px 36px;
  background: #eef3f8;
  box-sizing: border-box;
}
.dz-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.dz-head h1 { margin: 0; font-size: 22px; color: #17324d; font-weight: 650; }
.dz-head p { margin: 6px 0 0; color: #6d7f92; font-size: 13px; }
.dz-time { color: #6d7f92; font-size: 13px; }
.dz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.dz-card, .dz-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(23, 50, 77, 0.06);
}
.dz-card { padding: 16px 16px 14px; cursor: pointer; border: 1px solid transparent; }
.dz-card:hover { border-color: #c5daf0; }
.dz-card .k { color: #6d7f92; font-size: 13px; }
.dz-card .v { margin-top: 8px; font-size: 28px; line-height: 1.1; color: #17324d; font-weight: 700; }
.dz-card .s { margin-top: 8px; color: #8aa0b5; font-size: 12px; }
.dz-card.warn .v { color: #b86a12; }
.dz-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; }
.dz-panel { padding: 16px 18px 8px; }
.dz-panel h2 { margin: 0 0 12px; font-size: 15px; color: #17324d; }
.dz-market { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #eef2f6; }
.dz-market b { display: block; color: #17324d; font-size: 16px; }
.dz-market span, .dz-recent span { color: #6d7f92; font-size: 12px; }
.dz-recent { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid #eef2f6; color: #17324d; }
@media (max-width: 900px) { .dz-split { grid-template-columns: 1fr; } }

/* 系统设置 */
body.dz-setting-on .app-main > :not(#dz-setting) { display: none !important; }
#dz-setting { padding: 16px 18px 32px; }
#dz-setting .dz-panel { padding: 16px 18px 18px; margin-bottom: 14px; }
#dz-setting h2 { margin: 0 0 12px; font-size: 16px; color: #17324d; }
#dz-setting label { display: block; margin: 10px 0 4px; color: #60758a; font-size: 12px; }
#dz-setting input[type="text"], #dz-setting textarea {
  width: 100%;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  padding: 8px 10px;
  box-sizing: border-box;
  font: inherit;
  color: #17324d;
}
#dz-setting input[type="text"] { height: 34px; padding: 0 10px; }
#dz-setting textarea { min-height: 220px; resize: vertical; line-height: 1.5; }
#dz-setting .pair { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
#dz-setting .preview {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 10px;
  background: #e8eef5;
  margin-bottom: 8px;
}
#dz-setting .hint { color: #8aa0b5; font-size: 12px; margin: 0 0 8px; }
#dz-setting button.ghost {
  height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  background: #e8eef5;
  color: #17324d;
  cursor: pointer;
}

/* 个人中心：邀请码与谷歌验证 */
#dz-profile { margin-top: 16px; }
#dz-profile .dz-panel { padding: 18px 20px 20px; margin-bottom: 14px; }
.dz-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.dz-code { font-size: 32px; letter-spacing: 6px; color: #1d6fb8; font-weight: 700; }
.dz-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.dz-actions button, .dz-switch {
  border: 0;
  border-radius: 8px;
  height: 34px;
  padding: 0 14px;
  background: #1d6fb8;
  color: #fff;
  cursor: pointer;
}
.dz-actions button.ghost { background: #e8eef5; color: #17324d; }
.dz-actions input {
  height: 34px;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  padding: 0 10px;
  width: 140px;
}
.dz-secret { font-family: ui-monospace, monospace; background: #f4f7fb; padding: 8px 10px; border-radius: 8px; word-break: break-all; color: #17324d; }
.dz-qr { width: 168px; height: 168px; border: 1px solid #e6eef6; border-radius: 8px; }
.dz-note { color: #6d7f92; font-size: 13px; margin: 6px 0 0; }
.dz-on { color: #1d6fb8; font-weight: 650; }
.dz-off { color: #8aa0b5; }