/* ============================================================
   心启能 · 前端细节打磨层（app-polish）
   ------------------------------------------------------------
   目标：把每一处细节推到国际一流水准 —— 发丝线、边角、阴影、
        间距、过渡、3D 立体感，逐项精修。

   四条铁律（贯穿全文件）：
     ① 不改配色体系 —— 只用变量，不新增任何颜色常量；
     ② 不改布局尺寸 —— 只改 border / shadow / radius / 间距微调 /
        transform / opacity，绝不动 width/height/position 布局值；
     ③ 不改功能 —— 纯 CSS，不触碰任何 JS 逻辑与 DOM；
     ④ 性能优先 —— 动效只碰 transform / opacity（合成层），
        绝不动 width/height/top/left（触发重排）；
        阴影层数 ≤3，毛玻璃半径 ≤12px，不滥用 will-change。

   加载：置于所有业务 CSS 之后，靠层叠顺序做"收口"。
   ============================================================ */

/* ============================================================
   0. 打磨令牌（只定义"怎么画"，不定义"什么颜色"）
   ============================================================ */
:root {
  /* —— 圆角阶梯：统一收口，避免各处圆角各写各的 —— */
  --pf-r-xs: 8px;  --pf-r-sm: 12px; --pf-r-md: 16px;
  --pf-r-lg: 20px; --pf-r-xl: 26px; --pf-r-full: 999px;

  /* —— 发丝线：用 color-mix 从现有边框色派生，零新增色 —— */
  --pf-hair: color-mix(in srgb, var(--c-ink, var(--ink)) 9%, transparent);
  --pf-hair-2: color-mix(in srgb, var(--c-ink, var(--ink)) 14%, transparent);
  --pf-hair-top: color-mix(in srgb, var(--c-surface) 70%, transparent);

  /* —— 三层投影：环境影 + 接触影 + 极淡外扩 —— */
  --pf-s1: 0 1px 2px rgba(15,45,35,.05), 0 1px 1px rgba(15,45,35,.04);
  --pf-s2: 0 1px 2px rgba(15,45,35,.05), 0 6px 16px -6px rgba(15,45,35,.12);
  --pf-s3: 0 2px 4px rgba(15,45,35,.05), 0 14px 32px -10px rgba(15,45,35,.16);

  /* —— 内高光：塑料/玻璃质感的来源，模拟顶面受光 —— */
  --pf-inset-top: inset 0 1px 0 var(--pf-hair-top);

  /* —— 品牌辉光（复用现有品牌色，不新增）—— */
  --pf-glow:  0 0 0 1px color-mix(in srgb, var(--brand-2, var(--brand-2)) 22%, transparent),
              0 6px 18px -8px color-mix(in srgb, var(--brand-2, var(--brand-2)) 28%, transparent);
  --pf-glow-s: 0 0 0 1px color-mix(in srgb, var(--brand-2, var(--brand-2)) 30%, transparent),
              0 3px 10px -4px color-mix(in srgb, var(--brand-2, var(--brand-2)) 34%, transparent);

  /* —— 交互节奏 —— */
  --pf-t: 180ms cubic-bezier(.16, 1, .3, 1);
  --pf-t-slow: 280ms cubic-bezier(.16, 1, .3, 1);
  /* 压感回弹 */
  --pf-press: cubic-bezier(.34, 1.42, .64, 1);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  /* 旧内核：发丝线回退到半透明黑，保证层次不丢失 */
  :root {
    --pf-hair: rgba(15,45,35,.09);
    --pf-hair-2: rgba(15,45,35,.14);
    --pf-hair-top: rgba(255,255,255,.70);
  }
}

/* ============================================================
   1. 卡片 —— 立体感的主要载体
   ============================================================ */
/* 通用卡片：统一圆角 + 发丝边 + 内高光 + 分层投影 */
.stat-card, .trend-card, .todo-item, .table-wrap, .ud-section, .kp-card,
.cockpit-card, .cockpit-kpi, .hs-card, .rights-card, .shop-card,
.ci-row, .course-row, .sp-guide-card, .cd-content, .signin-day {
  border-radius: var(--pf-r-lg);
  border: 1px solid var(--pf-hair);
  box-shadow: var(--pf-inset-top), var(--pf-s2);
  transition: transform var(--pf-t), box-shadow var(--pf-t), border-color var(--pf-t);
}
/* 悬浮：抬升 + 投影加深 + 描边转品牌色（仅 transform，零重排）*/
.stat-card:hover, .trend-card:hover, .kp-card:hover,
.cockpit-card:hover, .cockpit-kpi:hover, .rights-card:hover, .shop-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-2, var(--brand-2)) 30%, transparent);
  box-shadow: var(--pf-inset-top), var(--pf-s3);
}
/* 列表行：仅背景过渡，不做位移（避免列表抖动）*/
.todo-item, .ci-row, .course-row, .signin-day {
  transition: background-color var(--pf-t), border-color var(--pf-t), box-shadow var(--pf-t);
}
.todo-item:hover, .ci-row:hover, .course-row:hover, .signin-day:hover {
  border-color: color-mix(in srgb, var(--brand-2, var(--brand-2)) 26%, transparent);
  box-shadow: var(--pf-inset-top), var(--pf-s2);
}

/* ============================================================
   2. 按钮 —— 触感与反馈
   ============================================================ */
/* 主按钮：内高光 + 品牌辉光 + 按压回弹 */
.btn-primary, .btn-calculate, .cf-save, .as-btn, .form-grid .submit,
.add-btn, .ci-add, .hs-entry-h-btn {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--pf-r-sm);
  box-shadow: var(--pf-inset-top),
              0 2px 6px -2px color-mix(in srgb, var(--brand-2, var(--brand-2)) 38%, transparent);
  transition: transform var(--pf-t) var(--pf-press),
              box-shadow var(--pf-t),
              filter var(--pf-t);
}
.btn-primary:hover, .btn-calculate:hover, .cf-save:hover, .as-btn:hover,
.form-grid .submit:hover, .add-btn:hover, .ci-add:hover, .hs-entry-h-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--pf-inset-top),
              0 6px 16px -4px color-mix(in srgb, var(--brand-2, var(--brand-2)) 46%, transparent);
}
.btn-primary:active, .btn-calculate:active, .cf-save:active, .as-btn:active,
.form-grid .submit:active, .add-btn:active, .ci-add:active {
  transform: translateY(0) scale(.985);
  box-shadow: var(--pf-inset-top), 0 1px 3px -1px rgba(15,45,35,.20);
}
/* 禁用态：去掉辉光，避免"看起来可点" */
.btn-calculate.btn-disabled, .btn-primary:disabled, .add-btn:disabled {
  transform: none !important;
  box-shadow: none;
  filter: grayscale(.35);
}

/* 次级按钮：细描边 + 浅内高光 */
.btn-ghost, .ghost-btn, .hs-entry-h-btn, .rec-more, .cp-btn, .kp-funnel-go {
  border-radius: var(--pf-r-sm);
  border: 1px solid var(--pf-hair-2);
  box-shadow: var(--pf-inset-top);
  transition: transform var(--pf-t), box-shadow var(--pf-t),
              border-color var(--pf-t), background-color var(--pf-t);
}
.btn-ghost:hover, .ghost-btn:hover, .rec-more:hover, .cp-btn:hover, .kp-funnel-go:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-2, var(--brand-2)) 40%, transparent);
  box-shadow: var(--pf-inset-top), var(--pf-s1);
}
.btn-ghost:active, .ghost-btn:active, .rec-more:active { transform: translateY(0) scale(.985); }

/* ============================================================
   3. 表单 —— 输入态的精确反馈
   ------------------------------------------------------------
   ⚠ 作用域说明（2026-10-11 修正）：
     本规则特异度为 (0,3,1)，会压掉业务 CSS 里 (0,1,0) 的输入样式。
     嵌入式输入（如首页搜索框 .hs-topbar-input）本身就位于一个
     胶囊/玻璃容器内，自身必须是「无框透明」，否则会出现
     「白输入框 + 圆角边框」套在「胶囊容器」里的双层结构。

     因此这里排除「位于带容器语义类名内」的输入框，
     由它们各自的文件负责外观。
   ============================================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select, .form-input, .ins-search, .ins-select, .rte-input {
  border-radius: var(--pf-r-sm);
  border: 1px solid var(--pf-hair-2);
  background: var(--c-surface, var(--c-surface));
  box-shadow: var(--pf-inset-top);
  transition: border-color var(--pf-t), box-shadow var(--pf-t),
              background-color var(--pf-t);
}
/* —— 嵌入式无框输入：还原「透明无边框」，由外层容器承担视觉 —— */
.hs-topbar-input,
.modal-card input:not([type="checkbox"]):not([type="radio"]),
.ci-add input,
.apf-preview input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hs-topbar-input:focus,
.modal-card input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: transparent !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus, .form-input:focus,
.ins-search:focus, .ins-select:focus {
  outline: none;
  border-color: var(--brand-2, var(--brand-2));
  box-shadow: var(--pf-inset-top),
              0 0 0 3px color-mix(in srgb, var(--brand-2, var(--brand-2)) 16%, transparent);
}
::placeholder { color: var(--c-mut, var(--c-mut)); opacity: 1; }
/* 嵌入式输入的 placeholder 跟随外层玻璃容器的墨色 */
.hs-topbar-input::placeholder { color: var(--hs-tb-ink, var(--c-surface)); opacity: .72; }

/* ============================================================
   4. 底部导航 & 顶栏 —— 常驻外壳的质感
   ============================================================ */
/* tabbar：浮岛感 —— 圆角 + 上沿高光 + 柔和外投影 */
.tabbar {
  border-top: 1px solid var(--pf-hair);
  box-shadow: 0 -1px 0 var(--pf-hair-top),
              0 -8px 28px -14px rgba(15,45,35,.28);
}
/* 激活态：药丸底 + 品牌辉光 */
.tab.active { color: var(--brand-2, var(--brand-2)); }
.tab.active .tab-ico {
  border-radius: var(--pf-r-full);
  box-shadow: var(--pf-glow-s);
}
/* 按压回弹 */
.tab { transition: transform var(--pf-t) var(--pf-press), color var(--pf-t); }
.tab:active { transform: scale(.92); }

/* 顶栏：内高光 + 发丝下边 */
.app .topbar, .topbar {
  border-bottom: 1px solid var(--pf-hair);
  box-shadow: 0 1px 0 var(--pf-hair-top),
              0 6px 24px -18px rgba(15,45,35,.34);
}

/* ============================================================
   5. 徽标 / 标签 / 芯片 —— 小件的精致度
   ============================================================ */
/* ⚠ .mc-tier（会员档位卡，300px+ 高的大卡片）不得加入本组：
   本组是「小徽章胶囊统一规则」（--pf-r-full = 999px），
   误列会让整张档位卡被拉成椭圆药丸形。 */
.pill, .tag, .ci-tag, .status-badge, .emp-hstat,
.wb-dt-badge, .insf2-chip, .insf2-no, .as-tag, .th-badge {
  border-radius: var(--pf-r-full);
  border: 1px solid var(--pf-hair);
  letter-spacing: .3px;
  transition: transform var(--pf-t) var(--pf-press),
              box-shadow var(--pf-t), border-color var(--pf-t);
}
.pill:hover, .tag:hover, .ci-tag:hover, .as-tag:hover {
  transform: translateY(-1px);
  box-shadow: var(--pf-s1);
}
/* 圆点状态：呼吸 */
.listen-dot, .im-timer .dot {
  will-change: transform, opacity;
}

/* ============================================================
   6. 弹层 —— 立体感最强的地方
   ============================================================ */
.modal-card, .modal-box, .catpick-card, .ins-modal, .demo-card,
.confirm-card, .sheet-card {
  border-radius: var(--pf-r-xl);
  border: 1px solid var(--pf-hair);
  box-shadow: var(--pf-inset-top),
              0 8px 24px -8px rgba(15,45,35,.22),
              0 32px 64px -24px rgba(15,45,35,.30);
  transition: transform var(--pf-t-slow), box-shadow var(--pf-t-slow), opacity var(--pf-t-slow);
}
/* 弹层入场：轻微上浮 + 淡入（只动 transform/opacity）*/
.modal-card, .modal-box, .catpick-card, .ins-modal {
  animation: pf-pop 260ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes pf-pop {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* 遮罩：淡入 */
.modal-mask, .demo-mask {
  animation: pf-fade 200ms ease-out both;
}
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
/* 静态装饰光斑：原本 blur(48px) 且父级可滚动，每帧重算 —— 降为 28px */
.cp-glow { filter: blur(28px); will-change: auto; }

/* ============================================================
   7. 列表 / 表格 —— 分隔与悬浮
   ============================================================ */
.rte-table th, .rte-table td, table th, table td {
  border-bottom: 1px solid var(--pf-hair);
}
table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-surface-2, var(--c-surface-2));
  letter-spacing: .3px;
  box-shadow: 0 1px 0 var(--pf-hair-2);
}
tbody tr { transition: background-color 140ms linear; }

/* ============================================================
   8. 骨架屏 / 空态 —— 等待时的质感
   ============================================================ */
.xqn-skeleton, .skeleton, .skel, .ph {
  background: linear-gradient(100deg,
    var(--c-surface-2, var(--c-surface-2)) 38%,
    color-mix(in srgb, var(--c-surface, var(--c-surface)) 70%, var(--c-surface-2, var(--c-surface-2))) 50%,
    var(--c-surface-2, var(--c-surface-2)) 62%);
  background-size: 220% 100%;
  border-radius: var(--pf-r-sm);
  animation: pf-shimmer 1.4s ease-in-out infinite;
}
@keyframes pf-shimmer { from { background-position: -180% 0; } to { background-position: 180% 0; } }
.empty-tip { color: var(--c-mut, var(--c-mut)); }

/* ============================================================
   9. 页面级 —— 背景微纹理 + 内容浮岛
   ============================================================ */
.app, #app {
  /* 极淡的品牌网格（0.9% 不透明度），只在大屏显现，几乎零感知 */
  background-image:
    linear-gradient(color-mix(in srgb, var(--brand-2, var(--brand-2)) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--brand-2, var(--brand-2)) 3%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}
.page, .main { position: relative; z-index: 1; }

/* ============================================================
   10. 键盘可达性
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--brand-2, var(--brand-2));
  outline-offset: 2px;
  border-radius: var(--pf-r-xs);
}

/* ============================================================
   11. 暗色适配 —— 投影更深、内高光更弱
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --pf-hair: rgba(255,255,255,.10);
    --pf-hair-2: rgba(255,255,255,.16);
    --pf-hair-top: rgba(255,255,255,.10);
    --pf-s1: 0 1px 2px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.045);
    --pf-s2: 0 1px 2px rgba(0,0,0,.38), 0 6px 16px -6px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.06);
    --pf-s3: 0 2px 4px rgba(0,0,0,.40), 0 14px 32px -10px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.075);
    --pf-glow:  0 0 0 1px rgba(52,211,153,.22), 0 6px 18px -8px rgba(52,211,153,.28);
    --pf-glow-s: 0 0 0 1px rgba(52,211,153,.32), 0 3px 10px -4px rgba(52,211,153,.36);
  }
  .app, #app {
    background-image:
      linear-gradient(rgba(110,231,183,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(110,231,183,.045) 1px, transparent 1px);
  }
}

/* ============================================================
   12. 首页主视觉 & 测评流程 —— 重点区域精修
   ============================================================ */
/* 首页 Hero / 横幅：浮起的玻璃板 */
.hs-hero, .hs-banner, .hs-entry, .auth-bg, .title-module {
  position: relative; overflow: hidden;
}
.hs-hero::after, .hs-banner::after, .hs-entry::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: pf-sheen 8s var(--pf-t-slow) infinite;
}
@keyframes pf-sheen { from { background-position: -160% 0; } to { background-position: 260% 0; } }
/* ⚠ Bug 修复：此处曾写 `.hs-hero > * { position: relative }`，
   把 `.hs-hero-cards`（原本 position:absolute 的扇形卡牌装饰）
   覆盖成了普通流式定位 → 卡牌掉进文档流，把 Hero 撑出巨大空白、
   压住描述文字与按钮。
   正确做法：只提升 z-index（伪元素已固定在 z-index:0），
   绝不改动子元素的定位方式。
   注：.hs-hero-cards 自身已有 z-index 层（c1=1/c2=3/c3=2），
   提升整层为 1 不会改变卡牌之间的层叠关系。 */
.hs-hero > *, .hs-banner > *, .hs-entry > * { z-index: 1; }

/* 测评进度条（.progress-*）
   ------------------------------------------------------------
   ⚠ 回归修复（2026-10-11）：
     原先在此给「内层」.progress-container 加了 border-radius:999px +
     overflow:hidden，而该元素没有内边距 —— 文字紧贴容器边缘，
     被胶囊圆角裁掉，表现为「已选卡牌 / 0/15 显示不全」。
     且 .progress-module 本身已是 14px 卡片，属于重复 treatment。
     现将进度条样式统一收敛到 style.css（与业务样式同源），
     此处只保留填充微光，不再改容器几何。 */
.progress-fill {
  border-radius: var(--pf-r-full);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--brand-2, var(--brand-2)) 50%, transparent);
}

/* 卡牌槽位：凹陷感（内阴影），空槽也有质感 */
.card-slot {
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-ink, var(--ink)) 4%, transparent);
  box-shadow: inset 0 2px 4px rgba(15,45,35,.10), inset 0 0 0 1px var(--pf-hair);
  transition: box-shadow var(--pf-t), background-color var(--pf-t);
}
.card-slot.drop-active, .card-slot:hover {
  background: color-mix(in srgb, var(--brand-2, var(--brand-2)) 10%, transparent);
  box-shadow: inset 0 2px 4px rgba(15,45,35,.08),
              0 0 0 2px color-mix(in srgb, var(--brand-2, var(--brand-2)) 32%, transparent);
}
/* 拖拽中的卡牌：抬升 + 跟随辉光 */
.card.dragging {
  transform: scale(1.06) rotate(-1.5deg);
  box-shadow: var(--pf-inset-top),
              0 14px 28px -8px rgba(15,45,35,.34),
              0 0 0 2px color-mix(in srgb, var(--brand-2, var(--brand-2)) 40%, transparent);
  cursor: grabbing;
}

/* 会员等级环：内凹轨道 */
.lv-ring { box-shadow: inset 0 0 0 1px var(--pf-hair-2), 0 2px 6px -2px rgba(15,45,35,.16); }
.lv-ring::after { box-shadow: inset 0 2px 5px rgba(15,45,35,.16); }

/* 权益/额度卡：顶部渐隐高光 */
.rights-card, .wallet-hero, .inv-progress-bar, .r2-cc-bar {
  overflow: hidden; position: relative;
}
.rights-card::before, .wallet-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pf-hair-top), transparent);
  pointer-events: none;
}

/* 统计数值：等宽防跳动 */
.kpi-v, .stat-value, .emp-hstat b, .mc-detail-price, .cs-balance,
.r2-cc-v, .inv-num, .wallet-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.4px;
}

/* ============================================================
   13. 降动效 / 省电 —— 性能兜底
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hs-hero::after, .hs-banner::after, .hs-entry::after { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 移动端省电：关闭非必要常驻动画 */
@media (max-width: 768px) {
  .cp-glow { filter: blur(20px); }
  .xqn-skeleton, .skeleton, .skel, .ph { animation-duration: 2s; }
  /* 首页主视觉的常驻扫光在移动端是持续 GPU 开销 → 直接关闭 */
  .hs-hero::after, .hs-banner::after, .hs-entry::after { animation: none; opacity: 0; }
}
/* 低电量/省电偏好时关闭网格纹理（省一次全屏绘制）*/
@media (prefers-reduced-motion: reduce) {
  .app, #app { background-image: none; }
}