/* theme-polish.css 改为在 HTML 中以独立 <link> 引入（见 index.html）。
   原因：@import 会把 CSS 嵌套进 theme-2026.css，导致
        ① 两者合并成一个大文件，无法被浏览器单独缓存；
        ② @import 位于文件首部时会阻塞后续 CSS 的并行下载。
   该文件承载 IM / 登录 / 空态 / 暗色适配等大量活跃样式，不可删。 */

/* ============================================================
   心启能 · 心力赋能 — 2026 全站视觉升级覆盖表（theme-2026）
   加载顺序：必须位于所有业务 CSS 之后（靠层叠顺序覆盖字面渐变/重复 :root）。
   原则：只升级「通用外壳与基础原语」，不重写页面独有的布局类，保证不破坏功能。
   设计语言：Soft-Tech 静谧科技（数字薰衣草 + 云感暖中性 + 环境网格渐变）。
   ============================================================ */

/* ---------- 1. 重新定义两套 :root 变量（style.css / admin.css 各自重复定义，这里统一刷新） ---------- */
:root {
  /* style.css 命名 */
  --purple-1: #34D399; --purple-2: #059669; --purple-3: #10B981; --purple-4: #6EE7B7; --purple-5: #A7F3D0;
  --ink: #16312A; --gray-1: #4A5A52; --gray-2: #6B7B73; --gray-3: #7C948A;
  --line: #E6EEE9; --bg: #F4F8F5; --yellow: #E08A0B; --blue: #3B82F6; --red: #F43F5E; --green: #0EA672;
  --radius: 18px;
  /* admin.css 命名 */
  --purple: #059669; --purple-deep: #065F46; --gray: #6B7B73; --card: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(15,45,35,.04), 0 2px 8px rgba(15,45,35,.05);
  --shadow-md: 0 10px 30px rgba(6,95,70,.10);
}

/* ---------- 2. 全局基础打磨（原语层） ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: var(--lh-base);
}
::selection { background: rgba(16,185,129,.22); color: var(--brand-deep); }
*:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; border-radius: 6px; }
/* 精致滚动条 —— 中性灰、细、悬停才明显。
   历史问题：此前 `*::-webkit-scrollbar` 用品牌绿 rgba(16,185,129,.30) + 8px 宽，
   在表单类滚动区（如课程编辑器左右两栏）会形成两条贯穿全高的浅绿色竖条，
   视觉上像「莫名其妙的条状控件」。改为中性灰后滚动条回归「隐形工具」定位。 */
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.28) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(100,116,139,.24); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.45); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- 3. H5 通用外壳（仅 .app 作用域，保护后台桌面顶栏） ---------- */
.app { background: var(--bg); }

/* 顶栏：环境网格渐变 + 柔和品牌光晕 + 顺滑阴影 */
.app .topbar {
  background: var(--brand-mesh);
  box-shadow: 0 6px 24px rgba(6,95,70,.28);
  padding: 13px 18px;
  padding-top: calc(13px + env(safe-area-inset-top));
  transition: box-shadow var(--dur) var(--ease);
}
.app .topbar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 85% -10%, rgba(255,255,255,.18), transparent 55%);
}
.app .topbar-logo { font-size: 20px; letter-spacing: 1.2px; }
.app .topbar-sub { color: rgba(255,255,255,.92); }

/* 底部导航：更高级的磨砂浮岛 + 更大圆角 + 柔光
   性能：blur 22px → 12px，与 tabbar.css 口径统一。
   两者原本对同一元素各写一份（18px vs 22px），既浪费又打架。 */
.tabbar {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid rgba(230,238,233,.9);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 34px rgba(15,45,35,.10);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  will-change: backdrop-filter;
  transform: translateZ(0);
}
.tab { color: var(--gray-3); font-size: 10.5px; font-weight: 600; letter-spacing: .3px; }
.tab.active { color: var(--brand-2); font-weight: 800; }
.tab.active .tab-ico { background: linear-gradient(180deg, rgba(5,150,105,.18), rgba(16,185,129,.10)); box-shadow: 0 4px 12px rgba(16,185,129,.18); }
.tab.active .tab-svg { filter: drop-shadow(0 2px 4px rgba(16,185,129,.35)); }

/* 主按钮：统一品牌渐变 + 柔光投影 + 微字距 */
.btn-primary, .login-card button {
  background: var(--brand-grad);
  border-radius: var(--r-md);
  box-shadow: var(--sh-glow);
  letter-spacing: .6px; font-weight: 700;
  transition: transform .14s var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn-primary:hover, .login-card button:hover { filter: brightness(1.05); box-shadow: var(--sh-3); }
.btn-primary:active, .login-card button:active { transform: scale(.975); }

/* 计算/主行动按钮（测评） */
.btn-calculate {
  background: var(--brand-grad);
  border-radius: var(--r-md);
  box-shadow: var(--sh-glow);
  letter-spacing: 1px;
}

/* 输入框：更柔的圆角 + 聚焦品牌环（checkbox/radio 除外，避免勾选框被撑变形） */
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea,
.login-card input:not([type="checkbox"]):not([type="radio"]), .modal-card input:not([type="checkbox"]):not([type="radio"]), .modal-card select, .modal-card textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field input:not([type="checkbox"]):not([type="radio"]):focus, .field select:focus, .field textarea:focus,
.login-card input:not([type="checkbox"]):not([type="radio"]):focus, .modal-card input:not([type="checkbox"]):not([type="radio"]):focus, .modal-card select:focus, .modal-card textarea:focus {
  border-color: var(--brand-2);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(16,185,129,.16);
}

/* 卡片：与 style.css 卡牌设计保持一致（4px 圆角 + 彩色卡纸质感）；
   注意本文件在 style.css 之后加载，同特异性会覆盖，故此处必须与卡牌正式设计同步 */
.card { border-radius: 4px; 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); }

/* 弹窗：更大圆角 + 柔光 + 标题品牌渐变 */
.modal-mask { background: rgba(15,45,35,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-card, .modal-box {
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 22px 20px;
}
.modal-head h2, .modal-title {
  font-size: 19px; font-weight: 800;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.modal-close { background: var(--c-surface-2); color: var(--c-sub); transition: background var(--dur) var(--ease); }
.modal-close:hover { background: rgba(16,185,129,.14); }

/* 区块标题：加粗品牌竖条 */
.section-title { font-size: 17px; font-weight: 800; }
.section-title::before {
  width: 5px; height: 17px; border-radius: 5px;
  background: var(--brand-grad);
}
.page-head h2 { font-size: 22px; font-weight: 800; letter-spacing: var(--ls-tight); }
.page-head p { color: var(--gray-2); }

/* 登录/注册：环境网格渐变背景 + 卡片柔光 */
.auth-bg { background: var(--brand-mesh); }
.auth-bg::after { background: radial-gradient(circle at 85% 12%, rgba(255,255,255,.25), transparent 42%), radial-gradient(circle at 8% 88%, rgba(251,113,133,.22), transparent 45%); }
.auth-card { border-radius: var(--r-2xl); box-shadow: 0 30px 70px rgba(15,45,35,.28); padding: 34px 28px 26px; }
.auth-logo { font-size: 30px; letter-spacing: 2px; }
.auth-tabs { background: var(--c-surface-2); border-radius: var(--r-md); }
.auth-tab.active { color: var(--brand-2); box-shadow: var(--sh-1); }

/* 品牌标题模块（卡牌系统头）：网格渐变 */
.title-module { background: var(--brand-mesh); box-shadow: var(--sh-2); }

/* 额度横幅：薰衣草柔彩 */
.quota-banner { background: linear-gradient(135deg, #ECFDF5, #E3DAFD); border-color: rgba(16,185,129,.28); color: #064E3B; }
.quota-banner.vip { background: linear-gradient(135deg, #FDF0DA, #FCE7B8); border-color: rgba(224,138,11,.3); color: #92510A; }
.quota-banner .quota-btn { background: var(--brand-2); box-shadow: var(--sh-glow); }

/* 进度条：品牌渐变 */
.progress-fill { background: var(--brand-grad); }

/* 说明区：品牌浅 tint */
.instructions-compact { background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.06)); border-color: rgba(16,185,129,.18); }
.instructions-title-row, .progress-label { color: var(--brand-2); }
.step-badge { background: var(--brand-grad); }

/* ---------- 4. 后台（admin.css）精致化 ---------- */
.login-wrap { background: var(--brand-mesh); }
.login-card { border-radius: var(--r-2xl); box-shadow: 0 30px 70px rgba(15,45,35,.30); }
.sidebar { background: linear-gradient(180deg, #04241A 0%, #0B3D2E 45%, #0F3D2F 100%); box-shadow: 4px 0 30px rgba(4,36,26,.30); }
.topbar-link:hover { border-color: var(--brand-2); color: var(--brand-2); background: rgba(16,185,129,.10); }
.stat-card::before { background: var(--brand-grad); }
.stat-card:hover { border-color: #D1FAE5; box-shadow: var(--shadow-md); }
.panel-title::before { background: var(--brand-grad); }
.ov-kpi-group-h::before { background: var(--brand-grad); }
.tb-select:focus { border-color: var(--brand-2); }
.topbar-avatar { background: var(--brand-grad); box-shadow: var(--sh-glow); }

/* 后台按钮（admin.css .btn-primary 等）统一质感 */
.admin-content .btn-primary, .btn-primary {
  border-radius: var(--r-md);
  box-shadow: var(--sh-glow);
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); }

/* ---------- 5. 首页 DIY 主视觉模块（home.css）统一到新品牌「periwinkle 紫雾」 ---------- */
.h-btn { background: var(--brand-grad); box-shadow: var(--sh-glow); letter-spacing: .8px; }
.h-btn-plain { background: rgba(16,185,129,.12); color: var(--brand-2); }
.hs-banner { background: var(--brand-mesh); box-shadow: var(--sh-2); }
.hs-entry { background: var(--brand-mesh); box-shadow: var(--sh-2); }
.hs-hero { background: var(--brand-mesh); box-shadow: var(--sh-2); }
.hs-hero-badge, .hs-banner .h-btn, .hs-entry .h-btn { background: #fff; color: var(--brand-2); }
.hs-title { font-size: 19px; font-weight: 800; letter-spacing: .3px; }
.hs { box-shadow: var(--sh-1); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hs:hover { box-shadow: var(--sh-2); }

/* ============================================================
   6. 后台组件精致化 · Soft-Tech 全覆盖
   ------------------------------------------------------------------
   在保持所有功能与布局尺寸不变的前提下，统一升级「通用外壳」的质感：
   侧栏环境光晕、导航发光态、通透毛玻璃顶栏、统一卡片圆角/柔光、精致表头。
   原则：只做「质感」升级，不改变任何 class 的盒模型与交互语义。
   ============================================================ */

/* 6.1 侧栏：顶部环境光晕（深紫侧栏不再是一块死板色块） */
.sidebar { position: relative; }
.sidebar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(16,185,129,.38), transparent 58%),
    radial-gradient(80% 36% at -10% -2%, rgba(251,113,133,.14), transparent 52%);
}
.sidebar > * { position: relative; z-index: 1; }

/* 6.2 品牌区：logo 柔光 */
.brand-mark {
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 6px 20px rgba(16,185,129,.4);
  transition: box-shadow var(--dur) var(--ease);
}
.sidebar-brand { border-bottom-color: rgba(255,255,255,.1); }

/* 6.3 导航分组标题：更精致字距 */
.nav-group-title { letter-spacing: .9px; font-weight: 700; }

/* 6.4 导航项：柔和圆角 + active 发光态 */
.nav-item {
  border-radius: 10px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-item.active {
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* 6.5 顶栏：通透毛玻璃
   性能：blur 20px → 12px（常驻 fixed，滚动每帧合成）。
   同时补 -webkit- 前缀顺序，保证 Safari 生效。 */
.topbar {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  will-change: backdrop-filter;
}

/* 6.6 卡片语言统一：更大圆角 + 分层柔光 */
.stat-card, .trend-card, .todo-item, .table-wrap, .ud-section, .kp-card {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.stat-card:hover, .trend-card:hover { box-shadow: var(--sh-2); border-color: #D1FAE5; }

/* 6.7 表格表头：品牌浅紫底 */
th { background: #F7F6FD; color: var(--brand-deep); }

/* 6.8 弹窗：更大圆角 + 柔光 */
.modal-card, .modal-box { border-radius: var(--r-xl); box-shadow: var(--sh-3); }

/* 6.9 筛选标签 active：品牌渐变发光 */
.filter-tabs .ftab { border-radius: var(--r-pill); }
.filter-tabs .ftab.active { background: var(--brand-grad); border-color: transparent; box-shadow: var(--sh-glow); }

/* 6.10 链接按钮：品牌色统一 */
.link-btn { color: var(--brand-2); }
.link-btn:hover { color: var(--brand-deep); }

/* ============================================================
   7. 科技感增强 · 大平台数据驾驶舱质感（2026）
   ------------------------------------------------------------------
   在 Soft-Tech 基础上叠加「科技感」：网格底纹、扫描光晕、卡片高光线、
   数据数值光感。克制而温暖，契合「心力成长」品类，不冷硬。
   ============================================================ */

/* 7.1 内容区：极淡品牌网格底纹（科技底纹，不干扰阅读） */
.content {
  background-image:
    linear-gradient(rgba(16,185,129,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.038) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* 7.2 侧栏：叠加纵向扫描光（在环境光之上，科技呼吸感） */
.sidebar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(16,185,129,.05) 45%, rgba(110,231,183,.10) 50%, rgba(16,185,129,.05) 55%, transparent 100%);
}

/* 7.3 卡片：顶部品牌高光线（玻璃拟态高光，增强立体感） */
.stat-card, .trend-card, .table-wrap, .ud-section, .kp-card {
  position: relative;
}
.stat-card::before {
  height: 3px;
  background: linear-gradient(90deg, #34D399 0%, #10B981 45%, #6EE7B7 100%);
  box-shadow: 0 1px 6px rgba(16,185,129,.28);
}

/* 7.4 数据数值：品牌渐变文字 + 微光（数据大屏质感） */
.stat-value {
  background: linear-gradient(135deg, #065F46 0%, #059669 60%, #10B981 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 7.5 面板标题：竖条增强为发光渐变 */
.panel-title::before {
  width: 28px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #34D399, #10B981);
  box-shadow: 0 2px 8px rgba(16,185,129,.35);
}

/* 7.6 表格行 hover：品牌微光（科技扫描感） */
tbody tr:hover { background: linear-gradient(90deg, rgba(16,185,129,.05), rgba(16,185,129,.02)); }

/* 7.7 主按钮：科技感微光扫过 */
.btn-primary, .cf-save, .as-btn, .form-grid .submit {
  position: relative; overflow: hidden;
}
.btn-primary::after, .cf-save::after, .as-btn::after, .form-grid .submit::after {
  content: ''; position: absolute; top: 0; left: 0; width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  /* 性能：left 过渡每帧触发重排 → 改 transform（合成层，零重排）*/
  transform: translateX(-220%) skewX(-18deg);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after, .cf-save:hover::after, .as-btn:hover::after, .form-grid .submit:hover::after {
  transform: translateX(340%) skewX(-18deg);
}

/* ============================================================
   8. 私有调色板统一刷新（各页面历史私有变量 → 新品牌体系）
   ------------------------------------------------------------------
   历史演进中多个页面各自定义了一套"品牌紫 / 中性色"私有变量，且不参与
   style.css / admin.css 的公共命名，导致同类组件颜色漂移、风格割裂。
   本文件最后加载，这里统一刷新到 tokens.css 的新品牌值（运行时换肤，零功能改动）。
   ============================================================ */
:root {
  /* 课程商城 / 课程播放（course-store.css）：--cs 主色 / --cs2 渐变浅端 / --sub 次级文字 */
  --cs: #059669; --cs2: #34D399; --sub: #4A5A52;

  /* 测评报告打印（report.css）：私有紫色阶梯与文字色 */
  --purple-dark: #065F46; --purple-light: #EEF5F0;
  --text: #16312A; --text-soft: #4A5A52; --text-faint: #6B7B73; --border: #E6EEE9;

  /* 咨询师工作台（workbench.css）：浅色底与淡紫层级 */
  --purple-lighter: #EEF5F0;

  /* 讲师工作台（instructor.html 内联）：--brand 主色 + 三级文字 */
  --brand: #059669; --text2: #4A5A52; --text3: #6B7B73;

  /* 情绪急救箱（emotion-firstaid.html 内联）：--p1/2/3 品牌紫阶梯 */
  --p1: #34D399; --p2: #059669; --p3: #10B981;

  /* 后台运营小部件（admin.html #uiTokens）：独立第三套品牌紫 */
  --primary: #059669; --primary-weak: #EEF5F0; --border-2: #E3E0F4;
}

/* ============================================================
   阶段四 · Layout 增量精致化
   （在第 6/7 节基础上补齐：选中态指示条 / 面包屑层次 / 暗色模式顶栏）
   ============================================================ */
/* 导航选中态：左侧品牌指示条（增强扫读性，不占布局） */
.nav-item { position: relative; }
.nav-item::before {
  content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 58%; border-radius: 3px;
  background: var(--brand-grad);
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-item.active::before { transform: translateY(-50%) scaleY(1); }

/* 面包屑：品牌分隔符 + 可读层次 */
.topbar-crumb { color: var(--gray-3); font-size: 12.5px; letter-spacing: .2px; }

/* 顶栏标题：品牌色微光 */
.topbar-title { letter-spacing: -.3px; }

/* 顶栏快捷链接：品牌 tint hover */
.topbar-link {
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

/* 暗色模式：顶栏毛玻璃切换为深色 + 表头/面包屑适配
   ⚠ Bug 修复：原写法用 `.topbar`（特异性 0,1,0），会被上面的
      `.app .topbar`（0,2,0）压掉 → 暗色下顶栏仍是亮绿渐变，
      而文字被 style.css 强制为白色 → 亮底白字不可读。
      这里改用同等特异性 `.app .topbar` 才能真正覆盖。 */
@media (prefers-color-scheme: dark) {
  .app .topbar,
  .topbar {
    background: rgba(9, 24, 20, .88);
    border-bottom-color: rgba(52, 211, 153, .14);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .46);
  }
  .app .topbar::after {
    background: radial-gradient(80% 120% at 85% -10%, rgba(52, 211, 153, .12), transparent 55%);
  }
  .app .topbar-sub { color: rgba(226, 238, 233, .88); }
  .topbar-crumb { color: #8AA69C; }
  .topbar-title { color: #E6EEE9; }
  th { background: var(--bg-2); color: var(--c-sub); }
}