/* 半仙儿说 H5 — 深蓝+金色古典命理主题
   rpx→rem：html{font-size:100vw/7.5} 使 1rem=100rpx，原 Nrpx 写成 (N/100)rem */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; padding: 0; }
html { font-size: calc(100vw / 7.5); }
@media (min-width: 540px) { html { font-size: 72px; } }
body {
  background: #0f0f1a; color: #e8e8f0; font-size: .28rem; line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
}
:root { --tabbar-h: calc(.98rem + env(safe-area-inset-bottom)); }
input { font-family: inherit; -webkit-appearance: none; border: none; outline: none; }
.ph::placeholder, input::placeholder { color: #5a5a78; }

#view { min-height: 100vh; }
body.has-tabbar #view { min-height: calc(100vh - var(--tabbar-h)); }
body.route-chart { overflow: hidden; }
body.route-chart #view { height: calc(100vh - var(--tabbar-h)); min-height: 0; }

/* ===== 底部 Tab ===== */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: #1a1a2e; border-top: .01rem solid #2a2a4a;
}
.tab-item { flex: 1; display: flex; align-items: center; justify-content: center; font-size: .26rem; color: #7d7d8a; }
.tab-active { color: #d4af37; font-weight: 600; }

/* ===== 通用 ===== */
.container { padding: .24rem; }
.section-title { font-size: .26rem; color: #666680; margin: .24rem 0 .16rem; }
.badge { font-size: .22rem; color: #d4af37; padding: .06rem .16rem; background: rgba(212,175,55,.12); border-radius: .24rem; }
.badge.gray { color: #9999b3; background: rgba(125,125,138,.15); }
.badge.red { color: #ef6b6b; background: rgba(239,107,107,.12); }
.badge.gold { color: #d4af37; background: rgba(212,175,55,.15); border: .01rem solid rgba(212,175,55,.4); }
.loading-text { color: #666680; font-size: .26rem; }

/* ===== page / 对话 ===== */
.page { display: flex; flex-direction: column; height: 100%; background: #0f0f1a; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: .16rem .24rem; background: #14142a; border-bottom: .01rem solid #2a2a44; flex-shrink: 0; }
.topbar-info { flex: 1; min-width: 0; }
.topbar-btn { flex-shrink: 0; margin-left: .12rem; padding: .1rem .24rem; font-size: .24rem; color: #d4af37; border: .01rem solid #d4af37; border-radius: .28rem; background: rgba(212,175,55,.05); }
.topbar-btn:active { background: rgba(212,175,55,.18); }

.msg-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .3rem .24rem .2rem; }
.msg-wrap { margin-bottom: .24rem; }
.msg { display: flex; width: 100%; }
.msg-assistant { justify-content: flex-start; }
.msg-user { justify-content: flex-end; }
.bubble { display: inline-block; max-width: 78%; padding: .2rem .26rem; border-radius: .18rem; line-height: 1.55; font-size: .3rem; word-break: break-word; white-space: pre-wrap; user-select: text; -webkit-user-select: text; }
.msg-assistant .bubble { background: #1a1a2e; color: #f0e6d2; border-top-left-radius: .06rem; border: .01rem solid #2a2a44; }
.msg-user .bubble { background: linear-gradient(135deg, #c9a84c 0%, #a8862e 100%); color: #1a1a1a; border-top-right-radius: .06rem; }
.bubble.loading { display: inline-flex; gap: .06rem; padding: .24rem .3rem; align-items: center; }
.bubble.loading .loading-dot { font-size: .36rem; animation: dot 1.2s infinite; }
.bubble.loading .loading-dot:nth-child(2) { animation-delay: .2s; }
.bubble.loading .loading-dot:nth-child(3) { animation-delay: .4s; }
.loading-hint { font-size: .24rem; color: #9999b3; margin-left: .1rem; }
@keyframes dot { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }
.bottom-anchor { height: .01rem; }

.input-bar { display: flex; align-items: center; gap: .16rem; padding: .2rem .24rem; background: #1a1a2e; border-top: .01rem solid #2a2a44; flex-shrink: 0; }
.input { flex: 1; min-width: 0; height: .88rem; padding: 0 .32rem; border-radius: .44rem; background: #0f0f1a; color: #f0e6d2; font-size: .3rem; }
.send-btn { flex-shrink: 0; width: .88rem; height: .88rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #c9a84c; color: #1a1a1a; font-size: .26rem; font-weight: 600; }
.send-btn-disabled { background: #3a3a55; color: #6b6b85; }

/* ===== 录入表单 ===== */
.form-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .3rem .4rem .6rem; }
.form-section { margin-bottom: .36rem; }
.form-label { display: block; font-size: .26rem; color: #9999b3; margin-bottom: .18rem; font-weight: 500; }
.chip-row { display: flex; gap: .2rem; align-items: center; }
.chip { height: .76rem; line-height: .76rem; padding: 0 .44rem; border-radius: .4rem; border: .01rem solid #2a2a44; background: #1a1a2e; color: #9999b3; font-size: .28rem; text-align: center; }
.chip-active { border-color: #d4af37; background: rgba(212,175,55,.12); color: #d4af37; font-weight: 600; }
.date-row { display: flex; gap: .2rem; }
.input-group { display: flex; align-items: center; gap: .08rem; }
.form-input { height: .8rem; line-height: .8rem; background: #1a1a2e; border: .01rem solid #2a2a44; border-radius: .16rem; padding: 0 .2rem; color: #f0e6d2; font-size: .3rem; width: 1.4rem; text-align: center; }
.form-input.small { width: 1.4rem; }
.form-input-full { width: 100%; height: .88rem; line-height: .88rem; padding: 0 .28rem; text-align: left; }
.input-suffix { color: #9999b3; font-size: .26rem; }
.switch-row { display: flex; justify-content: space-between; align-items: center; margin-top: .24rem; padding: 0 .08rem; }
.switch-label { color: #9999b3; font-size: .26rem; }
.city-hint { display: block; font-size: .22rem; color: #c9a84c; margin-top: .12rem; }
.primary-btn { display: flex; align-items: center; justify-content: center; background: #d4af37; border-radius: .24rem; padding: .28rem 0; margin: .3rem 0; color: #1a1a1a; font-size: .34rem; font-weight: 700; letter-spacing: .08rem; box-shadow: 0 .06rem .16rem rgba(212,175,55,.3); }
.primary-btn:active { background: #b89a3f; }
.btn-disabled { opacity: .6; box-shadow: none; }
.disclaimer { display: flex; flex-direction: column; align-items: center; margin-top: .2rem; padding: 0 .2rem; }
.disclaimer span { color: #5a5a78; font-size: .22rem; line-height: 1.7; text-align: center; }

/* 自定义 switch（闰月）*/
.ui-switch { position: relative; display: inline-block; width: .9rem; height: .5rem; }
.ui-switch input { display: none; }
.ui-switch-slider { position: absolute; inset: 0; background: #2a2a44; border-radius: .5rem; transition: .25s; }
.ui-switch-slider::before { content: ''; position: absolute; width: .42rem; height: .42rem; left: .04rem; top: .04rem; background: #fff; border-radius: 50%; transition: .25s; }
.ui-switch input:checked + .ui-switch-slider { background: #d4af37; }
.ui-switch input:checked + .ui-switch-slider::before { transform: translateX(.4rem); }

/* ===== 命盘卡片（八字）===== */
.chart-card { background: linear-gradient(160deg, #1a1a2e 0%, #14142a 100%); border: .01rem solid rgba(212,175,55,.45); border-radius: .2rem; padding: .28rem .28rem .24rem; box-shadow: 0 .04rem .24rem rgba(0,0,0,.35); }
.chart-card-header { display: flex; align-items: center; margin-bottom: .24rem; padding-bottom: .16rem; border-bottom: .01rem solid rgba(212,175,55,.18); }
.chart-card-icon { font-size: .36rem; color: #d4af37; margin-right: .12rem; }
.chart-card-title { font-size: .3rem; color: #d4af37; letter-spacing: .04rem; font-weight: 500; }
.chart-pillars { display: flex; justify-content: space-between; margin-bottom: .24rem; }
.pillar { flex: 1; display: flex; flex-direction: column; align-items: center; padding: .16rem .04rem .12rem; border-radius: .12rem; background: rgba(255,255,255,.03); margin: 0 .04rem; }
.pillar-day { background: rgba(212,175,55,.12); border: .01rem solid rgba(212,175,55,.5); }
.pillar-label { font-size: .22rem; color: #7d7d8a; margin-bottom: .06rem; }
.pillar-char { font-size: .44rem; color: #f3e8c8; line-height: 1.2; font-weight: 500; }
.pillar-day .pillar-char { color: #d4af37; }
.pillar-ss { font-size: .22rem; color: #d4af37; margin-top: .06rem; }
.chart-wuxing-line { margin-bottom: .24rem; padding-top: .16rem; border-top: .01rem solid rgba(212,175,55,.15); font-size: .26rem; color: #c9c9d4; letter-spacing: .01rem; }
.chart-dayun { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: .16rem; padding-top: .16rem; border-top: .01rem solid rgba(212,175,55,.15); }
.dayun-item { display: inline-flex; flex-direction: column; align-items: center; padding: .12rem .18rem; background: rgba(255,255,255,.04); border-radius: .1rem; margin-right: .12rem; min-width: 1rem; }
.dayun-age { font-size: .2rem; color: #7d7d8a; }
.dayun-pillar { font-size: .28rem; color: #f3e8c8; margin: .04rem 0 .02rem; font-weight: 500; }
.dayun-ss { font-size: .2rem; color: #d4af37; }
.chart-shensha { display: flex; flex-wrap: wrap; gap: .1rem; padding-top: .16rem; border-top: .01rem solid rgba(212,175,55,.15); }
.shensha-tag { font-size: .22rem; color: #d4af37; padding: .04rem .14rem; background: rgba(212,175,55,.1); border: .01rem solid rgba(212,175,55,.3); border-radius: .2rem; }

/* ===== 我的页 ===== */
.me-page { padding-bottom: .4rem; }
.user-section { display: flex; align-items: center; gap: .24rem; padding: .3rem .1rem; }
.avatar-placeholder { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #1e1e38; border: .01rem solid rgba(212,175,55,.4); display: flex; align-items: center; justify-content: center; font-size: .56rem; color: #d4af37; }
.user-info { flex: 1; min-width: 0; }
.nickname-line { font-size: .32rem; color: #f0e6d2; margin-bottom: .1rem; }
.member-card { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #2a2440 0%, #1e1e38 100%); border: .01rem solid rgba(212,175,55,.45); border-radius: .16rem; padding: .28rem; margin: .1rem 0 .2rem; }
.member-card-active { border-color: rgba(212,175,55,.25); }
.member-card-title { font-size: .3rem; color: #f3e8c8; font-weight: 600; margin-bottom: .08rem; }
.member-card-desc { font-size: .22rem; color: #9999b3; }
.member-card-right { text-align: right; }
.member-card-right .price { display: block; font-size: .3rem; color: #d4af37; font-weight: 700; }
.member-card-right .cta { display: inline-block; margin-top: .06rem; font-size: .22rem; color: #1a1a1a; background: #d4af37; padding: .06rem .2rem; border-radius: .3rem; }
.member-card-active .cta { background: transparent; color: #d4af37; border: .01rem solid rgba(212,175,55,.5); }
.section { margin-top: .1rem; }
.empty { display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .6rem 0; color: #666680; font-size: .26rem; }
.empty-hint { font-size: .22rem; color: #555570; }
.chart-item { display: flex; align-items: center; gap: .2rem; padding: .24rem .2rem; background: #1e1e38; border: .01rem solid #2a2a4a; border-radius: .16rem; margin-bottom: .16rem; }
.chart-item:active { background: #24244a; }
.chart-item-icon { width: .72rem; height: .72rem; border-radius: 50%; background: #14142a; display: flex; align-items: center; justify-content: center; color: #d4af37; font-size: .36rem; flex-shrink: 0; }
.chart-item-main { flex: 1; min-width: 0; }
.chart-item-title { font-size: .3rem; color: #f0e6d2; }
.chart-item-subtitle { font-size: .22rem; color: #9999b3; margin-top: .04rem; }
.chart-item-meta { font-size: .2rem; color: #666680; margin-top: .04rem; }
.chart-item-arrow { color: #555570; font-size: .4rem; flex-shrink: 0; }
.menu { margin-top: .3rem; background: #1e1e38; border: .01rem solid #2a2a4a; border-radius: .16rem; overflow: hidden; }
.menu-item { display: flex; align-items: center; padding: .28rem .24rem; border-bottom: .01rem solid #2a2a4a; }
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: #24244a; }
.menu-icon { margin-right: .16rem; font-size: .32rem; }
.menu-label { flex: 1; font-size: .28rem; color: #e8e8f0; }
.menu-label.danger { color: #ef6b6b; }
.menu-arrow { color: #555570; font-size: .36rem; }
.version { text-align: center; color: #555570; font-size: .22rem; margin: .4rem 0 .2rem; }

/* ===== 协议/隐私静态页 ===== */
.doc-page { padding: .3rem .4rem .6rem; }
.doc-back { color: #d4af37; font-size: .3rem; margin-bottom: .2rem; }
.doc-title { font-size: .4rem; color: #d4af37; font-weight: 700; margin-bottom: .24rem; }
.doc-h { font-size: .28rem; color: #c9a84c; margin: .3rem 0 .12rem; font-weight: 600; }
.doc-page p { font-size: .26rem; color: #c9c9d4; line-height: 1.7; margin: .1rem 0; }
.doc-page p b { color: #f0e6d2; }
.doc-foot { margin-top: .4rem; font-size: .22rem; color: #666680; text-align: center; }

/* ===== UI 浮层 ===== */
.ui-toast { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); background: rgba(0,0,0,.82); color: #fff; padding: .2rem .32rem; border-radius: .14rem; font-size: .28rem; z-index: 1000; max-width: 70%; text-align: center; line-height: 1.5; }
.ui-mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 900; display: flex; align-items: center; justify-content: center; }
.ui-loading-box { background: rgba(0,0,0,.8); border-radius: .16rem; padding: .4rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.ui-spinner { width: .6rem; height: .6rem; border: .05rem solid rgba(255,255,255,.25); border-top-color: #d4af37; border-radius: 50%; animation: spin .8s linear infinite; }
.ui-loading-text { color: #fff; font-size: .26rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.ui-modal { width: 76%; max-width: 6rem; background: #1e1e38; border: .01rem solid #2a2a4a; border-radius: .2rem; overflow: hidden; }
.ui-modal-title { font-size: .32rem; color: #f3e8c8; text-align: center; padding: .36rem .3rem .1rem; font-weight: 600; }
.ui-modal-content { font-size: .27rem; color: #c9c9d4; line-height: 1.6; padding: .1rem .36rem .3rem; text-align: center; }
.ui-modal-btns { display: flex; border-top: .01rem solid #2a2a4a; }
.ui-modal-btn { flex: 1; text-align: center; padding: .28rem 0; font-size: .3rem; }
.ui-modal-cancel { color: #9999b3; border-right: .01rem solid #2a2a4a; }
.ui-modal-confirm { color: #d4af37; font-weight: 600; }
.ui-as-mask { align-items: flex-end; }
.ui-as { width: 100%; padding: .12rem; padding-bottom: calc(.12rem + env(safe-area-inset-bottom)); }
.ui-as-list { background: #1e1e38; border-radius: .16rem; overflow: hidden; margin-bottom: .12rem; }
.ui-as-item { text-align: center; padding: .3rem 0; font-size: .3rem; color: #d4af37; border-bottom: .01rem solid #2a2a4a; }
.ui-as-item:last-child { border-bottom: none; }
.ui-as-item:active { background: #24244a; }
.ui-as-cancel { background: #1e1e38; border-radius: .16rem; text-align: center; padding: .3rem 0; font-size: .3rem; color: #9999b3; }
.ui-as-cancel:active { background: #24244a; }

/* 真实微信头像（取代 ☯ 占位） */
.avatar-img { width: 1.1rem; height: 1.1rem; border-radius: 50%; object-fit: cover; border: .01rem solid rgba(212,175,55,.4); background: #1e1e38; }

/* 历史命盘可见删除按钮 */
.chart-item-del { flex-shrink: 0; font-size: .22rem; color: #c9737a; border: .01rem solid rgba(199,115,122,.5); border-radius: .1rem; padding: .06rem .16rem; }
.chart-item-del:active { background: rgba(199,115,122,.15); }

/* 随喜金额输入弹窗 */
.ui-amt-sub { padding-bottom: .2rem !important; }
.ui-amt-chips { display: flex; flex-wrap: wrap; gap: .14rem; justify-content: center; padding: 0 .36rem .1rem; }
.ui-amt-chip { font-size: .28rem; color: #d4af37; border: .01rem solid rgba(212,175,55,.5); border-radius: .12rem; padding: .12rem .26rem; }
.ui-amt-chip.on { background: #d4af37; color: #1e1e38; font-weight: 600; }
.ui-amt-input-row { display: flex; align-items: center; gap: .1rem; margin: .12rem .36rem .3rem; background: #14142a; border: .01rem solid #2a2a4a; border-radius: .12rem; padding: .14rem .24rem; }
.ui-amt-yuan { color: #d4af37; font-size: .34rem; font-weight: 600; }
.ui-amt-input { flex: 1; background: transparent; border: none; outline: none; color: #f0e6d2; font-size: .32rem; width: 100%; }
.ui-amt-input::placeholder { color: #666680; }

/* 「我的」页按需授权头像昵称入口 */
.auth-profile-link { margin-top: .08rem; font-size: .22rem; color: #d4af37; opacity: .85; }
.auth-profile-link:active { opacity: .5; }