/* 客户登录页：全屏居中，禁止整页滚动 */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.customer-login {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #e8f2ef;
  font-family: "Manrope", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #071512;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.cl-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(45, 180, 150, 0.28), transparent 55%),
    radial-gradient(900px 500px at 110% 20%, rgba(212, 160, 80, 0.18), transparent 50%),
    linear-gradient(165deg, #061310 0%, #0b221c 42%, #0a1714 100%);
}

.cl-grid {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(232, 242, 239, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 242, 239, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at center, #000 35%, transparent 78%);
  mask-image: radial-gradient(circle at center, #000 35%, transparent 78%);
}

.cl-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  -webkit-animation: cl-float 12s ease-in-out infinite;
  animation: cl-float 12s ease-in-out infinite;
}
.cl-orb-a {
  width: 220px;
  height: 220px;
  left: 4%;
  bottom: 8%;
  background: radial-gradient(circle, rgba(56, 196, 160, 0.45), transparent 70%);
}
.cl-orb-b {
  width: 180px;
  height: 180px;
  right: 6%;
  top: 10%;
  background: radial-gradient(circle, rgba(230, 180, 90, 0.35), transparent 70%);
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}
.cl-orb-c {
  width: 120px;
  height: 120px;
  left: 46%;
  top: 12%;
  background: radial-gradient(circle, rgba(120, 210, 190, 0.25), transparent 70%);
  -webkit-animation-delay: -7s;
  animation-delay: -7s;
}

@-webkit-keyframes cl-float {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-12px); transform: translateY(-12px); }
}
@keyframes cl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.cl-shell {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

.cl-card {
  width: 100%;
  max-width: 400px;
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 28px 28px;
  box-sizing: border-box;
  border-radius: 22px;
  background: rgba(10, 28, 24, 0.78);
  border: 1px solid rgba(180, 220, 205, 0.16);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-animation: cl-in 0.55s ease both;
  animation: cl-in 0.55s ease both;
}

@-webkit-keyframes cl-in {
  from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes cl-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.cl-brand {
  margin: 0 0 14px;
  font-family: "Newsreader", "Songti SC", serif;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #f3faf7;
  font-weight: 600;
}

.cl-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: #d7efe6;
}

.cl-sub {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(200, 224, 214, 0.78);
}

.cl-label {
  display: block;
  margin: 0 0 7px;
  font-size: 13px;
  color: rgba(210, 230, 222, 0.85);
}

.cl-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(170, 210, 195, 0.22);
  background: rgba(5, 18, 15, 0.75);
  color: #eef8f4;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}

.cl-input:focus {
  border-color: rgba(70, 200, 165, 0.75);
  box-shadow: 0 0 0 3px rgba(56, 180, 150, 0.18);
}

.cl-input::-webkit-input-placeholder { color: rgba(180, 205, 195, 0.45); }
.cl-input::-moz-placeholder { color: rgba(180, 205, 195, 0.45); }
.cl-input::placeholder { color: rgba(180, 205, 195, 0.45); }

.cl-err {
  margin: -2px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(180, 50, 50, 0.16);
  border: 1px solid rgba(230, 120, 120, 0.35);
  color: #ffb4b4;
  font-size: 13px;
}

.cl-btn {
  width: 100%;
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: #06241c;
  background: linear-gradient(135deg, #5fe0bc 0%, #2fb892 55%, #1f9a7a 100%);
  box-shadow: 0 10px 24px rgba(40, 170, 130, 0.35);
}

.cl-btn:hover { filter: brightness(1.05); }
.cl-btn:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

.cl-support {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
.cl-support a {
  pointer-events: auto;
  color: rgba(232, 242, 239, 0.78);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 242, 239, 0.28);
  padding-bottom: 1px;
}
.cl-support a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 480px) {
  .cl-shell { padding: 12px; }
  .cl-card {
    padding: 24px 18px 20px;
    border-radius: 18px;
  }
  .cl-brand { font-size: 24px; }
}