/* ============================================================
   app.css — 应用骨架（导航/Tab/页面过渡）+ 各页面样式
   ============================================================ */

/* ---------- 应用骨架 ---------- */
.app-body { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }

.navbar {
  height: calc(var(--nav-h) + var(--safe-t)); padding-top: var(--safe-t);
  display: flex; align-items: center; gap: 8px; padding-left: 10px; padding-right: 14px;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft); position: relative; z-index: 30; flex: none;
}
.navbar .nav-back { width: 34px; height: 34px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 20px; color: var(--text-1); transition: background var(--t-fast); }
.navbar .nav-back:active { background: var(--bg-mute); }
.navbar .nav-title { font-size: 17px; font-weight: 700; flex: 1; text-align: center; padding-right: 34px; }
.navbar .nav-title.no-back { padding-right: 0; }
.navbar .nav-actions { position:absolute; right: 12px; display:flex; gap: 6px; }

.page-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative;
  scrollbar-width: none; padding-bottom: calc(16px + var(--safe-b));
}
.page-scroll::-webkit-scrollbar { width: 0; }
.page-scroll.with-tab { padding-bottom: 10px; }
.page { animation: pageIn .34s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px) scale(.995);} to { opacity: 1; transform: none;} }
.pad { padding: 16px; }

/* ---------- 底部 Tab ---------- */
.tabbar {
  flex: none; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: flex; background: rgba(255,255,255,.94); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-soft); z-index: 40;
}
.tabbar .tab { flex: 1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 3px; color: #9aa0ad; transition: color var(--t-fast); position: relative; }
.tabbar .tab svg { width: 23px; height: 23px; transition: transform var(--t-base) var(--ease-pop); }
.tabbar .tab .tab-label { font-size: 10.5px; font-weight: 600; }
.tabbar .tab.active { color: var(--brand-700); }
.tabbar .tab.active svg { transform: translateY(-2px) scale(1.1); }
.tabbar .tab.active::before { content:''; position:absolute; top:0; width:22px; height:3px; border-radius:0 0 4px 4px; background: var(--g-indigo); }

/* ============================================================
   首页
   ============================================================ */
.home-hero { position: relative; background: var(--g-hero); padding: calc(var(--safe-t) + 20px) 20px 62px; overflow: hidden; }
.home-hero::before { content:''; position:absolute; width:220px; height:220px; border-radius:50%; background: rgba(255,255,255,.09); filter: blur(50px); top:-40px; right:-30px; }
.home-hero::after { content:''; position:absolute; width:260px; height:260px; border-radius:50%; background: radial-gradient(circle, rgba(59,130,246,.22), rgba(124,58,237,.12) 45%, transparent 70%); bottom:-90px; left:-60px; }
.home-hero > * { position: relative; z-index: 2; }
.hh-top { display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }
.hh-greet { font-size: 21px; font-weight: 800; color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,.15); letter-spacing:-.2px; }
.hh-sub { font-size: 12.5px; color: rgba(255,255,255,.8); margin-top: 3px; }
.hh-avatar { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.18); backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:19px; box-shadow: 0 6px 18px rgba(46,16,101,.4); overflow:hidden; }

.stat-glass {
  border-radius: 22px; padding: 18px 20px; backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.06)), linear-gradient(180deg, rgba(124,58,237,.18), rgba(59,130,246,.1));
  box-shadow: 0 18px 40px -14px rgba(20,10,50,.6), inset 0 0 0 1px rgba(255,255,255,.22);
}
.sg-row1 { display:flex; align-items:center; gap:8px; margin-bottom: 16px; flex-wrap: wrap; }
.sg-member { font-size: 15px; font-weight: 700; color:#fff; flex:none; }
.sg-row1 .badge-gold { flex:none; }
.sg-invite { margin-left:auto; display:flex; align-items:center; gap:5px; padding: 5px 11px; border-radius: var(--r-full); background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color:#fff; font-size:11.5px; font-weight:600; max-width: 56%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sg-stats { display:flex; align-items:center; }
.sg-stat { flex:1; }
.sg-stat .n { font-size: 30px; font-weight: 800; color:#fff; line-height:1; letter-spacing:-1px; }
.sg-stat .l { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 5px; }
.sg-divider { width:1px; height:38px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.35), transparent); }

.hero-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-card { border-radius: var(--r-lg); padding: 15px; border: 1px solid; min-height: 96px; display:flex; flex-direction:column; justify-content:space-between; text-align: left; }
.hero-card .hc-ico { width: 42px; height: 42px; border-radius: 13px; display:flex; align-items:center; justify-content:center; font-size: 21px; color:#fff; box-shadow: 0 6px 14px -4px rgba(0,0,0,.25); }
.hero-card .hc-title { font-size: 15px; font-weight: 800; }
.hero-card .hc-sub { font-size: 11.5px; opacity:.7; margin-top: 2px; }

.tool-scroll { display:flex; gap:11px; overflow-x:auto; padding: 4px 2px 8px; scrollbar-width:none; }
.tool-scroll::-webkit-scrollbar { display:none; }
.tool-item { width: 72px; flex:none; text-align:center; }
.tool-item .ti-box { width:64px; height:64px; margin:0 auto; border-radius: 20px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:27px; box-shadow: var(--sh-sm); border:1px solid var(--border-soft); transition: transform var(--t-fast) var(--ease); }
.tool-item:active .ti-box { transform: scale(.93); }
.tool-item .ti-label { font-size: 11.5px; color: var(--text-2); margin-top: 6px; font-weight:500; }

.insight-card { position:relative; background:#fff; border-radius: var(--r-xl); padding: 18px 20px; box-shadow: var(--sh-sm); overflow:hidden; border:1px solid var(--border-soft); }
.insight-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--g-indigo); }
.insight-card .quote-mark { position:absolute; right:14px; top:2px; font-size:56px; color: rgba(99,102,241,.1); font-family: Georgia, serif; line-height:1; }
.insight-tag { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.5px; color: var(--indigo-d); background:#e0e7ff; padding:3px 9px; border-radius:var(--r-xs); margin-bottom:9px; }
.insight-text { font-size: 15px; color: var(--text-1); line-height: 1.75; font-family: Georgia, "Songti SC", serif; }
.insight-from { text-align:right; font-size:12px; color: var(--text-4); margin-top:10px; }

.rec-item { display:flex; align-items:center; gap:13px; padding: 13px 15px; background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-xs); border:1px solid var(--border-soft); margin-bottom: 10px; }
.rec-ico { width: 46px; height:46px; border-radius: 14px; background: var(--bg-subtle); display:flex; align-items:center; justify-content:center; font-size:23px; flex:none; }

/* ============================================================
   场景库
   ============================================================ */
.sc-banner { position:relative; background: linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%); padding: calc(var(--safe-t) + 22px) 20px 26px; overflow:hidden; }
.sc-banner::after { content:'🎭'; position:absolute; right: 14px; bottom: -12px; font-size: 96px; opacity:.14; }
.sc-banner h2 { color:#fff; font-size: 22px; font-weight:800; }
.sc-banner p { color: rgba(255,255,255,.85); font-size: 13px; margin-top: 5px; }
.search-bar { display:flex; align-items:center; gap:8px; background:#fff; border-radius: var(--r-full); padding: 10px 16px; box-shadow: var(--sh-sm); margin-top: 16px; }
.search-bar input { border:none; outline:none; flex:1; font-size:14px; background:transparent; }
.search-bar .s-ico { color: var(--text-4); font-size:15px; }

.scenario-card { display:flex; gap:13px; padding: 15px; background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-sm); border:1px solid var(--border-soft); margin-bottom: 10px; transition: box-shadow var(--t-fast), transform var(--t-fast); }
.scenario-card:active { transform: scale(.985); box-shadow: var(--sh-md); }
.sc-ico { width: 50px; height:50px; border-radius: 15px; display:flex; align-items:center; justify-content:center; font-size:25px; flex:none; }
.sc-body { flex:1; min-width:0; }
.sc-title { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.sc-desc { font-size: 12.5px; color: var(--text-3); line-height:1.5; margin-bottom: 8px; }
.sc-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }

/* ============================================================
   对话陪练
   ============================================================ */
.dlg-wrap { display:flex; flex-direction:column; height:100%; background: linear-gradient(180deg,#f7f6fc, #f2f4f8); }
.dlg-scene { flex:none; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom:1px solid var(--border-soft); padding: calc(var(--safe-t) + 10px) 14px 10px; display:flex; align-items:center; gap:11px; }
.dlg-scene .ds-avatar { width:40px; height:40px; border-radius:50%; background: var(--g-brand); display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; flex:none; box-shadow: var(--sh-brand); }
.dlg-body { flex:1; overflow-y:auto; padding: 16px 14px; scrollbar-width:none; }
.dlg-body::-webkit-scrollbar { width:0; }

.opening-card { background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(168,85,247,.08)); border:1px solid rgba(124,58,237,.16); border-radius: var(--r-lg); padding: 13px 15px; margin-bottom: 16px; }
.opening-card .oc-label { font-size:11px; font-weight:800; color: var(--indigo-d); letter-spacing:.5px; margin-bottom:5px; }
.opening-card .oc-text { font-size:13.5px; color: var(--text-2); line-height:1.6; }

.msg-row { display:flex; gap:9px; margin-bottom: 16px; max-width: 88%; animation: msgIn .34s var(--ease) both; }
@keyframes msgIn { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform:none;} }
.msg-row.user { margin-left:auto; flex-direction: row-reverse; }
.msg-avatar { width: 36px; height:36px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow: var(--sh-xs); flex:none; border:1px solid var(--border-soft); }
.msg-col { display:flex; flex-direction:column; gap:6px; min-width:0; }
.msg-row.user .msg-col { align-items:flex-end; }
.bubble { position:relative; padding: 12px 15px; font-size: 14.5px; line-height: 1.7; word-break: break-word; }
.bubble.ai { background:#fff; color: var(--text-1); border-radius: 4px 16px 16px 16px; box-shadow: 0 2px 10px rgba(16,24,40,.07); border:1px solid rgba(16,24,40,.04); }
.bubble.ai::before { content:''; position:absolute; left:-6px; top:9px; width:0;height:0; border-style:solid; border-width:0 7px 7px 0; border-color:transparent #fff transparent transparent; }
.bubble.user { background: var(--g-brand); color:#fff; border-radius: 16px 4px 16px 16px; box-shadow: 0 6px 16px rgba(74,60,138,.28); }
.bubble.user::after { content:''; position:absolute; right:-6px; top:9px; width:0;height:0; border-style:solid; border-width:7px 0 0 7px; border-color:transparent transparent transparent #6b5bb3; }

.emotion-chip { display:flex; align-items:center; gap:8px; background: rgba(255,255,255,.7); border-radius: 10px; padding: 7px 10px; margin-top: 2px; max-width: 240px; }
.emotion-chip .em-label { font-size: 11.5px; color: var(--text-3); flex:none; }
.emotion-chip .em-bar { flex:1; height:5px; border-radius:var(--r-full); background: var(--bg-mute); overflow:hidden; min-width:44px; }
.emotion-chip .em-bar > i { display:block; height:100%; border-radius:var(--r-full); transition: width .4s var(--ease); }
.emotion-chip .em-n { font-size:11px; color: var(--text-4); flex:none; }
.intent-line { font-size: 11.5px; color: var(--text-4); }
.msg-actions { display:flex; gap:7px; }
.msg-act-btn { font-size: 11.5px; color: var(--indigo-d); background: rgba(99,102,241,.1); padding: 4px 10px; border-radius: var(--r-full); font-weight:600; }

.typing { display:flex; gap:4px; align-items:center; padding: 14px 16px; }
.typing i { width:7px; height:7px; border-radius:50%; background:#b3a9d6; animation: bounceDot 1.3s infinite ease-in-out; }
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}

.dlg-input { flex:none; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top:1px solid var(--border-soft); padding: 9px 12px calc(9px + var(--safe-b)); }
.dlg-toolbar { display:flex; gap:7px; margin-bottom:8px; }
.tool-btn { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--text-2); background: var(--bg-mute); padding: 6px 12px; border-radius: var(--r-full); transition: all var(--t-fast); }
.tool-btn.active { background: var(--g-brand); color:#fff; }
.dlg-input-row { display:flex; align-items:flex-end; gap:9px; }
.dlg-input-row .textarea { min-height: 42px; max-height: 110px; height:42px; border-radius: 18px; padding: 11px 15px; background: var(--bg-mute); border-color: transparent; }
.dlg-input-row .textarea:focus { background:#fff; border-color: var(--brand-500); }
.send-btn { width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background: var(--bg-mute); color: var(--text-4); transition: all var(--t-fast) var(--ease); }
.send-btn.ready { background: var(--g-brand); color:#fff; box-shadow: var(--sh-brand); }

/* 洞察弹窗 */
.insight-sec { border-radius: var(--r-md); padding: 14px; margin-bottom: 12px; background: var(--bg-subtle); border-left: 4px solid; }
.insight-sec h4 { font-size: 14px; margin-bottom: 8px; display:flex; align-items:center; gap:6px; }
.insight-sec .i-row { font-size: 13px; color: var(--text-2); line-height: 1.65; margin-bottom: 5px; }
.insight-sec .i-row b { color: var(--text-1); }
.strategy-box { background:#fff; border-radius: var(--r-sm); padding: 11px 13px; margin-top:8px; border:1px solid var(--border-soft); }
.strategy-box .st-type { font-size:12px; font-weight:800; color: var(--brand-700); margin-bottom:4px; }
.strategy-box .st-eg { font-size:13px; color: var(--text-1); line-height:1.6; background: rgba(99,102,241,.06); padding:8px 10px; border-radius:8px; margin:5px 0; }
.strategy-box .st-pri { font-size:12px; color: var(--text-3); }
.score-mini { display:flex; gap:8px; }
.score-mini .sm { flex:1; text-align:center; background:#fff; border-radius:10px; padding:9px 4px; border:1px solid var(--border-soft); }
.score-mini .sm .v { font-size:19px; font-weight:800; color: var(--brand-700); }
.score-mini .sm .k { font-size:11px; color:var(--text-4); margin-top:2px; }

/* 建议卡 */
.sug-card { background:#fff; border:1px solid var(--border-soft); border-radius: var(--r-lg); padding: 14px; margin-bottom: 11px; box-shadow: var(--sh-xs); }
.sug-head { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.sug-no { width:22px; height:22px; border-radius:50%; background: rgba(74,60,138,.1); color: var(--brand-800); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.sug-reply { font-size:14px; color: var(--text-1); line-height:1.65; background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(168,85,247,.05)); padding: 11px 13px; border-radius: 10px; margin-bottom: 10px; }
.sug-pc { display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.sug-pc .pc { font-size:12.5px; line-height:1.5; display:flex; gap:6px; }
.sug-pc .pc.pro { color: #16a34a; } .sug-pc .pc.con { color: #dc2626; }
.sug-pri { font-size:12px; color: var(--text-3); background: var(--bg-subtle); padding:8px 10px; border-radius:8px; line-height:1.55; }
.sug-pri b { color: var(--brand-700); }
.sug-use { margin-top:10px; }

/* ============================================================
   训练
   ============================================================ */
.mode-card { display:flex; gap:14px; padding: 16px; background:#fff; border-radius: var(--r-xl); box-shadow: var(--sh-sm); border:1px solid var(--border-soft); margin-bottom: 12px; align-items:center; }
.mode-ico { width: 54px; height:54px; border-radius: 17px; display:flex; align-items:center; justify-content:center; font-size:27px; color:#fff; flex:none; box-shadow: 0 8px 18px -6px rgba(0,0,0,.28); }
.q-card { background:#fff; border-radius: var(--r-xl); padding: 18px; box-shadow: var(--sh-md); border:1px solid var(--border-soft); }
.q-history { background: var(--bg-subtle); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px; }
.q-history .qh-row { font-size:13px; line-height:1.6; margin-bottom:6px; display:flex; gap:7px; }
.q-history .qh-row .who { flex:none; font-weight:700; }
.q-history .qh-row.me .who { color: var(--indigo-d); }
.q-history .qh-row.ta .who { color: var(--text-3); }
.opt-item { display:flex; gap:11px; padding: 13px 14px; border:1.5px solid var(--border); border-radius: var(--r-md); margin-bottom:10px; transition: all var(--t-fast) var(--ease); align-items:flex-start; }
.opt-item .opt-k { width:24px; height:24px; border-radius:50%; background: var(--bg-mute); color: var(--text-2); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.opt-item.active { border-color: var(--brand-500); background: rgba(99,102,241,.06); }
.opt-item.active .opt-k { background: var(--g-brand); color:#fff; }
.opt-item.correct { border-color: var(--success); background: rgba(16,185,129,.08); }
.opt-item.wrong { border-color: var(--danger); background: rgba(239,68,68,.07); }
.result-hero { text-align:center; padding: 10px 0 4px; }
.result-score { font-size: 62px; font-weight: 900; line-height:1; letter-spacing:-2px; }

/* ============================================================
   知识库
   ============================================================ */
.kn-hero { background: var(--g-hero); padding: calc(var(--safe-t) + 24px) 20px 30px; position:relative; overflow:hidden; }
.kn-hero::after { content:'📚'; position:absolute; right:12px; bottom:-16px; font-size:100px; opacity:.13; }
.kn-hero .kh-eyebrow { font-size:11px; letter-spacing:2px; color: rgba(255,255,255,.7); font-weight:700; }
.kn-hero h2 { color:#fff; font-size:24px; font-weight:800; margin: 4px 0 6px; }
.kn-hero p { color: rgba(255,255,255,.85); font-size:13px; font-style:italic; }
.kn-card { display:flex; align-items:center; gap:15px; padding: 17px 18px; background:#fff; border-radius: var(--r-xl); box-shadow: var(--sh-sm); border:1px solid var(--border-soft); margin-bottom: 12px; }
.kn-ico { width: 52px; height:52px; border-radius: 16px; display:flex; align-items:center; justify-content:center; font-size:25px; flex:none; }
.kn-arrow { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color: #c3cad6; flex:none; }

/* 详情通用 */
.detail-hero { padding: calc(var(--safe-t) + 52px) 18px 22px; border-radius: 0 0 var(--r-2xl) var(--r-2xl); color:#fff; position:relative; overflow:hidden; }
.detail-hero .dh-icon { font-size: 40px; margin-bottom: 10px; }
.detail-hero h2 { color:#fff; font-size: 21px; }
.detail-hero .dh-en { font-size: 12px; opacity:.8; margin-top: 3px; letter-spacing:.5px; }
.detail-hero .dh-sum { font-size: 13.5px; line-height:1.65; margin-top: 12px; opacity:.95; }
.info-block { background:#fff; border-radius: var(--r-xl); padding: 17px 18px; box-shadow: var(--sh-sm); border:1px solid var(--border-soft); margin-bottom: 13px; }
.info-block h4 { font-size: 15px; font-weight:800; margin-bottom: 11px; display:flex; align-items:center; gap:7px; }
.kp-item { padding: 12px 0; border-bottom: 1px dashed var(--border-soft); }
.kp-item:last-child { border-bottom:none; }
.kp-item .kp-t { font-size:14px; font-weight:700; color: var(--brand-800); display:flex; align-items:center; gap:7px; }
.kp-item .kp-d { font-size:13px; color: var(--text-2); margin-top:3px; line-height:1.6; }
.kp-item .kp-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.plain-box { background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(168,85,247,.05)); border-radius: var(--r-md); padding: 14px 15px; font-size:14px; line-height:1.75; color: var(--text-1); }
.eg-box { border-left: 3px solid var(--brand-400); background: var(--bg-subtle); border-radius: 0 10px 10px 0; padding: 12px 14px; margin-bottom: 10px; }
.eg-box .eg-scene { font-size:11px; font-weight:800; color: var(--brand-700); }
.eg-box .eg-title { font-size:13.5px; font-weight:700; margin:3px 0 5px; }
.eg-box .eg-text { font-size:13px; color: var(--text-2); line-height:1.65; }

/* 沉浸式头图上的悬浮返回键（保证任何页都有出口） */
.float-back {
  position: absolute; left: 10px; top: calc(var(--safe-t) + 10px); z-index: 6;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.22); backdrop-filter: blur(8px); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}
.float-back:active { transform: scale(.9); background: rgba(255,255,255,.34); }
.float-back.dark { background: rgba(30,27,50,.55); backdrop-filter: blur(8px); }
.float-back.dark:active { background: rgba(30,27,50,.7); }
.sc-banner.has-fback, .kn-hero.has-fback { padding-top: calc(var(--safe-t) + 52px); }

/* 公式 */
.formula-card { background:#fff; border-radius: var(--r-xl); padding: 16px 18px; box-shadow: var(--sh-sm); border:1px solid var(--border-soft); margin-bottom:12px; position:relative; overflow:hidden; }
.formula-struct { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13.5px; font-weight:700; color: var(--brand-800); background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(168,85,247,.06)); padding: 10px 13px; border-radius: 10px; margin: 10px 0; }
.ba-row { display:flex; gap:10px; margin-bottom:10px; }
.ba-col { flex:1; border-radius: 10px; padding: 11px 12px; font-size:12.5px; line-height:1.55; }
.ba-col.bad { background: rgba(239,68,68,.07); color:#991b1b; }
.ba-col.good { background: rgba(16,185,129,.08); color:#065f46; }
.ba-col .ba-h { font-size:11px; font-weight:800; margin-bottom:4px; display:flex; align-items:center; gap:4px; }

/* 案例 */
.case-card { background:#fff; border-radius: var(--r-xl); padding: 16px; box-shadow: var(--sh-sm); border:1px solid var(--border-soft); margin-bottom:12px; }
.case-scene { font-size:14.5px; font-weight:700; margin-bottom:8px; display:flex; gap:7px; }
.case-trigger { font-size:12.5px; color: var(--text-3); background: var(--bg-subtle); padding:7px 11px; border-radius:8px; margin-bottom:11px; }

/* 九型 */
.enne-card { display:flex; gap:13px; padding:15px; background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-xs); border:1px solid var(--border-soft); margin-bottom:10px; align-items:center; }
.enne-num { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; color:#fff; flex:none; }

/* ============================================================
   我的 / 会员 / 进度
   ============================================================ */
.prof-header { background: var(--g-brand); padding: calc(var(--safe-t) + 22px) 20px 46px; position:relative; overflow:hidden; }
.prof-header::after { content:''; position:absolute; width:200px; height:200px; border-radius:50%; background: rgba(255,255,255,.08); filter: blur(40px); top:-60px; right:-40px; }
.prof-user { display:flex; align-items:center; gap:14px; position:relative; z-index:2; }
.prof-avatar { width:64px; height:64px; border-radius:50%; background: rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; font-weight:800; overflow:hidden; flex:none; }
.prof-name { color:#fff; font-size:20px; font-weight:700; }
.prof-uname { color: rgba(255,255,255,.8); font-size:13px; margin-top:2px; }
.prof-pull { margin: -30px 16px 0; position:relative; z-index:5; }

.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.metric-card { border-radius: var(--r-lg); padding: 16px; border:1px solid; }
.metric-card .mc-ico { font-size:20px; }
.metric-card .mc-n { font-size:32px; font-weight:900; letter-spacing:-1px; margin:4px 0; }
.metric-card .mc-l { font-size:12px; color: var(--text-2); font-weight:600; }

.plan-card { background:#fff; border-radius: var(--r-xl); padding: 18px; box-shadow: var(--sh-sm); border:2px solid var(--border-soft); margin-bottom:13px; position:relative; transition: all var(--t-fast) var(--ease); }
.plan-card.active { border-color: var(--brand-500); box-shadow: 0 12px 28px -10px rgba(74,60,138,.3); }
.plan-rec { position:absolute; top:-1px; right:16px; background: var(--g-gold); color:#78350f; font-size:11px; font-weight:800; padding:3px 11px; border-radius: 0 0 8px 8px; }
.plan-price { display:flex; align-items:baseline; gap:6px; }
.plan-price .cur { font-size:16px; font-weight:700; color: var(--brand-800); }
.plan-price .num { font-size:34px; font-weight:900; color: var(--brand-800); letter-spacing:-1px; }
.plan-price .orig { font-size:13px; color: var(--text-4); text-decoration: line-through; }
.plan-benefits { margin-top: 12px; display:flex; flex-direction:column; gap:7px; }
.plan-benefits li { font-size:13px; color: var(--text-2); display:flex; gap:8px; align-items:flex-start; }
.plan-benefits li::before { content:'✓'; color: var(--success); font-weight:800; flex:none; }

.dim-row { margin-bottom: 15px; }
.dim-row .dr-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.dim-row .dr-name { font-size:13.5px; color: var(--text-2); font-weight:600; }
.dim-row .dr-score { font-size:14px; font-weight:800; color: var(--brand-800); }
.dim-row .dr-meta { font-size:11px; color: var(--text-4); margin-top:4px; }

.stat-quad { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat-box { background:#fff; border-radius: var(--r-lg); padding:15px; text-align:center; box-shadow: var(--sh-xs); border:1px solid var(--border-soft); }
.stat-box .sb-ico { font-size:20px; }
.stat-box .sb-n { font-size:24px; font-weight:800; color: var(--brand-800); margin:3px 0; }
.stat-box .sb-l { font-size:12px; color: var(--text-3); }

.trend-chart { height: 160px; position:relative; padding-top: 8px; }
.trend-chart svg { width:100%; height:100%; overflow:visible; }

.act-item { display:flex; align-items:center; gap:12px; padding: 12px 0; border-bottom:1px solid var(--border-soft); }
.act-item:last-child { border-bottom:none; }
.act-ico { width:36px; height:36px; border-radius:11px; background: var(--bg-subtle); display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }

/* ============================================================
   登录 / 注册
   ============================================================ */
.auth-wrap { min-height:100%; display:flex; flex-direction:column; background: linear-gradient(160deg,#f8f9fc 0%,#eef0f8 55%,#f6eefb 100%); padding: calc(var(--safe-t) + 40px) 24px 32px; }
.auth-brand { text-align:center; margin-bottom: 26px; }
.auth-logo { font-size: 56px; animation: floaty 3.4s ease-in-out infinite; display:inline-block; }
.auth-name { font-size: 30px; font-weight: 900; letter-spacing:-.5px; }
.auth-sub { font-size: 14px; color: var(--text-3); margin-top: 2px; font-weight:600; }
.auth-tag { display:inline-block; margin-top: 10px; font-size:12px; color: var(--brand-700); background: rgba(124,58,237,.1); padding: 5px 14px; border-radius: var(--r-full); font-weight:600; }
.auth-card { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-radius: var(--r-2xl); padding: 22px; box-shadow: var(--sh-lg); border:1px solid rgba(255,255,255,.7); animation: fadeInUp .55s var(--ease) both; }
.hl-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top: 20px; }
.hl-card { text-align:center; background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(168,85,247,.1)); border-radius: var(--r-md); padding: 13px 6px; }
.hl-card .hl-n { font-size:19px; font-weight:900; background: linear-gradient(135deg,#6366f1,#a855f7); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hl-card .hl-l { font-size:11px; color: var(--text-3); margin-top:2px; }

.steps { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom: 22px; }
.step-node { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; background:#fff; color: var(--text-4); border:2px solid var(--border); transition: all var(--t-base) var(--ease); flex:none; }
.step-node.active { background: var(--g-brand); color:#fff; border-color:transparent; transform: scale(1.1); box-shadow: var(--sh-brand); }
.step-node.done { background: var(--success); color:#fff; border-color:transparent; }
.step-line { width:44px; height:2px; background: var(--border); }
.step-line.done { background: var(--success); }
.gender-pick { display:flex; gap:12px; }
.gender-pick .gp { flex:1; text-align:center; padding:16px; border-radius: var(--r-md); border:1.5px solid var(--border); transition: all var(--t-fast) var(--ease); background:#fff; }
.gender-pick .gp .g-ico { font-size:28px; }
.gender-pick .gp.active { border-color: var(--brand-500); background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(168,85,247,.08)); }

/* 通用页脚 */
.page-foot { text-align:center; padding: 18px 20px 4px; }
.page-foot .pf-logo { font-size:16px; font-weight:800; }
.page-foot .pf-slogan { font-size:11.5px; color: var(--text-4); margin-top:4px; line-height:1.5; }