/* 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;
}

/* ===== 核心修复：参考 login 强制锁定一屏高度，彻底干掉垂直与水平滚动条 ===== */
html, body {
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

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%);
}

/* ===== 基础布局与区块（PC端） ===== */
.zhj-register-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 42px 34px 52px;
  display: flex;
  align-items: center;
}

.zhj-register-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); }

/* ===== 表单卡片核心配置（PC端） ===== */
.zhj-register-card {
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  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);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.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);
}

/* ===== 输入框与组件（PC端基础样式） ===== */
.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;
}

.zhj-input::placeholder { color: rgba(255,255,255,.32) }
.zhj-input:focus {
  border-color: #38BDF8;
  box-shadow: 0 0 0 3px rgba(56,189,248,.16);
}

/* 强行将文本渲染为保密圆点，干掉系统的过渡闪烁 */
.zhj-input-secure {
  -webkit-text-security: disc !important;
  text-security: disc !important;
}

/* 验证码弹性横行 */
.zhj-code-row {
  display: flex;
  gap: 10px;
  min-width: 0;
  align-items: stretch;
}

.zhj-code-row input {
  min-width: 0;
  flex: 1 1 auto;
  height: 54px;
  line-height: 54px;
}

.zhj-code-btn {
  flex: 0 0 132px;
  height: 54px;
  line-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-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  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;
  box-shadow: 0 18px 48px rgba(59,130,246,.28);
}

/* ===== 响应式媒体查询区域 ===== */
@media(min-width: 921px) {
  #mobileNavContainer { display: none !important; }
  #pcSidebarContainer { display: block !important; }
  .zhj-register-main, footer { margin-left: 220px; }
}

/* ===== 移动端核心适配（全面合并与极致对齐） ===== */
@media(max-width: 920px) {
  #pcSidebarContainer { display: none !important; }
  #mobileNavContainer {
    display: block !important;
    position: relative !important;
    z-index: 2147483000 !important;
  }
  body::before { display: none }
  
  /* 视图锁死一屏，绝对垂直水平居中 */
  .zhj-register-main {
    padding: 0 16px;
    display: flex;
    align-items: center; 
    justify-content: center;
    height: 100vh;
  }
  
  .zhj-register-wrap {
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .zhj-register-left { display: none; }
  
  /* 限制卡片整体尺寸与边界，对齐登录页高度 */
  .zhj-register-card {
    width: 86% !important;     
    max-width: 340px !important;  
    padding: 16px 20px !important; 
    border-radius: 24px !important;
    box-sizing: border-box;
  }

  /* 所有输入框组件包裹容器强行统一度量衡为 42px */
  .zhj-input-group,
  .zhj-code-row {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    gap: 10px !important;
    display: flex !important;
    align-items: stretch !important;
  }

  /* 普通输入框和验证码输入框高度全面死锁 */
  .zhj-input,
  .zhj-code-row input {
    height: 42px !important;
    line-height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* 验证码按钮完美缩矮平齐 */
  .zhj-code-btn {
    height: 42px !important;
    line-height: 42px !important;
    flex: 0 0 100px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
    padding: 0 10px !important;
  }

  /* 紧凑型手机端头部间距 */
  .zhj-form-icon {
    width: 46px !important;      
    height: 46px !important;
    font-size: 18px !important;
    margin: 0 auto 6px !important;
  }
  .zhj-register-card h2 {
    font-size: 1.35rem !important; 
    margin-bottom: 2px !important;
  }
  .zhj-register-card p {
    margin-top: 2px !important;    
    font-size: 12px !important;
  }
  .zhj-register-card .flex.items-center.gap-3 {
    margin-bottom: 12px !important; 
    margin-top: 8px !important;
  }

  /* 紧凑表单纵向字段间距 */
  .space-y-4 > * + * {
    margin-top: 10px !important;   
  }

  /* 提交注册按钮高度微调 */
  .zhj-submit {
    height: 44px !important;       
    font-size: 14px !important;
    border-radius: 14px !important;
    margin-top: 4px !important;
  }
  
  .text-center.mt-5 {
    margin-top: 12px !important;   
  }
}

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

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

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

  .zhj-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-register-card .space-y-4 > * + * {

        margin-top:14px !important;

    }


    /* 验证码这一行保持高度，不挤压下一行 */

    .zhj-register-card .zhj-code-row {

        margin-bottom:14px !important;

    }


    /* 输入框统一高度 */

    .zhj-register-card .zhj-input,
    .zhj-register-card .zhj-code-row input {

        height:46px !important;

        min-height:46px !important;

        line-height:46px !important;

    }


    /* 验证码按钮同步 */

    .zhj-register-card .zhj-code-btn {

        height:46px !important;

        line-height:46px !important;

    }


}