/* =========================================================================
 * 超级问心 · 样式（移动端优先，最大宽度 480px）
 * 零依赖：不用外部字体 / 不引 CDN，全部本地绘制。
 * ========================================================================= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: #eef0f6;
  color: #1b1d29;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: #f6f7fb;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ------------------------------------------------------------- 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(246, 247, 251, 0.96);
  border-bottom: 1px solid #e6e8f0;
  backdrop-filter: blur(6px);
}
.topbar-title { font-weight: 700; font-size: 16px; flex: 1; }
.topbar-nav { display: flex; gap: 10px; font-size: 12px; color: #5b4bff; }
.topbar-nav a { padding: 4px 8px; border-radius: 999px; background: #ecebff; }
.icon-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #e0e2ee; background: #fff; color: #4b4f63;
  font-size: 16px; line-height: 1; cursor: pointer;
}

/* --------------------------------------------------------- 屏幕容器 */
.screens { flex: 1; padding: 0 0 76px; }
.screen { display: none; }
.screen.active { display: block; animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- 首页 */
.hero {
  margin: 14px; padding: 18px 16px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #5b4bff 0%, #8a63ff 55%, #ff8ba7 100%);
  color: #fff;
}
.hero h1 { margin: 0 0 6px; font-size: 21px; letter-spacing: .5px; }
.hero p { margin: 0; font-size: 13px; opacity: .92; }
.search-box { margin-top: 14px; display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 8px 14px; }
.search-box input { flex: 1; border: 0; background: transparent; color: #fff; font-size: 14px; outline: none; }
.search-box input::placeholder { color: rgba(255, 255, 255, .75); }

.section-title { margin: 18px 16px 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.section-title small { color: #8a8fa3; font-weight: 400; font-size: 12px; }

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 14px; }
.cat-item {
  background: #fff; border-radius: 14px; padding: 12px 8px; text-align: center;
  border: 1px solid #ebedf5; cursor: pointer;
}
.cat-item.active { border-color: #5b4bff; box-shadow: 0 4px 14px rgba(91, 75, 255, .16); }
.cat-icon { font-size: 22px; display: block; }
.cat-name { font-size: 13px; font-weight: 600; margin-top: 2px; display: block; }
.cat-desc { font-size: 11px; color: #9298ad; }

.test-list { padding: 0 14px; }
.test-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid #ebedf5; border-radius: 16px;
  padding: 12px; margin-bottom: 10px; cursor: pointer;
}
.test-card:active { transform: scale(.995); }
.tc-cover {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: #f0efff;
}
.tc-body { flex: 1; min-width: 0; }
.tc-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.tc-intro { color: #6d728a; font-size: 12.5px; margin-bottom: 6px; }
.tc-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: #9298ad; }
.badge-hot { background: #ffe9ef; color: #e0356b; border-radius: 6px; padding: 0 5px; font-size: 11px; }
.badge-new { background: #e8f6ee; color: #1f9254; border-radius: 6px; padding: 0 5px; font-size: 11px; }

/* ------------------------------------------------------------- 详情 */
.detail-cover {
  margin: 14px; border-radius: 18px; padding: 22px 16px;
  background: linear-gradient(135deg, #2f2a6b, #5b4bff); color: #fff;
}
.detail-cover .emoji { font-size: 34px; }
.detail-cover h2 { margin: 6px 0 4px; font-size: 19px; }
.detail-cover p { margin: 0; font-size: 13px; opacity: .9; }
.detail-meta { display: flex; gap: 16px; margin: 12px 14px 0; font-size: 12.5px; color: #6d728a; }
.detail-meta b { color: #1b1d29; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 14px; }
.chip { background: #fff; border: 1px solid #e6e8f2; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #4b4f63; }
/* 封面 / 详情页（2026-10-19 按参考图重做：标题区 + 说明卡 + 大按钮 + 结果预览网格） */
.detail-hero {
  margin: 14px; padding: 24px 20px 22px; border-radius: 22px; color: #fff;
  background:
    radial-gradient(120% 90% at 88% -8%, rgba(255, 139, 167, .5), transparent 62%),
    linear-gradient(158deg, #241f5c, #4b3bd8 62%, #7c5dff);
  box-shadow: 0 20px 40px -24px rgba(35, 32, 77, .55);
}
.detail-kicker { font-size: 11px; letter-spacing: 2.4px; color: rgba(255, 255, 255, .74); }
.detail-emoji { font-size: 30px; margin-top: 10px; }
.detail-title { margin: 6px 0 8px; font-size: 22px; line-height: 1.32; letter-spacing: .4px; }
.detail-sub { margin: 0; font-size: 13.5px; line-height: 1.78; color: rgba(255, 255, 255, .92); }
.detail-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; color: rgba(255, 255, 255, .86); }
.detail-facts i { font-style: normal; opacity: .45; }

.detail-brief { margin: 14px; padding: 18px 16px 14px; border-radius: 18px; background: #fff; border: 1px dashed #d8dbea; }
.detail-brief p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.86; color: #3c4059; }
.detail-brief p:last-child { margin-bottom: 0; }
.detail-brief b { color: #23263c; }
.detail-brief em { font-style: normal; font-weight: 700; color: #5b4bff; }
.detail-warn { padding-top: 10px; border-top: 1px dashed #e6e8f2; color: #b4793c !important; font-size: 12.5px !important; }

.detail-cta { margin: 16px 14px 0; }
.detail-cta .btn { padding: 15px 18px; font-size: 16px; border-radius: 16px; }
.detail-cta-sub { margin-top: 9px; text-align: center; font-size: 12px; color: #9aa0bb; }
.detail-cta-bottom { margin: 14px 0 0; }
.detail-cta-bottom .btn { font-size: 14px; padding: 12px 16px; }
.detail-sep { margin: 18px 0 4px; text-align: center; font-size: 14px; letter-spacing: 8px; color: #cfd3e4; }

.detail-tiers { margin: 0 14px 26px; }
.detail-tiers-h { margin: 0; text-align: center; font-size: 17px; font-weight: 800; color: #23263c; }
.detail-tiers-sub { margin: 7px 0 14px; text-align: center; font-size: 12.5px; color: #9aa0bb; }
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tier-card {
  position: relative; overflow: hidden; cursor: pointer;
  padding: 15px 13px 13px; border-radius: 16px; background: #fff;
  border: 1px solid #ebedf5; transition: box-shadow .18s ease, border-color .18s ease;
}
.tier-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #5b4bff, #8a63ff); }
.tier-card[data-tone="1"]::before { background: linear-gradient(90deg, #ff8ba7, #c04bff); }
.tier-card[data-tone="2"]::before { background: linear-gradient(90deg, #2fbf9b, #5b4bff); }
.tier-card[data-tone="3"]::before { background: linear-gradient(90deg, #ffd166, #ff8ba7); }
.tier-top { display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 1px; color: #9aa0bb; }
.tier-dot { width: 6px; height: 6px; border-radius: 50%; background: #5b4bff; }
.tier-card[data-tone="1"] .tier-dot { background: #c04bff; }
.tier-card[data-tone="2"] .tier-dot { background: #2fbf9b; }
.tier-card[data-tone="3"] .tier-dot { background: #ffb703; }
.tier-name { margin: 6px 0 5px; font-size: 15px; font-weight: 800; color: #23263c; }
.tier-line { font-size: 12.5px; line-height: 1.62; color: #6d728a; }
.tier-open { margin-top: 9px; font-size: 12.5px; font-weight: 700; color: #5b4bff; }
.tier-expand { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eceef6; }
.tier-barnum { margin: 0; font-size: 12.5px; line-height: 1.85; color: #3c4059; }
.tier-hint { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: #9aa0bb; }
.tier-card.is-open { grid-column: 1 / -1; border-color: #cdc8ff; box-shadow: 0 14px 28px -20px rgba(53, 48, 120, .7); }
.tier-card.is-open .tier-open { color: #9aa0bb; }
@media (max-width: 400px) {
  .tier-grid { gap: 8px; }
  .tier-card { padding: 13px 11px 11px; }
  .tier-name { font-size: 14px; }
  .tier-line { font-size: 12px; }
  .detail-title { font-size: 20px; }
}

.notice { margin: 12px 14px; padding: 10px 12px; border-radius: 12px; background: #fff8e9; color: #8a6a1f; font-size: 12px; }

/* ------------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 12px 18px;
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-primary { background: linear-gradient(135deg, #5b4bff, #8a63ff); color: #fff; box-shadow: 0 8px 18px rgba(91, 75, 255, .25); }
.btn-ghost { background: #fff; color: #4b4f63; border: 1px solid #e0e2ee; }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: .5; box-shadow: none; }
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-width: 480px; margin: 0 auto; padding: 10px 14px 14px;
  background: linear-gradient(to top, #f6f7fb 70%, rgba(246, 247, 251, 0));
}

/* ------------------------------------------------------------- 答题 */
.quiz-head { padding: 10px 14px 0; }
.quiz-line { display: flex; justify-content: space-between; font-size: 12px; color: #8a8fa3; margin-bottom: 6px; }
.progress { height: 6px; border-radius: 999px; background: #e6e8f2; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #5b4bff, #ff8ba7); transition: width .25s ease; }
.q-card { margin: 14px; background: #fff; border-radius: 18px; padding: 16px; border: 1px solid #ebedf5; }
.q-scene { background: #f4f4ff; border-left: 3px solid #5b4bff; border-radius: 8px; padding: 10px 12px; color: #4b4a7a; font-size: 13.5px; }
.q-text { font-size: 17px; font-weight: 700; margin: 12px 0 4px; }
.q-hint { font-size: 12px; color: #9298ad; margin-bottom: 8px; }
.opt {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fafbff; border: 1px solid #e6e8f2; border-radius: 14px;
  padding: 12px; margin-bottom: 10px; cursor: pointer; font-size: 14.5px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.opt .key {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: #ecebff; color: #5b4bff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.opt:active { transform: scale(.985); }
.opt.selected { border-color: #5b4bff; background: #f2f1ff; animation: pop .18s ease; }
.opt.selected .key { background: #5b4bff; color: #fff; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
.quiz-nav { display: flex; gap: 10px; align-items: center; }
.quiz-nav .btn { flex: 1; }

/* --------------------------------------------------------- 计算中 */
.calc { padding: 80px 30px; text-align: center; color: #6d728a; }
.calc-ring {
  width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%;
  border: 5px solid #e6e8f2; border-top-color: #5b4bff;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- 结果页 */
/* 双轴结果：结果码（不显示分数环） */
.axis-code {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 15px;
  letter-spacing: .5px;
}

/* 未解锁报告：1./2./3. 小标题 + 紧跟其后的马赛克正文占位（真实正文不进 DOM） */
.lock-sec { margin: 10px 0 4px; }

.lock-sec-h {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #23263c;
}

.lock-mask { display: block; }

.mask-line {
  display: block;
  height: 13px;
  margin: 5px 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #c9ccdd 0%, #e2e4ee 45%, #cdd0e0 100%);
  filter: blur(1.2px);
}

/* 结果页卡 1 · 渐变揭晓头（只作用于合并卡，不影响其它页面） */
.panel-merged .result-hero {
  position: relative;
  padding: 32px 26px 30px;
  text-align: center; color: #fff;
  background:
    radial-gradient(78% 62% at 106% -10%, rgba(255, 139, 167, .46), rgba(255, 139, 167, 0) 62%),
    radial-gradient(122% 86% at 50% -28%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 58%),
    linear-gradient(158deg, #241f5c 0%, #4b3bd8 55%, #7c5dff 100%);
}
.panel-merged .tier-label {
  position: relative; z-index: 1;
  font-size: 28px;
  /* 老 webview 不认 clamp 时保留上面的 28px；窄屏（<460px）自动收一档，
     9 字长标签（如「几个人就够的主导者」）也不会顶到卡片边缘 */
  font-size: clamp(23px, 6.1vw, 28px);
  font-weight: 800;
  line-height: 1.22; letter-spacing: 3px; text-indent: 3px;
  text-shadow: 0 2px 16px rgba(18, 12, 56, .38);
}
/* 标签与一句话之间的金色短饰线：把品牌金（价格色）复用为揭晓仪式感 */
.panel-merged .hero-orn {
  position: relative; z-index: 1;
  display: block; width: 48px; height: 3px; margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 209, 102, 0), #ffd166 50%, rgba(255, 209, 102, 0));
}
.panel-merged .tier-line {
  position: relative; z-index: 1;
  margin: 15px auto 0; max-width: 336px;
  font-size: 14.5px; line-height: 1.9; letter-spacing: .3px;
  color: rgba(255, 255, 255, .9);
}
.score-ring {
  width: 96px; height: 96px; margin: 16px auto 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: conic-gradient(#ffd166 0deg, #ffd166 var(--deg, 0deg), rgba(255, 255, 255, .22) 0deg);
  position: relative;
}
.score-ring::after {
  content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #4438a8;
}
.score-ring span { position: relative; z-index: 1; font-size: 20px; font-weight: 800; }
.score-ring small { position: relative; z-index: 1; font-size: 11px; opacity: .8; }

.panel { margin: 14px; background: #fff; border-radius: 16px; padding: 14px; border: 1px solid #ebedf5; }

/* 合并卡：揭晓头 + 巴纳姆正文同属一张卡，圆角与阴影只在这里加强度 */
.panel-merged {
  position: relative;
  padding: 0; overflow: hidden;
  margin: 16px 14px 18px;
  border: 1px solid rgba(47, 42, 107, .07);
  border-radius: 24px;
  box-shadow: 0 22px 44px -26px rgba(35, 32, 77, .5), 0 2px 8px rgba(35, 32, 77, .05);
}
.panel-merged .result-hero { border-radius: 0; }
/* 卡片顶缘一道极细的内高光，让渐变头有玻璃质感 */
.panel-merged::after {
  content: ''; position: absolute; inset: 0; border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
  pointer-events: none;
}
/* 正文层：白底 + 右上角极淡的品牌紫晕，与头部渐变呼应 */
.panel-merged .merged-sec {
  position: relative;
  padding: 26px 24px 30px;
  border-top: 0;
  background:
    radial-gradient(150px 150px at 104% -8%, rgba(138, 99, 255, .085), rgba(138, 99, 255, 0) 72%),
    #fff;
}
/* 头部与正文之间：两端渐隐的细分隔线（比 1px 实线更轻） */
.panel-merged .merged-sec::before {
  content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(91, 75, 255, 0), rgba(91, 75, 255, .22) 22%,
    rgba(91, 75, 255, .22) 78%, rgba(91, 75, 255, 0));
}
/* 小标题：短竖条 + 字距拉开的小号标签 + 收尾细线，做出层级 */
.panel-merged .merged-h {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 18px;
  font-size: 13px; font-weight: 700; letter-spacing: 2px; color: #7b809b;
}
.panel-merged .merged-h::before {
  content: ''; flex: none; width: 3px; height: 13px; border-radius: 2px;
  background: linear-gradient(180deg, #5b4bff, #8a63ff);
}
.panel-merged .merged-h::after {
  content: ''; flex: 1; height: 1px; margin-left: 2px;
  background: linear-gradient(90deg, #e9ebf6, rgba(233, 235, 246, 0));
}
/* 正文：编辑级排版——首行缩进两字、行高 1.95、两端对齐 */
.panel-merged .merged-body .report-section { margin: 0; }
.panel-merged .merged-body .report-section p {
  margin: 0;
  font-size: 15.5px; line-height: 1.95; letter-spacing: .2px;
  color: #383c55;
  text-align: justify; text-indent: 2em;
}

/* 两条轴：双极天平（把 4 个极都摊开） */
.axis-card { padding: 12px 0; border-bottom: 1px dashed #eceef6; }
.axis-card:last-child { border-bottom: 0; padding-bottom: 2px; }
.axis-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.axis-name { font-size: 14px; font-weight: 700; color: #23263c; }
.axis-badge { font-size: 12px; font-weight: 700; color: #5b4bff; background: rgba(91, 75, 255, .12); padding: 4px 10px; border-radius: 999px; }
.axis-scale { display: flex; align-items: center; gap: 8px; }
.pole { font-size: 12.5px; color: #7b809b; white-space: nowrap; }
.pole-win { color: #5b4bff; font-weight: 700; }
.pole-r { text-align: right; }
.axis-track { flex: 1; display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #eef0f7; }
.axis-seg { display: block; height: 100%; background: #e2e4ee; }
.axis-seg-l { background: #d9dbe9; }
.axis-seg.on.axis-seg-l { background: linear-gradient(90deg, #5b4bff, #7b6bff); }
.axis-seg.on.axis-seg-r { background: linear-gradient(90deg, #b25cff, #c04bff); }
.axis-nums { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: #9aa0bb; }
.pole-pct b { font-size: 14px; color: #5b5f7a; }
.pole-pct-win b { color: #5b4bff; }
.pole-pct-win { color: #5b4bff; font-weight: 700; }

/* 长按保存的分享图 */
.share-sec { text-align: center; }
.share-wrap { margin-top: 12px; }
.share-img { width: 100%; border-radius: 12px; border: 1px solid #eceef6; display: block; background: #f5f6fb; }
.share-hint { margin: 10px 0; font-size: 12.5px; line-height: 1.7; color: #7b809b; }

/* 小程序码位（卡 1 收尾） */
.qr-row { display: flex; align-items: center; gap: 14px; }
.qr-canvas { width: 96px; height: 96px; border: 1px solid #e6e8f2; border-radius: 10px; background: #fff; }
.qr-title { font-size: 15px; font-weight: 700; color: #23263c; }
.qr-sub { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: #7b809b; }
.pay-note { margin: 0 0 8px; }
.panel h3 { margin: 0 0 10px; font-size: 15px; }
.dim-row { margin-bottom: 10px; }
.dim-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.dim-level { color: #5b4bff; font-weight: 600; }
.dim-bar { height: 8px; border-radius: 999px; background: #edeef6; overflow: hidden; }
.dim-bar-fill { height: 100%; background: linear-gradient(90deg, #5b4bff, #ff8ba7); }

.paywall { margin: 14px; border-radius: 16px; padding: 16px; color: #fff;
  background: linear-gradient(135deg, #23204d, #4438a8); }
.paywall h3 { margin: 0 0 6px; font-size: 16px; }
.paywall p { margin: 0 0 12px; font-size: 13px; opacity: .9; }
.price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.price { font-size: 26px; font-weight: 800; color: #ffd166; }
.price-old { text-decoration: line-through; opacity: .6; font-size: 13px; }
.lock-card { background: #fff; border: 1px solid #ebedf5; border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.lock-title { font-weight: 700; font-size: 14.5px; }
.lock-teaser { color: #6d728a; font-size: 12.5px; margin-top: 2px; }
.lock-blur { margin-top: 8px; color: #9aa0b5; font-size: 13px; filter: blur(3.2px); user-select: none; }
.lock-flag { display: inline-block; margin-top: 8px; font-size: 11.5px; color: #e0356b; background: #ffe9ef; border-radius: 6px; padding: 1px 6px; }
.report-section { margin-bottom: 14px; }
.report-section h3 { margin: 0 0 6px; font-size: 14.5px; color: #2f2a6b; }
.report-section p { margin: 0; font-size: 14px; color: #3d4157; }

/* --------------------------------------------------------- 分享页 */
.share-box { margin: 14px; text-align: center; }
.poster-wrap { display: inline-block; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(35, 32, 77, .18); background: #fff; }
.poster-wrap canvas { display: block; width: 270px; height: 390px; }
.tpl-list { display: flex; gap: 8px; margin: 14px; }
.tpl-btn { flex: 1; background: #fff; border: 1px solid #e6e8f2; border-radius: 12px; padding: 8px 6px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.tpl-btn.active { border-color: #5b4bff; color: #5b4bff; font-weight: 600; background: #f2f1ff; }
.tpl-text { margin: 0 14px; padding: 12px; background: #fff; border-radius: 12px; font-size: 13.5px; color: #4b4f63; }

/* ------------------------------------------------------- 个人中心 */
.mine-item { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #ebedf5; border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.mine-item .mi-sub { font-size: 12px; color: #8a8fa3; }
.mine-item .mi-amount { font-weight: 700; color: #e0356b; font-size: 13px; }
.empty { text-align: center; color: #9aa0b5; font-size: 13px; padding: 30px 0; }

/* ------------------------------------------------------- 弹层/提示 */
.sheet-mask { position: fixed; inset: 0; background: rgba(20, 18, 45, .45); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 20px 20px 0 0; padding: 16px 16px 22px; animation: up .22s ease; }
@keyframes up { from { transform: translateY(30px); } to { transform: none; } }
.sheet h4 { margin: 0 0 4px; font-size: 16px; }
.sheet .sheet-sub { color: #8a8fa3; font-size: 12.5px; margin-bottom: 12px; }
.pay-method { display: flex; align-items: center; justify-content: space-between;
  border: 1px solid #e6e8f2; border-radius: 12px; padding: 12px; margin-bottom: 10px; cursor: pointer; }
.pay-method.active { border-color: #5b4bff; background: #f5f4ff; }
.pay-method .pm-name { font-weight: 600; font-size: 14px; }
.pay-method .pm-tip { font-size: 11.5px; color: #9298ad; }
.sheet-total { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 14px; font-size: 13px; color: #6d728a; }
.sheet-total b { font-size: 22px; color: #e0356b; }
.toast { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: rgba(20, 18, 45, .88); color: #fff; padding: 10px 16px; border-radius: 12px;
  font-size: 13px; z-index: 60; }

/* ------------------------------------------------------------- 页脚 */
.disclaimer { padding: 12px 16px 18px; font-size: 11.5px; color: #9aa0b5; text-align: center; }
/* ================================================= 达人中心 / 管理后台 */
.page { padding: 0 0 90px; }
.creator-head {
  margin: 14px; padding: 16px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #2f2a6b, #5b4bff 65%, #8a63ff);
}
.creator-head .ch-row { display: flex; align-items: center; gap: 10px; }
.creator-head .avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.creator-head .ch-name { font-size: 17px; font-weight: 700; }
.creator-head .ch-sub { font-size: 12px; opacity: .88; }
.level-chip { display: inline-block; margin-top: 10px; background: #ffd166; color: #4b3a00; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 14px; }
.stat-card { background: #fff; border: 1px solid #ebedf5; border-radius: 14px; padding: 12px; }
.stat-card .sc-label { font-size: 12px; color: #8a8fa3; }
.stat-card .sc-value { font-size: 19px; font-weight: 800; margin-top: 2px; }
.stat-card .sc-value small { font-size: 12px; font-weight: 500; color: #8a8fa3; }
.stat-card.warn .sc-value { color: #e0356b; }
.stat-card.ok .sc-value { color: #1f9254; }

.tabs { display: flex; gap: 8px; padding: 0 14px; margin: 4px 0 10px; }
.tab { flex: 1; text-align: center; padding: 8px 0; border-radius: 999px; background: #fff; border: 1px solid #e6e8f2; font-size: 13px; cursor: pointer; }
.tab.active { background: #5b4bff; border-color: #5b4bff; color: #fff; font-weight: 600; }

.kv-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed #eceef6; }
.kv-row:last-child { border-bottom: 0; }
.kv-row b { font-weight: 700; }
.link-box { margin: 12px 14px; padding: 12px; border-radius: 14px; background: #f4f4ff; border: 1px dashed #bfbcff; font-size: 12.5px; word-break: break-all; }
.link-box .lb-title { font-weight: 700; margin-bottom: 6px; color: #4438a8; }
.qr-holder { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.qr-holder canvas { width: 96px; height: 96px; background: #fff; border: 1px solid #e6e8f2; border-radius: 10px; }
.rule-item { background: #fff; border: 1px solid #ebedf5; border-radius: 14px; padding: 12px; margin: 0 14px 10px; }
.rule-item h4 { margin: 0 0 4px; font-size: 14px; }
.rule-item p { margin: 0; font-size: 12.5px; color: #6d728a; }
.rank-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #ebedf5; border-radius: 14px; padding: 10px 12px; margin: 0 14px 8px; font-size: 13px; }
.rank-row .rk-no { width: 22px; height: 22px; border-radius: 50%; background: #ecebff; color: #5b4bff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rank-row.me { border-color: #5b4bff; background: #f7f6ff; }
.rank-row .rk-main { flex: 1; }
.rank-row .rk-sub { font-size: 11.5px; color: #8a8fa3; }
.rank-row .rk-amount { font-weight: 700; color: #e0356b; }
.withdraw-form { margin: 0 14px 12px; background: #fff; border: 1px solid #ebedf5; border-radius: 14px; padding: 12px; }
.withdraw-form input { width: 100%; padding: 11px 12px; border: 1px solid #e6e8f2; border-radius: 12px; font-size: 15px; font-family: inherit; }
.quick-amounts { display: flex; gap: 8px; margin: 10px 0; }
.quick-amounts button { flex: 1; padding: 7px 0; border-radius: 10px; border: 1px solid #e6e8f2; background: #fafbff; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.wd-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 7px 0; border-bottom: 1px dashed #eceef6; }
.badge { display: inline-block; border-radius: 6px; padding: 1px 6px; font-size: 11.5px; }
.badge.ok { background: #e8f6ee; color: #1f9254; }
.badge.warn { background: #fff4e0; color: #b8791a; }
.badge.bad { background: #ffe9ef; color: #e0356b; }
.badge.off { background: #eef0f6; color: #6d728a; }

/* ---------------------------------------------------------- 管理后台 */
.admin { max-width: 1180px; margin: 0 auto; min-height: 100vh; background: #f2f3f8; display: grid; grid-template-columns: 210px 1fr; }
.admin-nav { background: #23204d; color: #cfd0e8; padding: 16px 12px; }
.admin-nav h1 { font-size: 15px; color: #fff; margin: 0 0 4px; }
.admin-nav .an-sub { font-size: 11.5px; opacity: .7; margin-bottom: 14px; }
.admin-nav .an-item { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; cursor: pointer; margin-bottom: 4px; }
.admin-nav .an-item.active { background: #5b4bff; color: #fff; font-weight: 600; }
.admin-main { padding: 18px 22px 60px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.admin-head h2 { margin: 0; font-size: 19px; }
.admin-head .ah-sub { font-size: 12.5px; color: #6d728a; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { background: #fff; border: 1px solid #e7e9f2; border-radius: 14px; padding: 14px; }
.kpi .k-label { font-size: 12.5px; color: #8a8fa3; }
.kpi .k-value { font-size: 24px; font-weight: 800; margin-top: 4px; }
.kpi .k-sub { font-size: 11.5px; color: #8a8fa3; margin-top: 2px; }
.card { background: #fff; border: 1px solid #e7e9f2; border-radius: 14px; padding: 14px; margin-top: 14px; }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th, .data-table td { text-align: left; padding: 8px 8px; border-bottom: 1px solid #eef0f6; }
.data-table th { color: #6d728a; font-weight: 600; background: #fafbff; }
.data-table tr.me td { background: #f7f6ff; }
.funnel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; }
.funnel-row .fn-name { width: 76px; color: #4b4f63; }
.funnel-row .fn-bar { flex: 1; height: 16px; background: #f0f1f7; border-radius: 8px; overflow: hidden; }
.funnel-row .fn-fill { height: 100%; background: linear-gradient(90deg, #5b4bff, #8a63ff); }
.funnel-row .fn-val { width: 96px; text-align: right; color: #6d728a; }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar select, .toolbar input { padding: 7px 10px; border: 1px solid #e0e2ee; border-radius: 10px; font-size: 12.5px; font-family: inherit; }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn-sm.primary { background: #5b4bff; color: #fff; }
.btn-sm.ghost { background: #fff; color: #4b4f63; border: 1px solid #e0e2ee; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { display: none; }
.switch .slider { position: absolute; inset: 0; background: #cfd0e8; border-radius: 999px; transition: .2s; }
.switch .slider::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: #5b4bff; }
.switch input:checked + .slider::after { transform: translateX(20px); }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #eceef6; font-size: 13px; }
.setting-row:last-child { border-bottom: 0; }
.trend-chart { width: 100%; height: 190px; display: block; }
.mono { font-family: Consolas, Monaco, monospace; }