*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

        /* ─── Container ─────────────────────────────────────────────────────── */
        .login-container {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        @media (max-width: 1024px) {
            .login-container { grid-template-columns: 1fr; }
        }

        /* ─── Left Panel ────────────────────────────────────────────────────── */
        .login-left-panel {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 48px;
            background: linear-gradient(145deg, #0f172a 0%, #1e3a8a 50%, #1e40af 100%);
            overflow: hidden;
        }
        @media (max-width: 1024px) {
            .login-left-panel { display: none; }
        }

        .login-left-top {
            position: relative; z-index: 20;
            display: flex; align-items: center; gap: 10px;
            font-size: 20px; font-weight: 700; color: #fff;
            letter-spacing: 0.5px;
        }
        .login-brand-mark {
            width: 40px; height: 40px; border-radius: 10px;
            background: transparent;
            border: none;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
.login-brand-mark img { width:40px; height:40px; display:block; border-radius:8px; }
.sidebar-bottom .copyright img { border-radius:6px; }
        .login-brand-name { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 1px; }

        .login-characters-area {
            position: relative; z-index: 20;
            display: flex; align-items: flex-end; justify-content: center;
            height: 500px;
        }

        .login-left-footer {
            position: relative; z-index: 20;
            display: flex; align-items: center; gap: 24px;
        }
        .login-left-footer a {
            font-size: 13px; color: rgba(255,255,255,0.45);
            text-decoration: none; transition: color 0.2s; cursor: pointer;
        }
        .login-left-footer a:hover { color: rgba(255,255,255,0.85); }

        .login-decor-blur1 {
            position: absolute; top: 15%; right: 10%;
            width: 300px; height: 300px;
            background: rgba(59,130,246,0.25); border-radius: 50%;
            filter: blur(80px); pointer-events: none; z-index: 0;
        }
        .login-decor-blur2 {
            position: absolute; bottom: 10%; left: 5%;
            width: 400px; height: 400px;
            background: rgba(30,64,175,0.3); border-radius: 50%;
            filter: blur(100px); pointer-events: none; z-index: 0;
        }
        .login-decor-grid {
            position: absolute; inset: 0;
            background-image:
                    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none; z-index: 1;
        }

        /* ─── Right Panel ───────────────────────────────────────────────────── */
        .login-right-panel {
            display: flex; align-items: center; justify-content: center;
            padding: 32px; background: #fff;
        }
        .login-form-wrapper { width: 100%; max-width: 400px; }

        .login-mobile-logo {
            display: none; align-items: center; justify-content: center;
            gap: 8px; font-size: 18px; font-weight: 700; color: #0f172a;
            margin-bottom: 48px;
        }
        @media (max-width: 1024px) {
            .login-mobile-logo { display: flex; }
        }
        .login-mobile-logo-icon {
            width: 32px; height: 32px; border-radius: 8px;
            background: #eff6ff; display: flex; align-items: center; justify-content: center;
        }

        .login-form-header { text-align: center; margin-bottom: 40px; }
        .login-form-title {
            font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
            color: #0f172a; margin: 0 0 10px 0; line-height: 1.3;
        }
        .login-form-subtitle {
            font-size: 14px; color: #6b7280; margin: 0; line-height: 1.6;
        }

        /* ─── Form fields ───────────────────────────────────────────────────── */
        .login-field-group { margin-bottom: 20px; }
        .login-field-label {
            font-size: 13px; font-weight: 500; color: #374151;
            margin-bottom: 6px; letter-spacing: 0.2px;
        }
        .login-input-wrap {
            position: relative;
            height: 48px;
            background: #fafafa;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            transition: border-color 0.2s, box-shadow 0.2s;
            display: flex; align-items: center;
        }
        .login-input-wrap:hover { border-color: #3b82f6; }
        .login-input-wrap:focus-within {
            border-color: #1e40af;
            box-shadow: 0 0 0 3px rgba(30,64,175,0.08);
            background: #fff;
        }
        .login-input-wrap .login-prefix-icon {
            padding: 0 12px; color: #b0b7c3; font-size: 15px;
            display: flex; align-items: center;
        }
        .login-input-wrap input[type="text"],
        .login-input-wrap input[type="password"] {
            flex: 1; height: 100%; border: none; outline: none;
            background: transparent; font-size: 14px; color: #111827;
        }
        .login-input-wrap input::placeholder { color: #c0c4cc; }
        .login-input-wrap .login-eye-toggle {
            padding: 0 12px; color: #6b7280; cursor: pointer;
            font-size: 16px; display: flex; align-items: center;
            transition: color 0.2s; user-select: none;
        }
        .login-input-wrap .login-eye-toggle:hover { color: #374151; }

        .login-error-box {
            padding: 10px 14px; font-size: 13px; color: #dc2626;
            background: #fef2f2; border: 1px solid #fecaca;
            border-radius: 8px; margin-bottom: 16px;
        }

        .login-submit-btn {
            width: 100%; height: 48px; border: none;
            font-size: 15px; font-weight: 600;
            border-radius: 10px;
            background: #1e40af; color: #fff;
            letter-spacing: 1px; cursor: pointer;
            transition: background 0.2s, opacity 0.2s;
        }
        .login-submit-btn:hover { background: #1d4ed8; }
        .login-submit-btn:active { opacity: 0.85; }
        .login-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

        .login-divider {
            display: flex; align-items: center; gap: 12px;
            margin: 20px 0 0; color: #d1d5db; font-size: 13px;
        }
        .login-divider::before,
        .login-divider::after {
            content: ''; flex: 1; height: 1px; background: #e5e7eb;
        }
        .login-divider span { color: #9ca3af; white-space: nowrap; }

        .login-third-btn {
            width: 100%; height: 48px; border-radius: 10px;
            background: #fff; border: 1px solid #e5e7eb;
            color: #374151; font-size: 14px; cursor: pointer;
            transition: background 0.2s, border-color 0.2s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            margin-top: 12px;
        }
        .login-third-btn:hover {
            background: #eff6ff; border-color: rgba(30,64,175,0.25);
            color: #1e40af;
        }

        .login-signup-row {
            text-align: center; font-size: 13px; color: #6b7280; margin-top: 28px;
        }
        .login-signup-link { color: #1e40af; font-weight: 500; text-decoration: none; cursor: pointer; }
        .login-signup-link:hover { text-decoration: underline; color: #1d4ed8; }

        /* ─── Captcha row ───────────────────────────────────────────────────── */
        .login-captcha-row {
            display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
        }
        .login-captcha-row .login-captcha-input {
            flex: 1; height: 48px; padding: 0 12px;
            border: 1px solid #e5e7eb; border-radius: 10px;
            background: #fafafa; font-size: 14px; color: #111827;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .login-captcha-row .login-captcha-input:focus {
            border-color: #1e40af; outline: none;
            box-shadow: 0 0 0 3px rgba(30,64,175,0.08); background: #fff;
        }
        .login-captcha-img {
            height: 48px; border-radius: 10px; cursor: pointer;
        }

        /* ─── Keep login checkbox ───────────────────────────────────────────── */
        .login-keep-row { margin-bottom: 16px; }
        .login-keep-row label {
            font-size: 13px; color: #6b7280; cursor: pointer;
            display: flex; align-items: center; gap: 6px;
        }

        /* ─── Character SVG icons ──────────────────────────────────────────── */
        .login-char-icon { width: 1em; height: 1em; font-size: 15px; }

/* old login shells — never show */
.login-wrapper .container,
.login-wrapper .top-nav,
.login-wrapper .use-tip,
.login-wrapper .logo-box { display: none !important; }

/* ─── CRM page shell overrides ─── */
.login-wrapper.xhmf-clone {
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  background: #fff !important;
  display: block !important;
  overflow: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif !important;
}
.login-wrapper.xhmf-clone > .top-nav,
.login-wrapper.xhmf-clone > .fx-canvas,
.login-wrapper.xhmf-clone > .grid-layer,
.login-wrapper.xhmf-clone > .orb,
.login-wrapper.xhmf-clone > .container,
.login-wrapper.xhmf-clone .brand-lockup,
.login-wrapper.xhmf-clone .nq-left,
.login-wrapper.xhmf-clone .signal-list,
.login-wrapper.xhmf-clone .left .main-pic,
.login-wrapper.xhmf-clone .left .title,
.login-wrapper.xhmf-clone .left .mini-title,
.login-wrapper.xhmf-clone .left .desc,
.login-wrapper.xhmf-clone .logo-box,
.login-wrapper.xhmf-clone .panel-shine,
.login-wrapper.xhmf-clone .use-tip,
.login-wrapper.xhmf-clone .nq-form-sub,
.login-wrapper.xhmf-clone .welcome-kicker,
.login-wrapper.xhmf-clone .welcome-title,
.login-wrapper.xhmf-clone .login-left-footer,
.login-wrapper.xhmf-clone .copyright:not([data-nq="1"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.login-wrapper.xhmf-clone > .container {
  display: none !important;
}
.login-wrapper.xhmf-clone .login-container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-wrapper.xhmf-clone .login-main-content {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* Make Element UI form look like xhmf fields */
.login-wrapper.xhmf-clone .login-from {
  padding: 0 !important;
}
.login-wrapper.xhmf-clone .login-from .el-form-item {
  margin-bottom: 20px !important;
}
.login-wrapper.xhmf-clone .login-from .el-form-item:nth-child(1)::before {
  content: '用户名';
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.login-wrapper.xhmf-clone .login-from .el-form-item:nth-child(2)::before {
  content: '密码';
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.login-wrapper.xhmf-clone .login-from .el-input {
  background: transparent !important;
  height: auto !important;
}
.login-wrapper.xhmf-clone .login-from .el-input__inner {
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background: #fafafa !important;
  color: #111827 !important;
  padding: 0 12px !important;
  font-size: 14px !important;
}
.login-wrapper.xhmf-clone .login-from .el-input__inner::placeholder { color: #c0c4cc; }
.login-wrapper.xhmf-clone .login-from .el-input__inner:hover { border-color: #3b82f6 !important; }
.login-wrapper.xhmf-clone .login-from .el-input__inner:focus {
  border-color: #1e40af !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(30,64,175,0.08) !important;
}
.login-wrapper.xhmf-clone .login-action {
  padding: 0 !important;
  margin: 0 0 16px !important;
}
.login-wrapper.xhmf-clone .login-action .empty { display: none; }
/* tip floats under button — out of flow so centered panel won't jump */
.login-wrapper.xhmf-clone .control {
  position: relative !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
.login-wrapper.xhmf-clone .error-info,
.login-wrapper.xhmf-clone .error-info.ok {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 10px) !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
}
.login-wrapper.xhmf-clone .error-info.ok {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.login-wrapper.xhmf-clone .error-info .box {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #dc2626 !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.08);
}
.login-wrapper.xhmf-clone .error-info .box .icon {
  width: 14px !important;
  height: 14px !important;
  margin-right: 0 !important;
  flex-shrink: 0;
  opacity: 0.9;
}
.login-wrapper.xhmf-clone .login-from .el-input.error .el-input__inner,
.login-wrapper.xhmf-clone .login-from .el-input.error input {
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
  /* no expanding shadow — avoids visual hitch */
  box-shadow: none !important;
}
.login-wrapper.xhmf-clone .login-from .el-input.error .el-input__inner:focus,
.login-wrapper.xhmf-clone .login-from .el-input.error input:focus {
  border-color: #ef4444 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.login-wrapper.xhmf-clone .login-form-wrapper,
.login-wrapper.xhmf-clone .login-by-pwd,
.login-wrapper.xhmf-clone .xhmf-form-slot {
  overflow: visible !important;
}
.login-wrapper.xhmf-clone .control .btn {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  background: #1e40af !important;
  color: #fff !important;
  box-shadow: none !important;
}
.login-wrapper.xhmf-clone .control .btn:hover { background: #1d4ed8 !important; filter: none !important; transform: none !important; }
.login-wrapper.xhmf-clone .login-action .el-checkbox__label { color: #6b7280 !important; font-size: 13px !important; }
.login-wrapper.xhmf-clone .login-action .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #1e40af !important;
  border-color: #1e40af !important;
}
@media (max-width: 1024px) {
  .login-wrapper.xhmf-clone .login-container { grid-template-columns: 1fr !important; }
}

.login-wrapper.xhmf-clone #login-password,
.login-wrapper.xhmf-clone .login-from .el-input input[type="password"],
.login-wrapper.xhmf-clone .login-from .el-input #login-password {
  padding-right: 42px !important;
}
.login-wrapper.xhmf-clone .login-from .el-input {
  position: relative !important;
}
.login-wrapper.xhmf-clone #login-eye-toggle {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 42px !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9ca3af !important;
  cursor: pointer !important;
  z-index: 6 !important;
  user-select: none;
  transition: color 0.15s ease;
}
.login-wrapper.xhmf-clone #login-eye-toggle:hover {
  color: #4b5563 !important;
}
.login-wrapper.xhmf-clone #login-eye-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}
/* force sidebar brand */
.sidebar-bottom .copyright[data-nq="1"] {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.75) !important;
  font-size: 12px !important;
}
.sidebar-bottom .copyright[data-nq="1"] img {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px;
}