/* ========== 上上签 - 手机端样式 ========== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --red:#C41E3A;
  --dark-red:#8B1A2B;
  --gold:#D4A017;
  --light-gold:#F0D060;
  --bg:#1A0A0A;
  --card-bg:#2A1015;
  --text:#F5E6D0;
  --text-dim:#A08070;
  --text-bright:#FFE8C8;
  --radius:12px;
  --shadow:0 4px 20px rgba(0,0,0,0.3);
}
html,body{height:100%;overflow:hidden}
body{
  font-family:'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.5;
  user-select:none;
  -webkit-user-select:none;
}

/* Pages */
.page{display:none;height:100%;flex-direction:column;position:absolute;top:0;left:0;width:100%;z-index:200;background:var(--bg)}
.page.active{display:flex}
.page-body{flex:1;overflow-y:auto;padding:16px 16px 80px;-webkit-overflow-scrolling:touch}

/* ===== 首页 ===== */
#page-home{background:linear-gradient(180deg,#1A0A0A 0%,#2A1015 50%,#1A0A0A 100%)}
.home-bg-pattern{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(196,30,58,0.15) 0%, transparent 70%);
  pointer-events:none;
}
.home-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;padding:20px}
/* 首页banner */
.home-banner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,rgba(212,160,23,0.15),rgba(196,30,58,0.1));
  border:1px solid rgba(212,160,23,0.25);border-radius:var(--radius);
  padding:14px 16px;margin:0 10px 12px;cursor:pointer;transition:all 0.3s;
}
.home-banner:active{transform:scale(0.97);border-color:var(--gold)}
.banner-icon{font-size:32px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(212,160,23,0.15);border-radius:50%}
.banner-text{flex:1;display:flex;flex-direction:column}
.banner-title{font-size:15px;color:var(--gold);font-weight:600}
.banner-sub{font-size:12px;color:var(--text-dim);margin-top:2px}
.banner-arrow{color:var(--gold);font-size:20px}

.logo-container{text-align:center;padding:40px 0 30px}
.logo-icon{
  width:80px;height:80px;margin:0 auto 12px;
  background:linear-gradient(135deg,var(--gold),#B8860B);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;color:var(--bg);font-weight:bold;
  box-shadow:0 0 30px rgba(212,160,23,0.4);
  animation:logoglow 2s ease-in-out infinite;
}
@keyframes logoglow{
  0%,100%{box-shadow:0 0 30px rgba(212,160,23,0.4)}
  50%{box-shadow:0 0 50px rgba(212,160,23,0.7)}
}
.logo-title{font-size:42px;font-weight:bold;color:var(--gold);letter-spacing:8px;text-shadow:0 2px 10px rgba(212,160,23,0.3)}
.logo-subtitle{font-size:14px;color:var(--text-dim);margin-top:4px;letter-spacing:4px}

.method-list{display:flex;flex-direction:column;gap:10px;padding:0 10px}
.method-card{
  display:flex;align-items:center;gap:14px;
  background:var(--card-bg);border:1px solid rgba(212,160,23,0.15);
  border-radius:var(--radius);padding:16px;
  cursor:pointer;transition:all 0.3s;
}
.method-card:active{transform:scale(0.97);border-color:var(--gold)}
.method-icon{font-size:28px;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.method-info h3{font-size:16px;color:var(--text-bright);font-weight:600}
.method-info p{font-size:13px;color:var(--text-dim);margin-top:2px}
.method-arrow{color:var(--gold);font-size:20px;margin-left:auto}

/* ===== 页头 ===== */
.page-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--card-bg);border-bottom:1px solid rgba(212,160,23,0.1);
  min-height:52px;
}
.page-header h2{font-size:18px;color:var(--gold);font-weight:600}
.back-btn{font-size:32px;color:var(--gold);background:none;border:none;cursor:pointer;padding:0 4px;line-height:1}
.header-spacer{width:32px}

/* ===== 设置卡片 ===== */
.setup-card{text-align:center;padding:30px 20px}
.setup-icon{font-size:48px;margin-bottom:12px}
.setup-card h3{font-size:20px;color:var(--text-bright);margin-bottom:8px}
.setup-card p{font-size:14px;color:var(--text-dim);margin-bottom:20px}

/* ===== 按钮 ===== */
.btn-primary,.btn-secondary{
  padding:12px 28px;border:none;border-radius:var(--radius);
  font-size:16px;cursor:pointer;font-family:inherit;font-weight:600;transition:all 0.2s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),#B8860B);
  color:var(--bg);
}
.btn-primary:active{transform:scale(0.96);opacity:0.9}
.btn-secondary{
  background:transparent;color:var(--gold);border:1px solid var(--gold);
}
.btn-secondary:active{background:rgba(212,160,23,0.15)}
.btn-group{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ===== 六爻摇卦 ===== */
.progress-bar{height:4px;background:rgba(255,255,255,0.1);border-radius:2px;margin-bottom:12px;overflow:hidden}
.progress-fill{height:100%;background:var(--gold);border-radius:2px;transition:width 0.3s;width:0%}
.toss-info{text-align:center;font-size:14px;color:var(--text-dim);margin-bottom:16px}
.toss-info strong{color:var(--gold);font-size:18px}

.coin-area{text-align:center;padding:20px 0;min-height:120px;display:flex;align-items:center;justify-content:center}
.coin{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#B8860B,#D4A017,#8B6914);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform 0.1s;font-size:24px;
  box-shadow:0 4px 15px rgba(212,160,23,0.3),inset 0 -2px 6px rgba(0,0,0,0.3);
}
.coin:active{transform:scale(0.9)}
.coin.tossing{
  animation:coinFlip 0.6s ease-in-out;
}
@keyframes coinFlip{
  0%{transform:rotateY(0) scale(1)}
  25%{transform:rotateY(180deg) scale(1.1)}
  50%{transform:rotateY(360deg) scale(1)}
  75%{transform:rotateY(540deg) scale(1.1)}
  100%{transform:rotateY(720deg) scale(1)}
}
.toss-hint{text-align:center;font-size:14px;color:var(--text-dim);margin-bottom:12px}

.hexagram-build{padding:12px 0}
.lines-stack{display:flex;flex-direction:column-reverse;align-items:center;gap:3px}
.yao-line{width:120px;height:8px;border-radius:4px;transition:all 0.5s}
.yao-line.yang{background:var(--gold)}
.yao-line.yin{background:transparent;border:2px solid var(--gold);height:6px;}
.yao-line.old-yang{background:var(--light-gold);box-shadow:0 0 8px rgba(240,208,96,0.6)}
.yao-line.old-yin{background:transparent;border:2px solid var(--light-gold);height:6px;box-shadow:0 0 8px rgba(240,208,96,0.3)}

/* ===== 数字输入 ===== */
.num-input-group{display:flex;gap:10px;justify-content:center;margin-bottom:16px}
.num-field{display:flex;flex-direction:column;align-items:center;gap:6px}
.num-field label{font-size:13px;color:var(--text-dim)}
.num-field input{
  width:70px;padding:8px;border:1px solid rgba(212,160,23,0.3);
  border-radius:8px;background:var(--card-bg);color:var(--text);
  font-size:18px;text-align:center;font-family:inherit;
}
.num-field input:focus{outline:none;border-color:var(--gold)}

/* ===== 占卜结果 ===== */
.result-hexagram{padding:20px;text-align:center;background:var(--card-bg);border-radius:var(--radius);margin-bottom:16px}
.hexagram-display{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:12px}
.hexagram-display .yao-line{width:140px}
.hex-name{font-size:24px;color:var(--gold);font-weight:bold;margin-bottom:4px}
.hex-sub{font-size:14px;color:var(--text-dim);margin-bottom:8px}
.hex-judgment{font-size:16px;color:var(--text-bright);font-style:italic;padding:12px;background:rgba(212,160,23,0.08);border-radius:8px;line-height:1.8}
.hex-meaning{font-size:14px;color:var(--text);margin-top:10px;line-height:1.8}
.hex-lines{margin-top:12px;text-align:left}
.hex-line{padding:8px 12px;border-left:3px solid var(--gold);margin-bottom:6px;font-size:13px;background:rgba(0,0,0,0.2);border-radius:0 6px 6px 0}
.hex-line .line-label{color:var(--gold);font-weight:600}
.hex-line.changing{border-left-color:var(--light-gold);background:rgba(240,208,96,0.08)}
.changing-notice{font-size:13px;color:var(--light-gold);margin-top:8px;padding:8px;background:rgba(240,208,96,0.08);border-radius:8px;text-align:center}

.result-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}

/* ===== 易经浏览 ===== */
.search-bar{margin-bottom:12px}
.search-bar input{
  width:100%;padding:10px 16px;border:1px solid rgba(212,160,23,0.2);
  border-radius:var(--radius);background:var(--card-bg);color:var(--text);
  font-size:16px;font-family:inherit;
}
.search-bar input:focus{outline:none;border-color:var(--gold)}
.search-bar input::placeholder{color:var(--text-dim)}

.hexagram-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hex-grid-item{
  background:var(--card-bg);border:1px solid rgba(212,160,23,0.1);
  border-radius:8px;padding:8px;text-align:center;cursor:pointer;transition:all 0.2s;
}
.hex-grid-item:active{transform:scale(0.95);border-color:var(--gold)}
.hex-grid-item .grid-num{font-size:11px;color:var(--text-dim)}
.hex-grid-item .grid-name{font-size:14px;color:var(--gold);font-weight:600;margin-top:2px}
.hex-grid-item .grid-trigram{font-size:11px;color:var(--text-dim);margin-top:1px}

/* ===== 关于 ===== */
.about-content{text-align:center;padding:20px}
.about-icon{font-size:64px;margin-bottom:12px}
.about-content h3{font-size:20px;color:var(--gold);margin-bottom:16px}
.about-text{text-align:left;font-size:14px;color:var(--text);line-height:1.8}
.about-text h4{color:var(--gold);margin:12px 0 4px;font-size:15px}
.about-note{color:var(--text-dim);font-size:13px;font-style:italic}

/* ===== Section ===== */
.section{padding:12px 0}

/* ===== 首卦闪烁动画 ===== */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.result-hexagram{animation:fadeInUp 0.5s ease}
.result-detail{display:block;width:100%;padding-top:8px}

/* ===== 六爻掷铜钱动画 ===== */
.coin-row{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(0,0,0,0.15);border-radius:10px;opacity:0.3;transition:all 0.3s}
.coin-row.active{opacity:1;background:rgba(212,160,23,0.1);box-shadow:0 0 12px rgba(212,160,23,0.2)}
.coin-row.done{opacity:1;background:rgba(0,0,0,0.12)}
.coin-label{font-size:13px;color:var(--text-dim);min-width:40px}
.coin-result{font-size:18px;letter-spacing:4px;flex:1;text-align:center}
.coin-name{font-size:12px;color:var(--gold);min-width:60px;text-align:right}
.coin-result.spinning{animation:coinSpin 0.3s infinite}
@keyframes coinSpin{0%{opacity:0.3}50%{opacity:1}100%{opacity:0.3}}

/* 铜钱样式 */
.coin-group{display:flex;gap:6px;flex:1;justify-content:center}
.t-coin{width:36px;height:36px;border-radius:50%;border:2px solid #b8860b;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;transition:all 0.3s;background:radial-gradient(circle at 35% 35%, #f0d080, #b8860b)}
.t-coin::before{content:"";display:block;width:12px;height:12px;border:2px solid #8b6914;border-radius:2px;background:rgba(139,105,20,0.15)}
.t-coin.yang{border-color:#d4a017;background:radial-gradient(circle at 35% 35%, #ffeb9e, #d4a017);box-shadow:0 0 8px rgba(212,160,23,0.4)}
.t-coin.yang::before{background:rgba(139,105,20,0.08)}
.t-coin.yin{border-color:#8b7355;background:radial-gradient(circle at 35% 35%, #c4b088, #8b7355);box-shadow:none}
.t-coin.yin::before{background:rgba(60,40,10,0.25)}

/* ===== 抽签动画 ===== */
.qian-barrel{position:relative;width:120px;height:170px;margin:0 auto;perspective:800px}
.barrel-body{position:relative;width:110px;height:160px;margin:0 auto;background:linear-gradient(135deg,#f5d78e 0%,#e8c46a 30%,#d4a843 60%,#c99a3a 100%);border-radius:8px 8px 35px 35px;border:2px solid #b8892e;overflow:hidden;box-shadow:0 6px 20px rgba(180,130,40,0.35),inset 0 -15px 30px rgba(0,0,0,0.1);position:relative}
/* 竹筒纹理 */
.barrel-body::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 6px,rgba(180,120,30,0.08) 6px,rgba(180,120,30,0.08) 7px);pointer-events:none;border-radius:inherit}
.barrel-body::after{content:"";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(180deg,rgba(255,255,255,0.15),transparent);border-radius:8px 8px 0 0;pointer-events:none}
/* 竹筒上下沿口 */
.barrel-rim-top{position:absolute;top:-4px;left:-6px;right:-6px;height:10px;background:linear-gradient(180deg,#d4a843,#b8892e);border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,0.15);z-index:2}
.barrel-rim-bot{position:absolute;bottom:-4px;left:-6px;right:-6px;height:10px;background:linear-gradient(180deg,#b8892e,#9a7520);border-radius:5px;box-shadow:0 -2px 4px rgba(0,0,0,0.15);z-index:2}
/* 签子 */
.qian-stick{position:absolute;font-size:30px;color:#fff6e0;text-shadow:0 1px 3px rgba(0,0,0,0.25);bottom:6px;transform-origin:bottom center;z-index:1;font-weight:bold}
.qian-stick::after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-1px;width:2px;height:12px;background:linear-gradient(to top,#e8c878,transparent);opacity:0.5}
.qian-stick.s1{left:14px;transform:rotate(-10deg);font-size:28px}
.qian-stick.s2{left:24px;transform:rotate(-6deg);font-size:32px}
.qian-stick.s3{left:36px;transform:rotate(-2deg);font-size:30px}
.qian-stick.s4{left:48px;transform:rotate(1deg);font-size:34px}
.qian-stick.s5{left:60px;transform:rotate(4deg);font-size:28px}
.qian-stick.s6{left:70px;transform:rotate(8deg);font-size:32px}
.qian-stick.s7{left:20px;transform:rotate(-8deg);bottom:0;font-size:26px}
.qian-stick.s8{left:42px;transform:rotate(0deg);bottom:-2px;font-size:30px}
.qian-stick.s9{left:64px;transform:rotate(6deg);bottom:0;font-size:26px}
/* 摇签动画 */
.qian-barrel.shaking .barrel-body{animation:barrelShake 0.08s infinite}
.qian-barrel.shaking .qian-stick{animation:stickShake 0.05s infinite alternate}
@keyframes barrelShake{0%{transform:translateX(0) rotate(0)}25%{transform:translateX(-4px) rotate(-1.5deg)}50%{transform:translateX(3px) rotate(1deg)}75%{transform:translateX(-2px) rotate(-0.5deg)}100%{transform:translateX(4px) rotate(1.5deg)}}
@keyframes stickShake{0%{transform:rotate(var(--r1,0deg)) translateY(0)}100%{transform:rotate(var(--r2,5deg)) translateY(-3px)}}
.qian-stick.s1{--r1:-10deg;--r2:-13deg}.qian-stick.s2{--r1:-6deg;--r2:-9deg}.qian-stick.s3{--r1:-2deg;--r2:-5deg}.qian-stick.s4{--r1:1deg;--r2:4deg}.qian-stick.s5{--r1:4deg;--r2:7deg}.qian-stick.s6{--r1:8deg;--r2:11deg}.qian-stick.s7{--r1:-8deg;--r2:-12deg}.qian-stick.s8{--r1:0deg;--r2:-3deg}.qian-stick.s9{--r1:6deg;--r2:10deg}
/* 飞出的签 */
.qian-stick-fly{position:absolute;font-size:40px;color:#ffd700;text-shadow:0 0 15px rgba(255,215,0,0.7);bottom:6px;left:50%;margin-left:-12px;z-index:3;opacity:0;transition:all 0.8s cubic-bezier(0.22,1,0.36,1);transform:rotate(0deg)}
.qian-stick-fly.fly-out{opacity:1;transform:translateY(-90px) rotate(-15deg) scale(1.4);transition:all 0.5s cubic-bezier(0.22,1,0.36,1)}
.qian-stick-fly.fly-away{opacity:0;transform:translateY(-200px) translateX(80px) rotate(-30deg) scale(0.4)}

/* ===== 滚动条美化 ===== */
.page-body::-webkit-scrollbar{width:4px}
.page-body::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
.page-body::-webkit-scrollbar-track{background:transparent}

/* ===== 登录页 ===== */
.login-bg{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(196,30,58,0.15) 0%, transparent 60%),
             radial-gradient(ellipse at 80% 80%, rgba(212,160,23,0.1) 0%, transparent 50%),
             linear-gradient(180deg,#0a0303 0%,#160808 25%,#2a0d12 50%,#1a0606 75%,#0a0303 100%);
  z-index:0;
}
/* 太极图 - 纯CSS绘制 */
.login-bg::before{
  content:"";position:absolute;top:50%;left:50%;width:400px;height:400px;
  margin:-200px 0 0 -200px;
  background:
    /* 右半白 */
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.08) 50%),
    /* 左半黑 */
    linear-gradient(90deg, rgba(0,0,0,0.12) 50%, transparent 50%),
    /* 上圆白 */
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.12) 25%, transparent 25%),
    /* 下圆黑 */
    radial-gradient(circle at 50% 75%, rgba(0,0,0,0.15) 25%, transparent 25%),
    /* 上鱼眼黑 */
    radial-gradient(circle at 50% 25%, rgba(0,0,0,0.15) 8%, transparent 8%),
    /* 下鱼眼白 */
    radial-gradient(circle at 50% 75%, rgba(255,255,255,0.12) 8%, transparent 8%),
    /* S形分割线 */
    radial-gradient(circle at 25% 50%, transparent 20%, rgba(255,255,255,0.05) 21%, rgba(0,0,0,0.05) 22%, transparent 23%),
    radial-gradient(circle at 75% 50%, transparent 20%, rgba(0,0,0,0.05) 21%, rgba(255,255,255,0.05) 22%, transparent 23%);
  border-radius:50%;
  animation:taijiFloat 6s ease-in-out infinite;
  box-shadow:0 0 80px rgba(212,160,23,0.08), inset 0 0 80px rgba(212,160,23,0.03);
  pointer-events:none;
}
/* 八卦环绕 */
.login-bg::after{
  content:"☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷";
  position:absolute;top:50%;left:50%;width:440px;height:440px;
  margin:-220px 0 0 -220px;
  font-size:18px;letter-spacing:48px;color:rgba(212,160,23,0.08);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(212,160,23,0.06);
  animation:taijiSpin 25s linear infinite;
  pointer-events:none;
  text-shadow:0 0 10px rgba(212,160,23,0.05);
}
/* 外圈发光环 */
.login-glow{
  position:fixed;top:50%;left:50%;width:500px;height:500px;
  margin:-250px 0 0 -250px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,160,23,0.04) 0%, transparent 70%);
  animation:taijiFloat 8s ease-in-out infinite reverse;
  pointer-events:none;z-index:0;
}
/* 底部祥云 */
.login-clouds{
  position:fixed;bottom:0;left:0;right:0;height:120px;
  background:radial-gradient(ellipse at 20% 100%, rgba(212,160,23,0.06) 0%, transparent 50%),
             radial-gradient(ellipse at 50% 100%, rgba(196,30,58,0.04) 0%, transparent 50%),
             radial-gradient(ellipse at 80% 100%, rgba(212,160,23,0.06) 0%, transparent 50%);
  pointer-events:none;z-index:0;
}
@keyframes taijiFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.03)}}
@keyframes taijiSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
/* 星光粒子 */
.login-stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.login-star{
  position:absolute;border-radius:50%;
  background:#fff;box-shadow:0 0 6px rgba(255,215,0,0.4);
  animation:starTwinkle var(--dur,3s) ease-in-out infinite;
}
.login-star:nth-child(1){width:3px;height:3px;top:8%;left:15%;--dur:2.5s;opacity:0.6}
.login-star:nth-child(2){width:2px;height:2px;top:18%;left:75%;--dur:3.5s;opacity:0.4;animation-delay:0.8s}
.login-star:nth-child(3){width:4px;height:4px;top:30%;left:8%;--dur:2s;opacity:0.7;animation-delay:1.2s}
.login-star:nth-child(4){width:2px;height:2px;top:42%;left:88%;--dur:4s;opacity:0.3;animation-delay:0.3s}
.login-star:nth-child(5){width:3px;height:3px;top:55%;left:5%;--dur:3s;opacity:0.5;animation-delay:1.8s}
.login-star:nth-child(6){width:2px;height:2px;top:68%;left:80%;--dur:2.8s;opacity:0.4;animation-delay:0.5s}
.login-star:nth-child(7){width:3px;height:3px;top:78%;left:20%;--dur:3.2s;opacity:0.6;animation-delay:2.2s}
.login-star:nth-child(8){width:2px;height:2px;top:12%;left:55%;--dur:2.2s;opacity:0.5;animation-delay:1.5s}
.login-star:nth-child(9){width:4px;height:4px;top:60%;left:92%;--dur:3.8s;opacity:0.3;animation-delay:0.7s}
.login-star:nth-child(10){width:2px;height:2px;top:35%;left:45%;--dur:2.6s;opacity:0.4;animation-delay:2s}
@keyframes starTwinkle{0%,100%{opacity:var(--o,0.2);transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
.login-container{
  position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:30px 24px 50px;
}
.login-logo{margin-bottom:8px}
.login-logo-img{width:auto;height:110px;filter:drop-shadow(0 0 25px rgba(200,30,30,0.3));animation:logoglow 3s ease-in-out infinite}
.login-brand{text-align:center;margin-bottom:30px}
.login-title{font-size:36px;font-weight:bold;color:var(--gold);letter-spacing:8px;text-shadow:0 2px 10px rgba(212,160,23,0.3)}
.login-subtitle{font-size:14px;color:var(--text-dim);margin-top:4px;letter-spacing:4px}
.login-tabs{display:flex;gap:0;margin-bottom:20px;width:100%;max-width:320px;border-bottom:1px solid rgba(212,160,23,0.15)}
.login-tab{
  flex:1;text-align:center;padding:10px 0;font-size:15px;color:var(--text-dim);
  cursor:pointer;border-bottom:2px solid transparent;transition:all 0.3s;
}
.login-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.sub-tabs{display:flex;gap:0;margin-bottom:16px;width:100%;background:rgba(42,16,21,0.4);border-radius:8px;overflow:hidden}
.sub-tab{flex:1;text-align:center;padding:8px 0;font-size:13px;color:var(--text-dim);cursor:pointer;transition:all 0.2s}
.sub-tab.active{color:var(--bg);background:var(--gold);font-weight:600}
.login-forms{width:100%;max-width:320px}
.login-form{display:none}
.login-form.active{display:block}
.sub-form{display:none}
.sub-form.active{display:block}
.input-group{
  display:flex;align-items:center;gap:0;margin-bottom:14px;
  border:1px solid rgba(212,160,23,0.2);border-radius:10px;overflow:hidden;
  background:rgba(42,16,21,0.6);transition:border-color 0.3s;
}
.input-group:focus-within{border-color:var(--gold)}
.input-prefix{padding:12px 8px 12px 14px;font-size:14px;color:var(--gold);border-right:1px solid rgba(212,160,23,0.1);white-space:nowrap}
.input-group input{
  flex:1;padding:12px 14px;border:none;background:transparent;color:var(--text);
  font-size:16px;font-family:inherit;outline:none;
}
.input-group input::placeholder{color:var(--text-dim);font-size:14px}
.input-group-captcha input{flex:1}
.captcha-btn{
  padding:12px 14px;background:transparent;border:none;border-left:1px solid rgba(212,160,23,0.1);
  color:var(--gold);font-size:13px;cursor:pointer;white-space:nowrap;font-family:inherit;
}
.captcha-btn:active{opacity:0.7}
.login-btn{width:100%;margin-top:8px;padding:14px;font-size:17px}
.wechat-btn{background:linear-gradient(135deg,#07C160,#06AD56);border:none;display:flex;align-items:center;justify-content:center;gap:8px}
.wechat-logo{display:inline-block;background:white;color:#07C160;width:24px;height:24px;line-height:24px;border-radius:4px;font-size:14px;font-weight:bold}
.wechat-qr{text-align:center;padding:20px;margin-bottom:10px}
.wechat-qr .wechat-icon{font-size:56px;margin-bottom:8px}
.wechat-qr p{font-size:14px;color:var(--text-dim)}
.login-agreement{text-align:center;font-size:12px;color:var(--text-dim);margin-top:16px;line-height:1.6}
/* 首页用户栏 */
.user-bar{
  display:flex;align-items:center;gap:10px;margin:0 10px 10px;
  padding:8px 12px;background:var(--card-bg);border:1px solid rgba(212,160,23,0.1);
  border-radius:var(--radius);
}
.user-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid var(--gold)}
.user-avatar-img{width:100%;height:100%;object-fit:cover}
.user-info{flex:1;display:flex;flex-direction:column}
.user-name{font-size:14px;color:var(--text-bright);font-weight:600}
.user-tag{font-size:11px;color:var(--text-dim)}
.logout-btn{padding:4px 12px;font-size:12px;background:transparent;border:1px solid rgba(244,67,54,0.4);color:#EF5350;border-radius:6px;cursor:pointer;font-family:inherit}
.logout-btn:active{background:rgba(244,67,54,0.1)}
/* Logo SVG替换旧图标 */
.logo-icon-svg{width:90px;height:90px;border-radius:50%;overflow:hidden;background:transparent;box-shadow:none}
.logo-svg-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 30px rgba(212,160,23,0.4));animation:logoglow 2s ease-in-out infinite}

/* ===== 微信风格主框架 ===== */
.app-main{height:100%;display:flex;flex-direction:column;background:var(--bg)}
.tab-page{display:none;flex-direction:column;height:100%}
.tab-page.active{display:flex}
.tab-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--card-bg);border-bottom:1px solid rgba(212,160,23,0.08);
  min-height:50px;flex-shrink:0;
}
.tab-header-title{font-size:18px;color:var(--gold);font-weight:600}
.tab-header-right{display:flex;gap:10px}
.header-icon{font-size:20px;cursor:pointer;padding:4px}
.tab-body{flex:1;overflow-y:auto;padding:12px 12px 70px;-webkit-overflow-scrolling:touch}
/* 微信卡片 */
.wx-card{
  display:flex;align-items:center;gap:12px;padding:14px;
  background:var(--card-bg);border-radius:var(--radius);margin-bottom:10px;
  border:1px solid rgba(212,160,23,0.08);cursor:pointer;transition:all 0.2s;
}
.wx-card:active{transform:scale(0.98);border-color:rgba(212,160,23,0.2)}
.wx-card-icon{font-size:28px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(212,160,23,0.12);border-radius:12px}
.wx-card-body{flex:1}
.wx-card-title{font-size:15px;color:var(--text-bright);font-weight:600}
.wx-card-desc{font-size:12px;color:var(--text-dim);margin-top:2px}
.wx-card-arrow{font-size:20px;color:var(--text-dim)}.wx-card-arrow{font-size:20px;color:var(--text-dim)}
/* 微信菜单 */
.wx-section-title{padding:10px 4px 6px;font-size:13px;color:var(--text-dim)}
.wx-menu{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;margin-bottom:4px}
.wx-menu-item{
  display:flex;align-items:center;gap:12px;padding:14px;
  border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:all 0.2s;
}
.wx-menu-item:last-child{border-bottom:none}
.wx-menu-item:active{background:rgba(255,255,255,0.04)}
.wx-menu-icon{font-size:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}
.wx-menu-body{flex:1}
.wx-menu-title{font-size:15px;color:var(--text-bright)}
.wx-menu-desc{font-size:12px;color:var(--text-dim);margin-top:1px}
.wx-menu-arrow{font-size:18px;color:var(--text-dim)}
/* 联系人 */
.wx-search{padding:8px 4px}
.wx-search input{
  width:100%;padding:8px 12px;border:none;border-radius:8px;
  background:var(--card-bg);color:var(--text);font-size:14px;font-family:inherit;box-sizing:border-box;
}
.wx-search input:focus{outline:none}
.wx-search input::placeholder{color:var(--text-dim)}
.wx-contact-list{padding:4px 0}
.contact-item{
  display:flex;align-items:center;gap:12px;padding:10px 4px;
  border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;transition:all 0.2s;
}
.contact-item:active{background:rgba(255,255,255,0.03)}
.contact-avatar{
  width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.contact-body{flex:1}
.contact-name{font-size:15px;color:var(--text-bright)}
.contact-desc{font-size:12px;color:var(--text-dim);margin-top:1px}
.contact-status{font-size:11px;color:var(--gold);flex-shrink:0}
/* 个人资料 */
.profile-header{
  display:flex;align-items:center;gap:14px;padding:20px 14px;
  background:var(--card-bg);border-radius:var(--radius);
  border:1px solid rgba(212,160,23,0.08);
}
.profile-avatar{width:60px;height:60px;border-radius:12px;overflow:hidden;border:2px solid var(--gold);flex-shrink:0}
.profile-avatar-img{width:100%;height:100%;object-fit:cover}
.profile-info{flex:1}
.profile-name{font-size:20px;color:var(--text-bright);font-weight:600}
.profile-id{font-size:13px;color:var(--text-dim);margin-top:4px}
.profile-qr{font-size:28px;padding:8px;cursor:pointer}
.profile-avatar{position:relative;cursor:pointer}
.avatar-edit-overlay{
  position:absolute;bottom:0;left:0;right:0;height:24px;
  background:rgba(0,0,0,0.5);border-radius:0 0 10px 10px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;opacity:0;transition:opacity 0.2s;
}
.profile-avatar:hover .avatar-edit-overlay,.profile-avatar:active .avatar-edit-overlay{opacity:1}
/* 弹窗 */
.modal-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.6);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fadeIn 0.2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--card-bg);border-radius:var(--radius);width:100%;max-width:320px;overflow:hidden}
.modal-header{text-align:center;padding:16px 20px 12px;font-size:16px;color:var(--text-bright);font-weight:600;border-bottom:1px solid rgba(255,255,255,0.05)}
.modal-body{padding:16px 20px;max-height:300px;overflow-y:auto}
.modal-body input{width:100%;padding:10px 12px;border:1px solid rgba(212,160,23,0.3);border-radius:8px;background:rgba(0,0,0,0.3);color:var(--text);font-size:16px;font-family:inherit;box-sizing:border-box}
.modal-body input:focus{outline:none;border-color:var(--gold)}
.modal-body .hint{font-size:12px;color:var(--text-dim);margin-top:6px}
.modal-footer{display:flex;border-top:1px solid rgba(255,255,255,0.05)}
.modal-footer button{flex:1;padding:14px;border:none;background:transparent;font-size:15px;font-family:inherit;cursor:pointer;transition:all 0.2s;color:var(--gold)}
.modal-footer button:active{background:rgba(212,160,23,0.1)}
.modal-footer button.cancel{color:var(--text-dim)}
.modal-footer button.danger{color:#EF5350}
/* 头像选择 */
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:4px}
.avatar-opt{
  width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:28px;cursor:pointer;border:2px solid transparent;transition:all 0.2s;margin:0 auto;
}
.avatar-opt:active{transform:scale(0.9)}
.avatar-opt.selected{border-color:var(--gold);background:rgba(212,160,23,0.1)}
/* 底部导航 */
.bottom-tab-bar{
  display:flex;position:fixed;bottom:0;left:0;right:0;
  background:var(--card-bg);border-top:1px solid rgba(212,160,23,0.1);
  padding:6px 0;padding-bottom:calc(6px + env(safe-area-inset-bottom,0));
  z-index:100;
}
.bottom-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 0;transition:all 0.2s}
.bottom-tab .tab-icon{font-size:24px;line-height:1}
.bottom-tab .tab-label{font-size:11px;color:var(--text-dim)}
.bottom-tab.active .tab-label{color:var(--gold)}
.bottom-tab.active .tab-icon{transform:scale(1.1)}
/* 好友 */
.friend-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#EF5350;color:#fff;font-size:11px;font-weight:bold;flex-shrink:0;
}
/* 加好友 */
.addfriend-item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,0.03)}
.addfriend-avatar{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.addfriend-body{flex:1}
.addfriend-name{font-size:15px;color:var(--text-bright)}
.addfriend-desc{font-size:12px;color:var(--text-dim);margin-top:2px}
.addfriend-btn{padding:6px 14px;font-size:13px;border:none;border-radius:6px;cursor:pointer;font-family:inherit;font-weight:600;transition:all 0.2s}
.addfriend-btn.add{background:var(--gold);color:var(--bg)}
.addfriend-btn.add:active{opacity:0.8}
.addfriend-btn.added{background:rgba(255,255,255,0.1);color:var(--text-dim);cursor:default}
/* 聊天 */
.chat-body{flex:1;overflow-y:auto;padding:16px 12px 12px;display:flex;flex-direction:column}
.chat-messages{flex:1;display:flex;flex-direction:column;gap:12px}
.msg-row{display:flex;gap:8px;max-width:85%}
.msg-row.me{flex-direction:row-reverse;align-self:flex-end}
.msg-row.other{align-self:flex-start}
.msg-avatar{width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.msg-bubble{max-width:240px;padding:10px 14px;border-radius:10px;font-size:14px;line-height:1.6;word-wrap:break-word;position:relative}
.msg-bubble.me{background:var(--gold);color:var(--bg);border-bottom-right-radius:2px}
.msg-bubble.other{background:var(--card-bg);color:var(--text);border-bottom-left-radius:2px;border:1px solid rgba(212,160,23,0.08)}
.msg-time{font-size:10px;color:var(--text-dim);margin-top:2px;text-align:right}
/* 输入栏 */
.chat-input-bar{
  display:flex;align-items:center;gap:6px;padding:6px 10px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom,0));
  background:var(--card-bg);border-top:1px solid rgba(212,160,23,0.08);
  flex-shrink:0;flex-wrap:wrap;
}
.chat-tools{display:flex;gap:4px;flex-shrink:0}
.chat-tool-btn{
  width:32px;height:32px;border:none;border-radius:50%;
  background:rgba(255,255,255,0.05);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:all 0.2s;
  font-family:inherit;flex-shrink:0;
}
.chat-tool-btn:active{background:rgba(212,160,23,0.2);transform:scale(0.9)}
.voice-record-btn.recording{background:#EF5350;animation:pulse 0.5s infinite;color:#fff}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.chat-input-bar input{
  flex:1;min-width:60px;padding:8px 12px;border:none;border-radius:18px;
  background:rgba(255,255,255,0.06);color:var(--text);font-size:15px;font-family:inherit;outline:none;
}
.chat-input-bar input::placeholder{color:var(--text-dim)}
.chat-send-btn{
  padding:7px 16px;border:none;border-radius:16px;
  background:var(--gold);color:var(--bg);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.chat-send-btn:active{opacity:0.8}
/* 表情面板 */
.emoji-panel{
  background:var(--card-bg);border-top:1px solid rgba(212,160,23,0.08);
  padding:10px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;
  max-height:160px;overflow-y:auto;flex-shrink:0;
}
.emoji-item{
  width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:24px;cursor:pointer;border-radius:6px;transition:all 0.2s;
}
.emoji-item:active{background:rgba(212,160,23,0.2);transform:scale(1.2)}
/* 图片选择 */
.image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px}
.image-opt{
  aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:32px;cursor:pointer;
  border:2px solid transparent;transition:all 0.2s;
}
.image-opt:active{transform:scale(0.9);border-color:var(--gold)}
.image-opt-label{font-size:11px;color:var(--text-dim);margin-top:4px}
/* 消息气泡 */
.msg-row{display:flex;gap:6px;max-width:88%;margin-bottom:2px}
.msg-row.me{flex-direction:row-reverse;align-self:flex-end}
.msg-row.other{align-self:flex-start}
.msg-avatar{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;align-self:flex-end}
.msg-content{max-width:220px}
.msg-bubble{
  padding:8px 12px;border-radius:8px;font-size:14px;line-height:1.5;
  word-wrap:break-word;position:relative;cursor:pointer;
}
.msg-bubble.me{background:var(--gold);color:var(--bg);border-bottom-right-radius:2px}
.msg-bubble.other{background:var(--card-bg);color:var(--text);border-bottom-left-radius:2px;border:1px solid rgba(212,160,23,0.08)}
.msg-bubble img{max-width:160px;border-radius:6px;display:block}
.msg-bubble .voice-msg{display:flex;align-items:center;gap:8px;min-width:80px}
.voice-msg .wave{font-size:20px;letter-spacing:2px}
.voice-msg .dur{font-size:12px;opacity:0.7;white-space:nowrap}
.msg-time{font-size:10px;color:var(--text-dim);padding:0 4px;margin-top:1px}
/* 消息操作菜单 */
.msg-actions{
  display:none;position:fixed;z-index:400;background:var(--card-bg);
  border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.4);
  min-width:120px;
}
.msg-actions.show{display:block}
.msg-actions button{
  display:block;width:100%;padding:12px 20px;border:none;background:transparent;
  color:var(--text);font-size:14px;text-align:left;cursor:pointer;font-family:inherit;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.msg-actions button:last-child{border-bottom:none}
.msg-actions button:active{background:rgba(255,255,255,0.04)}
.msg-actions button.delete{color:#EF5350}
/* 录音提示 */
.recording-hint{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:300;background:rgba(0,0,0,0.8);color:#fff;padding:30px 40px;
  border-radius:16px;text-align:center;font-size:16px;
}
.recording-hint .mic-icon{font-size:48px;margin-bottom:8px;animation:pulse 0.5s infinite}
.recording-hint .hint-text{color:rgba(255,255,255,0.7);font-size:13px;margin-top:4px}
/* 空状态 */
.empty-state{text-align:center;padding:40px 20px;color:var(--text-dim);font-size:14px}
/* 标签按钮 */
.tag-btn{display:inline-block;padding:6px 12px;font-size:13px;background:var(--card-bg);border:1px solid rgba(212,160,23,0.15);border-radius:16px;cursor:pointer;color:var(--text-dim);transition:all 0.2s}
.tag-btn:active{background:rgba(212,160,23,0.1);border-color:var(--gold);color:var(--gold)}
/* 生肖配对 */
.zodiac-pickers{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.zodiac-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.zodiac-select{padding:10px 14px;border:1px solid rgba(212,160,23,0.3);border-radius:8px;background:var(--card-bg);color:var(--text);font-size:16px;font-family:inherit;min-width:90px}
.zodiac-select:focus{outline:none;border-color:var(--gold)}
.zodiac-heart{font-size:24px;animation:pulse 1s infinite}
/* 抽签摇动 */
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}}
.shaking{animation:shake 0.4s ease 3}
/* 结果得分环 */
.score-ring{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:28px;font-weight:bold;border:4px solid var(--gold)}
.score-high{border-color:#4CAF50;color:#4CAF50}
.score-mid{border-color:var(--gold);color:var(--gold)}
.score-low{border-color:#EF5350;color:#EF5350}

/* ===== 八字样式 ===== */
.bz-inputs{padding:10px 0;max-width:320px;margin:0 auto}
.bz-row{display:flex;gap:8px;margin-bottom:10px}
.bz-field{flex:1;text-align:left}
.bz-field label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:4px;text-align:left}
.bz-field input,.bz-field select{
  width:100%;padding:10px 8px;border:1px solid rgba(212,160,23,0.3);
  border-radius:8px;background:var(--card-bg);color:var(--text);
  font-size:15px;text-align:center;font-family:inherit;box-sizing:border-box;
}
.bz-field select{appearance:auto;-webkit-appearance:auto;cursor:pointer}
.bz-field input:focus,.bz-field select:focus{outline:none;border-color:var(--gold)}
.bz-hour-field{max-width:320px;margin:0 auto}
.bz-hour-field select{text-align:left;padding:10px 12px}
.bz-gender{display:flex;gap:16px;justify-content:center;padding:4px 0}
.gender-opt{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--text);cursor:pointer}
.gender-opt input{width:auto;accent-color:var(--gold)}
/* 四柱八字展示 */
.bz-pillars{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.bz-pillar{text-align:center;padding:10px 8px;background:var(--card-bg);border:1px solid rgba(212,160,23,0.15);border-radius:8px;min-width:72px}
.bz-pillar-label{font-size:11px;color:var(--text-dim);margin-bottom:4px}
.bz-stem{font-size:20px;font-weight:bold;color:var(--gold)}
.bz-branch{font-size:20px;font-weight:bold;color:var(--light-gold)}
.bz-wuxing{font-size:12px;color:var(--text-dim);margin-top:2px}
/* 五行分析 */
.bz-wuxing-bar{margin:10px 0}
.wuxing-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}
.wuxing-label{width:28px;text-align:right;color:var(--text-dim)}
.wuxing-track{flex:1;height:14px;background:rgba(255,255,255,0.05);border-radius:7px;overflow:hidden}
.wuxing-fill{height:100%;border-radius:7px;transition:width 0.5s}
.wuxing-count{width:20px;text-align:center;font-size:12px;color:var(--text-dim)}
/* 五行对应颜色 */
.wx-木{color:#4CAF50}.wx-火{color:#FF5722}.wx-土{color:#FFC107}.wx-金{color:#E0E0E0}.wx-水{color:#2196F3}
.fill-木{background:#4CAF50}.fill-火{background:#FF5722}.fill-土{background:#FFC107}.fill-金{background:#9E9E9E}.fill-水{background:#2196F3}
/* 八字注解卡片 */
.bz-section{margin-bottom:14px;padding:14px;background:var(--card-bg);border-radius:var(--radius);border:1px solid rgba(212,160,23,0.1)}
.bz-section h3{color:var(--gold);font-size:15px;margin-bottom:8px}
.bz-section p{font-size:14px;line-height:1.8;color:var(--text)}
.bz-section .tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;margin:2px}
.bz-ten Gods{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:8px 0}
.bz-god-item{padding:4px 10px;background:rgba(212,160,23,0.1);border-radius:4px;font-size:13px;color:var(--text-bright)}

@keyframes baguaRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
/* 八字出生历法选择 */
.bz-leap-opt{height:40px;display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid rgba(212,160,23,0.35);border-radius:8px;background:rgba(255,255,255,0.03);color:var(--text);font-size:13px;box-sizing:border-box}
.bz-leap-opt input{width:auto;height:auto;margin:0;accent-color:var(--gold)}
.bz-birth-time-card{margin:0 auto 14px;max-width:360px;padding:10px 12px;border:1px solid rgba(212,160,23,0.28);border-radius:12px;background:rgba(212,160,23,0.07);font-size:12px;line-height:1.8;text-align:left;color:var(--text-dim)}
.bz-birth-time-card .title{color:var(--gold);font-weight:700;margin-bottom:4px}
.bz-birth-time-card b{color:var(--text-bright)}

/* ===== 用户端资产中心 / 移动端适配增强 ===== */
.asset-summary-card{
  padding:18px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(212,160,23,.18),rgba(80,32,10,.35));
  border:1px solid rgba(212,160,23,.25);text-align:center;margin-bottom:12px;box-shadow:0 10px 25px rgba(0,0,0,.18)
}
.asset-summary-title{font-size:13px;color:var(--text-dim);margin-bottom:6px}.asset-balance{font-size:42px;font-weight:800;color:var(--gold);line-height:1}.asset-subline{font-size:12px;color:var(--text-dim);margin-top:8px;line-height:1.7}.asset-actions{display:flex;gap:10px;margin:10px 0 12px}.asset-actions button{flex:1}.asset-form{padding:12px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid rgba(212,160,23,.16);margin-bottom:12px}.asset-form .form-title{font-size:15px;font-weight:700;color:var(--gold);margin-bottom:10px}.asset-form input,.asset-form select,.asset-form textarea{width:100%;box-sizing:border-box;margin-bottom:9px;padding:11px 12px;border-radius:10px;border:1px solid rgba(212,160,23,.22);background:rgba(0,0,0,.22);color:var(--text-bright);font-size:14px;font-family:inherit}.asset-form textarea{min-height:70px;resize:vertical}.asset-note{font-size:12px;color:var(--text-dim);line-height:1.7;margin-top:8px}.asset-tabs{display:flex;gap:8px;margin:12px 0}.asset-tabs button{flex:1;border:1px solid rgba(212,160,23,.18);background:rgba(255,255,255,.04);color:var(--text-dim);padding:10px;border-radius:10px;font-size:14px}.asset-tabs button.active{background:rgba(212,160,23,.16);color:var(--gold);border-color:rgba(212,160,23,.35);font-weight:700}.asset-list{display:grid;gap:8px}.asset-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}.asset-row-main{min-width:0;flex:1}.asset-row-title{font-size:14px;color:var(--text-bright);font-weight:650}.asset-row-desc{font-size:12px;color:var(--text-dim);line-height:1.5;margin-top:3px;word-break:break-all}.asset-row-time{font-size:11px;color:rgba(255,255,255,.36);margin-top:4px}.asset-row-amount{min-width:64px;text-align:right;font-weight:800;font-size:16px}.asset-row-amount.plus{color:#81C784}.asset-row-amount.minus{color:#EF9A9A}.asset-balance-after{font-size:10px;font-weight:400;color:var(--text-dim);margin-top:3px}.terms-check input{flex-shrink:0}
@media (max-width:480px){
  .login-container{padding-left:18px!important;padding-right:18px!important}.login-forms{max-width:100%}.input-group input{min-width:0}.tab-header{height:48px}.tab-body{padding-left:10px;padding-right:10px;padding-bottom:calc(78px + env(safe-area-inset-bottom))}.bottom-tab-bar{height:58px;padding-bottom:env(safe-area-inset-bottom)}.page-header{height:50px}.page-header h2{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:calc(76px + env(safe-area-inset-bottom))}.wx-menu-item{min-height:58px}.wx-menu-title{font-size:15px}.wx-menu-desc{font-size:12px}.profile-header{gap:10px}.profile-avatar{width:54px;height:54px}.asset-balance{font-size:36px}.asset-actions{gap:8px}.asset-row{padding:10px}.asset-row-amount{font-size:15px;min-width:55px}.btn-primary,.btn-secondary{min-height:42px}
}
@media (max-width:360px){
  .login-title{font-size:32px}.sub-tab{font-size:12px}.tab-icon{font-size:21px!important}.tab-label{font-size:10px!important}.profile-name{font-size:18px}.asset-form input,.asset-form select,.asset-form textarea{font-size:13px;padding:10px}.asset-row{gap:6px}.wx-card-title,.wx-menu-title{font-size:14px}
}

/* 周公解梦输入区：避免输入时自动扣次数，改成按钮确认查询 */
.dream-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dream-search-row input {
  flex: 1;
  min-width: 0;
}
.dream-search-row button {
  flex: 0 0 auto;
  padding: 0 14px;
  height: 44px;
  border: 1px solid rgba(212,160,23,0.45);
  border-radius: 12px;
  background: linear-gradient(135deg,#e8b32a,#c98a05);
  color: #1a0a0a;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .dream-search-row { flex-direction: column; align-items: stretch; }
  .dream-search-row button { width: 100%; }
}