/* styles.css — 全局样式 + 组件样式 + 各页面样式（H5版）
   由 app.wxss 及各页面 wxss 转换，rpx 数值 / 2 转为 px（750设计稿→375） */

:root {
  --color-primary: #0D9B5D;
  --color-primary-light: #10B981;
  --color-bronze: #8B6914;
  --color-bronze-light: #D4A847;
  --color-dark: #3d2b1f;
  --color-red: #DC2626;
  --color-bg: #faf7f2;
  --color-text: #3d2b1f;
  --color-text-secondary: #8b7b68;
  --color-border: #ddd5c8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px; line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 60px; position: relative; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; outline: none; }
input, textarea { font-family: inherit; outline: none; }

/* 通用容器/卡片/按钮/表单 */
.container { padding: 12px; }
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 6px rgba(61,43,31,0.06); border-left: 2px solid #ddd5c8; }
.card-title { font-size: 17px; font-weight: 700; color: var(--color-dark); margin-bottom: 10px; display: block; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.card-tag { font-size: 11px; color: var(--color-text-secondary); background: #f0ebe2; padding: 3px 8px; border-radius: 4px; }
.card-subtitle { font-size: 12px; color: var(--color-text-secondary); font-weight: 400; }
.btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: #fff !important; border: none; border-radius: 22px; padding: 12px 24px; font-size: 16px; font-weight: 600; text-align: center; line-height: 1.5; display: block; width: 100%; }
.btn-primary:active { opacity: 0.85; }
.btn-primary[disabled] { opacity: 0.5; background: #9CA3AF; }
.btn-outline { background: #fff; color: #8b6914 !important; border: 1px solid #c9a96e; border-radius: 22px; padding: 12px 24px; font-size: 16px; font-weight: 600; text-align: center; line-height: 1.5; display: block; width: 100%; }
.btn-outline:active { opacity: 0.85; }
.form-group { margin-bottom: 14px; }
.label { display: block; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 6px; }
.input { width: 100%; height: 44px; background: #faf7f2; border: 1px solid var(--color-border); border-radius: 8px; padding: 0 12px; font-size: 15px; }
.picker-value { height: 44px; line-height: 44px; background: #faf7f2; border: 1px solid var(--color-border); border-radius: 8px; padding: 0 12px; font-size: 15px; color: var(--color-text); }
.btn-group { display: flex; gap: 8px; }
.btn-group-item { flex: 1; height: 40px; line-height: 40px; text-align: center; border-radius: 8px; font-size: 14px; font-weight: 500; background: #f0ebe2; color: var(--color-text-secondary); border: none; }
.btn-group-item.active { background: #c9a96e; color: #fff; box-shadow: 0 2px 6px rgba(201,169,110,0.3); }
.error-box { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; padding: 10px 12px; color: var(--color-red); font-size: 13px; margin-bottom: 12px; }
.tip-box { background: #faf7f2; border-radius: 8px; padding: 10px 12px; color: var(--color-text-secondary); font-size: 12px; text-align: center; margin-top: 12px; }
.info-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 16px; font-size: 14px; color: var(--color-text-secondary); }
.info-bar .info-name { font-weight: 700; color: var(--color-dark); }
.info-bar .info-dot { color: #D1D5DB; }
.badge-free { display: inline-block; font-size: 11px; color: var(--color-primary); background: #ECFDF5; padding: 2px 8px; border-radius: 10px; font-weight: 500; }

/* 四柱/十神/藏干网格 */
.sizhu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.pillar { text-align: center; }
.pillar-label { display: block; font-size: 11px; color: var(--color-text-secondary); margin-bottom: 6px; }
.pillar-body { background: #faf7f2; border: 1px solid #ddd5c8; border-radius: 8px; padding: 12px 4px; }
.pillar-tg, .pillar-dz { display: block; font-size: 22px; font-weight: 700; color: var(--color-dark); line-height: 1.3; }
.pillar-nayin { display: block; font-size: 11px; color: var(--color-bronze); margin-top: 4px; }
.shishen-grid, .canggan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.shishen-item, .canggan-item { text-align: center; background: #faf7f2; border-radius: 6px; padding: 8px 4px; font-size: 14px; color: var(--color-text); }

/* 大运/流年 */
.dayun-list { margin-top: 8px; }
.dayun-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px; border-bottom: 1px solid #f0ebe2; }
.dayun-item.current { background: #faf7f2; border-radius: 6px; border-bottom-color: transparent; }
.dayun-item.current .dayun-age, .dayun-item.current .dayun-gz, .dayun-item.current .dayun-years { color: var(--color-primary); }
.dayun-age { font-size: 14px; font-weight: 500; color: var(--color-dark); min-width: 40px; }
.dayun-gz { font-size: 18px; font-weight: 700; color: var(--color-dark); }
.dayun-years { font-size: 11px; color: var(--color-text-secondary); }
.liunian-box { margin-top: 12px; padding: 10px 12px; background: #faf7f2; border: 1px solid #ddd5c8; border-radius: 8px; display: flex; align-items: center; }
.liunian-label { font-size: 14px; color: var(--color-text-secondary); }
.liunian-gz { font-size: 18px; font-weight: 700; color: var(--color-dark); margin-left: 6px; }
.action-buttons { margin-top: 16px; display: flex; gap: 10px; }
.action-buttons .btn-primary, .action-buttons .btn-outline { flex: 1; }

/* 页面头部/空状态/服务卡片 */
.page-header { background: #fff; padding: 20px 16px 16px; border-bottom: 1px solid #f0ebe2; }
.page-header-title { font-size: 20px; font-weight: 700; color: var(--color-dark); display: flex; align-items: center; gap: 8px; }
.page-header-desc { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; }
.empty-state { text-align: center; padding: 60px 24px; }
.empty-state-icon { width: 60px; height: 60px; background: #f0ebe2; border-radius: 16px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--color-dark); margin-bottom: 6px; }
.empty-state-desc { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 20px; }
.service-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 6px rgba(61,43,31,0.06); position: relative; overflow: hidden; }
.service-card.popular { border: 1px solid var(--color-primary); }
.service-card .popular-badge { position: absolute; top: 0; right: 0; background: var(--color-primary); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 0 0 0 8px; }
.service-card-title { font-size: 16px; font-weight: 700; color: var(--color-dark); margin-bottom: 4px; }
.service-card-price { font-size: 24px; font-weight: 700; color: var(--color-dark); }
.service-card-price .unit { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); margin-left: 2px; }
.service-card-features { margin: 12px 0; }
.service-card-feature { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); padding: 4px 0; }
.service-card-feature .check { color: var(--color-primary); font-size: 14px; }

/* TabBar */
#tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: 52px; background: #fff; border-top: 1px solid #f0ebe2; display: flex; z-index: 100; }
.tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #8b7b68; font-size: 10px; cursor: pointer; }
.tabbar-item.active { color: #c9a96e; }
.tabbar-icon { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; background: #f0ebe2; color: #8b7b68; }
.tabbar-item.active .tabbar-icon { background: #c9a96e; color: #fff; }
#nav-bar { display: none; position: sticky; top: 0; height: 44px; background: #fff; border-bottom: 1px solid #f0ebe2; align-items: center; padding: 0 12px; z-index: 50; }
#nav-bar.show { display: flex; }
#nav-back { font-size: 22px; color: #3d2b1f; padding: 0 8px; cursor: pointer; }
#nav-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: #3d2b1f; }

/* 全局组件 Toast */
.g-toast { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: rgba(0,0,0,0.75); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 9999; opacity: 0; pointer-events: none; transition: all 0.2s; max-width: 80%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.g-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.g-toast-icon { width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; background: rgba(255,255,255,0.2); font-size: 20px; }
.g-toast-err { color: #fca5a5; }
/* Loading */
.g-loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 9998; display: none; align-items: center; justify-content: center; }
.g-loading-box { background: rgba(0,0,0,0.7); border-radius: 10px; padding: 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.g-loading-spinner { width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.g-loading-text { color: #fff; font-size: 13px; }
/* Modal */
.g-modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0); z-index: 9997; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.g-modal-mask.show { background: rgba(0,0,0,0.5); }
.g-modal-box { background: #fff; border-radius: 12px; width: 80%; max-width: 360px; overflow: hidden; transform: scale(0.9); transition: transform 0.2s; }
.g-modal-mask.show .g-modal-box { transform: scale(1); }
.g-modal-title { font-size: 16px; font-weight: 700; color: #3d2b1f; text-align: center; padding: 20px 20px 8px; }
.g-modal-content { font-size: 14px; color: #5a4a36; padding: 0 20px 20px; line-height: 1.6; text-align: center; white-space: pre-wrap; }
.g-modal-btns { display: flex; border-top: 1px solid #f0ebe2; }
.g-modal-btn { flex: 1; border: none; background: #fff; font-size: 16px; padding: 14px 0; color: #3d2b1f; }
.g-modal-btn:active { background: #faf7f2; }
.g-modal-cancel { color: #9a8b78; border-right: 1px solid #f0ebe2; }
.g-modal-confirm { color: var(--color-primary); font-weight: 600; }
.g-login-box { padding-bottom: 8px; }
.g-login-desc { font-size: 12px; color: #9a8b78; text-align: center; padding: 0 20px 16px; }
.g-login-input { display: block; width: calc(100% - 40px); margin: 0 20px 10px; height: 40px; background: #faf7f2; border: 1px solid #ddd5c8; border-radius: 8px; padding: 0 12px; font-size: 15px; }
.g-login-tip { font-size: 12px; color: var(--color-red); text-align: center; padding: 4px 20px 8px; min-height: 18px; }
.g-login-switch { text-align: center; font-size: 13px; color: #9a8b78; padding: 8px 0 16px; }
.g-login-switch span { color: var(--color-primary); }

/* 页面内弹窗 */
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; display: flex; align-items: center; justify-content: center; }
.modal-content { width: 320px; background: #fff; border-radius: 12px; overflow: hidden; }
.modal-full { width: 340px; max-height: 85vh; display: flex; flex-direction: column; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid #f0ebe2; }
.modal-title { font-size: 16px; font-weight: bold; color: #2d1408; }
.modal-close { font-size: 20px; color: #8b7355; padding: 0 4px; cursor: pointer; }
.modal-body { padding: 14px 16px; }
.modal-scroll { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.analysis-full-text { font-size: 13px; color: #2d1408; line-height: 2; white-space: pre-wrap; word-break: break-all; padding: 14px 16px; }
.modal-footer { padding: 10px 16px 14px; }
.footer-btns { display: flex; gap: 8px; }
.btn-copy { flex: 1; text-align: center; padding: 10px; border-radius: 6px; font-size: 14px; font-weight: bold; color: #8b6914; background: #faf7f2; border: 1px solid #c9a96e; }
.modal-footer .btn-primary { flex: 1; }

/* 首页 */
.page-index { background: #faf7f2; min-height: 100vh; padding-bottom: 20px; }
.hero { text-align: center; padding: 30px 20px 20px; background: linear-gradient(180deg, #f5efe4 0%, #faf7f2 100%); }
.hero-title { font-size: 24px; font-weight: bold; color: #3d2b1f; letter-spacing: 6px; }
.hero-subtitle { font-size: 12px; color: #9a8b78; margin-top: 6px; letter-spacing: 3px; }
.tool-entry { display: flex; justify-content: center; gap: 20px; padding: 12px 20px 16px; }
.tool-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.tool-icon-wrap { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.tool-icon-bazi { background: linear-gradient(135deg, #e8e0d0, #d4c9b5); }
.tool-icon-name { background: linear-gradient(135deg, #e0dcd0, #cfc8b0); }
.tool-icon-text { font-size: 13px; font-weight: bold; color: #5a4a36; letter-spacing: 1px; }
.tool-name { font-size: 11px; color: #8b7b68; letter-spacing: 1px; }
.section { padding: 8px 16px 0; }
.section-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; margin-top: 8px; }
.divider-line { flex: 1; height: 1px; background: #ddd5c8; }
.divider-text { font-size: 13px; color: #9a8b78; letter-spacing: 2px; flex-shrink: 0; }
.knowledge-list, .case-list { display: flex; flex-direction: column; gap: 6px; }
.knowledge-card { background: #fff; border-radius: 6px; padding: 12px 14px; border-left: 2px solid #c9a96e; cursor: pointer; }
.knowledge-header { display: flex; align-items: center; gap: 6px; }
.knowledge-dot { width: 5px; height: 5px; border-radius: 50%; background: #c9a96e; flex-shrink: 0; }
.knowledge-title { flex: 1; font-size: 14px; font-weight: 600; color: #3d2b1f; line-height: 1.4; }
.knowledge-arrow { font-size: 14px; color: #c9a96e; flex-shrink: 0; transition: transform 0.2s; }
.knowledge-arrow.expanded { transform: rotate(90deg); }
.knowledge-summary { font-size: 12px; color: #8b7b68; line-height: 1.7; margin-top: 6px; padding-left: 11px; }
.knowledge-detail { font-size: 12px; color: #5a4a36; line-height: 1.8; margin-top: 6px; padding: 8px 10px; background: #faf7f2; border-radius: 4px; }
.case-card { background: #fff; border-radius: 6px; padding: 12px 14px; border-left: 2px solid #8b7b68; cursor: pointer; }
.case-header { display: flex; align-items: center; gap: 4px; }
.case-title { flex: 1; font-size: 14px; font-weight: 600; color: #3d2b1f; }
.case-arrow { font-size: 14px; color: #8b7b68; flex-shrink: 0; transition: transform 0.2s; }
.case-arrow.expanded { transform: rotate(90deg); }
.case-subtitle { font-size: 12px; color: #9a8b78; margin-top: 4px; line-height: 1.5; }
.case-detail { font-size: 12px; color: #5a4a36; line-height: 1.8; margin-top: 6px; padding: 8px 10px; background: #faf7f2; border-radius: 4px; }
.footer { text-align: center; padding: 20px 16px 10px; }
.footer-quote { font-size: 12px; color: #9a8b78; letter-spacing: 2px; display: block; margin-bottom: 12px; }
.footer-share-btn { display: inline-block; background: transparent; border: 1px solid #c9a96e; color: #8b6914; font-size: 12px; padding: 6px 20px; border-radius: 14px; letter-spacing: 1px; }
.footer-copyright { font-size: 10px; color: #bbb3a4; display: block; margin-top: 8px; }

/* 八字页 */
.page-bazi .form-row { display: flex; gap: 10px; }
.page-bazi .form-group-half { flex: 1; min-width: 0; }
.page-bazi .form-group-half .btn-group { display: flex; gap: 4px; }
.page-bazi .form-group-half .btn-group-item { flex: 1; padding: 6px 0; font-size: 13px; }
.city-ref-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 8px 10px; background: rgba(13,155,93,0.08); border-radius: 6px; font-size: 12px; color: #0D9B5D; cursor: pointer; }
.toggle-arrow { font-size: 14px; transition: transform 0.2s; }
.toggle-arrow.expanded { transform: rotate(90deg); }
.city-ref-panel { margin-top: 6px; background: #fff; border-radius: 8px; padding: 10px; max-height: 300px; overflow-y: auto; }
.city-region { margin-bottom: 10px; }
.city-region:last-child { margin-bottom: 0; }
.city-region-title { font-size: 12px; font-weight: bold; color: #8B6914; padding: 4px 8px; background: rgba(139,105,20,0.08); border-radius: 4px; display: inline-block; margin-bottom: 6px; }
.city-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.city-item { display: flex; flex-direction: column; align-items: center; padding: 5px 8px; background: #f8f4ec; border-radius: 5px; min-width: 60px; cursor: pointer; }
.city-name { font-size: 12px; color: #2d1408; font-weight: 500; }
.city-lng { font-size: 10px; color: #8b7355; margin-top: 2px; }
.unlock-section { background: #fffdf5; border: 1px solid #f0d9a0; border-radius: 8px; padding: 12px; }
.unlock-title { font-size: 14px; font-weight: bold; color: #2d1408; display: block; margin-bottom: 6px; }
.unlock-order-row { display: flex; align-items: center; background: #fff; border: 1px dashed #d4c5a0; border-radius: 5px; padding: 6px 8px; margin-bottom: 6px; }
.unlock-order-label { font-size: 12px; color: #8b7355; }
.unlock-order-id { font-size: 12px; color: #8B6914; font-weight: bold; letter-spacing: 1px; margin-left: 4px; }
.unlock-order-copy { font-size: 11px; color: #8B6914; background: #faf7f2; padding: 2px 8px; border-radius: 4px; border: 1px solid #ddd5c8; margin-left: 6px; cursor: pointer; }
.unlock-desc { font-size: 12px; color: #5a4a36; display: block; line-height: 1.8; }
.unlock-row { display: flex; gap: 8px; margin-top: 8px; }
.unlock-input { flex: 1; height: 36px; border: 1px solid #d4c5a0; border-radius: 6px; padding: 0 10px; font-size: 14px; background: #fff; }
.unlock-btn { width: 70px; height: 36px; background: linear-gradient(135deg, #c9a96e, #a88b4a); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; border: none; }
.unlock-copy { margin-top: 8px; text-align: center; font-size: 12px; color: #0D9B5D; padding: 6px; background: rgba(13,155,93,0.08); border-radius: 5px; cursor: pointer; }
.unlock-free { margin-top: 8px; text-align: center; font-size: 12px; color: #0D9B5D; padding: 7px; background: #ECFDF5; border-radius: 5px; font-weight: 600; cursor: pointer; }

/* 姓名页 */
.sishu-table { width: 100%; overflow-x: auto; }
.sishu-header { display: grid; grid-template-columns: 40px 40px 90px 50px 40px 40px; gap: 3px; padding: 5px 0; border-bottom: 1px solid var(--color-border); }
.sishu-header .sishu-cell { font-size: 11px; color: var(--color-text-secondary); font-weight: 500; text-align: center; }
.sishu-row { display: grid; grid-template-columns: 40px 40px 90px 50px 40px 40px; gap: 3px; padding: 6px 0; border-bottom: 1px solid #f0ebe2; align-items: center; }
.sishu-cell { text-align: center; font-size: 12px; color: var(--color-text); }
.sishu-name { display: block; font-weight: 600; font-size: 12px; color: var(--color-dark); }
.sishu-desc { display: block; font-size: 9px; color: var(--color-text-secondary); }
.sishu-value { font-weight: 700; font-size: 14px; color: var(--color-dark); }
.luck-ji { color: var(--color-primary) !important; font-weight: 600; }
.luck-xiong { color: var(--color-red) !important; font-weight: 600; }
.sishu-row-highlight { background: rgba(139,105,20,0.1) !important; border-radius: 4px; }
.ten-year-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 5px; }
.ten-year-item { text-align: center; background: #faf7f2; border-radius: 5px; padding: 5px 3px; }
.ten-year-year { display: block; font-size: 10px; color: var(--color-text-secondary); }
.ten-year-gz { display: block; font-size: 13px; font-weight: 700; color: var(--color-dark); margin-top: 1px; }
.changsheng-table { width: 100%; overflow-x: auto; }
.changsheng-header { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 5px 0; border-bottom: 1px solid var(--color-border); }
.changsheng-header .changsheng-cell { font-size: 11px; color: var(--color-text-secondary); font-weight: 500; text-align: center; }
.changsheng-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 5px 0; border-bottom: 1px solid #f0ebe2; }
.changsheng-cell { text-align: center; font-size: 12px; color: var(--color-text); }
.changsheng-tg { font-weight: 700; color: var(--color-dark); }
.compact-card { margin-bottom: 6px !important; padding: 7px 9px !important; }
.compact-card .card-title { font-size: 13px; margin-bottom: 4px; }
.compact-actions { margin-top: 8px; gap: 6px; }

/* 定价页 */
.tab-bar { display: flex; background: #fff; border-radius: 8px; padding: 4px; margin-bottom: 16px; box-shadow: 0 1px 6px rgba(0,0,0,0.04); }
.tab-item { flex: 1; text-align: center; padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); border-radius: 6px; transition: all 0.2s; cursor: pointer; }
.tab-item.active { background: var(--color-primary); color: #fff; font-weight: 600; box-shadow: 0 2px 6px rgba(13,155,93,0.3); }
.analysis-section { margin-bottom: 16px; }
.analysis-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.analysis-type-item { padding: 7px 14px; border-radius: 16px; font-size: 13px; background: #F3F4F6; color: var(--color-text-secondary); font-weight: 500; cursor: pointer; }
.analysis-type-item.active { background: var(--color-primary); color: #fff; box-shadow: 0 2px 6px rgba(13,155,93,0.3); }
.analysis-result { background: #ECFDF5; border: 1px solid #A7F3D0; }
.analysis-result-text { font-size: 14px; color: var(--color-dark); line-height: 1.8; white-space: pre-wrap; }
.name-card { border: 1px solid #FDE68A; }
.name-popular { border-color: var(--color-bronze) !important; }
.name-badge { background: var(--color-bronze) !important; }
.name-card .service-card-price { color: var(--color-bronze); }
.name-check { color: var(--color-bronze) !important; }
.name-btn { background: linear-gradient(135deg, var(--color-bronze), var(--color-bronze-light)) !important; }
.delivery-info { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
.enterprise-card { border-left: 3px solid var(--color-primary); }
.faq-section { margin-top: 8px; }
.faq-item { margin-bottom: 12px; }
.faq-item:last-child { margin-bottom: 0; }
.faq-q { font-size: 14px; font-weight: 600; color: var(--color-dark); margin-bottom: 4px; }
.faq-a { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
.contact-section { text-align: center; padding: 20px 16px; margin-top: 8px; }
.contact-title { font-size: 15px; font-weight: 600; color: var(--color-dark); margin-bottom: 6px; }
.contact-info { font-size: 14px; color: var(--color-text-secondary); }

/* 个人中心 */
.user-card { display: flex; align-items: center; }
.user-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #c9a96e, #a88b4a); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-text { font-size: 18px; font-weight: 700; color: #fff; }
.user-info-row { display: flex; align-items: center; gap: 10px; }
.user-detail { flex: 1; }
.user-nickname { font-size: 16px; font-weight: 700; color: #3d2b1f; }
.user-motto { font-size: 11px; color: #9a8b78; margin-top: 3px; letter-spacing: 1px; }
.reward-card { margin-bottom: 12px; }
.reward-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.reward-title { font-size: 14px; font-weight: bold; color: #3d2b1f; }
.reward-badge { font-size: 11px; color: #0D9B5D; background: #ECFDF5; padding: 3px 9px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.reward-stats { display: flex; justify-content: space-around; padding: 6px 0; }
.reward-stat { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.stat-value { font-size: 15px; font-weight: bold; color: #3d2b1f; }
.stat-green { color: #0D9B5D; }
.stat-gold { color: #8B6914; }
.stat-label { font-size: 10px; color: #9a8b78; margin-top: 2px; }
.reward-share-row { margin-top: 6px; }
.reward-share-btn { width: 100%; background: #faf7f2; color: #8b6914; font-size: 12px; font-weight: 600; padding: 8px; border-radius: 5px; text-align: center; border: 1px solid #ddd5c8; }
.func-grid { display: flex; gap: 8px; margin-bottom: 12px; }
.func-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border-radius: 6px; padding: 12px 6px; box-shadow: 0 1px 4px rgba(61,43,31,0.06); cursor: pointer; }
.func-icon { width: 32px; height: 32px; line-height: 32px; text-align: center; background: #faf7f2; border-radius: 8px; font-size: 12px; font-weight: bold; color: #8b6914; }
.func-name { font-size: 11px; color: #5a4a36; }
.logout-section { margin-top: 16px; padding-bottom: 20px; }
.btn-logout { width: 100%; height: 40px; text-align: center; font-size: 14px; font-weight: 600; color: #9a8b78; background: #fff; border: 1px solid #ddd5c8; border-radius: 20px; }
.btn-logout:active { background: #faf7f2; }
.admin-section { margin-bottom: 12px; }
.admin-entry { background: #fff; border-radius: 6px; padding: 12px; text-align: center; box-shadow: 0 1px 4px rgba(61,43,31,0.06); cursor: pointer; }
.admin-entry-text { font-size: 13px; color: #9a8b78; letter-spacing: 1px; }
.admin-panel { background: #fff; border-radius: 6px; padding: 12px; box-shadow: 0 1px 4px rgba(61,43,31,0.06); }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f0ebe2; }
.admin-title { font-size: 15px; font-weight: bold; color: #3d2b1f; }
.admin-actions { display: flex; gap: 12px; align-items: center; }
.admin-refresh { font-size: 12px; color: #8b6914; font-weight: 600; cursor: pointer; }
.admin-logout { font-size: 12px; color: #999; cursor: pointer; }
.order-list { max-height: 400px; overflow-y: auto; }
.order-item { border-radius: 5px; padding: 8px 10px; margin-bottom: 8px; border-left: 3px solid; }
.order-pending { background: #FFFBF0; border-left-color: #E8A317; }
.order-done { background: #F0FBF4; border-left-color: #0D9B5D; }
.order-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.order-type { font-size: 13px; font-weight: bold; color: #3d2b1f; }
.order-status { font-size: 11px; padding: 2px 7px; border-radius: 6px; font-weight: 600; }
.status-pending { color: #E8A317; background: #FFF3D6; }
.status-done { color: #0D9B5D; background: #ECFDF5; }
.order-mid { margin-bottom: 4px; }
.order-code-row { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.order-label { font-size: 12px; color: #9a8b78; }
.order-code { font-size: 16px; font-weight: bold; color: #8b6914; letter-spacing: 3px; }
.order-copy { font-size: 11px; color: #8b6914; background: #faf7f2; padding: 2px 8px; border-radius: 5px; border: 1px solid #ddd5c8; cursor: pointer; }
.order-user { font-size: 11px; color: #9a8b78; }
.order-bot { padding-top: 4px; border-top: 1px dashed #e8e0d4; }
.order-id { font-size: 10px; color: #bbb; }
.admin-empty { text-align: center; padding: 20px 0; color: #9a8b78; font-size: 13px; }
.bihua-add-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.bihua-input-char { width: 50px; height: 36px; border: 1px solid #d4c5a0; border-radius: 6px; text-align: center; font-size: 16px; background: #fff; }
.bihua-input-num { width: 60px; height: 36px; border: 1px solid #d4c5a0; border-radius: 6px; text-align: center; font-size: 14px; background: #fff; }
.bihua-add-btn { padding: 7px 14px; background: linear-gradient(135deg, #c9a96e, #a88b4a); color: #fff; border-radius: 6px; font-size: 14px; font-weight: bold; border: none; }
.bihua-tip { display: block; font-size: 12px; color: #0D9B5D; margin-top: 6px; }
.form-input { width: 100%; height: 36px; background: #faf7f2; border: 1px solid #ddd5c8; border-radius: 5px; padding: 0 8px; font-size: 14px; box-sizing: border-box; text-transform: uppercase; letter-spacing: 4px; text-align: center; }
.form-tips { font-size: 11px; color: #9a8b78; margin: 6px 0 10px; display: block; text-align: center; }
.form-submit { background: linear-gradient(135deg, #c9a96e, #a88b4a); color: #fff; text-align: center; padding: 10px; border-radius: 5px; font-size: 14px; font-weight: bold; cursor: pointer; }

/* 问答页 */
.qa-page { padding: 8px 12px 60px; min-height: 100vh; background: #faf7f2; }
.qa-header { text-align: center; padding: 12px 0 8px; }
.qa-header-title { font-size: 18px; font-weight: bold; color: #3d2b1f; }
.qa-header-desc { font-size: 12px; color: #9a8b78; margin-top: 4px; }
.filter-bar { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 4px; }
.filter-tabs { display: flex; gap: 4px; }
.filter-tab { font-size: 12px; color: #8b7b68; padding: 4px 10px; border-radius: 10px; background: #f0ebe2; cursor: pointer; }
.filter-tab.active { color: #fff; background: #c9a96e; }
.admin-btn-area { display: flex; align-items: center; }
.admin-login-btn { font-size: 11px; color: #9a8b78; padding: 3px 8px; border: 1px solid #ddd5c8; border-radius: 8px; cursor: pointer; }
.admin-badge { font-size: 11px; color: #fff; background: #c9a96e; padding: 3px 8px; border-radius: 8px; cursor: pointer; }
.ask-btn { background: linear-gradient(135deg, #c9a96e, #a88b4a); color: #fff; text-align: center; padding: 10px; border-radius: 6px; font-size: 15px; font-weight: bold; margin: 8px 0; cursor: pointer; }
.qa-list { margin-top: 8px; }
.qa-item { background: #fff; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(61,43,31,0.06); border-left: 3px solid #ddd5c8; }
.qa-answered { border-left-color: #0D9B5D; }
.qa-pending { border-left-color: #c9a96e; background: #faf7f2; }
.qa-item-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.qa-item-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; color: #fff; }
.tag-answered { background: #0D9B5D; }
.tag-pending { background: #c9a96e; }
.qa-item-time { font-size: 11px; color: #9a8b78; margin-left: auto; }
.qa-item-question { font-size: 14px; color: #3d2b1f; line-height: 1.6; white-space: pre-wrap; word-break: break-all; font-family: monospace; cursor: pointer; }
.qa-item-answer { background: #F0FDF4; border-left: 3px solid #0D9B5D; padding: 8px 10px; margin-top: 8px; border-radius: 0 4px 4px 0; }
.answer-label { font-size: 12px; color: #0D9B5D; font-weight: bold; margin-bottom: 4px; }
.answer-text { font-size: 13px; color: #374151; line-height: 1.7; white-space: pre-wrap; word-break: break-all; font-family: monospace; }
.answer-time { font-size: 10px; color: #9a8b78; margin-top: 4px; }
.qa-item-expand { font-size: 12px; color: #0D9B5D; text-align: center; margin-top: 6px; padding-top: 6px; border-top: 1px solid #f0ebe2; cursor: pointer; }
.qa-item-waiting { font-size: 12px; color: #9a8b78; text-align: center; margin-top: 6px; padding-top: 6px; border-top: 1px solid #f0ebe2; }
.qa-item-admin-actions { margin-top: 6px; padding-top: 6px; border-top: 1px solid #f0ebe2; }
.answer-btn { background: #c9a96e; color: #fff; text-align: center; padding: 7px; border-radius: 4px; font-size: 13px; font-weight: bold; cursor: pointer; }
.qa-empty { text-align: center; padding: 40px 0; }
.qa-empty-icon { font-size: 40px; color: #ddd5c8; margin-bottom: 8px; }
.qa-empty-text { font-size: 15px; color: #8b7b68; }
.qa-empty-desc { font-size: 12px; color: #9a8b78; margin-top: 4px; }
.qa-loading { text-align: center; padding: 16px; color: #9a8b78; font-size: 12px; }
.qa-footer { text-align: center; padding: 16px 0 8px; }
.qa-footer-text { font-size: 12px; color: #9a8b78; margin-bottom: 6px; }
.qa-footer-btn { display: inline-block; font-size: 13px; color: #8b6914; border: 1px solid #c9a96e; padding: 6px 16px; border-radius: 4px; cursor: pointer; }
.qa-form-textarea { width: 100%; height: 180px; background: #faf7f2; border: 1px solid #ddd5c8; border-radius: 6px; padding: 8px; font-size: 14px; box-sizing: border-box; }
.qa-form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qa-form-label { font-size: 14px; color: #3d2b1f; font-weight: bold; }
.qa-paste-btn { font-size: 13px; color: #8b6914; background: #faf7f2; padding: 4px 10px; border-radius: 4px; border: 1px solid #c9a96e; cursor: pointer; }
.qa-form-count { text-align: right; font-size: 11px; color: #9a8b78; margin-top: 4px; }