* {
      -webkit-tap-highlight-color: transparent
    }

    ::-webkit-scrollbar {
      display: none
    }

    body {
      font-family: 'PingFang SC', sans-serif;
      background: #0A0A0D;
      color: #F5F5DC
    }

    html {
      background: #0A0A0D
    }

    .title-kai {
      font-family: 'Ma Shan Zheng', serif;
      letter-spacing: .05em
    }

    .hr-gold {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .4), transparent)
    }

    .bg-bagua {
      background-image:
        radial-gradient(circle at 20% 20%, rgba(212, 175, 55, .05) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(212, 175, 55, .04) 0 1px, transparent 1px);
      background-size: 140px 140px, 180px 180px
    }

    .fade-up {
      animation: fu .6s ease-out both
    }

    @keyframes fu {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1
      }
    }

    .card {
      border-radius: 10px;
      border: 1px solid rgba(212, 175, 55, .2);
      background: rgba(20, 20, 26, .6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: all .3s
    }

    .card:hover {
      box-shadow: 0 0 20px rgba(212, 175, 55, .12);
      border-color: rgba(212, 175, 55, .4)
    }

    .card:active {
      transform: scale(.99)
    }

    .chip {
      display: inline-flex;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      line-height: 1.4;
      border: 1px solid
    }

    /* 五行徽标 */
    .wx-badge {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Ma Shan Zheng';
      font-size: 20px;
      border: 1.5px solid;
      background: rgba(255, 255, 255, .03)
    }

    /* 进度条 */
    .bar {
      height: 4px;
      border-radius: 2px;
      background: rgba(212, 175, 55, .1);
      overflow: hidden
    }

    .bar-fill {
      height: 100%;
      border-radius: 2px;
      animation: grow 1.2s ease-out both
    }

    @keyframes grow {
      from {
        width: 0
      }
    }

    /* 五行环 */
    .wx-ring {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 0 auto
    }

    .wx-node {
      position: absolute;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Ma Shan Zheng';
      font-size: 22px;
      border: 1.5px solid;
      background: #14141A;
      transform: translate(-50%, -50%)
    }

    @media(min-width:768px) {
      .container-main {
        max-width: 680px
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .ring-outer,
      .ring-inner {
        animation: none
      }

      .star {
        animation: none;
        opacity: .3
      }

      .fade-up {
        animation: none;
        opacity: 1
      }

      .bar-fill {
        animation: none
      }
    }

    /* 罗盘旋转 */
    .ring-outer {
      animation: spin 120s linear infinite;
      will-change: transform
    }

    .ring-inner {
      animation: spin 90s linear infinite reverse;
      will-change: transform
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    /* 星空 */
    .star-field {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden
    }

    .star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #D4AF37;
      border-radius: 50%;
      opacity: .3;
      animation: tw 3s ease-in-out infinite
    }

    @keyframes tw {

      0%,
      100% {
        opacity: .15
      }

      50% {
        opacity: .7
      }
    }

    /* ====== 登录弹窗响应式样式 ====== */
    .login-overlay {
      position: fixed; inset: 0; z-index: 99998;
      display: none; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom) 16px;
    }
    .login-overlay.show { display: flex; }

    .login-modal {
      position: relative; width: 100%; max-width: 380px;
      max-height: calc(92vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      overflow-y: auto;
      background: #14141A; border: 1px solid rgba(212,175,55,0.25);
      border-radius: 16px; padding: 24px 20px 20px;
      box-shadow: 0 0 40px rgba(212,175,55,0.1);
      animation: loginIn .35s ease-out;
    }
    @keyframes loginIn {
      from { opacity: 0; transform: translateY(12px) scale(.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .login-close {
      position: absolute; top: 12px; right: 12px;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      background: none; border: none; color: #A8A89A;
      cursor: pointer; border-radius: 50%; font-size: 18px;
      transition: all .2s;
    }
    .login-close:hover { background: rgba(212,175,55,0.1); color: #D4AF37; }

    .login-title   { font-family: 'Ma Shan Zheng',serif; font-size: 22px; color: #D4AF37; letter-spacing: .1em; }
    .login-subtitle{ font-size: 11px; color: #A8A89A; margin-top: 3px; letter-spacing: .2em; }

    .login-label { display: block; font-size: 12px; color: #A8A89A; margin-bottom: 5px; letter-spacing: .1em; }

    .login-input {
      width: 100%; padding: 10px 14px;
      background: #0A0A0D; border: 1px solid rgba(212,175,55,0.2);
      border-radius: 10px; color: #F5F5DC; font-size: 14px;
      outline: none; transition: border-color .3s; box-sizing: border-box;
    }
    .login-input:focus { border-color: rgba(212,175,55,0.5); }

    .login-btn {
      width: 100%; border: none; border-radius: 9999px;
      font-size: 15px; font-weight: 600; cursor: pointer;
      letter-spacing: .1em; transition: all .3s;
      touch-action: manipulation;
    }
    .login-btn-primary {
      padding: 12px;
      background: linear-gradient(135deg,#D4AF37,#E8C86A);
      color: #0A0A0D; box-shadow: 0 0 20px rgba(212,175,55,.15);
    }
    .login-btn-primary:hover { box-shadow: 0 0 32px rgba(212,175,55,.3); }
    .login-btn-primary:active { transform: scale(.97); }

    .login-btn-ghost {
      padding: 10px;
      background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.3);
      color: #D4AF37; font-size: 14px;
    }
    .login-btn-ghost:hover { background: rgba(212,175,55,.2); box-shadow: 0 0 20px rgba(212,175,55,.15); }
    .login-btn-ghost:active { transform: scale(.97); }

    .login-btn-sms {
      padding: 10px 12px;
      background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.3);
      border-radius: 10px; color: #D4AF37; font-size: 12px;
      cursor: pointer; white-space: nowrap; transition: all .3s;
      touch-action: manipulation;
    }
    .login-btn-sms:hover { background: rgba(212,175,55,.2); }
    .login-btn-sms:disabled { opacity: .6; }

    .login-link { color: #A8A89A; cursor: pointer; text-decoration: none; font-size: 11px; transition: color .2s; }
    .login-link:hover { color: #D4AF37; }

    .login-hint { font-size: 10px; color: #A8A89A; margin-top: 3px; min-height: 12px; }
    .login-error{ font-size: 11px; min-height: 16px; margin-bottom: 8px; text-align: center; }

    .login-chip { font-size: 10px; }
    .login-chip span { margin-left: 2px; }

    /* -- 移动端 -- */
    @media (max-width: 640px) {
      .login-modal { padding: 20px 16px 16px; border-radius: 14px; }
      .login-input { font-size: 16px; padding: 11px 14px; }  /* 16px 防 iOS 自动缩放 */
      .login-btn { font-size: 16px; padding: 13px; }
      .login-btn-ghost { padding: 11px; font-size: 15px; }
      .login-btn-sms { font-size: 13px; padding: 11px 12px; }
      .login-close { width: 40px; height: 40px; font-size: 20px; }
      .login-title { font-size: 20px; }
    }

    /* -- 桌面端 -- */
    @media (min-width: 1024px) {
      .login-modal { max-width: 420px; padding: 28px 28px 24px; }
      .login-title { font-size: 24px; }
      .login-input { font-size: 14px; padding: 10px 16px; }
      .login-label { font-size: 13px; }
    }

    /* 弹窗打开时禁止 body 滚动 */
    body.login-open { overflow: hidden; touch-action: none; }
  

/* === 响应式 === */
@media (max-width: 640px) {
  .module-card { padding: 1rem; }
  .module-card .text-3xl { font-size: 1.25rem; }
  header .title-kai { font-size: 1.2rem; }
}
/* === 立体感 === */
.module-card {
  position: relative;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease;
  will-change: transform;
}
.module-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 40px rgba(212,175,55,0.12), 0 0 0 1px rgba(212,175,55,0.2);
}
/* === 毛玻璃导航 === */
header nav { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
/* === 弹窗动画 === */
#loginDialog, #registerDialog { transition: opacity 0.25s ease, transform 0.25s ease; opacity: 0; transform: scale(0.95); pointer-events: none; }
#loginDialog.open, #registerDialog.open { opacity: 1; transform: scale(1); pointer-events: auto; }
/* === 按钮加载 === */
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }