/* ============================================================
   心启能·心力动态测评系统 - 前端样式（H5）
   ============================================================ */

:root {
    --purple-1: var(--indigo-400);
    --purple-2: var(--v-600);
    --purple-3: var(--brand-3);
    --purple-4: var(--brand-4);
    --purple-5: var(--v-300);
    --ink: var(--n-800);
    --gray-1: var(--n-600);
    --gray-2: var(--n-500);
    --gray-3: var(--n-400);
    --line: var(--n-200);
    --bg: #f0f4f8;
    --yellow: var(--s-amber-500);
    --blue: var(--s-blue-600);
    --red: var(--s-red-600);
    --green: var(--s-green-600);
    --card-h: 44px;
    --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--ink);
}

.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; }

/* ============================ 登录/注册 ============================ */

.auth-screen {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.auth-bg {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, var(--indigo-400) 0%, var(--v-600) 45%, var(--brand-3) 100%);
}
.auth-bg::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.25), transparent 40%),
                radial-gradient(circle at 10% 90%, rgba(255,255,255,.15), transparent 40%);
}
.auth-card {
    position: relative; width: 100%; max-width: 400px;
    background: var(--c-surface); border-radius: 24px; padding: 32px 26px 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    animation: rise .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.auth-logo {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 28px; font-weight: 800; text-align: center; letter-spacing: 2px;
    background: linear-gradient(135deg, var(--indigo-400), var(--v-600), var(--brand-3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-logo img {
    width: 40px; height: 40px; object-fit: contain; border-radius: 11px;
    box-shadow: 0 4px 12px rgba(102,126,234,.28);
}
.auth-slogan { text-align: center; color: var(--gray-2); font-size: 13px; margin: 8px 0 22px; }
.auth-tabs { display: flex; background: var(--n-100); border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.auth-tab { flex: 1; padding: 10px; border-radius: 9px; color: var(--gray-2); font-weight: 600; font-size: 15px; transition: .2s; }
.auth-tab.active { background: var(--c-surface); color: var(--purple-2); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.field { margin-bottom: 14px; }
.field input {
    width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px;
    font-size: 15px; outline: none; transition: .2s; background: var(--n-50);
}
.field input:focus { border-color: var(--purple-2); background: var(--c-surface); }
.btn-primary {
    width: 100%; padding: 14px; border-radius: 12px; font-size: 16px; font-weight: 700; color: var(--c-surface);
    background: linear-gradient(135deg, var(--indigo-400), var(--v-600), var(--brand-3));
    box-shadow: 0 8px 20px rgba(16,185,129,.35); letter-spacing: 1px; transition: .2s;
}
.btn-primary:active { transform: scale(.98); }
.auth-tip { text-align: center; color: var(--gray-3); font-size: 12px; margin-top: 16px; }
.demo-tip { margin-top: 10px; line-height: 1.8; }
.demo-link { color: var(--purple); cursor: pointer; font-weight: 600; text-decoration: none; }

/* ============================ 主布局 ============================ */

.app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }

.topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
    background: linear-gradient(135deg, var(--indigo-400), var(--v-600), var(--brand-3));
    box-shadow: 0 2px 12px rgba(102,126,234,.3);
}
.topbar-left { display: flex; align-items: center; gap: 8px; }
.topbar-logo { color: var(--c-surface); font-weight: 800; font-size: 19px; letter-spacing: 1px; }
.topbar-logo-img { width: 26px; height: 26px; object-fit: contain; border-radius: 7px; display: block; }
.topbar-sub { color: rgba(255,255,255,.85); font-size: 12px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.member-badge {
    padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
    background: rgba(255,255,255,.2); color: var(--c-surface); border: 1px solid rgba(255,255,255,.4);
}
.member-badge.vip { background: linear-gradient(135deg, var(--s-amber-500), var(--s-amber-600)); border-color: transparent; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* 配置了 DIY「顶部品牌栏」模块时，由该模块接管顶栏（首页与所有二级页共用同一份配置），隐藏系统默认顶栏 */
body.has-diy-topbar .topbar { display: none; }
/* 全站品牌栏插槽：位于 .app 顶部、.main 之外，所有页面共享 */
.home-topbar-slot {
    position: sticky; top: 0; z-index: 60;
    padding-top: env(safe-area-inset-top, 0px);
    /* 品牌栏贴在 .app 顶部（不在 #homepageSections 内）：通栏偏移归零，避免溢出手机壳 */
    --hs-side: 0px;
    /* 背景由 JS 跟随首页页背景同步（见 applyHomepagePage），避免 sticky 时内容从缝隙穿透 */
    background: var(--bg);
}

.main { flex: 1; padding: 12px 12px 80px; }
.page { display: none; animation: fade .3s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 底部导航 tabbar 样式已抽到 /css/tabbar.css（全站唯一来源，各页面统一引入） */

.page-head { padding: 6px 4px 14px; }
.page-head h2 { font-size: 21px; font-weight: 800; }
.page-head p { color: var(--gray-2); font-size: 13px; margin-top: 4px; }
/* 页头带返回按钮（从首页 DIY 模块进入的心情日记 / 求助广场需要回到首页） */
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.page-head-row > div { min-width: 0; }
.page-back-btn {
    flex-shrink: 0; margin-top: 4px; border: 1px solid var(--line); background: var(--c-surface); color: var(--gray-1);
    border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.page-back-btn:hover { border-color: var(--purple-2, var(--v-600)); color: var(--purple-2, var(--v-600)); }
.section-title { font-size: 16px; font-weight: 800; margin: 20px 4px 12px; padding-left: 11px; position: relative; color: var(--ink); }
.section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 15px; border-radius: 4px; background: linear-gradient(180deg, var(--indigo-400), var(--v-600)); }
.sec-count { font-size: 12px; font-weight: 600; color: var(--gray-3); margin-left: 4px; }

/* ============================ 额度横幅 ============================ */

.quota-banner {
    margin-bottom: 10px; padding: 12px 16px; border-radius: 14px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, var(--v-100), var(--v-200));
    border: 1px solid rgba(16,185,129,.25); color: var(--v-900); font-size: 13px;
}
.quota-banner.vip { background: linear-gradient(135deg, var(--s-amber-100), var(--s-amber-200)); border-color: rgba(217,119,6,.3); color: var(--s-amber-800); }
.quota-banner .quota-btn { padding: 6px 14px; border-radius: 20px; background: var(--purple-2); color: var(--c-surface); font-size: 12px; font-weight: 700; }

/* ============================ 卡牌测评（沿用原版视觉） ============================ */

.title-module {
    padding: 14px 0; border-radius: 16px; text-align: center; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--indigo-400) 0%, var(--v-600) 25%, var(--brand-3) 50%, var(--brand-4) 75%, var(--v-300) 100%);
    box-shadow: 0 4px 12px rgba(102,126,234,.25);
}
.title-module::before {
    content: ''; position: absolute; top: -40px; right: -30px; width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,.28), transparent 62%); pointer-events: none;
}
.title-module::after {
    content: ''; position: absolute; bottom: -50px; left: -30px; width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 62%); pointer-events: none;
}
.title-header { display: flex; align-items: center; justify-content: center; gap: 14px; }
.system-title { font-size: 19px; color: var(--c-surface); font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.title-sub { font-size: 11px; color: rgba(255,255,255,.85); letter-spacing: .8px; margin-top: 4px; }
.refresh-btn {
    width: 34px; height: 34px; border-radius: 11px; color: var(--c-surface);
    background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center; transition: .3s;
}
.refresh-btn:active { transform: scale(.92); }
.refresh-btn svg { width: 17px; height: 17px; }

.slots-module, .cards-module, .progress-module {
    background: var(--c-surface); border-radius: 14px; border: 1px solid var(--line);
    padding: 12px; margin-top: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.row-title { font-size: 12px; color: var(--gray-1); font-weight: 600; margin-bottom: 8px; }
.match-row { margin-bottom: 14px; }
.match-row:last-child { margin-bottom: 0; }
.slot-container { display: flex; gap: 6px; }

.card-slot {
    flex: 1; height: var(--card-h); border: 1.5px dashed var(--n-300); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; position: relative;
    background: var(--n-50); transition: .2s; touch-action: none;
}
.card-slot::before { content: '＋'; color: var(--n-300); font-size: 18px; transition: color .2s; }
.card-slot:hover { border-color: var(--brand-5); background: var(--v-50); }
.card-slot:hover::before { color: var(--brand-5); }
.card-slot.filled { border-style: solid; background: var(--c-surface); box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.card-slot.filled::before { content: none; }
.card-slot.dragover { border-color: var(--purple-2); background: var(--v-100); border-style: solid; box-shadow: inset 0 0 0 2px rgba(16,185,129,.25); transform: scale(1.02); }

.library-title { font-size: 12px; color: var(--gray-2); font-weight: 600; margin-bottom: 10px; }
.card-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }

.card {
    height: var(--card-h); border-radius: 4px; display: flex; align-items: center; justify-content: center;
    position: relative; cursor: grab; touch-action: none; background: var(--c-surface);
    border: 1px solid var(--card-c, var(--line));
    /* 无 color-mix 依赖的基础阴影：旧内核（Chrome<111 / iOS<16.2）
       也能正确渲染，保证卡牌立体感不丢失。 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9),   /* 顶面反光 */
                inset 0 -2px 0 rgba(15, 23, 42, .06),  /* 底部同色厚度（降级近似值）*/
                inset 0 0 0 1px rgba(255,255,255,.4),   /* 内侧白色切边 */
                0 1px 2px rgba(15,23,42,.10), 0 3px 8px rgba(15,23,42,.07);  /* 双层投影 */
    font-size: 12px; font-weight: 700; text-align: center; padding: 4px 2px;
    transition: transform .15s, box-shadow .15s, border-color .15s; user-select: none; -webkit-user-select: none;
}
/* 现代内核升级为精确的「同色厚度」效果（按卡牌自身描边色着色） */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .card {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
                inset 0 -2px 0 color-mix(in srgb, var(--card-c, #e5e7eb) 16%, transparent),
                inset 0 0 0 1px rgba(255,255,255,.4),
                0 1px 2px rgba(15,23,42,.10), 0 3px 8px rgba(15,23,42,.07);
  }
  .card:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
                inset 0 -2px 0 color-mix(in srgb, var(--card-c, #e5e7eb) 16%, transparent),
                inset 0 0 0 1px rgba(255,255,255,.4),
                0 4px 8px rgba(15,23,42,.10), 0 10px 22px rgba(15,23,42,.10);
  }
}
.card:hover { transform: translateY(-2px); border-color: var(--card-c, var(--n-300)); }
.card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(15,23,42,.06), inset 0 0 0 1px rgba(255,255,255,.4), 0 4px 8px rgba(15,23,42,.10), 0 10px 22px rgba(15,23,42,.10); }
/* 纯白底 + 四色描边：边框即色彩身份，与圆角天然融合（替代原顶部悬浮色条） */
.card-yellow { --card-c: var(--brand-amber); color: var(--s-amber-800); background: var(--c-surface); }
.card-blue { --card-c: var(--c-info); color: var(--s-blue-800); background: var(--c-surface); }
.card-red { --card-c: var(--s-red-500); color: var(--s-red-800); background: var(--c-surface); }
.card-green { --card-c: var(--s-green-500); color: var(--s-green-800); background: var(--c-surface); }
.card.dragging { opacity: .4; }

.card-slot .card { height: 100%; width: 100%; border-radius: 4px; box-shadow: none; }

.btn-calculate {
    width: 100%; margin-top: 14px; padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--c-surface);
    background: linear-gradient(135deg, var(--indigo-500), var(--v-600), var(--brand-3));
    box-shadow: 0 8px 22px rgba(16,185,129,.35); letter-spacing: 1px; transition: .2s; position: relative; overflow: hidden;
}
.btn-calculate::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg) translateX(0);
    /* 性能：left 过渡每帧重排 → 改 transform（合成层，零重排）*/
    transition: transform .5s;
}
.btn-calculate:hover::after { transform: skewX(-20deg) translateX(320%); }
.btn-calculate:active { transform: scale(.98); }
.btn-calculate.btn-disabled { background: var(--n-200); color: var(--n-400); box-shadow: none; cursor: not-allowed; }
.btn-calculate.btn-disabled::after { content: none; }

/* —— 测评进度模块 ——
   设计要点：
     ① 外层沿用 .progress-module 的既有卡片（14px 圆角 / 12px padding），
        不再叠加第二层容器，避免重复 treatment 与文字被裁切；
     ② 标题行：左侧「已选卡牌」，右侧数量做成胶囊徽标 —— 数字是主角，
        加 tabular-nums 保证 0→15 变化时不跳动；
     ③ 进度条：极简能量条。原为「小圆点阵列」，视觉过碎、显得廉价，
        改为 8px 纤细胶囊 + 品牌渐变 + 末端能量头（收尾提亮）+
        轻微外发光，整体干净利落；
     ④ 能量头置于填充内部（right:0）而非溢出到轨道外——
        溢出方案在 width:0 时会有一半光点露在轨道左侧，属显示瑕疵；
     ⑤ JS 契约不变：#progressText 仍写文本、#progressFill 仍改 width，
        本次纯 CSS 升级，未新增任何 DOM 依赖。 */
.progress-container {
    display: flex; flex-direction: column; gap: 10px;
}
.progress-text {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; font-size: 12.5px; color: var(--gray-2); line-height: 1.4;
}
.progress-label {
    font-weight: 600; font-size: 12.5px; color: var(--gray-1);
    letter-spacing: .3px; display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; flex: none;
}
/* 数量胶囊徽标：数字等宽 + 微光，视觉焦点 */
#progressText {
    display: inline-flex; align-items: baseline; gap: 1px;
    padding: 3px 10px; border-radius: 999px; flex: none;
    font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
    font-variant-numeric: tabular-nums;
    color: var(--v-700, var(--v-700));
    background: color-mix(in srgb, var(--v-600, var(--brand-2)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--v-600, var(--brand-2)) 20%, transparent);
    white-space: nowrap;
}
/* 轨道：纤细胶囊 + 内凹 */
.progress-bar {
    position: relative; height: 8px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--c-ink, var(--ink)) 7%, transparent);
    box-shadow: inset 0 1px 2px rgba(15, 45, 35, .12);
}
/* 填充：品牌渐变 + 轻辉光 */
.progress-fill {
    position: relative; z-index: 1; height: 100%; width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--v-600, var(--brand-2)) 0%, var(--brand-3, var(--brand-3)) 55%, var(--v-400, var(--brand-1)) 100%);
    box-shadow: 0 1px 4px rgba(5, 150, 105, .32);
    transition: width .42s cubic-bezier(.16, 1, .3, 1);
}
/* 末端能量头：填充右端一段提亮，收束视线。
   width:0 时元素宽度为 0，光头自然不可见，无残留瑕疵。 */
.progress-fill::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0;
    width: 16px; pointer-events: none;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45));
}
/* 暗色：轨道提亮以在深底上可见，能量头改薄荷白避免刺眼 */
@media (prefers-color-scheme: dark) {
    .progress-fill::after {
        background: linear-gradient(90deg, transparent, rgba(236, 253, 245, .40));
    }
    .progress-bar {
        background-color: rgba(255, 255, 255, .08);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .34);
    }
    .progress-fill { box-shadow: 0 1px 6px rgba(52, 211, 153, .42); }
    #progressText {
        color: var(--brand-4);
        background: rgba(52, 211, 153, .14);
        border-color: rgba(52, 211, 153, .30);
    }
    .progress-label { color: var(--c-sub, var(--c-sub)); }
}

.instructions-compact {
    margin-top: 10px; padding: 12px 16px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(20,184,166,.07), rgba(16,185,129,.05));
    border: 1px solid rgba(20,184,166,.15);
}
.instructions-title-row { font-size: 13px; font-weight: 700; color: var(--indigo-500); margin-bottom: 6px; }
.instructions-intro { font-size: 12px; color: var(--gray-2); line-height: 1.5; }
.instructions-steps { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.step-badge { padding: 3px 8px; border-radius: 6px; background: linear-gradient(135deg, var(--indigo-500), var(--v-600)); color: var(--c-surface); font-size: 11px; font-weight: 700; }
.step-text { font-size: 11px; color: var(--gray-2); align-self: center; }

/* ============================ 结果弹窗 ============================ */

.modal-mask {
    position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center;
    background: rgba(15,23,42,.55); backdrop-filter: blur(6px); padding: 16px; overflow-y: auto;
}
.modal-mask.show { display: flex; }
.modal-card {
    width: 100%; max-width: 430px; max-height: 90vh; overflow-y: auto;
    background: var(--c-surface); border-radius: 22px; padding: 20px 18px;
    animation: rise .35s cubic-bezier(.34,1.56,.64,1);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h2 { font-size: 18px; font-weight: 800; background: linear-gradient(135deg, var(--indigo-500), var(--v-600), var(--brand-4)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal-close { width: 30px; height: 30px; border-radius: 50%; background: var(--n-100); color: var(--gray-2); font-size: 15px; }

/* ============================================================
   心启能·心力赋能中心（线下网点 · 用户端）
   ============================================================ */
/* 滚动修复（2026-10-11）：
   原 .emp-sheet 的 overflow:hidden 覆盖了 .modal-card 基类的 overflow-y:auto，
   而 max-height:90vh 仍生效 → 超出部分被直接裁掉且无滚动条（内容截断根因）。
   现改为「头部固定 + 内容区独立滚动」的 flex 结构：
   卡片 max-height:90vh，.sheet-body 占据剩余高度并可滚，
   头部 hero 始终可见 —— 这也是 iOS 系统 sheet 的标准行为。 */
.emp-sheet {
  max-width: 520px !important; padding: 0 !important; overflow: hidden;
  border-radius: 20px !important;
  display: flex; flex-direction: column;
  max-height: 90vh;
}
.emp-sheet .sheet-body {
  flex: 1; min-height: 0;            /* min-height:0 是 flex 子项可收缩滚动的前提 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* iOS 惯性滚动 */
  overscroll-behavior: contain;       /* 滚动到底不穿透页面 */
}

/* ---- 网点详情视图 ---- */
.emp-back {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px 0 10px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--c-surface); color: var(--gray-2);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, color .15s, transform .15s;
}
.emp-back:hover { border-color: var(--brand-3); color: var(--v-700); transform: translateX(-2px); }
.emp-detail-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.emp-detail-h > b { font-size: 17px; font-weight: 800; color: var(--ink); }
.emp-detail-loc { font-size: 12px; color: var(--gray-3); }
.emp-detail-sec { margin-bottom: 14px; }
.emp-detail-sec-t {
  font-size: 12px; font-weight: 800; color: var(--v-700); letter-spacing: .5px;
  margin-bottom: 7px; padding-left: 9px; position: relative;
}
.emp-detail-sec-t::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 12px; border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-3), var(--v-600));
}
.emp-detail-desc {
  font-size: 13.5px; line-height: 1.8; color: var(--gray-2);
  background: var(--n-50); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.emp-acts--detail .emp-act { flex: 1; justify-content: center; }
.emp-center-h { cursor: pointer; }
.emp-detail-go {
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; font-weight: 800; color: var(--v-700);
  background: var(--v-50); border: 1px solid var(--v-200);
  border-radius: 999px; padding: 3px 9px;
  transition: background .15s, transform .15s;
}
.emp-center-h:hover .emp-detail-go { background: var(--v-100); transform: translateX(2px); }
.emp-svc--more { background: var(--n-100); color: var(--gray-2); border-color: transparent; }

/* ---- 头部：深色渐变 + 金色光斑 ---- */
.emp-head {
  position: relative; overflow: hidden; padding: 20px 20px 16px; color: var(--c-surface);
  background: linear-gradient(125deg, var(--v-950) 0%, #0F3D2F 40%, var(--v-900) 70%, var(--v-700) 100%);
}
.emp-head-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(320px 180px at 90% 6%, rgba(251, 191, 36, .3), transparent 62%),
              radial-gradient(280px 160px at 8% 96%, rgba(110, 231, 183, .32), transparent 66%);
}
.emp-head-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.emp-head-ico {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; font-size: 21px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26);
}
.emp-head-txt { min-width: 0; flex: 1; }
.emp-head-txt h2 {
  margin: 0; font-size: 18px; font-weight: 800; letter-spacing: .4px;
  background: linear-gradient(100deg, var(--c-surface) 12%, var(--s-amber-200) 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.emp-head-txt p { margin: 3px 0 0; font-size: 11.5px; color: rgba(226, 232, 255, .82); }
.emp-head-close {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px;
  color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24); transition: background .15s;
}
.emp-head-close:hover { background: rgba(255, 255, 255, .26); }
/* 头部指标条 */
.emp-head-stats {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 16px;
}
.emp-hstat {
  text-align: center; padding: 9px 4px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
}
.emp-hstat b { display: block; font-size: 18px; font-weight: 800; line-height: 1.15; color: var(--s-amber-200); }
.emp-hstat span { display: block; font-size: 10.5px; color: rgba(226, 232, 255, .78); margin-top: 2px; }

/* ---- 主体 ---- */
.emp-sheet .sheet-body { padding: 14px 14px 4px; }
.sheet-body .emp-loading { padding: 34px 0; text-align: center; font-size: 13px; color: var(--gray-3); }
.emp-foot {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 11px; color: var(--gray-3); line-height: 1.65;
  margin: 4px 0 12px; padding-top: 12px; border-top: 1px dashed var(--line); text-align: center;
}

.emp-region {
  border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px;
  background: var(--c-surface); overflow: hidden;
  box-shadow: 0 6px 18px -14px rgba(4, 47, 34, .5);
}
.emp-region-h {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 13px 15px; border: none; background: transparent; text-align: left;
  font-size: 14.5px; font-weight: 800; color: var(--ink);
}
.emp-region-name { flex: 1; min-width: 0; }
.emp-region-n { font-size: 11.5px; font-weight: 600; color: var(--gray-3); }
.emp-region-arrow {
  font-size: 16px; color: var(--gray-3); transition: transform .2s; transform: rotate(90deg);
}
.emp-region.is-open .emp-region-arrow { transform: rotate(-90deg); }
.emp-region-body { display: none; padding: 0 13px 13px; }
.emp-region.is-open .emp-region-body { display: block; }

.emp-city { margin-bottom: 10px; }
.emp-city-h {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--gray-1); margin: 6px 0 7px; padding-left: 2px;
}
.emp-city-h span { font-size: 12px; }
.emp-city-h i { font-style: normal; margin-left: auto; font-size: 11px; color: var(--gray-3); font-weight: 600; }

/* 网点卡片 */
.emp-center {
  position: relative; overflow: hidden;
  background: var(--n-50); border: 1px solid var(--n-100);
  border-radius: 14px; padding: 12px 14px 12px 17px; margin-bottom: 9px;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.emp-center:hover {
  transform: translateY(-1px); border-color: var(--v-200);
  box-shadow: 0 12px 26px -18px rgba(109, 40, 217, .8);
}
.emp-center-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--v-600), var(--brand-4) 60%, var(--s-amber-500));
}
.emp-center-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.emp-center-h b { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.emp-contact {
  flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--v-700);
  padding: 2px 9px; border-radius: 999px; background: var(--v-100);
}
.emp-row { display: flex; gap: 6px; font-size: 12.5px; color: var(--gray-2); margin-bottom: 3px; line-height: 1.55; }
.emp-row i { font-style: normal; flex-shrink: 0; width: 16px; text-align: center; opacity: .85; }
.emp-svcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.emp-svc {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--v-50); color: var(--v-700); border: 1px solid var(--v-100);
}
/* 卡片操作 */
.emp-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.emp-act {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; text-decoration: none;
  font-size: 11.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
  color: var(--gray-1); background: var(--c-surface); border: 1px solid var(--line);
  transition: all .15s;
}
.emp-act:hover { border-color: var(--brand-5); color: var(--v-700); background: var(--v-50); }
.emp-act--call { color: var(--c-surface); background: linear-gradient(135deg, var(--v-600), var(--brand-4)); border-color: transparent; }
.emp-act--call:hover { color: var(--c-surface); background: linear-gradient(135deg, var(--v-700), var(--brand-3)); }

/* 空态 */
.emp-empty { padding: 30px 0; text-align: center; color: var(--gray-3); }
.emp-empty-ico { display: block; font-size: 34px; margin-bottom: 8px; opacity: .8; }
.emp-empty b { display: block; font-size: 14px; color: var(--gray-1); margin-bottom: 4px; }
.emp-empty p { margin: 0; font-size: 12px; }

@media (max-width: 480px) {
  .emp-head-stats { grid-template-columns: repeat(2, 1fr); }
  .emp-head-txt h2 { font-size: 16.5px; }
}

/* 动态创建的通用弹窗（同意书 / 关系档案 / 关系解读等） */
.modal-box {
    width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
    background: var(--c-surface); border-radius: 20px; padding: 20px 18px;
    animation: rise .3s cubic-bezier(.34,1.56,.64,1);
}
.modal-title {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 17px; font-weight: 800; color: var(--n-800); margin-bottom: 14px;
}
.modal-title .modal-close { flex-shrink: 0; border: none; cursor: pointer; line-height: 1; }
.modal-body { font-size: 14px; color: var(--n-700); line-height: 1.7; }
.consent-text { background: var(--n-50); border: 1px solid var(--n-100); border-radius: 12px; padding: 12px 14px; max-height: 42vh; overflow-y: auto; }
.consent-text p { margin: 0 0 10px; font-size: 13px; color: var(--n-600); line-height: 1.7; }
.consent-text p:last-child { margin-bottom: 0; }
.cs-agree { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--n-600); margin: 14px 0; cursor: pointer; }
.cs-agree input { width: auto; margin: 0; accent-color: var(--v-600); }
.cs-loading { font-size: 13px; color: var(--n-400); padding: 14px 0; text-align: center; }

/* ============================ 危机求助热线 ============================ */
.crisis-fab {
    position: fixed; right: 14px; bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    z-index: 90; display: flex; align-items: center; gap: 5px;
    padding: 10px 15px; border-radius: 22px; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--s-red-500), var(--brand-orange)); color: var(--c-surface);
    font-size: 13px; font-weight: 800; box-shadow: 0 6px 18px rgba(239,68,68,.4);
}
.crisis-fab:active { transform: scale(.97); }
.firstaid-fab {
    position: fixed; right: 14px; bottom: calc(128px + env(safe-area-inset-bottom, 0px));
    z-index: 90; display: flex; align-items: center; gap: 5px;
    padding: 9px 14px; border-radius: 22px; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--v-600), var(--brand-4)); color: var(--c-surface);
    font-size: 12.5px; font-weight: 800; box-shadow: 0 6px 18px rgba(16,185,129,.38);
}
.firstaid-fab:active { transform: scale(.97); }
.crisis-card { border: 2px solid var(--s-red-100); }
.crisis-tip { font-size: 13px; color: var(--gray-2); line-height: 1.7; margin: 0 2px 14px; }
.crisis-list { display: flex; flex-direction: column; gap: 10px; }
.crisis-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 15px; border-radius: 14px; text-decoration: none;
    background: linear-gradient(135deg, #fff5f5, var(--s-red-100)); border: 1px solid var(--s-red-200);
}
.crisis-item:active { transform: scale(.99); }
.crisis-name { font-size: 14px; font-weight: 700; color: var(--s-red-700); }
.crisis-num { font-size: 15px; font-weight: 800; color: var(--s-red-600); }

/* 微信支付弹窗 */
.pay-card { text-align: center; }
.pay-amount { font-size: 30px; font-weight: 800; color: var(--brand-green); margin: 4px 0 2px; }
.pay-order { font-size: 12px; color: var(--gray-2); margin-bottom: 16px; word-break: break-all; }
.pay-qr-wrap { display: flex; align-items: center; justify-content: center; min-height: 200px; margin-bottom: 12px; }
.pay-qr { width: 210px; height: 210px; border: 1px solid var(--n-200); border-radius: 12px; }
.pay-tip { font-size: 12px; color: var(--gray-2); margin-bottom: 14px; }
.pay-mock { text-align: center; padding: 10px 0; }
.pay-mock-ico { font-size: 40px; }
.pay-mock-title { font-size: 16px; font-weight: 700; color: var(--n-700); margin: 8px 0 4px; }
.pay-mock-sub { font-size: 12px; color: var(--gray-2); line-height: 1.6; }
#payMockBtn { margin-top: 6px; }
/* 二维码加载失败兜底（外网不可达时仍可完成支付） */
.pay-qr-fallback { width: 260px; text-align: center; padding: 14px 12px; border: 1px dashed var(--n-300); border-radius: 12px; background: var(--n-50); }
.pay-qr-fb-title { font-size: 14px; font-weight: 700; color: var(--n-700); margin-bottom: 4px; }
.pay-qr-fb-sub { font-size: 12px; color: var(--n-500); line-height: 1.6; margin-bottom: 8px; }
.pay-qr-fb-link { width: 100%; font-size: 11px; color: var(--n-600); border: 1px solid var(--n-200); border-radius: 8px; padding: 6px; resize: none; word-break: break-all; }
.pay-qr-fallback .primary-btn { margin-top: 8px; width: 100%; }

/* 支付倒计时 */
.pay-countdown {
    display: inline-block; font-size: 12px; font-weight: 700; color: var(--s-amber-700);
    background: var(--s-amber-100); border: 1px solid var(--s-amber-200); border-radius: 999px;
    padding: 4px 12px; margin-bottom: 12px;
}
/* 支付弹窗底部操作 */
.pay-actions { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.pay-btn {
    flex: 1; max-width: 150px; font-size: 13px; font-weight: 600; padding: 9px 12px;
    border-radius: 10px; cursor: pointer; transition: .18s;
}
.pay-btn.ghost { background: var(--c-surface); color: var(--n-600); border: 1px solid var(--n-200); }
.pay-btn.ghost:hover { background: var(--n-50); border-color: var(--n-300); }
.pay-btn.ghost:disabled { opacity: .5; cursor: not-allowed; }

/* ============ 结算确认页 ============ */
.checkout-card { max-width: 420px; text-align: left; }
.checkout-body { display: flex; flex-direction: column; gap: 14px; }
.ck-goods {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf9, var(--s-green-50));
    border: 1px solid rgba(15,157,118,.18);
}
.ck-goods-main { flex: 1; min-width: 0; }
.ck-goods-name { font-size: 16px; font-weight: 800; color: var(--n-900); line-height: 1.4; }
.ck-goods-sub { font-size: 12px; color: var(--brand-green); margin-top: 4px; }
.ck-goods-price { font-size: 20px; font-weight: 800; color: var(--brand-green); font-variant-numeric: tabular-nums; flex-shrink: 0; letter-spacing: -.3px; }
.ck-rows { border-radius: 14px; background: var(--n-50); padding: 12px 16px; }
.ck-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--n-600); padding: 7px 0; }
.ck-row-off b { color: var(--brand-rose); font-weight: 700; }
.ck-tag {
    font-style: normal; font-size: 10px; font-weight: 700; color: var(--v-600);
    background: var(--v-100); border-radius: 4px; padding: 1px 5px; margin-left: 4px;
}
.ck-row-total { border-top: 1px dashed var(--n-200); margin-top: 6px; padding-top: 11px; font-size: 14px; color: var(--n-900); font-weight: 700; }
.ck-total { font-size: 22px; font-weight: 800; color: var(--brand-green); }
.ck-coupon { display: flex; flex-direction: column; gap: 6px; }
.ck-coupon-label { font-size: 12px; font-weight: 700; color: var(--n-600); }
.ck-coupon-sel {
    width: 100%; font-size: 13px; color: var(--n-900); padding: 10px 12px;
    border: 1px solid var(--n-200); border-radius: 10px; background: var(--c-surface);
}
.ck-coupon-hint { font-size: 11px; color: var(--brand-green); }
.ck-pay-method {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border: 1.5px solid var(--brand-green); border-radius: 14px; background: #f0fdf9;
}
.ck-pay-ico { font-size: 22px; }
.ck-pay-text { flex: 1; display: flex; flex-direction: column; }
.ck-pay-text b { font-size: 14px; color: var(--n-900); }
.ck-pay-text span { font-size: 11px; color: var(--n-500); margin-top: 2px; }
.ck-pay-check { color: var(--brand-green); font-weight: 800; font-size: 16px; }
.ck-pay-methods { display: flex; flex-direction: column; gap: 10px; }
.ck-pay-opt {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    border: 1.5px solid var(--n-200); border-radius: 14px; background: var(--c-surface); cursor: pointer;
    transition: border-color .16s, background .16s, box-shadow .16s;
}
.ck-pay-opt .ck-pay-ico {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ck-pay-opt[data-pm="wechat"] .ck-pay-ico { background: #e8f8ee; }
.ck-pay-opt[data-pm="coin"] .ck-pay-ico { background: #eaf4ff; }
.ck-pay-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-pay-text b { font-size: 14px; font-weight: 700; color: var(--n-900); }
.ck-pay-text span { font-size: 11.5px; color: var(--n-400); }
.ck-pay-opt .ck-pay-check { display: none; }
.ck-pay-opt.on { border-color: var(--brand-green); background: #f0fdf9; box-shadow: 0 4px 14px rgba(15,157,118,.12); }
.ck-pay-opt.on .ck-pay-check {
    display: flex; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand-green); color: var(--c-surface); font-size: 11px; font-weight: 800;
    align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(15,157,118,.35);
}
.ck-pay-opt.disabled { opacity: .55; cursor: not-allowed; background: var(--n-50); }
.ck-pay-opt.disabled .ck-pay-text b { color: var(--n-400); }
.ck-warn {
    font-size: 12px; line-height: 1.6; color: var(--s-amber-800); background: var(--s-amber-50);
    border: 1px solid var(--s-amber-200); border-radius: 10px; padding: 10px 12px;
}
.ck-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--n-500); line-height: 1.6; cursor: pointer; }
.ck-agree input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-green); cursor: pointer; padding: 0; }
.ck-agree a { color: var(--brand-green); font-weight: 600; text-decoration: none; }
.ck-submit {
    width: 100%; padding: 14px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-green), var(--c-mint)); color: var(--c-surface);
    font-size: 16px; font-weight: 800; cursor: pointer; transition: .2s;
    box-shadow: 0 6px 18px rgba(15,157,118,.28);
}
.ck-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15,157,118,.34); }
.ck-submit:disabled { background: var(--n-300); box-shadow: none; cursor: not-allowed; }
.ck-foot { text-align: center; font-size: 11px; color: var(--n-400); }

/* ============ 支付结果页 ============ */
.pay-result-card { text-align: center; max-width: 360px; }
.pay-result-body { padding: 12px 4px 4px; }
.pr-ico { font-size: 52px; line-height: 1; }
.pr-title { font-size: 20px; font-weight: 800; color: var(--n-900); margin: 14px 0 6px; }
.pr-sub { font-size: 13px; color: var(--n-600); line-height: 1.7; }
.pr-note { font-size: 12px; color: var(--n-400); margin-top: 10px; }
.pay-result-btn { width: 100%; margin-top: 18px; }

/* ============ 轻量确认弹窗 ============ */
.wx-confirm-mask { z-index: 3000; }
.wx-confirm-card { max-width: 320px; text-align: center; padding: 22px 20px 18px; }
.wx-confirm-title { font-size: 17px; font-weight: 800; color: var(--n-900); margin-bottom: 10px; }
.wx-confirm-msg { font-size: 13px; color: var(--n-600); line-height: 1.7; }
.wx-confirm-actions { display: flex; gap: 10px; margin-top: 20px; }
.wx-cf-btn {
    flex: 1; padding: 11px; border: none; border-radius: 11px; font-size: 14px;
    font-weight: 700; cursor: pointer;
}
.wx-cf-btn.ghost { background: var(--n-100); color: var(--n-600); }
.wx-cf-btn { background: linear-gradient(135deg, var(--brand-green), var(--c-mint)); color: var(--c-surface); }

.result-summary {
    padding: 14px; border-radius: 12px; background: linear-gradient(135deg, var(--v-100), var(--v-50));
    border: 1px solid rgba(16,185,129,.2); font-size: 13px; line-height: 1.7; color: var(--v-900); margin-bottom: 14px;
}
.result-summary .dom-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px; margin-right: 6px;
    background: var(--purple-2); color: var(--c-surface); font-size: 12px; font-weight: 700;
}

.result-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.result-card-row { display: flex; gap: 6px; }
.result-card-slot {
    flex: 1; height: 58px; border-radius: 4px; background: var(--c-surface); border: 1.5px solid var(--line);
    display: flex; align-items: center; justify-content: center; padding: 2px; position: relative; overflow: hidden;
}
/* 结果页三排卡牌：与卡牌库同一套设计（白底 + 四色描边 + 彩色卡纸质感） */
.result-card { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; position: relative; border-radius: 4px; border: 1px solid var(--card-c, var(--line)); background: var(--c-surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 color-mix(in srgb, var(--card-c, #e5e7eb) 16%, transparent), inset 0 0 0 1px rgba(255,255,255,.4); }
.result-card-yellow { --card-c: var(--brand-amber); color: var(--s-amber-800); }
.result-card-blue { --card-c: var(--c-info); color: var(--s-blue-800); }
.result-card-red { --card-c: var(--s-red-500); color: var(--s-red-800); }
.result-card-green { --card-c: var(--s-green-500); color: var(--s-green-800); }

.clover { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.leaf { padding: 16px 12px; border-radius: 14px; text-align: center; position: relative; background: var(--c-surface); border: 1.5px solid var(--leaf-c, #e5e7eb); }
.leaf-yellow { --leaf-c: var(--brand-amber); }
.leaf-blue { --leaf-c: var(--c-info); }
.leaf-red { --leaf-c: var(--s-red-500); }
.leaf-green { --leaf-c: var(--s-green-500); }
.leaf.dominant { box-shadow: 0 0 0 3px rgba(16,185,129,.5), 0 8px 20px rgba(0,0,0,.18); }
.leaf.dominant::after { content: '主导'; position: absolute; top: 7px; right: 7px; font-size: 9px; font-weight: 800; background: rgba(255,255,255,.92); color: var(--v-700); padding: 2px 8px; border-radius: 999px; letter-spacing: 1px; }
.leaf-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--s-green-800); }
.score-display { font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--s-green-800); }
.score-display .neg { color: #ea580c; }

.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.ab-card { padding: 13px 12px; border-radius: 14px; background: var(--n-50); border: 1.5px solid var(--line); text-align: center; }
.ab-card:first-child { background: linear-gradient(135deg, var(--v-25), var(--c-surface)); border-color: rgba(16,185,129,.25); }
.ab-card:last-child { background: linear-gradient(135deg, var(--s-red-50), var(--c-surface)); border-color: rgba(244,63,94,.22); }
.ab-card:first-child .ab-count { color: var(--s-green-800); }
.ab-card:last-child .ab-count { color: var(--s-red-800); }
.ab-label { font-size: 11px; color: var(--gray-2); display: block; margin-bottom: 4px; font-weight: 700; }

/* 结果弹窗：标准化四维度卡片（心力/职场/婚姻/亲子）
   现仅展示用户在测试前选定的「一个方向」，故单列铺满；不再因两列网格而只占半边 */
.result-dims { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0; }
.rd-dim { background: var(--c-surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 15px; box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.rd-dim-h { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 9px; position: relative; padding-left: 13px; }
.rd-dim-h::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, var(--brand-1), var(--v-600)); }
.rd-ebar-wrap { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.rd-ebar { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--gray-1); }
.rd-ebar span { width: 18px; flex-shrink: 0; }
.rd-ebar i { flex: 1; height: 8px; background: var(--s-indigo-50); border-radius: 999px; overflow: hidden; position: relative; }
.rd-ebar i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 50%); background: linear-gradient(90deg, var(--brand-1), #38bdf8); border-radius: 999px; }
.rd-ebar b { width: 26px; text-align: right; font-weight: 700; color: var(--purple-2); }
.rd-dim-row { font-size: 12px; color: var(--gray-1); line-height: 1.6; margin: 3px 0; }
.rd-dim-row span { display: inline-block; width: 38px; color: var(--gray-3); flex-shrink: 0; }
.rd-dim-txt { font-size: 12px; color: var(--gray-1); line-height: 1.65; }
.rd-dim-tip { font-size: 11px; color: var(--gray-3); margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.rd-dim-tip.ok { color: var(--s-green-600); }
.match-empty { font-size: 12px; color: var(--gray-3); text-align: center; padding: 8px; }
@media (max-width: 480px) { .result-dims { grid-template-columns: 1fr; } }
.ab-count { font-size: 20px; font-weight: 800; color: var(--gray-1); }

/* ============ 测评结果页 Premium 升级（对标 16Personalities / 盖洛普） ============ */
/* 主导类型 Hero 区 */
.result-summary { padding: 0; background: transparent; border: none; margin-bottom: 16px; }
.rs-hero {
    background: linear-gradient(135deg, var(--v-900) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
    color: var(--c-surface); border-radius: 20px; padding: 24px 20px 22px;
    position: relative; overflow: hidden;
    box-shadow: 0 14px 34px rgba(6, 95, 70, .30);
    animation: rsIn .5s ease-out both;
}
.rs-hero::after { content: ''; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .10); }
.rs-hero::before { content: ''; position: absolute; left: -30px; bottom: -60px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.rs-eyebrow { position: relative; display: inline-block; font-size: 10px; letter-spacing: 2.5px; opacity: .85; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; }
.rs-title { position: relative; font-size: 32px; font-weight: 900; letter-spacing: 1px; line-height: 1.15; text-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.rs-desc { position: relative; font-size: 13px; opacity: .92; line-height: 1.75; margin-top: 10px; }

/* 心力指数环状图（更精致 + 内阴影） */
.lv-ring {
    width: 92px; height: 92px;
    box-shadow: 0 6px 18px rgba(6, 95, 70, .14);
}
.lv-ring::after { inset: 8px; }
.lv-score { font-size: 28px; font-weight: 900; }
.lv-badge { letter-spacing: 1px; padding: 4px 14px; }
.lv-bars { gap: 7px; }
.lv-bar>i { height: 9px; }
.lv-bar>b { font-weight: 800; }

/* 四型能量条四色分离 + 填充动画 */
.lv-bar[data-k="yellow"]>i { background-image: linear-gradient(90deg, var(--s-amber-400), var(--s-amber-600)); }
.lv-bar[data-k="blue"]>i { background-image: linear-gradient(90deg, #60a5fa, var(--s-blue-600)); }
.lv-bar[data-k="red"]>i { background-image: linear-gradient(90deg, var(--s-red-400), var(--s-red-600)); }
.lv-bar[data-k="green"]>i { background-image: linear-gradient(90deg, #4ade80, var(--s-green-600)); }
.lv-bar>i { background-size: 0% 100%; animation: lvBarFill 1s ease-out forwards; }
@keyframes lvBarFill { to { background-size: var(--w, 50%) 100%; } }

/* 模块进入渐显（动态反馈） */
@keyframes rsIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.level-box { animation: rsIn .55s .06s ease-out both; }
.result-cards { animation: rsIn .55s .12s ease-out both; }
.clover { animation: rsIn .55s .18s ease-out both; }
.ab-grid { animation: rsIn .55s .24s ease-out both; }
.result-dims { animation: rsIn .55s .3s ease-out both; }
.pain-box { animation: rsIn .55s .36s ease-out both; }

.modal-actions { display: flex; flex-direction: column; gap: 10px; }
.activate-body { font-size: 14px; color: var(--gray-2); line-height: 1.7; text-align: center; }
.act-grant { margin: 12px 0; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--v-50), var(--v-100)); color: var(--v-700); font-weight: 800; font-size: 17px; }
.btn-ghost { width: 100%; padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--gray-1); background: var(--n-100); }

/* ============================ 分析师 ============================ */

.level-filter { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; }
.level-chip {
    flex-shrink: 0; padding: 7px 14px; border-radius: 20px; background: var(--c-surface); border: 1.5px solid var(--line);
    color: var(--gray-1); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.level-chip.active { background: linear-gradient(135deg, var(--indigo-500), var(--v-600)); color: var(--c-surface); border-color: transparent; }

.consultant-list { display: flex; flex-direction: column; gap: 12px; }
.consultant-card {
    background: var(--c-surface); border-radius: 16px; padding: 16px; border: 1px solid var(--line);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.consultant-top { display: flex; gap: 14px; align-items: flex-start; }
.consultant-avatar { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: linear-gradient(135deg, var(--v-100), var(--v-200)); flex-shrink: 0; overflow: hidden; }
/* 图片头像：铺满头像块并居中裁剪；emoji 不设尺寸，交给容器 flex 居中，避免文字跑偏 */
.consultant-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: inherit; }
.consultant-main { flex: 1; min-width: 0; }
.consultant-name { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.level-tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 700; white-space: nowrap; }
.lv4 { background: linear-gradient(135deg, var(--s-amber-500), var(--s-amber-600)); color: var(--c-surface); }
.lv3 { background: linear-gradient(135deg, var(--v-600), var(--brand-3)); color: var(--c-surface); }
.lv2 { background: linear-gradient(135deg, var(--s-blue-600), var(--c-info)); color: var(--c-surface); }
.lv1 { background: linear-gradient(135deg, var(--n-500), var(--n-400)); color: var(--c-surface); }
.consultant-title { font-size: 12px; color: var(--gray-2); margin-top: 3px; }
.consultant-meta { display: flex; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--gray-2); }
.online-dot { font-weight: 700; }
.online-dot.on { color: var(--s-green-600); }
.online-dot.off { color: #9ca3af; }
.online-dot.busy { color: var(--s-amber-500); }
.consultant-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { padding: 3px 9px; border-radius: 20px; background: var(--n-100); color: var(--gray-1); font-size: 11px; }
.consultant-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--n-100); }
.consultant-price { font-size: 13px; color: var(--gray-2); }
.consultant-price b { font-size: 20px; color: var(--brand-rose); font-weight: 800; }
.consultant-actions { display: flex; gap: 8px; }
.btn-chat { padding: 8px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); font-size: 13px; font-weight: 700; }
.btn-detail { padding: 8px 14px; border-radius: 20px; background: var(--n-100); color: var(--gray-1); font-size: 13px; font-weight: 600; }

/* ============================ 咨询师详情 / 聊天 ============================ */

.consultant-info {
    display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px;
    background: linear-gradient(135deg, var(--v-100), var(--v-50)); margin-bottom: 12px;
}
.consultant-info .consultant-avatar { width: 48px; height: 48px; font-size: 26px; }
.ci-name { font-size: 16px; font-weight: 800; }
.ci-meta { font-size: 12px; color: var(--gray-2); margin-top: 2px; }
.ci-price { font-size: 13px; color: var(--brand-rose); font-weight: 800; margin-top: 4px; }

.chat-box { height: 340px; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; background: #f6f7fb; border-radius: 14px; margin-bottom: 10px; }
/* 会话对象栏 */
.chat-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, var(--v-50), var(--s-indigo-50)); margin-bottom: 10px; }
.chat-top.listen { background: linear-gradient(135deg, #f0fdf9, #eef6ff); }
.ct-avatar { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 21px; background: var(--c-surface); overflow: hidden; box-shadow: 0 2px 8px rgba(20,30,60,.07); }
.ct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-main { flex: 1; min-width: 0; }
.ct-name { font-size: 14.5px; font-weight: 800; color: var(--n-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-status { font-size: 11.5px; color: var(--n-500); margin-top: 2px; }
.ct-status .online-dot { font-weight: 700; }
.ct-side { text-align: right; flex-shrink: 0; }
.ct-timer { font-size: 16px; font-weight: 800; color: var(--v-600); font-variant-numeric: tabular-nums; }
.chat-top.listen .ct-timer { color: var(--s-teal-700); }
.ct-timer-label { font-size: 10.5px; color: var(--n-400); margin-top: 2px; }
/* 消息行：头像 + 气泡 + 时间 */
.msg-row { display: flex; align-items: flex-end; gap: 8px; }
.msg-row.mine { flex-direction: row-reverse; }
.msg-avatar { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; background: linear-gradient(135deg, var(--v-100), var(--v-200)); overflow: hidden; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-col { display: flex; flex-direction: column; gap: 3px; max-width: calc(100% - 46px); min-width: 0; }
.msg-row.mine .msg-col { align-items: flex-end; }
.msg { max-width: 100%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-break: break-word; }
.msg.user { background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); border-bottom-right-radius: 4px; }
.msg.consultant { background: var(--c-surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg-time { font-size: 10.5px; color: #9aa5b5; padding: 0 4px; }
.msg-day { align-self: center; font-size: 11px; color: var(--n-400); background: rgba(148,163,184,.14); padding: 3px 12px; border-radius: 999px; }
.msg-sys { align-self: center; max-width: 90%; font-size: 11.5px; color: #7c8798; background: var(--n-100); padding: 6px 12px; border-radius: 10px; line-height: 1.6; text-align: center; }
/* 快捷开场 */
.chat-quick { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 8px; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick button { flex-shrink: 0; border: 1px solid #e6e9f0; background: var(--c-surface); color: #4b5563; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.chat-quick button:hover { border-color: var(--v-300); color: var(--v-600); background: var(--warm-50); }
/* 输入区 */
.chat-input { display: flex; align-items: center; gap: 6px; }
.chat-input input { flex: 1; min-width: 0; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 20px; font-size: 14px; outline: none; background: var(--n-50); font-family: inherit; }
.chat-input input:focus { border-color: var(--brand-4); background: var(--c-surface); }
.chat-input .rec-btn, .chat-input .ce-btn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid #e6e9f0; background: var(--c-surface); font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.chat-input .ce-btn.active { border-color: var(--brand-4); background: var(--v-50); }
.chat-send { width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 12px rgba(16,185,129,.28); }
.chat-send:active { transform: scale(.94); }
.msg .chat-img { max-width: 220px; max-height: 260px; border-radius: 10px; display: block; cursor: pointer; }
.msg.user .chat-img { border: 1px solid rgba(255,255,255,0.35); }
.chat-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.chat-safe-tip {
    margin: 10px 2px 0; font-size: 12px; color: var(--n-500); text-align: center; line-height: 1.6;
    background: var(--n-50); border: 1px dashed var(--n-200); border-radius: 10px; padding: 8px 10px;
}
.btn-voice { width: 100%; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); font-size: 14px; font-weight: 700; }

/* ============================ 会员 ============================ */

/* VIP 会员卡 Hero（对标壹心理/壹点灵实体会员卡质感） */
.vip-card {
    position: relative; overflow: hidden; padding: 22px 20px 18px; border-radius: 22px; color: var(--c-surface); margin-bottom: 18px;
    background:
        radial-gradient(130% 150% at 0% 0%, var(--brand-3) 0%, var(--v-700) 48%, var(--v-900) 100%);
    box-shadow: 0 16px 38px rgba(4,47,34,.34), inset 0 1px 0 rgba(255,255,255,.14);
    border: 1px solid rgba(251,191,36,.28);
}
.vip-card::before {
    content: ''; position: absolute; top: -70px; right: -60px; width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(251,191,36,.40), transparent 64%); pointer-events: none;
}
.vip-card::after {
    content: ''; position: absolute; bottom: -80px; left: -50px; width: 190px; height: 190px;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%); pointer-events: none;
}
.vip-shine {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.20) 48%, transparent 60%);
    transform: translateX(-25%);
}
.vip-top { display: flex; align-items: center; justify-content: space-between; position: relative; }
.vip-brand { display: flex; align-items: center; gap: 8px; }
.vip-logo { font-size: 18px; }
.vip-brand-name { font-size: 13px; font-weight: 700; letter-spacing: .5px; opacity: .96; }
.vip-crown { font-size: 22px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.28)); }
.vip-crown.dim { opacity: .72; }
.vip-member { margin-top: 18px; position: relative; }
.vip-name { font-size: 19px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.18); }
.vip-level { font-size: 13px; opacity: .92; margin-top: 4px; }
.vip-on { background: var(--s-amber-400); color: #78350f; padding: 1px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.vip-no { margin-top: 16px; font-size: 12px; letter-spacing: 2px; opacity: .92; color: var(--s-amber-200); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vip-no b { color: var(--c-surface); font-size: 14px; }
.vip-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 10px; position: relative; }
.vip-expire { font-size: 12px; opacity: .92; }
.vip-tag { font-size: 13px; font-weight: 800; letter-spacing: 2px; border: 1.5px solid rgba(251,191,36,.85); color: var(--s-amber-200); background: rgba(251,191,36,.12); padding: 2px 11px; border-radius: 9px; }
.vip-tag.off { opacity: .7; border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.75); background: transparent; }

/* 会员专属特权图标网格 */
.member-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 8px; }
.perk-cell {
    background: var(--c-surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 6px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
    transition: transform .14s, box-shadow .2s;
}
.perk-cell:active { transform: scale(.96); }
.perk-ico { font-size: 23px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.perk-ico img { width: 26px; height: 26px; object-fit: contain; border-radius: 7px; }
.perk-name { font-size: 11px; color: var(--gray-1); font-weight: 600; line-height: 1.3; }
.perk-cell.locked { opacity: .55; }
.perk-cell.locked .perk-ico { filter: grayscale(1); }

.plan-list { display: flex; flex-direction: column; gap: 14px; }
.plan-card {
    background: var(--c-surface); border-radius: 20px; padding: 20px; border: 1.5px solid var(--line); position: relative; overflow: hidden;
    transition: transform .18s, box-shadow .25s; box-shadow: 0 4px 14px rgba(15,23,42,.05);
}
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15,23,42,.10); }
.plan-bar { position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--purple-1), var(--purple-2)); opacity: .55; }
.plan-card.hot { border-color: var(--purple-2); box-shadow: 0 12px 30px rgba(16,185,129,.18); }
.plan-card.hot .plan-bar { opacity: 1; background: linear-gradient(90deg, var(--s-amber-500), var(--s-amber-600)); }
.plan-card .plan-tag { position: absolute; top: 16px; right: 16px; padding: 3px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--n-100); color: var(--gray-1); z-index: 1; }
.plan-card.hot .plan-tag { background: linear-gradient(135deg, var(--s-amber-500), var(--s-amber-600)); color: var(--c-surface); }
.plan-head { display: flex; align-items: center; gap: 12px; }
.plan-ico {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--v-100), var(--v-200));
}
.plan-card.hot .plan-ico { background: linear-gradient(135deg, var(--s-amber-100), var(--s-amber-200)); }
.plan-head-txt { min-width: 0; }
.plan-name { font-size: 18px; font-weight: 800; color: var(--ink); }
.plan-desc { font-size: 12px; color: var(--gray-2); margin-top: 3px; line-height: 1.45; }
.plan-price { margin: 14px 0 6px; }
.plan-price .cur { font-size: 16px; color: var(--brand-rose); font-weight: 700; }
.plan-price .num { font-size: 36px; color: var(--brand-rose); font-weight: 800; }
.plan-price .unit { font-size: 13px; color: var(--gray-2); }
.plan-features { margin: 12px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.plan-features li { list-style: none; font-size: 13px; color: var(--gray-1); display: flex; align-items: flex-start; gap: 7px; line-height: 1.4; }
.plan-features li::before { content: '✓'; color: var(--green); font-weight: 800; flex-shrink: 0; }
.plan-buy { width: 100%; padding: 13px; border-radius: 13px; font-size: 15px; font-weight: 700; color: var(--c-surface); background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); transition: transform .14s, box-shadow .2s; }
.plan-buy:active { transform: scale(.97); }
.plan-card.hot .plan-buy { background: linear-gradient(135deg, var(--s-amber-500), var(--s-amber-600)); box-shadow: 0 8px 20px rgba(217,119,6,.3); }
.member-foot { text-align: center; color: var(--gray-3); font-size: 12px; margin-top: 16px; }

/* 会员中心 · 更多服务折叠分组（咨询 / 倾诉 / 陪护，非会员核心转化，默认收起） */
.more-services { margin-top: 22px; border-top: 1px solid var(--n-200); padding-top: 16px; }
.more-services-title {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
    font-size: 14px; font-weight: 800; color: var(--n-700); margin: 0 0 4px; user-select: none;
}
.more-services-title .ms-count {
    margin-left: 4px; padding: 1px 7px; border-radius: 999px;
    font-size: 11px; font-weight: 700; color: var(--brand-2);
    background: var(--brand-purple-soft); border: 1px solid var(--brand-5);
}
.more-services-title::after { content: '展开 ›'; font-size: 12px; font-weight: 600; color: var(--n-400); }
.more-services.open .more-services-title::after { content: '收起 ⌃'; }
.more-services-body { display: none; }
.more-services.open .more-services-body { display: block; }

/* 我的分层（个人 / 夫妻情感 / 亲子 / 企业） */
.member-tier-box { margin-bottom: 16px; container-type: inline-size; container-name: tierbox; }
.mt-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--c-surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.mt-badge { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--c-surface); white-space: nowrap; }
.mt-badge.scene-individual { background: linear-gradient(135deg, var(--indigo-500), var(--s-indigo-600)); }
.mt-badge.scene-couple { background: linear-gradient(135deg, #ec4899, #db2777); }
.mt-badge.scene-parent_child { background: linear-gradient(135deg, var(--c-mint), var(--s-emerald-600)); }
.mt-badge.scene-enterprise { background: linear-gradient(135deg, var(--s-amber-500), var(--s-amber-600)); }
.mt-desc { font-size: 12.5px; color: var(--gray-2); line-height: 1.55; flex: 1; min-width: 200px; }
.mt-sec { background: var(--c-surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-top: 12px; }
.mt-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mt-sec-head b { font-size: 14.5px; color: var(--ink); }
.mt-muted { font-size: 12px; color: var(--gray-3); }
.mt-add { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--v-200); background: var(--v-50); color: var(--purple-2); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mt-add:active { transform: scale(.97); }
.mt-arch-list { display: flex; flex-direction: column; gap: 8px; }
.mt-arch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--warm-50); }
.mt-arch-info { font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.mt-arch-type { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--v-100); color: var(--purple-2); }
.mt-read { padding: 7px 13px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mt-read:active { transform: scale(.97); }
.mt-empty { font-size: 12.5px; color: var(--gray-3); line-height: 1.6; padding: 8px 2px; }
.mt-board p { font-size: 13px; color: var(--gray-1); margin: 0 0 8px; }
.mt-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 6px 0; }
.mt-bar > span { width: 64px; color: var(--gray-2); }
.mt-bar > i { flex: 1; height: 9px; background: var(--s-indigo-50); border-radius: 999px; background-image: linear-gradient(90deg, var(--brand-1), #38bdf8); background-repeat: no-repeat; background-size: 0% 100%; }
.mt-bar > b { width: 30px; text-align: right; color: var(--ink); }
.mt-bars { margin: 6px 0 10px; }
.mt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.mt-tag { font-size: 12px; padding: 4px 11px; border-radius: 999px; }
.mt-tag.top { border: 1px solid var(--s-green-200); color: var(--s-green-800); background: var(--v-25); }
.mt-tag.weak { border: 1px solid var(--s-red-200); color: var(--s-red-800); background: var(--s-red-50); }
.mt-privacy { font-size: 11px; color: var(--gray-3); margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.mt-rel-tip { font-size: 12px; color: var(--gray-2); line-height: 1.6; margin-bottom: 8px; }
.submit.ghost { background: var(--v-50); color: var(--purple-2); border: 1.5px solid var(--v-200); }
/* 套餐场景标识 */
.plan-scene { position: absolute; top: 16px; right: 86px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; z-index: 1; color: var(--c-surface); }
.plan-scene.scene-couple { background: linear-gradient(135deg, #ec4899, #db2777); }
.plan-scene.scene-parent_child { background: linear-gradient(135deg, var(--c-mint), var(--s-emerald-600)); }
.plan-scene.scene-enterprise { background: linear-gradient(135deg, var(--s-amber-500), var(--s-amber-600)); }
.plan-seats { font-size: 12px; color: var(--gray-2); margin-left: 6px; }

/* 兑换码 */
.redeem-box { background: var(--c-surface); border-radius: 16px; padding: 16px; border: 1px dashed var(--purple); margin-top: 16px; }
.redeem-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.redeem-row { display: flex; gap: 10px; }
.redeem-input { flex: 1; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 14px; outline: none; }
.redeem-input:focus { border-color: var(--purple); }
.redeem-btn { padding: 11px 18px; border-radius: 10px; background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); font-weight: 700; font-size: 14px; }

/* ============================ 我的 ============================ */

.profile-card {
    position: relative; overflow: hidden; color: var(--c-surface);
    background: linear-gradient(135deg, var(--indigo-400) 0%, var(--v-600) 55%, var(--brand-3) 100%);
    border-radius: 18px; padding: 20px 18px 0; margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(16,185,129,.28);
}
.profile-card::before {
    content: ''; position: absolute; top: -50px; right: -40px; width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); pointer-events: none;
}
.profile-top { display: flex; align-items: center; gap: 14px; position: relative; }
.profile-avatar {
    width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.6);
    box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 8px 18px rgba(0,0,0,.18);
    display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-size: 20px; font-weight: 800; color: var(--c-surface); letter-spacing: .3px; }
.profile-phone { font-size: 12px; color: rgba(255,255,255,.8); margin-top: 4px; }
.profile-member { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.22); color: var(--c-surface); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.profile-member.vip { background: linear-gradient(135deg, var(--s-amber-400), var(--s-amber-500)); color: #78350f; box-shadow: 0 4px 12px rgba(245,158,11,.4); }
.profile-card .btn-ghost { width: auto; padding: 7px 13px; font-size: 12px; color: var(--c-surface); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 16px; }
.profile-card .btn-ghost:active { transform: scale(.96); }
.profile-stats {
    position: relative; display: flex; margin-top: 18px;
    background: rgba(255,255,255,.12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border-radius: 14px; padding: 14px 4px 16px;
}
.ps-item { flex: 1; text-align: center; cursor: pointer; border-radius: 8px; transition: transform .12s; position: relative; }
.ps-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 18%; height: 64%; width: 1px; background: rgba(255,255,255,.18); }
.ps-item:active { transform: scale(.94); }
.ps-item b { display: block; font-size: 20px; font-weight: 800; color: var(--c-surface); }
.ps-item span { font-size: 11px; color: rgba(255,255,255,.74); margin-top: 2px; display: block; }

.record-list { display: flex; flex-direction: column; gap: 12px; }
.record-item {
    position: relative; background: var(--c-surface); border-radius: 16px; padding: 14px 14px 14px 12px;
    border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; cursor: pointer;
    transition: transform .14s, box-shadow .18s, border-color .18s; overflow: hidden;
}
.record-item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--purple), var(--purple-2)); opacity: 0; transition: opacity .18s;
}
.record-item:active { transform: scale(.99); }
.record-item:active::before { opacity: 1; }
.record-item:hover { box-shadow: 0 10px 26px rgba(15,23,42,.08); border-color: var(--v-200); }
.record-badge {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px;
    display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1;
    box-shadow: 0 6px 14px rgba(16,185,129,.18);
}
.record-body { flex: 1; min-width: 0; }
.record-summary {
    font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.record-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.record-type {
    font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; letter-spacing: .2px;
}
.record-time { font-size: 11.5px; color: var(--gray-3); }
.record-arrow { color: var(--gray-3); font-size: 19px; margin-left: 4px; flex-shrink: 0; }

/* 测评记录分页器（对标大平台） */
.record-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.rp-btn {
    padding: 7px 14px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--c-surface);
    font-size: 13px; font-weight: 600; color: var(--gray-1); cursor: pointer; transition: .15s;
}
.rp-btn:active { transform: scale(.96); }
.rp-btn:disabled { opacity: .4; cursor: not-allowed; }
.rp-nums { display: flex; align-items: center; gap: 4px; }
.rp-num {
    min-width: 32px; height: 32px; padding: 0 6px; border-radius: 10px; border: none; background: transparent;
    font-size: 13px; font-weight: 600; color: var(--gray-2); cursor: pointer; transition: .15s;
}
.rp-num:active { transform: scale(.94); }
.rp-num.active { background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); box-shadow: 0 5px 14px rgba(16,185,129,.28); }
.rp-ellipsis { color: var(--gray-3); padding: 0 2px; font-size: 13px; }

.empty-tip { text-align: center; color: var(--gray-3); padding: 40px 0; font-size: 14px; }

.logout-btn { width: 100%; margin-top: 20px; padding: 13px; border-radius: 12px; background: var(--n-100); color: var(--brand-rose); font-size: 15px; font-weight: 600; }

/* ============================ 记录详情 ============================ */

.record-detail .rd-summary { padding: 14px; border-radius: 12px; background: var(--v-50); border: 1px solid rgba(16,185,129,.2); font-size: 13px; line-height: 1.7; color: var(--v-900); margin-bottom: 14px; }
.rd-section { font-size: 14px; font-weight: 700; margin: 14px 0 10px; }
.rd-rows { display: flex; flex-direction: column; gap: 8px; }
.rd-row { display: flex; gap: 6px; }
.rd-slot { flex: 1; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--c-surface); border: 1.5px solid var(--line); position: relative; overflow: hidden; }
.rd-slot::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.rd-cat-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--v-600); background: var(--brand-purple-soft); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; }
.rd-combo { font-size: 13px; line-height: 1.7; color: var(--v-900); background: var(--v-50); border: 1px solid rgba(16,185,129,.16); border-radius: 10px; padding: 10px 12px; }

/* ============================ 资料编辑 / 语音预约 ============================ */

.f-label { display: block; font-size: 13px; color: var(--gray-2); margin-bottom: 6px; font-weight: 600; }
.modal-card input:not([type="checkbox"]):not([type="radio"]), .modal-card select, .modal-card textarea {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 11px;
    font-size: 15px; outline: none; background: var(--n-50); font-family: inherit;
}
.modal-card input:not([type="checkbox"]):not([type="radio"]):focus, .modal-card select:focus, .modal-card textarea:focus { border-color: var(--purple-2); background: var(--c-surface); }

.avatar-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.avatar-opt {
    width: 48px; height: 48px; border-radius: 50%; background: var(--n-100); border: 2px solid transparent;
    display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; transition: .15s;
}
.avatar-opt.selected { border-color: var(--purple-2); background: var(--v-100); }

.voice-consultant { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--v-50); margin-bottom: 16px; }
.voice-consultant .consultant-avatar { width: 46px; height: 46px; font-size: 24px; }
.vc-name { font-size: 15px; font-weight: 800; }
.vc-meta { font-size: 12px; color: var(--gray-2); margin-top: 2px; }
.vc-price { font-size: 14px; color: var(--brand-rose); font-weight: 800; margin-top: 3px; }

.voice-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vslot { padding: 10px; border-radius: 10px; border: 1.5px solid var(--line); text-align: center; font-size: 13px; cursor: pointer; color: var(--gray-1); transition: .15s; background: var(--c-surface); }
.vslot.selected { border-color: var(--purple-2); background: var(--v-100); color: var(--purple-2); font-weight: 700; }

/* ============================ Toast ============================ */

.toast {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-20px);
    background: linear-gradient(135deg, #0b4a36, var(--v-900)); color: var(--brand-purple-soft); padding: 12px 20px; border-radius: 12px;
    border: 1px solid rgba(52, 211, 153, .35); box-shadow: 0 8px 24px rgba(6, 78, 59, .35);
    font-size: 14px; z-index: 300; opacity: 0; pointer-events: none; transition: .3s; max-width: 85%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================ 响应式 ============================ */

@media (max-width: 375px) {
    .card-grid { grid-template-columns: repeat(5, 1fr); }
    .card { font-size: 11px; }
}
@media (max-width: 330px) {
    .card-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ============ 分类二级列表 / 筛选页 ============ */
.modal-card.cat-modal {
  max-width: 480px; max-height: 92vh; display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.cat-head-bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 16px 12px; margin: 0; background: var(--c-surface); border-bottom: 1px solid var(--line);
}
.cat-head { flex: 1; min-width: 0; }
.cat-title { font-size: 17px; font-weight: 800; color: var(--gray-1); }
.cat-sub { font-size: 12px; color: var(--gray-2); margin-top: 2px; }
.cat-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; -webkit-overflow-scrolling: touch; }
.cat-loading { text-align: center; color: var(--gray-2); padding: 40px 0; }
.cat-filter { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cat-filter-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.cat-news-item {
  background: var(--c-surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04); cursor: pointer;
}
.cat-news-title { font-size: 15px; font-weight: 700; color: var(--gray-1); }
.cat-news-sub { font-size: 13px; color: var(--gray-2); margin-top: 4px; line-height: 1.6; }
.cat-news-go { font-size: 12px; color: var(--purple-2); margin-top: 8px; font-weight: 600; }

/* ============================ 咨询转化（测评→匹配→套餐→评价） ============================ */

/* 测评结果 → 智能推荐 */
.match-box { margin-top: 14px; }
.match-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.match-list { display: flex; flex-direction: column; gap: 10px; }
.match-item {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px;
    background: var(--c-surface); border: 1.5px solid var(--v-100); cursor: pointer; transition: .15s;
}
.match-item:hover { border-color: var(--v-400); box-shadow: 0 4px 14px rgba(4,47,34,.08); }
.match-item:active { transform: scale(.99); }
.match-avatar { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: linear-gradient(135deg, var(--v-100), var(--v-200)); flex-shrink: 0; overflow: hidden; }
.match-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: inherit; }
.match-main { flex: 1; min-width: 0; }
.match-name { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.match-special { font-size: 12px; color: var(--gray-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-meta { font-size: 11px; color: var(--gray-2); margin-top: 3px; }
.match-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 2px; white-space: nowrap; }
.match-badge.hot { color: var(--s-amber-700); background: var(--s-amber-100); border: 1px solid var(--s-amber-200); }
.match-badge.low { color: var(--n-500); background: var(--n-100); border: 1px solid var(--n-200); }
.match-badge { color: var(--v-700); background: var(--brand-purple-soft); border: 1px solid var(--brand-5); }
.match-btn { flex-shrink: 0; padding: 7px 14px; border-radius: 18px; background: linear-gradient(135deg, var(--v-500), var(--v-600)); color: var(--c-surface); font-size: 12px; font-weight: 700; }

/* ============ 个性化课程推荐（卡牌结果 → 线上/线下课程） ============ */
.course-rec-box { margin-top: 4px; }
.course-rec-list { display: flex; flex-direction: column; gap: 16px; }
.course-rec-sec-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.course-rec-sec-h b { font-size: 15px; font-weight: 800; color: var(--ink); }
.course-rec-sec-h span { font-size: 12px; color: var(--gray-2); }
.course-rec-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.course-rec-card {
    position: relative; display: flex; gap: 12px; padding: 14px 14px 12px; border-radius: 16px;
    background: var(--c-surface); border: 1.5px solid var(--line); cursor: pointer; overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.course-rec-card:active { transform: scale(.985); }
.course-rec-card.offline {
    border-color: rgba(16, 185, 129, .32);
    background: linear-gradient(135deg, var(--brand-purple-soft) 0%, var(--c-surface) 60%);
}
.course-rec-level {
    position: absolute; top: 0; right: 0; padding: 4px 12px; border-radius: 0 0 0 12px;
    font-size: 11px; font-weight: 800; color: var(--c-surface); letter-spacing: .5px;
    background: linear-gradient(135deg, var(--s-amber-500), var(--s-amber-600));
    box-shadow: 0 2px 6px rgba(217, 119, 6, .28);
}
.course-rec-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.course-rec-name { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.4; padding-right: 46px; }
.course-rec-sub { font-size: 12px; color: var(--gray-2); line-height: 1.55; }
.course-rec-aud { font-size: 11px; color: var(--v-600); font-weight: 600; }
.course-rec-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.course-rec-price { font-size: 16px; font-weight: 800; color: var(--brand-rose); }
.course-rec-free { font-size: 13px; font-weight: 700; color: var(--v-600); }
.course-rec-btn {
    padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--c-surface);
    background: linear-gradient(135deg, var(--indigo-400), var(--v-600));
    box-shadow: 0 3px 8px rgba(5, 150, 105, .22);
}

/* 咨询师详情：评价 */
.consultant-reviews { margin-bottom: 12px; }
.cr-title { font-size: 13px; font-weight: 700; color: var(--gray-1); margin-bottom: 8px; }
.cr-item { padding: 10px 12px; border-radius: 12px; background: var(--n-50); margin-bottom: 8px; }
.cr-head { display: flex; align-items: center; justify-content: space-between; }
.cr-name { font-size: 12px; color: var(--gray-2); font-weight: 600; }
.cr-stars { color: var(--s-amber-500); font-size: 13px; letter-spacing: 1px; }
.cr-content { font-size: 13px; color: var(--gray-1); margin-top: 5px; line-height: 1.6; }

/* 咨询师详情：套餐 */
.consultant-packages { margin-bottom: 12px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-purple-soft), var(--v-100)); }
.cp-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.cp-list { display: flex; flex-direction: column; gap: 8px; }
.cp-item { display: flex; align-items: center; justify-content: space-between; background: var(--c-surface); border-radius: 12px; padding: 12px; }
.cp-name { font-size: 14px; font-weight: 700; }
.cp-price { font-size: 15px; font-weight: 800; color: var(--brand-rose); }
.cp-per { font-size: 11px; color: var(--gray-2); font-weight: 400; }
.cp-buy { padding: 7px 16px; border-radius: 18px; background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); font-size: 13px; font-weight: 700; }
.cp-tip { font-size: 11px; color: var(--gray-2); margin-top: 10px; }
/* 套餐详情行（倾诉套餐：名称/说明/到账权益 + 右侧价格/购买） */
.cp-main { flex: 1; min-width: 0; }
.cp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; margin-left: 10px; }
.cp-desc { font-size: 11.5px; color: var(--gray-2); margin-top: 2px; line-height: 1.5; }
.cp-benefit { font-size: 11.5px; color: var(--v-700); margin-top: 4px; font-weight: 600; }
.cp-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; background: var(--n-100); color: var(--gray-2); border: 1px solid var(--line);
}
.cp-tag.hot { background: linear-gradient(135deg, #fff1f2, #ffe4e6); color: var(--s-red-600); border-color: #fecaca; }

/* 注意力引导：滚动到位后高亮闪动（计费确认区 / 套餐区） */
.flash-hint { animation: flashHint 1.6s ease-out; }
@keyframes flashHint {
  0%, 100% { box-shadow: none; }
  15%, 55% { box-shadow: 0 0 0 3px rgba(16,185,129,.35), 0 8px 30px -10px rgba(16,185,129,.45); }
  35%, 75% { box-shadow: 0 0 0 1px rgba(16,185,129,.15); }
}

/* 倾诉聊天顶栏 · 结束按钮 */
.im-end-btn {
  padding: 5px 12px; border-radius: 2px; border: 1px solid #fecaca; cursor: pointer;
  background: #fff1f2; color: var(--s-red-600, #dc2626); font-size: 12px; font-weight: 700;
  white-space: nowrap; transition: .15s;
}
.im-end-btn:hover { background: #fee2e2; }

/* 评价弹窗 · 本次账单摘要 */
.lr-bill {
  margin: 12px 0 2px; padding: 12px 14px; border-radius: 2px;
  background: #f8fafc; border: 1px solid var(--n-100);
  display: flex; flex-direction: column; gap: 7px;
}
.lr-bill .lrb-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.lr-bill .lrb-row span { color: var(--n-500); }
.lr-bill .lrb-row b { color: var(--n-800); font-weight: 700; }

/* 开始前确认 · 次级按钮行 */
.ls-actions-col { flex-direction: column; }
.ls-actions-col .btn-primary { width: 100%; }
.ls-confirm-sub { display: flex; gap: 10px; }
.ls-confirm-sub .btn-ghost { flex: 1; }

/* 开始咨询按钮区 */
.consult-start-area { margin-top: 6px; }

/* 聊天区 */
.chat-area { display: flex; flex-direction: column; }
.btn-finish { width: 100%; padding: 12px; border-radius: 12px; background: var(--c-surface); border: 1.5px solid var(--line); color: var(--gray-1); font-size: 14px; font-weight: 600; }

/* 评价弹窗 */
.review-ci { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.review-ci .consultant-avatar { width: 44px; height: 44px; font-size: 24px; }
.review-stars { display: flex; justify-content: center; gap: 8px; margin: 8px 0 16px; }
.review-stars span { font-size: 34px; color: var(--n-200); cursor: pointer; transition: .1s; }
.review-stars span.active { color: var(--s-amber-500); }

/* 咨询师大厅筛选 */
.consult-search { margin-bottom: 10px; }
.consult-search-input { width: 100%; padding: 11px 16px; border: 1.5px solid var(--line); border-radius: 22px; font-size: 14px; background: var(--c-surface); outline: none; }
.consult-search-input:focus { border-color: var(--purple-2); }
.consult-filter-row { margin-bottom: 8px; }
.specialty-filter { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; }
/* 空筛选容器不占位：chips 未就绪时不再撑出大段空白（对非空状态零影响） */
.specialty-filter:empty { padding: 0; }
.consult-filter-row:has(.specialty-filter:empty) { margin-bottom: 0; }
.spec-chip { flex-shrink: 0; padding: 6px 13px; border-radius: 18px; background: var(--c-surface); border: 1.5px solid var(--line); color: var(--gray-1); font-size: 12px; font-weight: 600; white-space: nowrap; }
.spec-chip.active { background: var(--v-100); border-color: var(--purple-2); color: var(--purple-2); }
.consult-sort-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sort-filter { display: flex; gap: 6px; }
.sort-chip { padding: 5px 11px; border-radius: 15px; background: var(--n-100); color: var(--gray-2); font-size: 12px; font-weight: 600; }
.sort-chip.active { background: var(--purple-2); color: var(--c-surface); }
.online-filter { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gray-2); cursor: pointer; }
.online-filter input { accent-color: var(--purple-2); }

/* 会员页咨询套餐 */
.consult-package-section { margin-top: 22px; }
.consult-package-sub { font-size: 12px; color: var(--gray-2); margin: -4px 4px 12px; }
/* 倾诉套餐 + 心力陪护 卡片（.mc-lpkgs / .mc-lpkg / care） */
.mc-lpkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mc-lpkg { position: relative; display: flex; flex-direction: column; padding: 16px 14px; border-radius: 16px; background: var(--c-surface); border: 1.5px solid var(--line); }
.mc-lpkg.rec { border-color: var(--purple-2); background: linear-gradient(180deg, #faf7ff, var(--c-surface)); }
.mc-plan-flag { position: absolute; top: -1px; right: 12px; padding: 2px 10px; border-radius: 0 0 10px 10px; font-size: 11px; font-weight: 800; color: var(--c-surface); background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); }
.mc-lpkg-name { font-size: 15px; font-weight: 800; color: var(--ink); }
.mc-lpkg-price { margin: 8px 0 4px; color: var(--ink); }
.mc-lpkg-price b { font-size: 24px; color: var(--v-600); }
.mc-lpkg-price s { font-size: 12px; color: var(--gray-2); margin-left: 6px; font-weight: 400; }
.mc-lpkg-get { font-size: 12px; color: var(--gray-1); line-height: 1.6; }
.mc-lpkg-desc { font-size: 11.5px; color: var(--gray-2); margin-top: 8px; line-height: 1.55; flex: 1; }
.mc-lpkg-buy { margin-top: 12px; padding: 9px; border: none; border-radius: 12px; font-size: 13px; font-weight: 800; color: var(--c-surface); background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); cursor: pointer; }
.mc-empty { padding: 20px; text-align: center; color: var(--gray-2); font-size: 13px; }
/* 心力陪护专属 */
.care-audience-tabs { display: flex; gap: 8px; margin: 0 4px 14px; }
.care-tab { flex: 1; padding: 9px 6px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--c-surface); font-size: 13px; font-weight: 700; color: var(--gray-1); cursor: pointer; }
.care-tab.active { border-color: var(--v-600); background: var(--brand-purple-soft); color: var(--v-600); }
.care-pkg-tag { position: absolute; top: 10px; left: 14px; padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; background: var(--v-100); color: var(--purple-2); }
.care-pkg .mc-lpkg-name { margin-top: 20px; }
.care-pkg-slogan { font-size: 11px; color: var(--purple-2); margin-top: 4px; }
.care-pkg-period { font-size: 12px; color: var(--gray-2); margin-left: 4px; }
.care-pkg-feats { list-style: none; margin: 10px 0 0; padding: 0; flex: 1; }
.care-pkg-feats li { font-size: 12px; color: var(--gray-1); line-height: 1.8; padding-left: 14px; position: relative; }
.care-pkg-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--v-600); font-weight: 700; }
@media (max-width: 720px) { .mc-lpkgs { grid-template-columns: 1fr; } }

/* ============ 会员中心 · 三档横条选择列表（mc-opt，Apple 订阅页同款） ============ */
/* 480px 容器主形态：每档独占一整行，图标/名称/简介/价格/选中钮各得其所 */
.mc-opts { display: flex; flex-direction: column; gap: 10px; }
.mc-opt {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 13px 14px; text-align: left; font-family: inherit;
  background: var(--c-surface); border: 1.5px solid var(--line); border-radius: 17px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.mc-opt:hover { border-color: var(--a35, var(--line)); box-shadow: 0 6px 18px var(--a14, rgba(15, 23, 42, .08)); transform: translateY(-1px); }
.mc-opt.on {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--a08, var(--c-surface)) 0%, var(--c-surface) 70%);
  box-shadow: 0 8px 22px var(--a14, rgba(15, 23, 42, .10)), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.mc-opt-ico { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 22px; border-radius: 13px; background: linear-gradient(160deg, var(--c-surface) 0%, var(--a14, var(--n-100)) 140%); border: 1px solid var(--a22, var(--line)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 8px var(--a14, rgba(15, 23, 42, .08)); }
.mc-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mc-opt-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.mc-opt.on .mc-opt-name { color: var(--accent); }
.mc-opt-owned { flex: none; font-style: normal; font-size: 9.5px; font-weight: 800; padding: 1.5px 7px; border-radius: 999px; color: var(--brand-2); background: var(--brand-purple-soft); border: 1px solid var(--brand-5); }
.mc-opt-sub { font-size: 11.5px; color: var(--gray-2); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-opt-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mc-opt-price { font-size: 16px; font-weight: 900; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1; }
.mc-opt-price em { font-style: normal; font-size: 11.5px; font-weight: 800; margin-right: 1px; }
.mc-opt-price i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--gray-2); margin-left: 2px; }
.mc-opt-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--c-surface); display: flex; align-items: center; justify-content: center; transition: border-color .18s ease, background .18s ease; }
.mc-opt.on .mc-opt-radio { border-color: var(--accent); background: var(--accent); box-shadow: 0 3px 8px var(--a35, rgba(15, 23, 42, .18)); }
.mc-opt.on .mc-opt-radio::after { content: '✓'; font-size: 11px; font-weight: 900; color: var(--c-surface); line-height: 1; }

/* ============ 激活中心（全站激活入口统一收口） ============ */
#page-activation .act-hero {
  position: relative; overflow: hidden; text-align: center; color: var(--c-surface);
  padding: 30px 20px 26px; border-radius: 22px; margin-bottom: 14px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #4338ca 100%);
  box-shadow: 0 16px 38px rgba(67, 56, 202, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
  animation: mcRise .55s cubic-bezier(.22, .61, .36, 1) both;
}
#page-activation .act-hero::before { content: ''; position: absolute; top: -70px; right: -60px; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); pointer-events: none; }
#page-activation .act-hero::after { content: ''; position: absolute; bottom: -70px; left: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 60%); pointer-events: none; }
.act-hero-ico { position: relative; font-size: 42px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .22)); }
.act-hero-name { position: relative; font-size: 21px; font-weight: 900; letter-spacing: 2px; margin-top: 8px; }
.act-hero-sub { position: relative; font-size: 12.5px; opacity: .92; margin-top: 5px; }
.redeem-box.act-box { margin-top: 0; border-style: solid; border-color: var(--line); border-radius: 18px; padding: 18px 16px; box-shadow: 0 8px 22px rgba(15, 23, 42, .05); animation: mcRise .55s cubic-bezier(.22, .61, .36, 1) .08s both; }
.act-box .redeem-input { border-radius: 12px; letter-spacing: .5px; }
.act-box .redeem-btn { border-radius: 12px; box-shadow: 0 6px 16px rgba(79, 70, 229, .28); transition: filter .15s ease, transform .15s ease; }
.act-box .redeem-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.act-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.act-chip { font-size: 11.5px; font-weight: 700; color: var(--gray-1); background: var(--n-50, var(--n-50)); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.act-sec { margin-top: 14px; padding: 16px 18px; background: var(--c-surface); border: 1.5px solid var(--line); border-radius: 18px; animation: mcRise .55s cubic-bezier(.22, .61, .36, 1) .16s both; }
.act-sec-title { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.act-sec .redeem-tips { margin: 0; }
.redeem-tips { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.redeem-tips li { position: relative; padding-left: 16px; font-size: 12px; color: var(--gray-2); line-height: 1.7; }
.redeem-tips li::before { content: '·'; position: absolute; left: 4px; color: var(--v-600); font-weight: 900; }
.act-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; animation: mcRise .55s cubic-bezier(.22, .61, .36, 1) .24s both; }
.act-go { padding: 13px 10px; border: 1.5px solid var(--line); border-radius: 15px; background: var(--c-surface); font-family: inherit; font-size: 13px; font-weight: 800; color: var(--ink); cursor: pointer; transition: transform .16s ease, box-shadow .2s ease, border-color .16s ease; }
.act-go:hover { transform: translateY(-2px); border-color: var(--a35, var(--line)); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }

/* ============ 会员中心 · 整页丝滑动效（纯展示层，不影响接口） ============ */
/* 进入页面：各区块自上而下分层浮入，营造高级入场感 */
#page-membership .vip-card { animation: mcRise .55s cubic-bezier(.22, .61, .36, 1) both; }
#page-membership .member-perks { animation: mcRise .55s cubic-bezier(.22, .61, .36, 1) .07s both; }
#page-membership .member-tier-box { animation: mcRise .55s cubic-bezier(.22, .61, .36, 1) .14s both; }
#page-membership .redeem-box { animation: mcRise .55s cubic-bezier(.22, .61, .36, 1) .28s both; }
#page-membership .member-foot { animation: mcRise .55s cubic-bezier(.22, .61, .36, 1) .34s both; }
@keyframes mcRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* 会员身份卡：光泽一次性扫过，提升质感 */
.vip-shine { animation: mcShine 1.7s ease .35s both; }
@keyframes mcShine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
/* 切档时：详情卡与周期卡淡入上移，避免生硬整体替换闪烁 */
.mc-detail { animation: mcFade .38s ease both; }
.mc-plan { animation: mcFade .4s ease both; }
@keyframes mcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 权益宫格 hover 轻抬 + 阴影，增强可点感 */
.perk-cell { transition: transform .16s ease, box-shadow .2s ease; }
.perk-cell:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
/* 键盘可达：三档行 / 周期卡 / CTA 聚焦描边 */
.mc-opt:focus-visible, .mc-plan:focus-visible, .mc-detail-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 推荐周期卡：左侧品牌色竖条强化「最超值」识别 */
.mc-plan.rec::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 4px; background: var(--accent); }

/* ============ 会员中心 · 三档分段选择器（mc-seg，备用形态，当前未启用） ============ */
/* 480px 窄容器主形态：三段 Tab 切换 + 下方详情展开，不依赖媒体/容器查询 */
.mc-seg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mc-seg {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 12px 12px; text-align: left; font-family: inherit;
  background: var(--c-surface); border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.mc-seg:hover { border-color: var(--a35, var(--line)); box-shadow: 0 6px 16px var(--a14, rgba(15, 23, 42, .08)); transform: translateY(-1px); }
.mc-seg.on {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--a08, var(--c-surface)) 0%, var(--c-surface) 60%);
  box-shadow: 0 8px 20px var(--a14, rgba(15, 23, 42, .10)), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.mc-seg.on::after { content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 38px; height: 3px; border-radius: 3px; background: var(--accent); }
.mc-seg-ico { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 12px; background: linear-gradient(160deg, var(--c-surface) 0%, var(--a14, var(--n-100)) 140%); border: 1px solid var(--a22, var(--line)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 8px var(--a14, rgba(15, 23, 42, .08)); }
.mc-seg.on .mc-seg-ico { border-color: var(--a35, var(--line)); }
.mc-seg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-seg-name { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.mc-seg.on .mc-seg-name { color: var(--accent); }
.mc-seg-owned { flex: none; font-style: normal; font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; color: var(--accent); background: var(--a14, var(--brand-purple-soft)); border: 1px solid var(--a22, transparent); }
.mc-seg-sub { font-size: 10.5px; color: var(--gray-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mc-seg.on .mc-seg-sub { color: var(--gray-1); font-weight: 600; }

/* ============ 会员中心 · 三档会员卡（mc-tier，备用形态，当前未启用） ============ */
/* 二轮升级（参考 Apple One / 壹心理会员卡）：圆角白卡 + 双层柔影 + 品牌色光斑营造立体层次；
   状态角标独立绝对定位右上（不再挤压标题）；图标徽章化带内高光；价格底纹强调区；权益圆形徽章 */
/* 列数随容器宽度切换（不是视口！.app 固定 480px，媒体查询在电脑上永不触发）：
   默认单列大卡（480 容器下的主形态），容器 ≥640px 才升三列 */
.mc-tier-row { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
@container tierbox (min-width: 640px) {
  .mc-tier-row { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .mc-tier { padding: 24px 18px 10px; }
  .mc-tier-tagline { min-height: 41px; -webkit-line-clamp: 2; }
  .mc-tier-feats { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
}
.mc-tier {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch;
  padding: 26px 20px 10px; text-align: left; font-family: inherit;
  background: var(--c-surface); border: 1.5px solid var(--line); border-radius: 22px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* 右上品牌色光斑 + 左下弱光斑：立体层次感 */
.mc-tier::before { content: ''; position: absolute; top: -52px; right: -52px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, var(--a14, transparent) 0%, transparent 68%); pointer-events: none; }
.mc-tier::after { content: ''; position: absolute; bottom: -64px; left: -42px; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, var(--a08, transparent) 0%, transparent 70%); pointer-events: none; }
.mc-tier:hover { transform: translateY(-4px); border-color: var(--a35, var(--line)); box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 20px 44px rgba(15, 23, 42, .10); }
.mc-tier.on {
  border-color: var(--accent); transform: translateY(-2px);
  background: linear-gradient(180deg, var(--a08, var(--c-surface)) 0%, var(--c-surface) 46%);
  box-shadow: 0 2px 5px rgba(15, 23, 42, .05), 0 16px 38px var(--a22, rgba(15, 23, 42, .12)), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.mc-tier-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.mc-tier-flag { position: absolute; top: 16px; right: 14px; z-index: 2; font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: .5px; color: var(--gray-1); background: var(--n-50, var(--n-50)); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(15, 23, 42, .06); }
.mc-tier-flag.is-owned { color: var(--accent); background: var(--c-surface); border-color: var(--a35, var(--line)); }
.mc-tier-head { display: flex; align-items: center; gap: 11px; min-width: 0; margin-bottom: 14px; }
.mc-tier-ico {
  flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; border-radius: 15px;
  background: linear-gradient(160deg, var(--c-surface) 0%, var(--a14, var(--n-100)) 140%);
  border: 1px solid var(--a22, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 10px var(--a14, rgba(15, 23, 42, .08));
}
.mc-tier-name { font-size: 17.5px; font-weight: 900; color: var(--ink); letter-spacing: .5px; white-space: nowrap; }
.mc-tier-body { display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; }
.mc-tier-tagline { font-size: 12px; line-height: 1.7; color: var(--gray-1); min-height: 61px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mc-tier-price { display: inline-flex; align-self: flex-start; align-items: baseline; gap: 4px; margin: 12px 0 14px; padding: 9px 14px; border-radius: 14px; background: linear-gradient(180deg, var(--a08, var(--n-50)) 0%, transparent 160%); border: 1px solid var(--a14, var(--line)); white-space: nowrap; }
.mc-tier-price em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--accent); }
.mc-tier-price b { font-size: 27px; font-weight: 900; letter-spacing: -.5px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.mc-tier-price i { font-style: normal; font-size: 11.5px; color: var(--gray-2); margin-left: 2px; }
.mc-tier-feats { display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px 16px; margin: 0 0 14px; }
.mc-feat { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.5; color: var(--gray-1); white-space: nowrap; }
.mc-feat i { flex: none; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 10px; color: var(--accent); background: var(--a14, var(--brand-purple-soft)); border-radius: 50%; }
.mc-tier-foot { margin-top: auto; padding: 11px 0; border-top: 1px dashed var(--line); font-size: 11.5px; font-weight: 700; color: var(--gray-2); text-align: center; transition: color .15s ease; }
.mc-tier:hover .mc-tier-foot, .mc-tier.on .mc-tier-foot { color: var(--accent); }

/* ============ 会员中心 · 当前档详情卡（mc-detail） ============ */
.mc-detail { margin-top: 18px; padding: 22px; background: var(--c-surface); border: 1.5px solid var(--line); border-left: 4px solid var(--accent); border-radius: 20px; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); }
.mc-detail-top { display: flex; align-items: center; gap: 14px; }
.mc-detail-ico { flex: none; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 27px; border-radius: 17px; box-shadow: 0 8px 18px var(--a22, rgba(15, 23, 42, .14)), inset 0 1px 0 rgba(255, 255, 255, .35); }
.mc-detail-name { font-size: 18px; font-weight: 900; color: var(--ink); }
.mc-detail-aud { font-size: 12.5px; color: var(--gray-1); margin-top: 3px; line-height: 1.6; }
.mc-detail-price { margin-left: auto; text-align: right; white-space: nowrap; }
.mc-detail-price b { font-size: 27px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.mc-detail-price span { font-size: 12px; color: var(--gray-2); margin-left: 2px; }
.mc-detail-note { margin-top: 12px; padding: 10px 13px; border-radius: 11px; background: var(--a08, var(--n-50)); border: 1px solid var(--a14, var(--line)); font-size: 12px; color: var(--gray-1); line-height: 1.6; }
.mc-detail-feats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.mc-detail-feats li { display: flex; flex-direction: column; gap: 1px; padding: 11px 13px; border-radius: 13px; background: var(--n-50, var(--n-50)); border: 1px solid var(--line); transition: border-color .15s ease, background .15s ease; }
.mc-detail-feats li:hover { border-color: var(--a22, var(--line)); background: var(--a08, var(--n-50)); }
.mc-detail-feats li b { font-size: 13px; color: var(--ink); }
.mc-detail-feats li b::before { content: '✓ '; color: var(--accent); font-weight: 900; }
.mc-detail-feats li span { font-size: 11.5px; color: var(--gray-2); line-height: 1.5; }
.mc-detail-actions { margin-top: 16px; }
.mc-detail-cta { display: block; width: 100%; padding: 14px; border: none; border-radius: 15px; font-size: 15px; font-weight: 800; font-family: inherit; letter-spacing: 1px; color: var(--c-surface); background: var(--accent); cursor: pointer; box-shadow: 0 8px 22px var(--a35, rgba(15, 23, 42, .2)), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.mc-detail-cta:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 28px var(--a35, rgba(15, 23, 42, .25)); }
.mc-detail-cta:active { transform: translateY(0); }
.mc-detail-cta.super { background: linear-gradient(135deg, var(--s-amber-700), var(--brand-amber)); box-shadow: 0 8px 22px rgba(245, 158, 11, .35); }

/* ============ 会员中心 · 周期卡列表（mc-plan） ============ */
.mc-plans { display: flex; flex-direction: column; gap: 12px; }
.mc-plan { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--c-surface); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 2px 10px rgba(15, 23, 42, .04); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.mc-plan:hover { border-color: var(--a35, var(--line)); box-shadow: 0 10px 26px var(--a14, rgba(15, 23, 42, .08)); transform: translateY(-2px); }
.mc-plan.rec { border-color: var(--accent); background: linear-gradient(180deg, var(--a08, var(--n-50)) 0%, var(--c-surface) 55%); box-shadow: 0 8px 24px var(--a14, rgba(15, 23, 42, .08)); }
.mc-plan-ico { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; border-radius: 14px; background: var(--a08, var(--n-100)); border: 1px solid var(--a22, var(--line)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.mc-plan-main { flex: 1; min-width: 0; }
.mc-plan-name { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: var(--ink); }
.mc-plan-tag { font-style: normal; flex: none; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; color: var(--c-surface); background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); }
.mc-plan-sub { font-size: 12px; color: var(--gray-2); margin-top: 3px; line-height: 1.55; }
.mc-plan-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px; font-size: 11.5px; color: var(--gray-1); }
.mc-plan-meta span { white-space: nowrap; }
.mc-plan-period { font-weight: 700; color: var(--accent); }
.mc-plan-right { flex: none; text-align: right; }
.mc-plan-price b { font-size: 23px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.mc-plan-price span { font-size: 11.5px; color: var(--gray-2); }
.mc-plan-save { font-size: 11px; color: var(--brand-2); margin-top: 2px; }
.mc-plan-save s { color: var(--gray-3); margin-left: 4px; }
.mc-plan-buy { display: block; margin-top: 8px; padding: 9px 24px; border: none; border-radius: 999px; font-size: 12.5px; font-weight: 800; font-family: inherit; color: var(--c-surface); background: var(--accent); cursor: pointer; white-space: nowrap; box-shadow: 0 4px 12px var(--a35, rgba(15, 23, 42, .18)); transition: filter .15s ease, transform .15s ease; }
.mc-plan-buy:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ============ 会员中心 · 三档对比（mc-cmp） ============ */
.mc-cmp { padding: 16px 18px; background: var(--c-surface); border: 1.5px solid var(--line); border-radius: 16px; }
.mc-cmp-head { display: flex; align-items: center; gap: 10px; }
.mc-cmp-ico { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 17px; border-radius: 10px; background: var(--a08, var(--n-100)); border: 1px solid var(--a22, var(--line)); }
.mc-cmp-price { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.mc-cmp-note { font-size: 11.5px; color: var(--gray-2); margin-top: 8px; line-height: 1.6; }

/* 激活码链接 */
.mc-act-link { display: block; margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--gray-2); text-decoration: none; }
.mc-act-link:hover { color: var(--v-600); }

/* 响应式：窄屏（手机视口）详情权益单列；三档卡列数已由容器查询接管 */
@media (max-width: 720px) {
  .mc-detail-feats { grid-template-columns: 1fr; }
  .mc-plan { flex-wrap: wrap; }
  .mc-plan-right { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .mc-plan-buy { margin-top: 0; }
}
/* 我的陪护面板 */
.my-care-box { margin: 0 4px 14px; display: flex; flex-direction: column; gap: 8px; }
.my-care-card { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-purple-soft), var(--v-25)); border: 1px solid var(--purple-2); }
.my-care-left { display: flex; align-items: center; gap: 12px; }
.my-care-ico { font-size: 26px; }
.my-care-title { font-size: 14px; font-weight: 800; color: var(--ink); }
.my-care-sub { font-size: 12px; color: var(--purple-2); margin-top: 2px; }
.my-care-btn { padding: 6px 14px; border: 1px solid var(--v-600); border-radius: 999px; background: var(--c-surface); color: var(--v-600); font-size: 12px; font-weight: 700; cursor: pointer; }
.my-care-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--gray-1); }
.my-care-aud { font-weight: 800; color: var(--v-600); }
.my-care-min { flex: 1; }
.my-care-exp { color: var(--gray-2); }
.consult-package-list { display: flex; flex-direction: column; gap: 16px; }
.cpg-group { background: var(--c-surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.cpg-head { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.cpg-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cpg-item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px 8px; border-radius: 12px; background: var(--n-50); border: 1.5px solid transparent; }
.cpg-item.hot { border-color: var(--purple-2); background: var(--v-25); }
.cpg-tag { position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; background: var(--v-100); color: var(--purple-2); }
.cpg-name { font-size: 12px; font-weight: 700; color: var(--gray-1); margin-top: 6px; }
.cpg-price { font-size: 16px; font-weight: 800; color: var(--brand-rose); margin: 4px 0 8px; }
.cpg-per { font-size: 10px; color: var(--gray-2); font-weight: 400; }
.cpg-buy { padding: 6px 0; width: 100%; border-radius: 15px; background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); font-size: 12px; font-weight: 700; }

/* 我的咨询权益 */
.consult-credit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.cc-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: linear-gradient(135deg, var(--v-100), var(--v-50)); font-size: 13px; }
.cc-level { color: var(--purple-2); font-weight: 700; }
.cc-remain { color: var(--gray-1); }
.cc-remain b { color: var(--brand-rose); font-size: 16px; }
.cc-empty { font-size: 13px; color: var(--gray-2); padding: 12px 14px; border-radius: 12px; background: var(--n-100); margin-bottom: 6px; }

/* ============================================================
   倾诉（松果模式）
   ============================================================ */

/* 倾诉页钱包余额条 */
.wallet-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--indigo-500) 100%);
    border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; color: var(--c-surface);
}
.wallet-bar-left { display: flex; align-items: center; gap: 12px; }
.wallet-ico { font-size: 26px; }
.wallet-label { font-size: 12px; opacity: .9; }
.wallet-num { font-size: 22px; font-weight: 800; }
.wallet-recharge-btn { padding: 8px 18px; border-radius: 20px; background: var(--c-surface); color: var(--brand-green); font-size: 13px; font-weight: 700; }

/* 倾听师标签 / 按钮 */
.listen-tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 700; background: var(--v-100); color: var(--s-teal-700); margin-left: 8px; white-space: nowrap; }
.tag-teal { background: var(--s-green-50); color: var(--s-teal-700); }
.btn-listen { padding: 8px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--brand-green), var(--indigo-500)); color: var(--c-surface); font-size: 13px; font-weight: 700; }
/* 倾诉大厅卡片：容器此前从未定义样式（白底/圆角/边框全无），导致头像/姓名/标签"透明"散浮。
   对齐咨询师 .consultant-card 的卡片视觉语言，并按倾诉绿色主题微打磨。 */
.listener-card {
  background: var(--c-surface); border-radius: 16px; padding: 16px;
  border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.listener-card:active { transform: scale(.992); box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.listener-card .consultant-price b { color: var(--brand-green); }
.listener-list { display: flex; flex-direction: column; gap: 12px; }

/* 倾诉计时条 */
.listen-timer-bar {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 12px; margin-bottom: 10px; border-radius: 12px;
    background: var(--s-green-50); color: var(--s-teal-700); font-size: 13px; font-weight: 600;
}
.listen-timer-bar b { font-size: 16px; font-weight: 800; }
.listen-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-mint); animation: listenBlink 1.2s infinite; }
@keyframes listenBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* 钱包充值弹窗 */
.wallet-balance-show { text-align: center; font-size: 14px; color: var(--gray-1); margin: 6px 0 14px; }
.wallet-balance-show b { font-size: 24px; color: var(--brand-green); }
.recharge-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.recharge-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 14px; background: var(--n-50); border: 1.5px solid var(--line); cursor: pointer; transition: .15s; }
.recharge-tier.selected { border-color: var(--indigo-500); background: var(--s-green-50); }
.rt-amount { font-size: 18px; font-weight: 800; color: var(--ink); }
.rt-bonus { font-size: 11px; color: var(--brand-green); font-weight: 600; }



/* 聊天区通话按钮条（语音 / 视频通话入口） */
.chat-call-bar {
    display: flex;
    gap: 8px;
    padding: 8px 10px 4px;
    border-bottom: 1px solid var(--line, #eee);
    background: var(--warm-50);
}

/* ============================================================
   手机视口壳（Mobile Shell）
   设计基线：整套用户端按「手机 H5 / 微信小程序」版面交付。
     · 窄屏（真机 / 小程序 webview）：100% 铺满，与原生小程序一致；
     · 宽屏（PC 预览 / 投屏）：锁定 480px 居中，外侧深色背景，呈现手机模拟壳。
   所有 fixed 全屏层（登录 / 弹窗 / 全屏子页 / 底部条 / 浮动按钮）统一跟随，
   避免出现「页面像手机、浮层却贴着电脑屏幕边缘」的割裂感。
   注意：一律使用 left/right 归零 + margin auto 居中，不使用 transform，
   否则会生成新的包含块，导致层内 fixed 子元素错位。
   ============================================================ */

:root { --phone-w: 480px; --phone-outside: #0e1526; }

@media (min-width: 521px) {
    html, body { background: var(--phone-outside); }
    .app {
        box-shadow: 0 0 0 1px rgba(148, 163, 184, .16), 0 30px 80px rgba(0, 0, 0, .5);
    }
    /* fixed 全屏层：锁进手机壳 */
    .auth-screen,
    .modal-mask,
    .apply-screen,
    .rtc-layer,
    .help-reply-bar {
        left: 0; right: 0; margin-left: auto; margin-right: auto; max-width: var(--phone-w);
    }
    .modal-mask { padding: 16px; }
    /* 贴边浮动元素：跟随手机壳右缘，不贴电脑屏幕边缘 */
    .crisis-fab { right: calc(50% - var(--phone-w) / 2 + 14px); }
    .rtc-panel.mini { right: calc(50% - var(--phone-w) / 2 + 14px); }
    /* 手机壳底部收口：底部 tabbar 之外的区域用壳色补齐 */
    .tabbar { border-radius: 18px 18px 0 0; box-shadow: 0 -8px 28px rgba(30, 41, 59, .1), 0 0 0 1px rgba(148, 163, 184, .12); }
}

/* ============================================================
   通知设置 · 渠道开关（用户端「服务中心 → 通知设置」）
   ============================================================ */

.uc-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ucs-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ucs-info b { font-size: 15px; color: var(--ink); }
.ucs-info span { font-size: 12px; color: var(--gray-2); line-height: 1.4; }

.uc-switch { position: relative; display: inline-block; width: 50px; height: 30px; flex-shrink: 0; }
.uc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ============================================================
   测评前分类选择浮层 · 高端版（双视角 + 六大探索方向）
   固定宽度、内容一屏呈现、无滚动条（极端矮屏可滚轮微滚，滚动条隐藏）
   ============================================================ */
.catpick-mask {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(16,185,129,.24), transparent 55%),
    radial-gradient(110% 80% at 85% 100%, rgba(255,138,61,.16), transparent 55%),
    rgba(16,14,32,.62);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  animation: cpMaskIn .25s ease;
  will-change: backdrop-filter;
}
@keyframes cpMaskIn { from { opacity: 0; } to { opacity: 1; } }

.catpick-card {
  position: relative;
  width: 100%; max-width: 480px; max-height: 92vh; /* 与首页 .app 同宽 */
  overflow: hidden auto;
  scrollbar-width: none; -ms-overflow-style: none;
  background: linear-gradient(180deg, var(--c-surface), #fbfaff 46%, #f7f5ff);
  border: 1px solid rgba(16,185,129,.14);
  border-radius: 3px; padding: 26px 22px 18px;
  box-shadow:
    0 2px 6px rgba(46,38,92,.06),
    0 30px 70px -18px rgba(46,38,92,.38),
    0 80px 120px -60px rgba(16,185,129,.35);
  animation: cpCardIn .42s cubic-bezier(.22,1,.36,1);
}
.catpick-card::-webkit-scrollbar { width: 0; height: 0; display: none; }
@keyframes cpCardIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
/* 卡内氛围光斑（被 overflow 裁剪，不会产生滚动条） */
.cp-glow { position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none; z-index: 0; }
.cp-glow-1 { width: 220px; height: 220px; left: -80px; top: -90px; background: rgba(16,185,129,.18); }
.cp-glow-2 { width: 190px; height: 190px; right: -70px; top: 120px; background: rgba(255,138,61,.12); }
.catpick-head, .catpick-rater, .catpick-targets, .catpick-sec-head, .catpick-grid, .catpick-foot { position: relative; z-index: 1; }

/* ---- 头部：品牌徽标 + 渐变标题 + 步骤指示 ---- */
.catpick-head { text-align: center; margin-bottom: 14px; }
.catpick-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  font-size: 11px; letter-spacing: 3px; font-weight: 800; color: var(--brand-2);
  background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(255,138,61,.08));
  border: 1px solid rgba(16,185,129,.18);
}
.catpick-kicker .ck-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-orange));
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
  animation: cpPulse 2.2s ease-in-out infinite;
}
@keyframes cpPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } }
.catpick-title {
  font-size: 24px; font-weight: 900; letter-spacing: .5px; color: #191d2b;
  margin: 12px 0 6px; line-height: 1.25;
}
.catpick-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--brand-2) 10%, var(--brand-3) 45%, var(--brand-orange) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.catpick-sub { font-size: 12.5px; color: var(--n-500); line-height: 1.65; margin: 0 auto; max-width: 392px; }
.catpick-sub b { color: var(--brand-2); font-weight: 800; }
.catpick-steps {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 11px;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.12);
}
.cp-step { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #9aa0b4; }
.cp-step i {
  font-style: normal; width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; background: #eceafa; color: #9a94c8;
}
.cp-step.is-on { color: #4c3ecf; }
.cp-step.is-on i { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: var(--c-surface); box-shadow: 0 3px 8px rgba(5,150,105,.35); }
.cp-step-line { width: 20px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, #d9d4f5, #c3baf0); }

/* ---- 视角切换（自评 / 他评）：悬浮滑块 + 图标磁贴 ---- */
.catpick-rater {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: linear-gradient(135deg, #f1edfc, #f6f2fb);
  border: 1px solid #e7e2f7; border-radius: 18px; padding: 5px; margin-bottom: 14px;
  box-shadow: inset 0 1px 3px rgba(46,38,92,.05);
}
.catpick-rater-thumb {
  position: absolute; top: 5px; left: 5px; bottom: 5px; width: calc(50% - 5px);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-surface), var(--v-25));
  border: 1px solid rgba(16,185,129,.16);
  box-shadow: 0 10px 24px -8px rgba(5,150,105,.38);
  transition: transform .32s cubic-bezier(.22,1,.36,1); z-index: 0; pointer-events: none;
}
.catpick-rater-opt {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 8px; border: none; background: transparent; border-radius: 14px; cursor: pointer;
  color: #9a97b0; transition: color .2s;
}
.catpick-rater-opt.active { color: #4c3ecf; }
.catpick-rater-opt .cr-ico {
  width: 32px; height: 32px; border-radius: 10px; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(16,185,129,.08); transition: .25s;
}
.catpick-rater-opt.active .cr-ico {
  background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(255,138,61,.12));
  box-shadow: inset 0 0 0 1px rgba(16,185,129,.22);
}
.catpick-rater-opt .cr-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.catpick-rater-opt .cr-txt b { font-size: 15px; font-weight: 800; letter-spacing: 1px; }
.catpick-rater-opt .cr-txt i { font-style: normal; font-size: 11px; opacity: .75; margin-top: 1px; }
.catpick-rater-opt.active .cr-txt b {
  background: linear-gradient(120deg, var(--brand-2), var(--brand-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- 他评：为谁而评 ---- */
.catpick-targets { margin-bottom: 14px; animation: cpFade .28s ease; }
.ct-label { font-size: 12.5px; font-weight: 700; color: #4b5160; margin: 0 0 8px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip {
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--c-line); background: var(--c-surface);
  font-size: 12.5px; font-weight: 600; color: #5b6172; cursor: pointer; transition: .18s;
}
.ct-chip:hover { border-color: var(--v-300); color: var(--v-600); transform: translateY(-1px); }
.ct-chip.active {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); border-color: transparent; color: var(--c-surface);
  box-shadow: 0 8px 18px -6px rgba(5,150,105,.5);
}

/* ---- 分区标题 ---- */
.catpick-sec-head {
  display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px;
  font-size: 13.5px; font-weight: 800; letter-spacing: 1px; color: #2a2f3a;
}
.catpick-sec-head::before {
  content: ''; width: 4px; height: 15px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-orange));
  box-shadow: 0 2px 6px rgba(16,185,129,.4);
}
.catpick-sec-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-line), rgba(230,238,233,0)); }

/* ---- 六大探索方向卡：渐变磁贴 + 入场编排 + 悬浮扫光 ---- */
.catpick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.catpick-item {
  --cat: var(--brand-orange);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 14px 12px; border-radius: 18px; cursor: pointer; text-align: left;
  background: linear-gradient(165deg, var(--c-surface) 30%, color-mix(in srgb, var(--cat) 5%, var(--c-surface)));
  border: 1.5px solid #eef0f6;
  box-shadow: 0 2px 8px rgba(46,38,92,.05);
  transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s, box-shadow .22s;
  position: relative; overflow: hidden;
  animation: cpItemIn .5s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes cpItemIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.catpick-item::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--cat), color-mix(in srgb, var(--cat) 55%, var(--c-surface)));
  box-shadow: 0 0 10px color-mix(in srgb, var(--cat) 45%, transparent);
}
.catpick-item::after {
  content: ''; position: absolute; right: -32px; top: -32px; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle, var(--cat), transparent 70%); opacity: .10;
  transition: transform .3s, opacity .3s; pointer-events: none;
}
.ci-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.65) 50%, transparent 58%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.catpick-item:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cat) 45%, #eef0f6);
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--cat) 38%, rgba(46,38,92,.25));
}
.catpick-item:hover::after { transform: scale(1.35); opacity: .18; }
.catpick-item:hover .ci-shine { transform: translateX(120%); }
.catpick-item:active { transform: translateY(-2px) scale(.99); }
.ci-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.catpick-ico {
  width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--cat) 20%, var(--c-surface)), color-mix(in srgb, var(--cat) 8%, var(--c-surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 24%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--cat) 50%, transparent);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.catpick-item:hover .catpick-ico { transform: scale(1.08) rotate(-4deg); }
.ci-en { font-size: 9px; font-weight: 800; letter-spacing: 2px; color: color-mix(in srgb, var(--cat) 75%, var(--n-500)); opacity: .75; }
.catpick-name { font-size: 15.5px; font-weight: 800; color: var(--n-800); letter-spacing: .5px; }
.catpick-desc { font-size: 11.5px; color: #8a909c; line-height: 1.5; padding-right: 4px; }

/* ---- 底部：跳过 + 信任说明 ---- */
.catpick-foot { margin-top: 14px; text-align: center; font-size: 11px; color: #aab0bc; }
.catpick-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border-radius: 50%; border: none; background: rgba(16,185,129,.08); color: #7a7f92;
  font-size: 14px; line-height: 1; cursor: pointer; transition: .18s; z-index: 3;
}
.catpick-close:hover { background: rgba(16,185,129,.16); color: #4c3ecf; transform: rotate(90deg); }
.catpick-skip {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 9px 20px;
  border: 1.5px solid #e6e9f0; background: var(--c-surface); color: var(--n-500);
  font-size: 12.5px; font-weight: 700; border-radius: 999px; cursor: pointer; transition: .2s;
}
.catpick-skip:hover {
  border-color: rgba(16,185,129,.4); color: var(--brand-2); background: var(--v-25);
  transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(5,150,105,.35);
}
.catpick-note { margin: 0; letter-spacing: .3px; }

/* ---- 3px 直角统一（ID 特异性稳压 app-polish.css 的 --pf-r-xl 覆盖） ---- */
#categoryPick .catpick-card,
#categoryPick .catpick-close,
#categoryPick .catpick-kicker,
#categoryPick .catpick-steps,
#categoryPick .cp-step i,
#categoryPick .catpick-rater,
#categoryPick .catpick-rater-thumb,
#categoryPick .catpick-rater-opt,
#categoryPick .catpick-rater-opt .cr-ico,
#categoryPick .ct-chip,
#categoryPick .catpick-item,
#categoryPick .catpick-ico,
#categoryPick .catpick-skip { border-radius: 3px; }
#categoryPick .catpick-item::before { border-radius: 0 2px 2px 0; }
#categoryPick .cp-step-line { border-radius: 1px; }

/* 小屏适配 */
@media (max-width: 480px) {
  .catpick-card { padding: 22px 14px 16px; border-radius: 3px; }
  .catpick-title { font-size: 21px; }
  .catpick-grid { gap: 9px; }
  .catpick-item { padding: 13px 12px 11px; border-radius: 16px; }
  .catpick-ico { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
  .catpick-name { font-size: 15px; }
  .catpick-rater-opt { padding: 10px 6px; gap: 8px; }
  .catpick-rater-opt .cr-ico { width: 29px; height: 29px; font-size: 14px; }
  .catpick-rater-opt .cr-txt i { display: none; }
}

/* 摆卡页视角回显 */
.title-persp {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--c-surface); vertical-align: middle;
  background: linear-gradient(135deg,var(--v-600),var(--brand-3)); box-shadow: 0 4px 12px rgba(16,185,129,.25);
}
.title-persp.other { background: linear-gradient(135deg,#ff5b8a,var(--brand-orange)); box-shadow: 0 4px 12px rgba(255,91,138,.25); }

@keyframes cpFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 测评记录 / 结果页：自评·他评 徽标 */
.rec-rater {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--v-700); background: #efe9fe; white-space: nowrap;
}
.rec-rater.other { color: #c2185b; background: #ffe9f1; }
.rec-demo { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--n-600); background: var(--n-100); white-space: nowrap; }
.result-persp {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--c-surface); vertical-align: middle;
  background: linear-gradient(135deg,var(--v-600),var(--brand-3)); box-shadow: 0 4px 12px rgba(16,185,129,.25);
}
.result-persp.other { background: linear-gradient(135deg,#ff5b8a,var(--brand-orange)); box-shadow: 0 4px 12px rgba(255,91,138,.25); }

/* 测评档案标签行：自评/他评 + 人口属性（性别/年龄/行业/职业） */
.result-profile { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.res-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--n-600); background: var(--n-100); border: 1px solid var(--n-200); white-space: nowrap;
}
.res-chip-persp { color: var(--v-700); background: #efe9fe; border-color: var(--v-200); font-weight: 700; }
.res-chip-persp.other { color: #c2185b; background: #ffe9f1; border-color: #fbcfe0; }

/* ===== 测评前置：人口属性采集弹层 · Premium ===== */
.demo-mask {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(640px 340px at 16% 6%, rgba(16,185,129,.18), transparent 62%),
    radial-gradient(560px 340px at 86% 94%, rgba(124,58,237,.16), transparent 62%),
    rgba(17,19,30,.55);
  backdrop-filter: blur(10px) saturate(1.15);
}
.demo-card {
  position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #fdfdff, var(--c-surface) 140px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 26px;
  padding: 32px 28px 24px;
  box-shadow: 0 32px 80px rgba(20,22,34,.38), 0 2px 8px rgba(20,22,34,.08);
}
.demo-card::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 4px; border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--v-600), var(--brand-3), var(--v-600));
}
.demo-card::-webkit-scrollbar { width: 6px; }
.demo-card::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 6px; }
.demo-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--n-100); color: var(--n-500); font-size: 15px; line-height: 1; cursor: pointer; transition: .15s; z-index: 2;
}
.demo-close:hover { background: var(--n-200); color: var(--n-800); transform: rotate(90deg); }
.demo-head { text-align: center; margin-bottom: 22px; }
.demo-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: 2px; color: var(--brand-3); font-weight: 700;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.18);
}
.demo-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-3); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.demo-title { font-size: 22px; font-weight: 800; color: var(--n-800); margin: 14px 0 9px; letter-spacing: .3px; }
.demo-title em {
  font-style: normal; padding: 0 2px;
  background: linear-gradient(135deg, var(--v-600), var(--brand-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.demo-sub { font-size: 13px; color: var(--n-500); line-height: 1.7; margin: 0 auto; max-width: 370px; }
.demo-sub b { color: var(--v-600); }
.demo-fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .demo-row { grid-template-columns: 1fr; } }
.demo-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.demo-label { font-size: 13px; font-weight: 700; color: #2a2f3a; display: flex; align-items: center; gap: 7px; }
.demo-label::before { content: ""; width: 4px; height: 13px; border-radius: 3px; background: linear-gradient(180deg, var(--brand-3), var(--v-600)); flex-shrink: 0; }
.demo-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; border-radius: 14px; background: #f1f2f8; border: 1px solid #e9eaf2;
}
.demo-seg-opt {
  padding: 11px 4px; border-radius: 10px; border: 1.5px solid transparent; background: transparent;
  font-size: 14px; font-weight: 600; color: #5b6172; cursor: pointer; transition: .18s;
}
.demo-seg-opt:hover { color: var(--v-600); background: rgba(255,255,255,.85); }
.demo-seg-opt.active {
  background: linear-gradient(135deg, var(--v-600), var(--brand-3)); border-color: transparent; color: #fff;
  box-shadow: 0 6px 14px rgba(16,185,129,.3);
}
.demo-select, .demo-input {
  width: 100%; padding: 12px 14px; border-radius: 13px; border: 1.5px solid var(--c-line);
  font-size: 15px; color: var(--n-800); background-color: #f8f9fc; transition: .18s; box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
}
.demo-select {
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a909c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.demo-select:hover, .demo-input:hover { border-color: var(--v-300); }
.demo-select:focus, .demo-input:focus {
  outline: none; border-color: var(--brand-3); background-color: var(--c-surface);
  box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}
.demo-input::placeholder { color: #b3b8c6; }
.demo-submit {
  position: relative; width: 100%; padding: 15px; border: none; border-radius: 15px; cursor: pointer;
  font-size: 16px; font-weight: 800; letter-spacing: 1px; color: #fff;
  background: linear-gradient(135deg, var(--v-600), var(--brand-3));
  box-shadow: 0 12px 26px rgba(16,185,129,.32), inset 0 1px 0 rgba(255,255,255,.25);
  transition: .18s; overflow: hidden;
}
.demo-submit:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(16,185,129,.42), inset 0 1px 0 rgba(255,255,255,.25); }
.demo-submit:disabled { background: #ece9f4; color: #a9a4bd; box-shadow: none; cursor: not-allowed; }
.demo-submit:not(:disabled):active { transform: translateY(1px); }
.demo-skip-row {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--c-line);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.demo-skip-tip { font-size: 12px; color: #9aa0ad; }
.demo-skip { border: none; background: none; padding: 4px 2px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--v-600); text-decoration: underline; text-underline-offset: 3px; transition: .15s; }
.demo-skip:hover { color: var(--v-700); }
@media (prefers-reduced-motion: no-preference) {
  .demo-card { animation: demoIn .34s cubic-bezier(.22,.61,.36,1) both; }
  .demo-fields > .demo-field, .demo-fields > .demo-row { animation: demoIn .42s cubic-bezier(.22,.61,.36,1) both; }
  .demo-fields > :nth-child(2) { animation-delay: .06s; }
  .demo-fields > :nth-child(3) { animation-delay: .12s; }
  @keyframes demoIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* 测评结果 / 历史报告：人口档案行 */
.result-profile {
  margin: 0 0 14px; padding: 9px 14px; border-radius: 12px;
  font-size: 13px; font-weight: 600; color: #4b5160; background: var(--brand-purple-soft); border: 1px solid var(--c-line);
}
.rd-profile {
  margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px;
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  background: var(--brand-purple-soft); border: 1px solid rgba(16,185,129,.14);
}

/* 结果弹窗 / 记录详情：五大分类 */
.rc-cat { --cat: var(--brand-orange); border: 1.5px solid #eef0f6; border-radius: 16px; overflow: hidden; margin-bottom: 14px; background: var(--c-surface); }
.rc-cat-active { border-color: var(--cat); box-shadow: 0 8px 22px rgba(20,22,34,.08); }
.rc-cat-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 14%, var(--c-surface)), var(--c-surface)); font-weight: 800; color: var(--n-800); }
.rc-cat-ico { font-size: 18px; }
.rc-cat-flag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--c-surface); background: var(--cat); padding: 2px 9px; border-radius: 999px; }
.rc-cat-body { padding: 4px 14px 14px; }
.rc-sec { padding: 10px 0; border-top: 1px dashed #f0f1f5; }
.rc-sec:first-child { border-top: 0; }
.rc-sec-h { font-size: 13px; font-weight: 700; color: var(--brand-orange); margin-bottom: 7px; }
.rc-kv { display: flex; gap: 10px; font-size: 13px; line-height: 1.6; padding: 3px 0; }
.rc-kv span { color: #8a909c; min-width: 72px; flex-shrink: 0; }
.rc-kv b { color: #2b2f3a; font-weight: 600; }
.rc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.rc-tags span { background: #fff4ec; color: var(--s-orange-700); border: 1px solid #ffe0cc; padding: 5px 10px; border-radius: 9px; font-size: 12.5px; }
.rc-txt { font-size: 13px; color: #3a3f4b; line-height: 1.7; }
.rc-ebar-wrap { display: grid; gap: 6px; }
.rc-ebar { display: flex; align-items: center; gap: 8px; }
.rc-ebar span { width: 26px; font-size: 12px; color: #8a909c; }
.rc-ebar i { flex: 1; height: 9px; border-radius: 6px; background: linear-gradient(90deg, var(--cat), color-mix(in srgb, var(--cat) 45%, var(--n-300))); background-size: var(--w) 100%; background-repeat: no-repeat; background-color: var(--n-100); }
.rc-ebar b { width: 30px; text-align: right; font-size: 12px; color: #3a3f4b; }
.uc-switch-track {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--n-300); border-radius: 999px; transition: background .2s ease;
}
.uc-switch-track::before {
    content: ""; position: absolute; height: 24px; width: 24px; left: 3px; top: 3px;
    background: var(--c-surface); border-radius: 50%; transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
}
.uc-switch input:checked + .uc-switch-track { background: var(--purple-2, var(--v-600)); }
.uc-switch input:checked + .uc-switch-track::before { transform: translateX(20px); }

/* ============================================================
   全站统一视觉打磨层 · Premium Polish
   仅做"加性"润色：入场动画、焦点态、滚动细节、微交互，
   不改动任何既有布局与配色，移动端 / 降级动画均安全。
   ============================================================ */

/* 品牌色选取高亮 */
::selection { background: rgba(16, 185, 129, .18); color: #2b1c54; }

/* 全局焦点态：键盘可达性 + 一致的品牌描边 */
:focus-visible { outline: 2px solid var(--purple-2, var(--v-600)); outline-offset: 2px; border-radius: 8px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible) { outline: none; }

/* 平滑滚动（尊重降级偏好） */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 卡片入场：轻量 fade-up，统一整站节奏感 */
@media (prefers-reduced-motion: no-preference) {
  .hs,
  .uc-card, .uc-entry, .uc-summary > div, .uc-pending,
  .pa-item, .pm-item, .profile-card, .profile-assets,
  .wallet-section, .wallet-banner, .wallet-shop-entry,
  .shop-card, .shop-balance, .coupon-card, .fav-card, .rec-card,
  .invite-banner, .invite-hero, .signin-grid,
  .rc-cat, .rc-cat-active,
  .hs-service-entry .hs-se-card, .hs-mood, .hs-firstaid, .hs-flash,
  .hs-memberday, .hs-countdown, .hs-activity, .hs-notice, .hs-testimonials {
    animation: fxIn .5s cubic-bezier(.22, .61, .36, 1) both;
  }
  @keyframes fxIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  /* 列表项轻微错峰，避免整墙同时涌入 */
  .uc-list > .uc-card:nth-child(2),
  .hs-testimonial-list > .hs-testimonial-item:nth-child(2),
  .uc-grid > .uc-entry:nth-child(2),
  .profile-assets > .pa-item:nth-child(2) { animation-delay: .04s; }
  .uc-list > .uc-card:nth-child(3),
  .hs-testimonial-list > .hs-testimonial-item:nth-child(3),
  .uc-grid > .uc-entry:nth-child(3),
  .profile-assets > .pa-item:nth-child(3) { animation-delay: .08s; }
  .uc-list > .uc-card:nth-child(n+4),
  .uc-grid > .uc-entry:nth-child(n+4),
  .profile-assets > .pa-item:nth-child(n+4) { animation-delay: .12s; }
}

/* 横向滚动区：统一细滚动条（不影响布局；catpick-card 单独隐藏滚动条） */
.hs-staff-scroll, .hs-nav-scroll, .uc-booking-body, .book-days, .book-slots,
.modal-mask, .result-modal, .uc-pager {
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 185, 129, .28) transparent;
}
.hs-staff-scroll::-webkit-scrollbar, .hs-nav-scroll::-webkit-scrollbar,
.uc-booking-body::-webkit-scrollbar, .book-days::-webkit-scrollbar,
.result-modal::-webkit-scrollbar {
  width: 6px; height: 6px;
}
.hs-staff-scroll::-webkit-scrollbar-thumb, .hs-nav-scroll::-webkit-scrollbar-thumb,
.uc-booking-body::-webkit-scrollbar-thumb, .book-days::-webkit-scrollbar-thumb,
.result-modal::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, .28); border-radius: 999px;
}
.hs-staff-scroll::-webkit-scrollbar-track, .hs-nav-scroll::-webkit-scrollbar-track,
.uc-booking-body::-webkit-scrollbar-track { background: transparent; }

/* 图片默认禁止拖拽，减少移动端误触 */
img { -webkit-user-drag: none; user-select: none; }

/* ============================================================================
   测评结果页 · 顶级设计精修 v2（对标 Linear / Stripe / Notion：克制内敛、层次分明）
   核心：统一收窄圆角到 6/8/10/12 四级体系 + 中性灰边框 + 轻阴影 + 一致的留白节奏
   ============================================================================ */

/* 1. 结果弹窗容器：圆角 22 → 14，内敛更精致 */
#resultModal .modal-card { border-radius: 14px; padding: 20px 18px 18px; }
#resultModal .modal-head { margin-bottom: 16px; }
#resultModal .modal-head h2 { font-size: 17px; letter-spacing: .2px; }

/* 2. Hero 主导类型卡：圆角 20 → 12，阴影更克制 */
.rs-hero { border-radius: 12px; padding: 22px 20px 20px; box-shadow: 0 10px 28px rgba(6,95,70,.22); }
.rs-eyebrow { letter-spacing: 2px; }
.rs-title { font-size: 30px; }

/* 3. 测评档案 chips：圆角收窄 */
#resultProfile .res-chip { border-radius: 6px; padding: 4px 10px; }

/* 4. 三排卡牌：圆角收窄 */
.result-card-slot { border-radius: 4px; height: 56px; border: 1px solid var(--line); }
.result-card { border-radius: 4px; }

/* 5. 四叶草：圆角 14 → 10，阴影收敛 */
.leaf { border-radius: 10px; padding: 15px 12px; }
.clover { gap: 8px; }
.leaf.dominant { box-shadow: 0 0 0 2px rgba(16,185,129,.5), 0 6px 16px rgba(0,0,0,.14); }

/* 6. 优势面 / 影子面：圆角 14 → 10 */
.ab-card { border-radius: 10px; border: 1px solid var(--line); }
.ab-grid { gap: 8px; }

/* 7. 标准化方向卡 / 维度卡：圆角收窄 */
.rd-dim { border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(0,0,0,.03); }
.rc-cat { border-radius: 12px; }
.rd-dim-h::before { width: 3px; }

/* 8. 个性化课程推荐卡：圆角 16 → 12 */
.course-rec-card { border-radius: 12px; border: 1px solid var(--line); }
.course-rec-level { border-radius: 0 0 0 8px; }
.course-rec-btn { border-radius: 8px; }

/* ============================================================================
   推荐老师卡（match-item）· 信息增强升级
   从「头像 + 名称 + 按钮」升级为「头像 + 头衔 + 资质 + 匹配理由 + 价格 + 行动」完整卡片
   ============================================================================ */
.match-list { gap: 10px; }
.match-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px;
    border-radius: 12px; background: var(--c-surface); border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(15,23,42,.04); cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.match-item:hover { border-color: var(--v-300); box-shadow: 0 8px 22px rgba(4,47,34,.08); transform: translateY(-1px); }
.match-item:active { transform: scale(.99); }
.match-avatar { width: 48px; height: 48px; border-radius: 10px; font-size: 26px; flex-shrink: 0; }
.match-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: inherit; }
.match-main { flex: 1; min-width: 0; }
.match-name { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.match-title { font-size: 12px; color: var(--gray-2); margin-top: 2px; line-height: 1.4; }
.match-meta { font-size: 11px; color: var(--gray-2); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.match-online { font-weight: 700; }
.match-online.on { color: var(--s-green-600); }
.match-hits { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.match-hits-k { font-size: 10px; color: var(--n-400); font-weight: 700; flex-shrink: 0; }
.match-hit { font-size: 10.5px; font-weight: 700; color: var(--v-700); background: var(--brand-purple-soft); border: 1px solid var(--brand-5); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.match-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.match-price { font-size: 16px; font-weight: 800; color: var(--brand-rose); display: flex; align-items: baseline; gap: 2px; }
.match-price i { font-size: 11px; font-weight: 600; color: var(--gray-3); font-style: normal; }
.match-btn { flex-shrink: 0; padding: 7px 16px; border-radius: 8px; background: linear-gradient(135deg, var(--v-500), var(--v-600)); color: var(--c-surface); font-size: 12px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 3px 10px rgba(16,185,129,.2); transition: transform .15s; }
.match-btn:active { transform: scale(.96); }
.match-badge { border-radius: 5px; padding: 2px 8px; font-size: 10px; }

/* 推荐老师空态 */
.match-empty { font-size: 12px; color: var(--gray-3); text-align: center; padding: 14px; }

/* ============================================================================
   测评结果弹窗 · 精修 v3（对标 Linear / Stripe / Vercel：小圆角、利落、有层次）
   核心：圆角统一收到 4/5/6/8/10 五级体系（更小更精致）+ hairline 分层 + 克制阴影
   全部用 #resultModal 前缀（ID 特异性），稳压 index.html 内联样式与主题变量
   ============================================================================ */

/* 1. 容器：10 → 2（利落直角风）；标题区加 hairline 分隔线，建立第一层层次 */
#resultModal .modal-card { border-radius: 2px; padding: 18px 16px 16px; box-shadow: 0 18px 48px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.06); }
#resultModal .modal-head { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--n-100); }
#resultModal .modal-head h2 { font-size: 16px; font-weight: 900; letter-spacing: .3px; }
#resultModal .modal-close { width: 28px; height: 28px; border-radius: 2px; font-size: 13px; }
#resultModal .modal-close:hover { background: var(--n-200); color: var(--n-800); }

/* 2. 档案 chips：统一 2px */
#resultModal .res-chip { border-radius: 2px; padding: 4px 9px; font-size: 11.5px; }

/* 3. Hero 主导卡：2px，阴影收紧 */
#resultModal .rs-hero { border-radius: 2px; padding: 20px 18px 18px; box-shadow: 0 8px 22px rgba(6,95,70,.20); }
#resultModal .rs-title { font-size: 28px; }

/* 4. 心力指数盒：2px，阴影收敛为 hairline 级 */
#resultModal .level-box { border-radius: 2px; box-shadow: 0 1px 4px rgba(15,23,42,.04); }

/* 5. 三排卡牌 / 四叶草 / 优势影子面：2px */
#resultModal .result-card-slot, #resultModal .result-card { border-radius: 2px; }
#resultModal .leaf { border-radius: 2px; }
#resultModal .ab-card { border-radius: 2px; }

/* 6. 维度卡 / 痛点盒 / 五大分类：2px */
#resultModal .rd-dim { border-radius: 2px; }
#resultModal .pain-box { border-radius: 2px; }
#resultModal .rc-cat { border-radius: 2px; }
#resultModal .result-profile { border-radius: 2px; }

/* 7. 深度服务引导：2px，选项行 2px */
#resultModal .deep-box { border-radius: 2px; }
#resultModal .opt-row { border-radius: 2px; }

/* 8. 推荐卡与图标底：2px */
#resultModal .match-item { border-radius: 2px; }
#resultModal .match-btn { border-radius: 2px; }
#resultModal .rec-dot { border-radius: 2px; }
#resultModal .course-rec-card { border-radius: 2px; }
#resultModal .course-rec-btn { border-radius: 2px; }
#resultModal .course-rec-level { border-radius: 0 0 0 2px; }

/* 9. 底部操作按钮：2px */
#resultModal .modal-actions .btn-primary,
#resultModal .modal-actions .btn-ghost { border-radius: 2px; }

/* 10. 模块节奏：推荐区与上方内容拉开呼吸感（留白分层，不靠框） */
#resultModal .rec-box { margin-top: 18px; }

/* ============================================================================
   咨询师 / 倾听师详情弹窗 · 2px 直角统一（与结果页同风格）
   仅作用于详情展示态；.chat-active（进入全屏聊天）由 im-chat.css 管控，不干预
   ============================================================================ */
#consultantModal .modal-card:not(.chat-active),
#listenerModal .modal-card:not(.chat-active) { border-radius: 2px; }
#consultantModal .modal-close,
#listenerModal .modal-close { border-radius: 2px; }

/* 顶部咨询师/倾听师信息卡 + 头像 + 等级徽标 */
#consultantModal .consultant-info,
#listenerModal .consultant-info { border-radius: 2px; }
#consultantModal .consultant-avatar,
#listenerModal .consultant-avatar { border-radius: 2px; }
#consultantModal .consultant-avatar img,
#listenerModal .consultant-avatar img { border-radius: 2px; }
#consultantModal .ci-name .level-tag,
#listenerModal .ci-name .level-tag { border-radius: 2px; }

/* 收藏 / 预约咨询 操作条 */
#consultantModal .ci-act,
#listenerModal .ci-act { border-radius: 2px; }

/* 用户评价条目 */
#consultantModal .cr-item,
#listenerModal .cr-item { border-radius: 2px; }

/* 套餐区 + 套餐条目 + 购买按钮 + 底部提示 */
#consultantModal .consultant-packages,
#listenerModal .consultant-packages { border-radius: 2px; }
#consultantModal .cp-item,
#listenerModal .cp-item { border-radius: 2px; }
#consultantModal .cp-buy,
#listenerModal .cp-buy { border-radius: 2px; }
#consultantModal .cp-tip,
#listenerModal .cp-tip { border-radius: 2px; }

/* 底部「开始咨询 / 立即倾诉」按钮 */
#consultantModal .consult-start-area .btn-primary,
#listenerModal .consult-start-area .btn-primary { border-radius: 2px; }