/* Tailwind 主题扩展 */
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        accent: '#38BDF8',
        secondary: '#8B5CF6',
        gold: '#F6C453',
        success: '#34D399',
        danger: '#EF4444'
      }
    }
  }
}
</script>

/* 自定义样式 */
:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  margin: 0;
}

body {
  color: #fff;
  background:
    radial-gradient(circle at 12% 8%, rgba(34,211,238,.34), transparent 28%),
    radial-gradient(circle at 86% 4%, rgba(139,92,246,.38), transparent 27%),
    radial-gradient(circle at 52% 108%, rgba(59,130,246,.22), transparent 38%),
    linear-gradient(145deg, #020617 0%, #061124 43%, #101B3D 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(103,232,249,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,232,249,.12) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

.zhj-login-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 42px 34px 52px;
  display: flex;
  align-items: center;
}

.zhj-login-wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 54px;
  align-items: center;
}

.zhj-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(125,211,252,.20);
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  padding: 8px 14px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.zhj-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #34D399;
  box-shadow: 0 0 18px rgba(52,211,153,.7);
}

.zhj-title {
  margin: 18px 0 0;
  font-size: clamp(42px, 5vw, 78px);
  line-height: .98;
  font-weight: 1000;
  letter-spacing: -.045em;
}

.zhj-title span {
  background: linear-gradient(90deg, #7DD3FC, #C4B5FD, #FDE68A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zhj-subtitle {
  max-width: 680px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 18px;
  line-height: 1.85;
}

.zhj-feature-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 520px;
}

.zhj-feature {
  min-height: 118px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
}

.zhj-feature i { font-size: 23px; color: #67E8F9; }
.zhj-feature b { display: block; margin-top: 14px; font-size: 15px; }
.zhj-feature span { display: block; margin-top: 5px; font-size: 12px; color: rgba(255,255,255,.48); }

.login-card-fix {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 36px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 85px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10);
}

.zhj-form-icon {
  width: 68px;
  height: 68px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 25px;
  background: linear-gradient(135deg, #38BDF8, #3B82F6 48%, #8B5CF6);
  box-shadow: 0 18px 48px rgba(59,130,246,.28);
}

.zhj-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  margin: 24px 0;
}

.zhj-tabs button {
  height: 46px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: rgba(255,255,255,.58);
  font-weight: 900;
  cursor: pointer;
}

.zhj-tabs button.bg-white\/10 {
  background: rgba(255,255,255,.12) !important;
  color: #67E8F9 !important;
}

.zhj-input {
  width: 100%;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  outline: none;
  background: rgba(2,6,23,.36);
  color: #fff;
  padding: 0 16px;
  font-size: 15px;
}

.code-row { display: flex; gap: 10px; }
.code-row input { flex: 1; min-width: 0; }

.code-btn {
  height: 54px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.zhj-submit {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 19px;
  background: linear-gradient(135deg, #38BDF8, #3B82F6 48%, #8B5CF6);
  color: #fff;
  font-size: 17px;
  font-weight: 1000;
  cursor: pointer;
}

.hidden { display: none !important; }

@media(max-width: 920px) {
  .zhj-login-wrap { grid-template-columns: 1fr; }
  .zhj-login-left { display: none; }

  /* ===== 核心修复：强制登录主容器锁定一屏并全居中 ===== */
  .zhj-login-main {
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  /* ===== 核心修复：使登录卡片尺寸与注册页完美对齐 ===== */
  .login-card-fix {
    width: 88% !important;
    max-width: 350px !important;   /* 宽度锁定 350px */
    padding: 20px 22px !important;  /* 收紧内边距 */
    border-radius: 28px !important;
    box-sizing: border-box;
  }

  /* 同步缩小图标和输入框高度 */
  .zhj-form-icon {
    width: 54px !important;
    height: 54px !important;
    font-size: 20px !important;
    margin: 0 auto 10px !important;
  }
  .zhj-tabs { margin: 16px 0 !important; } /* 缩小 Tab 边距 */
  
  .zhj-input {
    height: 46px !important;  /* 统一降为 46px */
    font-size: 14px !important;
  }
  .code-btn {
    height: 46px !important;
    line-height: 46px !important;
  }
  .zhj-submit {
    height: 48px !important;  /* 统一降为 48px */
    font-size: 15px !important;
  }
}

/* ===== 智绘嘉AI 手机端登录输入框精修 ===== */
@media(max-width:920px){
  .zhj-input{
    height:46px !important;
    min-height:46px !important;
    line-height:46px !important;
    box-sizing:border-box !important;
  }

  .code-row{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  .code-row input{
    height:46px !important;
    min-height:46px !important;
    line-height:46px !important;
    flex:1 !important;
  }

  .code-btn{
    height:46px !important;
    line-height:46px !important;
    flex:0 0 96px !important;
    padding:0 8px !important;
    white-space:nowrap !important;
  }

  .zhj-submit{
    height:48px !important;
    line-height:48px !important;
  }
}


/* =====================================
   智绘嘉AI 手机登录验证码布局修复
   ===================================== */

@media(max-width:920px){

.zhj-login-main .code-row,
.zhj-login-main .zhj-code-row,
.zhj-login-main .verify-row{

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    gap:10px !important;

    width:100% !important;

}


.zhj-login-main .code-row input,
.zhj-login-main .zhj-code-row input,
.zhj-login-main .verify-row input{

    flex:1 !important;

    width:auto !important;

}


.zhj-login-main .code-row button,
.zhj-login-main .zhj-code-btn,
.zhj-login-main .verify-row button{

    width:90px !important;

    flex:none !important;

    height:46px !important;

    line-height:46px !important;

    padding:0 !important;

    white-space:nowrap !important;

}

}