/* ============================================================================
   taste-refine.css  ·  v=20260916v
   审美重塑层（Redesign - Preserve）：在 main/english/ui-refine/mini-program 之后加载，
   仅做视觉覆盖，不改动 DOM、类名、业务逻辑。
   目标：消除 AI 模板廉价感 ——
     1) 去彩虹渐变（功能宫格 8 色 → 克制的浅底彩色图标，仅功能微编码）
     2) 去金色发光（商城积分 hero → 克制的深靛；档案统计卡 → 中性白卡 + 彩色数据字）
     3) 去霓虹/外发光（按钮、头像、进度条 → 实色或极淡同色，阴影收敛）
     4) 统一中性灰 + 单一品牌色（TDesign 品牌蓝 #0052D9 贯穿，语义色仅表达状态）
     5) 背景去彩色光斑（教育工具宜用洁净中性底）
   原则：动效只在 transform / opacity，统一 150ms；尊重 prefers-reduced-motion。
   ============================================================================ */

/* ==========================================================================
   一、学生端小程序（#mp-app）：消除彩虹 / 金色 / 发光
   ========================================================================== */

/* 背景：去掉蓝色 + 紫色径向光斑，回归 TDesign 洁净中性底 */
#mp-app.mp-app {
  background: var(--mp-bg, #F3F3F3);
}

/* 顶部头部：收敛为单一品牌蓝实色（去掉三段亮蓝渐变 + 径向高光），
   仅保留极淡的同色明暗过渡，避免“塑料感” */
#mp-app .mp-hero {
  background: linear-gradient(170deg, #1A61D9 0%, #0052D9 55%, #0046B8 100%);
  box-shadow: 0 4px 18px rgba(0, 82, 217, .18);
}
/* 去掉右上角径向光斑装饰（AI 模板感来源） */
#mp-app .mp-hero::after {
  display: none;
}

/* 头像：白色半透明徽标保留（头部为品牌蓝），去掉厚边框，改细内描边 */
#mp-app .mp-hero .mp-avatar {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

/* ---- 功能宫格：8 色彩虹渐变 → TDesign 浅底彩色实色（保留轻量功能区分） ---- */
#mp-app .ico-blue   { background: rgba(0, 82, 217, .10);  color: #0052D9; }
#mp-app .ico-green  { background: rgba(43, 164, 113, .12); color: #2BA471; }
#mp-app .ico-orange { background: rgba(227, 115, 24, .12); color: #E37318; }
#mp-app .ico-purple { background: rgba(107, 73, 200, .12); color: #6B49C8; }
#mp-app .ico-cyan   { background: rgba(0, 150, 179, .12);  color: #0096B3; }
#mp-app .ico-pink   { background: rgba(216, 78, 130, .12); color: #D84E82; }
#mp-app .ico-red    { background: rgba(213, 73, 65, .12);  color: #D54941; }
#mp-app .ico-indigo { background: rgba(58, 94, 180, .12);  color: #3A5EB4; }
/* 宫格图标容器去发光阴影，浅色块即视感更安静 */
#mp-app .mp-grid-ico {
  box-shadow: none !important;
}

/* 进度条：去渐变，统一品牌蓝实色，轨道更淡 */
#mp-app .mp-progress-track { background: rgba(0, 82, 217, .10); }
#mp-app .mp-progress-fill {
  background: var(--mp-brand, #0052D9);
}

/* ---- 商城：金色发光 hero → 克制的深靛（积分是信息，不是嘉年华） ---- */
#mp-app .mp-shop-hero {
  background: linear-gradient(160deg, #12244D 0%, #1B3A6B 55%, #0E2A55 100%);
  box-shadow: 0 6px 18px rgba(18, 36, 77, .18);
  color: #fff;
}
#mp-app .mp-shop-hero .mp-pts-num,
#mp-app .mp-shop-hero .mp-pts,
#mp-app .mp-shop-hero b,
#mp-app .mp-shop-hero strong { color: #fff; }
/* 积分数字用暖金作“数据强调”但去掉发光（仅文字色，克制） */
#mp-app .mp-shop-hero .mp-pts-num {
  color: #F5C66B;
  text-shadow: none;
}
#mp-app .mp-shop-hero .mp-pts-tag {
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92);
}
/* 商城卡积分价格：统一为品牌橙色，去掉 800 重彩的刺眼 */
#mp-app .mp-prod-points { color: #E37318; font-weight: 700; }
/* 商品兑换小按钮：金色渐变 → 品牌蓝实色扁平 */
#mp-app .mp-prod-btn {
  background: var(--mp-brand, #0052D9);
  color: #fff;
  box-shadow: none;
}
#mp-app .mp-prod-btn.is-disabled {
  background: rgba(0, 0, 0, .05);
  color: var(--mp-t4, #BBBBBB);
}
/* 商品封面占位：极淡中性 */
#mp-app .mp-prod-cover {
  background: #F2F4F8;
}

/* ---- 商品详情大兑换按钮：去渐变 + 去霓虹外发光，品牌蓝实色 + 极淡阴影 ---- */
#mp-app .mp-redeem-btn {
  background: #0052D9;
  box-shadow: 0 2px 8px rgba(0, 82, 217, .18);
}
#mp-app .mp-redeem-btn:active { background: #0046B8; }
#mp-app .mp-redeem-btn.is-disabled,
#mp-app .mp-redeem-btn:disabled {
  background: #E5E7EB; color: #9CA3AF; box-shadow: none;
}
/* 详情封面占位去蓝渐变，改中性 */
#mp-app .mp-prod-detail-cover {
  background: #F2F4F8;
}

/* ---- 学情档案核心指标卡：彩虹渐变实色卡 → 白卡 + 彩色数据字（高级信息层级） ---- */
#mp-app .mp-stat {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  color: var(--mp-t1, #181818);
  border: 1px solid rgba(0, 0, 0, .04);
}
#mp-app .mp-stat-label { color: var(--mp-t3, #8C8C8C); opacity: 1; font-weight: 500; }
#mp-app .mp-stat-num   { font-weight: 700; }
#mp-app .mp-stat-gold   .mp-stat-num { color: #C77F12; }
#mp-app .mp-stat-blue   .mp-stat-num { color: #0052D9; }
#mp-app .mp-stat-green  .mp-stat-num { color: #2BA471; }
#mp-app .mp-stat-purple .mp-stat-num { color: #6B49C8; }

/* 成绩分布柱条使用语义分档色（绿/蓝/橙/红 = 优/良/及格/待提升），
   已在 JS 数据里收敛为 TDesign 语义色，无需彩虹渐变；圆角收敛 */
#mp-app .mp-progress-fill { border-radius: 0; }

/* “我的”页头像（白卡上）：去蓝紫渐变，改品牌蓝浅底 + 品牌蓝字 */
#mp-app .mp-me-card .mp-avatar {
  background: var(--mp-brand-weak, rgba(0, 82, 217, .10));
  color: var(--mp-brand, #0052D9);
  border: none;
  box-shadow: none;
}

/* 退出按钮：统一为浅红底 + 红字的 TDesign 语义风格，去灰底红边 */
#mp-app .mp-logout {
  background: rgba(213, 73, 65, .06);
  border: none;
  color: var(--mp-error, #D54941);
}

/* TabBar 激活项统一品牌蓝（已一致，阴影克制） */
#mp-app .mp-tabbar { box-shadow: 0 -1px 6px rgba(0, 0, 0, .04); }

/* ==========================================================================
   二、全站 Web（管理端 / 教师端）：收敛发光按钮 / 紫粉渐变，统一品牌蓝
   仅覆盖高饱和、霓虹发光的少数控件，保留 shadcn 中性基底。
   ========================================================================== */

/* 主按钮蓝色渐变 → 品牌蓝实色，去掉重投影 */
.btn-primary,
button.btn-primary {
  background: #2563EB;
}
.btn-primary:hover { background: #1D4ED8; }

/* 页面主视觉头部的蓝色渐变（page header / hero 横幅）：收敛实色 + 极淡过渡 */
.dashboard-header,
.page-banner {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%) !important;
}

/* 收敛一切霓虹外发光：彩色大投影统一压到极淡 */
.eng-btn-primary,
.eng-record-btn,
.eng-subject-card,
.eng-chip.active,
.eng-seg-tab.active {
  box-shadow: none !important;
}

/* 英语打卡模块：粉色渐变 → 品牌蓝实色/浅底，和全站统一，降低甜腻感 */
.eng-btn-primary,
.eng-subject-card.eng-english,
.eng-progress i,
.eng-chip.active,
.eng-seg-tab.active,
.eng-record-btn .eng-mic {
  background: #2563EB !important;
}
/* 选中态 chips / 分段按钮：蓝底必须配白字，避免蓝底蓝字对比度过低 */
.eng-chip.active,
.eng-seg-tab.active {
  color: #ffffff !important;
  border-color: #2563EB !important;
  font-weight: 600;
}
.eng-subject-card.eng-english:hover { background: #1D4ED8 !important; }
.eng-data-box { background: #F1F5F9; }
.eng-record-btn.recording { background: #DC2626 !important; animation: none; }
.eng-tag-purple { background: #EFF6FF; color: #2563EB; }

/* 登录三角色页：品牌紫 → 教育蓝（学生卡图标/按钮/登录按钮统一） */
:root { --purple: #2563EB; }
.login-card-student:hover { border-color: #2563EB; }
.login-card-student .login-card-icon { background: #EFF6FF; color: #2563EB; }
.login-card-student .login-card-btn  { background: #EFF6FF; color: #2563EB; }
.btn-login.student { background: #2563EB; }
.stat-icon-purple { background: #EFF6FF; color: #2563EB; }
.subject-bar-fill.purple { background: #2563EB; }
.br-label-purple { background: #EFF6FF; color: #1D4ED8; }

/* 登录页整页紫蓝渐变背景 → 沉静的教育蓝灰（DESIGN 曾以登录页为例外，此处收敛到品牌蓝） */
.login-page {
  background: linear-gradient(135deg, #0F2557 0%, #1E3A8A 45%, #2563EB 100%) !important;
}

/* AI 讲题/资源类高饱和渐变徽章收敛为品牌蓝 */
.qe-wrong-ai {
  border-color: #2563EB;
  background: #2563EB !important;
}

/* 统计/头像类径向渐变彩球：改为浅底彩色（保留状态区分、去掉球型发光） */
.gradient-green,
.gradient-blue,
.gradient-red,
.gradient-gray,
[class*="radial-"] {
  background-image: none !important;
}

/* ==========================================================================
   三、字体 / 排版 / 动效基线（全站 + 小程序）
   ========================================================================== */
#mp-app, .login-page, .main-content, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 数字统一等宽，避免跳动、增强工具感 */
#mp-app .mp-ov-num,
#mp-app .mp-ms-num,
#mp-app .mp-stat-num,
#mp-app .mp-pts-num,
#mp-app .mp-prod-points,
.stat-card .stat-num,
.metric-card .metric-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 动效收敛到 150ms；仅 transform / opacity */
#mp-app .mp-grid-item,
#mp-app .mp-menu-item,
#mp-app .mp-prod,
#mp-app .mp-tab,
#mp-app .mp-redeem-btn,
#mp-app .mp-prod-btn {
  transition: transform .15s ease, background-color .15s ease,
    box-shadow .15s ease, color .15s ease, opacity .15s ease;
}

/* 尊重减少动态偏好：关闭呼吸/浮动等装饰动画 */
@media (prefers-reduced-motion: reduce) {
  #mp-app *, .eng-record-btn.recording {
    animation: none !important;
    transition: none !important;
  }
}