/* =============================================================
   心灵学堂 · H5 全新设计系统  (深邃靛紫 · 高端感)
   纯 CSS，无构建依赖。类名统一 hx- 前缀，避免与外部冲突。
   ============================================================= */

:root{
  /* 色彩 —— 深邃靛紫 */
  --hx-indigo:#4f46e5;
  --hx-indigo-deep:#4338ca;
  --hx-violet:#8b5cf6;
  --hx-purple:#a855f7;
  --hx-magenta:#c026d3;
  --hx-pink:#ec4899;

  --hx-primary:var(--hx-indigo);
  --hx-grad:linear-gradient(135deg,#4f46e5 0%,#7c3aed 52%,#a855f7 100%);
  --hx-grad-soft:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
  --hx-grad-deep:linear-gradient(160deg,#312e81 0%,#4c1d95 55%,#6d28d9 100%);
  --hx-glow:0 12px 32px -10px rgba(99,102,241,.45);

  /* 面 */
  --hx-bg:#f4f4fb;
  --hx-surface:#ffffff;
  --hx-surface-2:#f1f1fa;
  --hx-surface-3:#e9e9f7;
  --hx-glass:rgba(255,255,255,.72);

  /* 文字 */
  --hx-text:#1c1a33;
  --hx-text-2:#6a678c;
  --hx-text-3:#a09dbd;
  --hx-on-dark:#ffffff;
  --hx-on-dark-2:rgba(255,255,255,.72);

  /* 线 / 阴影 */
  --hx-line:rgba(76,70,160,.10);
  --hx-line-strong:rgba(76,70,160,.18);
  --hx-shadow-sm:0 4px 14px -8px rgba(76,70,160,.30);
  --hx-shadow:0 14px 34px -16px rgba(76,70,160,.35);
  --hx-shadow-lg:0 24px 60px -22px rgba(67,56,202,.45);

  --hx-r-xs:10px;
  --hx-r-sm:14px;
  --hx-r:20px;
  --hx-r-lg:26px;
  --hx-r-pill:999px;

  --hx-app-w:480px;
  --hx-tabbar-h:64px;
  --hx-nav-h:52px;
}

/* ====== 暗色主题（后台「H5 主题设置」可切换） ====== */
[data-theme="dark"]{
  --hx-bg:#0e0f1c;
  --hx-surface:#171826;
  --hx-surface-2:#20213a;
  --hx-surface-3:#2a2c44;
  --hx-glass:rgba(23,24,38,.72);
  --hx-text:#ecedf5;
  --hx-text-2:#a9a7c4;
  --hx-text-3:#74718f;
  --hx-line:rgba(255,255,255,.08);
  --hx-line-strong:rgba(255,255,255,.14);
  --hx-shadow-sm:0 4px 14px -8px rgba(0,0,0,.5);
  --hx-shadow:0 14px 34px -16px rgba(0,0,0,.55);
  --hx-shadow-lg:0 24px 60px -22px rgba(0,0,0,.6);
}
[data-theme="dark"] .hx-tabbar{
  background:linear-gradient(180deg,rgba(23,24,38,.82),rgba(14,15,28,.96));
  box-shadow:0 -6px 30px -12px rgba(0,0,0,.5);
}
[data-theme="dark"] .hx-plan.is-hot{
  background:linear-gradient(180deg,#241a33,#1a1726);
}
/* 全局背景与登录页 */
[data-theme="dark"] body{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(124,58,237,.18) 0%, transparent 60%),
    linear-gradient(180deg,#0e0f1c 0%,#121324 45%,#0e0f1c 100%);
}
[data-theme="dark"] .hx-login{
  background:radial-gradient(900px 500px at 50% -10%,rgba(124,58,237,.16),transparent 60%),linear-gradient(180deg,#0e0f1c,#121324);
}
/* 图片占位（加载前）统一暗色，避免浅色方块 */
[data-theme="dark"] .hx-course__cover,
[data-theme="dark"] .hx-sec .hx-sec-card .hx-course__cover,
[data-theme="dark"] .hx-ds--carousel .hx-sec-card .hx-course__cover,
[data-theme="dark"] .hx-rank-cover{
  background:linear-gradient(135deg,#20213a,#171826);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  /* Alkatip Basma 带 unicode-range，浏览器会自动只对阿拉伯/维文 glyph 使用 */
  font-family:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei","Alkatip Basma","UKIJ Tuz",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color:var(--hx-text);
  background:
    radial-gradient(1200px 600px at 50% -10%, #e7e6fb 0%, transparent 60%),
    linear-gradient(180deg,#ecebfb 0%,#f5f3fb 45%,#f7f4fb 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* ====== 手机画布 ====== */
.hx-app{
  position:relative;
  width:100%;
  max-width:var(--hx-app-w);
  min-height:100vh;
  margin:0 auto;
  background:var(--hx-bg);
  box-shadow:0 0 70px -10px rgba(67,56,202,.18);
  overflow-x:hidden;
}

/* ====== 通用布局工具 ====== */
.hx-px{padding-left:16px;padding-right:16px;}
.hx-pt-nav{padding-top:calc(var(--hx-nav-h) + env(safe-area-inset-top,0px));}
.hx-pb-tab{padding-bottom:calc(var(--hx-tabbar-h) + env(safe-area-inset-bottom,0px) + 12px);}
.hx-muted{color:var(--hx-text-2);}
.hx-muted-2{color:var(--hx-text-3);}
.hx-center{text-align:center;}
.hx-nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hx-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hx-flex{display:flex;align-items:center;}
.hx-between{display:flex;align-items:center;justify-content:space-between;}

/* 横向滚动隐藏滚动条 */
.hx-scroll-x{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.hx-scroll-x::-webkit-scrollbar{display:none;}

/* ====== 顶部导航栏 ====== */
.hx-navbar{
  position:sticky;top:0;z-index:90;
  height:var(--hx-nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  padding-top:env(safe-area-inset-top,0px);
  background:var(--hx-glass);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--hx-line);
}
.hx-navbar--solid{background:var(--hx-grad);border-bottom:none;color:#fff;}
.hx-navbar__title{font-size:17px;font-weight:800;letter-spacing:.5px;}
.hx-navbar__title--grad{
  background:var(--hx-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hx-nav-btn{
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--hx-text);
  background:rgba(255,255,255,.6);
  transition:transform .2s,background .2s;
}
.hx-navbar--solid .hx-nav-btn{background:rgba(255,255,255,.16);color:#fff;}
.hx-nav-btn:active{transform:scale(.9);}
.hx-navbar__side{width:36px;height:36px;display:flex;align-items:center;justify-content:center;}

/* ====== 搜索栏 ====== */
.hx-searchbar{
  display:flex;align-items:center;gap:8px;
  height:42px;padding:0 16px;border-radius:var(--hx-r-pill);
  background:rgba(255,255,255,.85);
  border:1px solid var(--hx-line);
  color:var(--hx-text-3);font-size:13px;
  box-shadow:var(--hx-shadow-sm);
  transition:transform .2s;
}
.hx-searchbar:active{transform:scale(.99);}
.hx-searchbar i{font-size:14px;color:var(--hx-violet);}

/* ====== 首页搜索栏（融入页面，无悬浮卡） ====== */
.hx-home-search{
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 4px;
}

/* ====== HERO 轮播（独立于头部的悬浮卡片，左右与头部对齐） ====== */
.hx-hero{
  position:relative;z-index:2;
  margin-top:0;
  padding:14px 16px 0;
  background:transparent;
  overflow:hidden;
}
.hx-hero__viewport{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#2b2160;
  box-shadow:0 16px 30px -14px rgba(15,10,40,.55);
}
.hx-hero__track{
  display:flex;width:100%;
  transition:transform .6s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.hx-hero__slide{
  flex:0 0 100%;min-width:0;
  position:relative;overflow:hidden;
}
.hx-hero__slide img{
  width:100%;height:172px;
  object-fit:cover;display:block;
}
.hx-hero__mask{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,14,50,0) 42%,rgba(15,10,40,.66) 100%);
}
.hx-hero__caption{
  position:absolute;left:16px;right:16px;bottom:30px;z-index:3;
  color:#fff;pointer-events:none;
}
.hx-hero__title{
  display:block;font-size:17px;font-weight:800;letter-spacing:.4px;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hx-hero__sub{
  display:block;margin-top:5px;font-size:12px;line-height:1.4;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 6px rgba(0,0,0,.4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hx-hero__dots{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:4;padding:5px 10px;
  background:rgba(15,10,40,.30);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:99px;
}
.hx-hero__dot{
  width:6px;height:6px;border-radius:99px;
  background:rgba(255,255,255,.45);cursor:pointer;
  transition:all .35s ease;border:none;
}
.hx-hero__dot.is-active{
  background:#fff;width:18px;
  box-shadow:0 0 8px rgba(255,255,255,.6);
}

/* ====== 区块标题 ====== */
.hx-section{margin-top:26px;}
.hx-section__head{display:flex;align-items:center;justify-content:space-between;padding:0 18px;margin-bottom:14px;}
.hx-section__title{font-size:18px;font-weight:800;letter-spacing:.3px;display:flex;align-items:center;gap:9px;}
.hx-section__title::before{
  content:"";width:5px;height:18px;border-radius:99px;
  background:var(--hx-grad);box-shadow:var(--hx-glow);
}
.hx-section__more{font-size:12px;color:var(--hx-text-3);display:flex;align-items:center;gap:2px;}

/* ====== 功能入口宫格（玻璃卡片，紧贴 Hero 下方） ====== */
.hx-entries{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px;
  margin:14px 14px 0;
  padding:18px 14px 16px;
  background:var(--hx-surface);
  border-radius:20px;
  box-shadow:var(--hx-shadow-sm);
  position:relative;z-index:1;
}
.hx-entry{display:flex;flex-direction:column;align-items:center;gap:7px;transition:transform .22s;}
.hx-entry:active{transform:scale(.90);}
.hx-entry__icon{
  width:48px;height:48px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 7px 18px -6px rgba(99,102,241,.55);
  transition:transform .25s,box-shadow .25s;
}
.hx-entry:hover .hx-entry__icon{transform:scale(1.06) translateY(-2px);}
.hx-entry__icon::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 58%);}
.hx-entry__label{font-size:11.5px;font-weight:600;color:var(--hx-text-2);}

/* ====== 课程分类（flex 居中包装，手机端不偏左） ====== */
.hx-catgrid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px 10px;padding:2px 14px 4px;
}
.hx-cat{
  display:flex;flex-direction:column;align-items:center;gap:8px;width:62px;
  text-decoration:none;color:inherit;transition:transform .22s;
}
.hx-cat:active{transform:scale(.9);}
.hx-cat__icon{
  width:54px;height:54px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:23px;line-height:1;color:#fff;
  background:linear-gradient(135deg,var(--c1,#4f46e5),var(--c2,#7c3aed));
  box-shadow:0 9px 18px -7px rgba(99,102,241,.6);
  position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
.hx-cat__icon::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.24),transparent 55%);}
.hx-cat__icon img{width:100%;height:100%;object-fit:cover;}
.hx-cat__emoji{filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));}
.hx-cat:hover .hx-cat__icon{transform:scale(1.06) translateY(-2px);box-shadow:0 12px 22px -7px rgba(99,102,241,.7);}
.hx-cat__label{
  font-size:12px;font-weight:600;color:var(--hx-text-2);
  max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 分类配色轮换（与功能入口宫格同色系） */
.hx-cat:nth-child(5n+1) .hx-cat__icon{--c1:#4f46e5;--c2:#7c3aed;}
.hx-cat:nth-child(5n+2) .hx-cat__icon{--c1:#10b981;--c2:#059669;}
.hx-cat:nth-child(5n+3) .hx-cat__icon{--c1:#f59e0b;--c2:#d97706;}
.hx-cat:nth-child(5n+4) .hx-cat__icon{--c1:#ec4899;--c2:#db2777;}
.hx-cat:nth-child(5n+5) .hx-cat__icon{--c1:#06b6d4;--c2:#0891b2;}

/* ====== 课程卡片（竖向网格 · 图片为主） ====== */
.hx-courses{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;padding:0 14px;}
.hx-course{
  background:var(--hx-surface);border-radius:var(--hx-r);
  overflow:hidden;
  box-shadow:
    0 6px 18px -8px rgba(76,70,160,.26),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .32s,box-shadow .32s;
}
.hx-course:active{transform:translateY(-4px) scale(.985);box-shadow:var(--hx-shadow-lg);}
.hx-course__cover{
  position:relative;aspect-ratio:4/3;
  background:linear-gradient(135deg,#f1f1fa,#e9e9f7);
  overflow:hidden;
}
.hx-course__cover img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease;}
.hx-course:active .hx-course__cover img{transform:scale(1.05);}
.hx-course__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:20px 11px 9px;
  background:linear-gradient(180deg,transparent,rgba(15,10,40,.62));
  color:#fff;pointer-events:none;
}
.hx-course__teacher{font-size:11px;font-weight:600;color:rgba(255,255,255,.92);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hx-playcount{font-size:11px;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:3px;flex:0 0 auto;}

/* ====== 课程卡片（横向滑动 · 图片为主） ====== */
.hx-courses-h{display:flex;gap:13px;padding:0 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.hx-courses-h::-webkit-scrollbar{display:none;}
.hx-course-h{
  flex:0 0 150px;
  background:var(--hx-surface);border-radius:var(--hx-r);
  overflow:hidden;
  box-shadow:0 6px 16px -8px rgba(76,70,160,.28);
  transition:transform .3s,box-shadow .3s;
}
.hx-course-h:active{transform:translateY(-4px) scale(.98);box-shadow:var(--hx-shadow);}
.hx-course-h .hx-course__cover{
  aspect-ratio:3/4;border-radius:var(--hx-r-sm) var(--hx-r-sm) 0 0;
}

/* ====== 后台配置板块（按 style_key 各异排版） ====== */
.hx-sec{padding:0 14px;}

/* 全局强制：hx-sec 下的所有卡片都用内联 padding-bottom 控比例，图片绝对填满 */
.hx-sec .hx-sec-card .hx-course__cover{
  position:relative;width:100%;overflow:hidden;aspect-ratio:unset !important;
  border-radius:var(--hx-r-sm) var(--hx-r-sm) 0 0;
  background:linear-gradient(135deg,#f1f1fa,#e9e9f7);
}
.hx-sec .hx-sec-card .hx-course__cover img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;
}
.hx-sec-card{
  background:var(--hx-surface);border-radius:var(--hx-r);overflow:hidden;
  box-shadow:0 6px 18px -8px rgba(76,70,160,.26),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .3s,box-shadow .3s;flex:0 0 auto;
}
.hx-sec-card:active{transform:translateY(-3px);box-shadow:var(--hx-shadow-lg);}
.hx-sec-card .hx-course__cover{border-radius:var(--hx-r-sm) var(--hx-r-sm) 0 0;}
.hx-sec-card img{transition:transform .55s ease;}
.hx-sec-card:active img{transform:scale(1.05);}

/* ====== display_style：横滑滚动（直角小卡 · 一屏3+可滑动 · RTL） ====== */
.hx-ds--carousel{
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;direction:rtl;
  -webkit-overflow-scrolling:touch;padding:0 16px;
  scroll-snap-type:x proximity;scroll-padding:0 16px;
}
.hx-ds--carousel::-webkit-scrollbar{display:none;}
.hx-ds--carousel .hx-sec-card{
  flex:0 0 29%;max-width:140px;min-width:96px;scroll-snap-align:start;
  border-radius:0;
}
.hx-ds--carousel .hx-sec-card .hx-course__cover{
  position:relative;width:100%;overflow:hidden;aspect-ratio:unset;
  border-radius:0;
  background:linear-gradient(135deg,#f1f1fa,#e9e9f7);
}
.hx-ds--carousel .hx-sec-card:last-child{margin-inline-end:14px;}
.hx-ds--carousel .hx-course__cover img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

/* ====== display_style：榜单（3门一组，多组横滑） ====== */
.hx-ds--rank{
  display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;direction:rtl;
  -webkit-overflow-scrolling:touch;padding:0 16px;
  scroll-snap-type:x mandatory;scroll-padding:0 16px;
}
.hx-ds--rank::-webkit-scrollbar{display:none;}
.hx-ds--rank-group{
  flex:0 0 80vw;max-width:380px;scroll-snap-align:start;
  background:var(--hx-surface);border-radius:var(--hx-r);overflow:hidden;
  box-shadow:0 4px 16px -6px rgba(76,70,160,.15);
}
.hx-rank-head{
  font-size:15px;font-weight:800;color:var(--hx-text);text-align:right;
  padding:14px 16px 8px;direction:rtl;
}
.hx-rank-item{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--hx-line);cursor:pointer;transition:background .2s;
}
.hx-rank-item:last-child{border-bottom:none;}
.hx-rank-item:active{background:var(--hx-surface-2);}
.hx-rank-no{
  width:20px;text-align:center;flex-shrink:0;
  font-size:15px;font-weight:900;
}
.hx-rank-item:nth-child(1) .hx-rank-no{color:#f59e0b;}
.hx-rank-item:nth-child(2) .hx-rank-no{color:#94a3b8;}
.hx-rank-item:nth-child(3) .hx-rank-no{color:#d97706;}
.hx-rank-cover-wrap{
  flex-shrink:0;width:64px;height:85px;
}
.hx-rank-cover{
  width:100%;height:100%;border-radius:6px;object-fit:cover;display:block;
  background:linear-gradient(135deg,#f1f1fa,#e9e9f7);
}
.hx-rank-info{flex:1;min-width:0;text-align:right;}
.hx-rank-title{
  font-size:14px;font-weight:700;color:var(--hx-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.4;direction:rtl;text-align:right;
}
.hx-rank-meta{font-size:11px;color:var(--hx-text-3);margin-top:5px;display:flex;align-items:center;gap:10px;justify-content:flex-start;}
.hx-rank-meta i{margin-inline-start:3px;margin-inline-end:0;}

/* ====== display_style：默认网格 ====== */
.hx-ds--grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:13px;padding:0 12px;align-items:start;
}
.hx-ds--grid .hx-course__cover{aspect-ratio:unset !important;border-radius:var(--hx-r-sm) var(--hx-r-sm) 0 0;overflow:hidden;position:relative;}
.hx-ds--grid .hx-course__cover img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

/* ====== 通用卡片 ====== */
.hx-card{background:var(--hx-surface);border-radius:var(--hx-r);box-shadow:var(--hx-shadow-sm);}
.hx-card--pad{padding:18px;}

/* ====== 按钮 ====== */
.hx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:46px;padding:0 22px;border-radius:var(--hx-r-pill);
  font-size:15px;font-weight:700;letter-spacing:.3px;
  transition:transform .15s,box-shadow .2s,opacity .2s;
}
.hx-btn:active{transform:scale(.97);}
.hx-btn--block{display:flex;width:100%;}
.hx-btn--primary{color:#fff;background:var(--hx-grad);box-shadow:var(--hx-glow);}
.hx-btn--primary:hover{box-shadow:var(--hx-shadow-lg);}
.hx-btn--ghost{background:var(--hx-surface-2);color:var(--hx-text-2);}
.hx-btn--line{border:1.5px solid var(--hx-line-strong);color:var(--hx-text);background:transparent;}
.hx-btn--dark{background:var(--hx-grad-deep);color:#fff;}

/* ====== 底部 Tab 栏 ====== */
.hx-tabbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:var(--hx-app-w);z-index:100;
  height:calc(var(--hx-tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:flex;align-items:stretch;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(244,244,251,.95));
  backdrop-filter:blur(20px) saturate(200%) brightness(1.02);
  -webkit-backdrop-filter:blur(20px) saturate(200%) brightness(1.02);
  border-top:1px solid var(--hx-line);
  box-shadow:0 -6px 30px -12px rgba(67,56,202,.15);
}
.hx-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--hx-text-3);transition:color .28s ease;position:relative;
}
.hx-tab i{font-size:21px;transition:transform .28s,color .28s;}
.hx-tab span{font-size:10px;font-weight:600;letter-spacing:.4px;}
.hx-tab.is-active{color:var(--hx-indigo);}
.hx-tab.is-active i{
  transform:translateY(-2px) scale(1.08);
  background:var(--hx-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hx-tab.is-active span{
  color:var(--hx-indigo);font-weight:700;
}
.hx-tab__center{
  flex:0 0 auto;align-self:center;margin:0 6px;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--hx-grad);color:#fff;font-size:22px;
  box-shadow:var(--hx-glow),0 8px 25px -5px rgba(99,102,241,.45);
  transform:translateY(-10px);transition:transform .2s,box-shadow .2s;
}
.hx-tab__center:active{transform:translateY(-10px) scale(.94);}

/* ====== 底部操作栏 ====== */
.hx-actionbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:var(--hx-app-w);z-index:95;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--hx-glass);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--hx-line);
}
.hx-actionbar__icon{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;color:var(--hx-text-2);min-width:46px;
}
.hx-actionbar__icon i{font-size:20px;}

/* ====== 渐变文字 ====== */
.hx-grad-text{background:var(--hx-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ====== 个人中心头部 ====== */
.hx-mine-hero{
  position:relative;padding:calc(28px + env(safe-area-inset-top,0px)) 20px 30px;
  background:var(--hx-grad-deep);color:#fff;overflow:hidden;
}
.hx-mine-hero::before{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.55),transparent 70%);
  top:-90px;right:-60px;
}
.hx-mine-hero::after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.5),transparent 70%);
  bottom:-80px;left:-40px;
}
.hx-mine-hero__inner{position:relative;z-index:1;display:flex;align-items:center;gap:14px;}
.hx-avatar{
  width:64px;height:64px;border-radius:50%;overflow:hidden;
  border:2.5px solid rgba(255,255,255,.7);box-shadow:0 6px 18px rgba(0,0,0,.2);
  background:rgba(255,255,255,.25);flex-shrink:0;
}
.hx-avatar img{width:100%;height:100%;object-fit:cover;}
.hx-mine-name{font-size:19px;font-weight:800;}
.hx-mine-sub{font-size:12px;color:var(--hx-on-dark-2);margin-top:3px;}

/* 我的 - 数据条 */
.hx-mine-stats{
  display:flex;margin:-18px 14px 0;position:relative;z-index:2;
  background:var(--hx-surface);border-radius:var(--hx-r);
  box-shadow:var(--hx-shadow);padding:16px 0;
}
.hx-mine-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.hx-mine-stat b{font-size:19px;font-weight:800;color:var(--hx-text);}
.hx-mine-stat span{font-size:11px;color:var(--hx-text-3);}

/* 我的 - 功能列表 */
.hx-mine-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin:16px 14px 0;padding:18px 10px;
  background:var(--hx-surface);border-radius:var(--hx-r);box-shadow:var(--hx-shadow-sm);
}
.hx-mine-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0;border-radius:14px;transition:background .2s;}
.hx-mine-cell:active{background:var(--hx-surface-2);}
.hx-mine-cell__icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;box-shadow:0 6px 14px -6px rgba(99,102,241,.55);}
.hx-mine-cell span{font-size:11.5px;font-weight:600;color:var(--hx-text-2);}

/* 通用行列表 */
.hx-list{background:var(--hx-surface);border-radius:var(--hx-r);box-shadow:var(--hx-shadow-sm);margin:16px 14px 0;overflow:hidden;}
.hx-list__item{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--hx-line);transition:background .2s;}
.hx-list__item:last-child{border-bottom:none;}
.hx-list__item:active{background:var(--hx-surface-2);}
.hx-list__icon{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0;}
.hx-list__label{flex:1;font-size:14px;font-weight:600;color:var(--hx-text);}
.hx-list__arrow{color:var(--hx-text-3);font-size:14px;}

/* ====== 会员卡片 ====== */
.hx-vip{
  margin:16px 14px 0;padding:22px;color:#fff;
  background:linear-gradient(135deg,#4c1d95 0%,#6d28d9 45%,#9333ea 100%);
  border-radius:var(--hx-r-lg);box-shadow:var(--hx-shadow-lg);position:relative;overflow:hidden;
}
.hx-vip::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.5),transparent 70%);}
.hx-vip__row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;}
.hx-vip__name{font-size:20px;font-weight:800;}
.hx-vip__sub{font-size:12px;color:var(--hx-on-dark-2);margin-top:4px;}
.hx-vip__badge{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:24px;}

/* 会员套餐 */
.hx-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 14px;}
.hx-plan{
  background:var(--hx-surface);border:1.5px solid var(--hx-line);border-radius:var(--hx-r-sm);
  padding:16px 10px;text-align:center;position:relative;transition:transform .2s;
}
.hx-plan.is-hot{border-color:var(--hx-violet);background:linear-gradient(180deg,#faf5ff,#fff);box-shadow:var(--hx-glow);}
.hx-plan__flag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--hx-grad);color:#fff;font-size:10px;font-weight:700;padding:2px 10px;border-radius:99px;white-space:nowrap;}
.hx-plan__name{font-size:13px;font-weight:700;color:var(--hx-text);}
.hx-plan__price{font-size:20px;font-weight:800;color:var(--hx-indigo);margin:8px 0 12px;}
.hx-plan__btn{height:34px;width:100%;border-radius:var(--hx-r-pill);font-size:12px;font-weight:700;background:var(--hx-surface-2);color:var(--hx-text-2);}
.hx-plan.is-hot .hx-plan__btn{background:var(--hx-grad);color:#fff;box-shadow:var(--hx-glow);}
.hx-plan__tip{font-size:11px;color:var(--hx-text-3);margin-bottom:10px;}
.hx-plan-empty{grid-column:1/-1;text-align:center;color:var(--hx-text-3);font-size:13px;padding:20px 0;}

/* ====== 支付页 ====== */
.hx-pay-amount{background:var(--hx-surface);margin:14px;border-radius:var(--hx-r);box-shadow:var(--hx-shadow-sm);padding:26px;text-align:center;}
.hx-pay-amount b{font-size:34px;font-weight:800;color:var(--hx-indigo);}
.hx-pay-amount small{font-size:14px;color:var(--hx-text-3);margin-right:2px;}
.hx-pay-method{display:flex;align-items:center;gap:12px;padding:16px;background:var(--hx-surface);border-bottom:1px solid var(--hx-line);}
.hx-pay-method:last-child{border-bottom:none;}
.hx-pay-method__icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;}
.hx-pay-method__name{flex:1;font-size:14px;font-weight:600;}
.hx-pay-method__check{font-size:20px;color:var(--hx-text-3);}
.hx-pay-method.is-active .hx-pay-method__check{color:var(--hx-indigo);}

/* ====== 登录页 ====== */
.hx-login{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 26px;
  background:radial-gradient(900px 500px at 50% -10%,#e7e6fb,transparent 60%),linear-gradient(180deg,#f3f1fc,#f7f4fb);}
.hx-login__logo{text-align:center;margin-bottom:34px;}
.hx-login__logo .hx-logo-mark{width:72px;height:72px;border-radius:22px;margin:0 auto 14px;background:var(--hx-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px;box-shadow:var(--hx-shadow-lg);}
.hx-login__logo h1{font-size:24px;font-weight:800;letter-spacing:1px;}
.hx-login__logo p{font-size:12px;color:var(--hx-text-3);margin-top:6px;letter-spacing:2px;}
.hx-field{margin-bottom:14px;}
.hx-field label{display:block;font-size:12px;color:var(--hx-text-2);margin-bottom:7px;font-weight:600;}
.hx-input{width:100%;height:50px;padding:0 16px;border-radius:var(--hx-r-sm);border:1.5px solid var(--hx-line);background:var(--hx-surface);font-size:15px;color:var(--hx-text);outline:none;transition:border .2s,box-shadow .2s;}
.hx-input:focus{border-color:var(--hx-violet);box-shadow:0 0 0 4px rgba(139,92,246,.12);}
.hx-tabs{display:flex;gap:24px;margin-bottom:22px;}
.hx-tab-pill{font-size:16px;font-weight:700;color:var(--hx-text-3);position:relative;padding-bottom:6px;}
.hx-tab-pill.is-active{color:var(--hx-text);}
.hx-tab-pill.is-active::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:99px;background:var(--hx-grad);}
.hx-other-login{margin-top:30px;text-align:center;}
.hx-other-login__title{font-size:12px;color:var(--hx-text-3);margin-bottom:16px;position:relative;}
.hx-other-login__title::before,.hx-other-login__title::after{content:"";position:absolute;top:50%;width:48px;height:1px;background:var(--hx-line);}
.hx-other-login__title::before{left:10px;}.hx-other-login__title::after{right:10px;}
.hx-other-login__icons{display:flex;justify-content:center;gap:30px;}
.hx-other-login__icons a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--hx-text-2);}
.hx-other-login__icons .hx-ol-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:var(--hx-shadow-sm);}

/* ====== 播放器（音频/视频） ====== */
/* ====== 音频播放器（与详情页同款浅色主题） ====== */
.hx-player{position:relative;min-height:100vh;background:var(--hx-bg);}
.hx-player__body{display:flex;flex-direction:column;align-items:center;padding:10px 20px 20px;}
/* 封面图 */
.hx-player__art-wrap{position:relative;margin-bottom:22px;}
.hx-player__art{
  width:min(56vw,220px);height:min(56vw,220px);border-radius:24px;
  object-fit:cover;display:block;
  box-shadow:0 18px 40px -14px rgba(99,102,241,.35);
}
/* 信息 */
.hx-player__chap{font-size:18px;font-weight:900;color:var(--hx-text);text-align:center;margin-bottom:6px;line-height:1.4;padding:0 8px;}
.hx-player__course{font-size:13px;color:var(--hx-text-2);text-align:center;margin-bottom:2px;}
.hx-player__teacher{font-size:12px;color:var(--hx-text-3);text-align:center;}
/* 进度 */
.hx-player__progress{margin:22px 0 18px;width:100%;max-width:360px;}
.hx-player__progress input[type=range]{
  width:100%;height:4px;-webkit-appearance:none;appearance:none;
  background:var(--hx-surface-3);border-radius:99px;outline:none;
}
.hx-player__progress input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--hx-grad);box-shadow:var(--hx-glow);cursor:pointer;
}
.hx-player__progress input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border:none;border-radius:50%;background:var(--hx-indigo);
}
.hx-player__time{display:flex;justify-content:space-between;font-size:12px;color:var(--hx-text-3);margin-top:10px;padding:0 2px;}
/* 控制按钮 */
.hx-player__controls{display:flex;align-items:center;justify-content:center;gap:36px;}
.hx-player__ctrl{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--hx-text-2);font-size:20px;cursor:pointer;transition:all .2s;
}
.hx-player__ctrl:active{transform:scale(.9);color:var(--hx-indigo);}
.hx-player__ctrl--disabled{opacity:.25;pointer-events:none;}
.hx-player__play{
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--hx-grad);color:#fff;font-size:28px;
  box-shadow:var(--hx-glow);
  cursor:pointer;transition:transform .2s;
}
.hx-player__play:active{transform:scale(.92);}
/* 章节列表卡片 */
.hx-player__section{margin-top:24px;width:100%;padding:0 6px;}
.hx-player__section h3{font-size:15px;font-weight:800;color:var(--hx-text);margin-bottom:12px;padding:0 8px;}
.hx-player__list{max-height:380px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.hx-player__item{
  display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;
  background:var(--hx-surface);border:1px solid var(--hx-line);margin-bottom:8px;
  cursor:pointer;transition:all .2s;
}
.hx-player__item:active{background:var(--hx-surface-2);transform:scale(.985);}
.hx-player__item.is-playing{
  background:linear-gradient(135deg,rgba(139,92,246,.06),rgba(99,102,247,.04));
  border-color:rgba(139,92,246,.2);box-shadow:0 4px 16px -8px rgba(99,102,243,.2);
}
.hx-player__item-no{
  width:28px;height:28px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--hx-text-3);background:var(--hx-surface-2);
  transition:all .25s;
}
.hx-player__item.is-playing .hx-player__item-no{background:var(--hx-grad);color:#fff;box-shadow:var(--hx-glow);}
.hx-player__item-info{flex:1;min-width:0;}
.hx-player__item-title{font-size:14px;font-weight:600;color:var(--hx-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hx-player__item.is-playing .hx-player__item-title{color:var(--hx-indigo);font-weight:700;}
.hx-player__item-dur{font-size:11px;color:var(--hx-text-3);margin-top:3px;}
.hx-player__item-icon{color:var(--hx-text-3);font-size:16px;flex-shrink:0;}
.hx-player__item.is-playing .hx-player__item-icon{color:var(--hx-indigo);}
/* 底部 */
.hx-player__foot{text-align:center;padding:12px 0 28px;}
.hx-player__foot a{color:var(--hx-indigo);font-size:13px;text-decoration:none;padding:8px 20px;border-radius:var(--hx-r-pill);background:var(--hx-surface-2);transition:all .2s;}
.hx-player__foot a:active{background:var(--hx-surface-3);}

/* ====== 详情页播放器浮层（点击章节从底部滑出） ====== */
.hx-po-overlay{
  position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  background:var(--hx-bg);animation:hxPoSlideUp .3s cubic-bezier(.4,0,.2,1) both;
}
.hx-po-overlay.is-open{display:flex;}
@keyframes hxPoSlideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.hx-po-close{
  position:absolute;top:14px;right:14px;z-index:10;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);color:#fff;font-size:16px;cursor:pointer;
}
.hx-po-cover{
  position:relative;width:100%;flex-shrink:0;overflow:hidden;
  aspect-ratio:16/9;background:#0f0c29;
}
.hx-po-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.hx-po-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 40px;}
.hx-po-title{
  font-size:17px;font-weight:900;color:var(--hx-text);text-align:center;
  margin:18px 0 4px;line-height:1.4;
}
.hx-po-meta{text-align:center;font-size:12px;color:var(--hx-text-3);margin-bottom:14px;}
.hx-po-progress{margin:0 0 10px;}
.hx-po-progress input[type=range]{
  width:100%;height:4px;-webkit-appearance:none;appearance:none;
  background:var(--hx-surface-3);border-radius:99px;outline:none;
}
.hx-po-progress input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--hx-grad);box-shadow:var(--hx-glow);cursor:pointer;
}
.hx-po-progress input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border:none;border-radius:50%;background:var(--hx-indigo);
}
.hx-po-time{display:flex;justify-content:space-between;font-size:11px;color:var(--hx-text-3);margin-top:7px;}
.hx-po-controls{display:flex;align-items:center;justify-content:center;gap:30px;margin:14px 0 20px;}
.hx-po-ctrl{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--hx-text-2);font-size:18px;cursor:pointer;transition:all .2s;
}
.hx-po-ctrl:active{transform:scale(.9);color:var(--hx-indigo);}
.hx-po-ctrl--disabled{opacity:.25;pointer-events:none;}
.hx-po-play{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--hx-grad);color:#fff;font-size:24px;box-shadow:var(--hx-glow);
  cursor:pointer;transition:transform .2s;
}
.hx-po-play:active{transform:scale(.92);}
.hx-po-list-title{font-size:14px;font-weight:800;color:var(--hx-text);margin-bottom:10px;}

/* 章节列表行 */
.hx-chapter{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--hx-line);transition:background .2s;}
.hx-chapter:active{background:var(--hx-surface-2);}
.hx-chapter.is-playing{background:linear-gradient(90deg,rgba(139,92,246,.10),transparent);}
.hx-chapter__no{width:26px;height:26px;border-radius:9px;background:var(--hx-surface-3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--hx-text-3);flex-shrink:0;}
.hx-chapter.is-playing .hx-chapter__no{background:var(--hx-grad);color:#fff;}
.hx-chapter__main{flex:1;min-width:0;}
.hx-chapter__title{font-size:14px;font-weight:600;color:var(--hx-text);}
.hx-chapter.is-playing .hx-chapter__title{color:var(--hx-indigo);}
.hx-chapter__meta{font-size:11px;color:var(--hx-text-3);margin-top:3px;display:flex;align-items:center;gap:8px;}
.hx-chapter__play{font-size:18px;color:var(--hx-text-3);}
.hx-chapter.is-playing .hx-chapter__play{color:var(--hx-indigo);}

/* ================================================================
   高端课程详情页 · 设计系统
   参考：得到App / 知乎盐选 / B站课堂
   ================================================================ */

/* ====== Hero：沉浸式封面 + 暗角遮罩 ====== */
.hx-detail-hero{position:relative;}
.hx-video-wrap{
  position:relative;width:100%;aspect-ratio:16/9;background:transparent;overflow:hidden;
}
.hx-video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hx-video-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .5s ease;}

/* 封面 / 视频 两种子层都铺满 Hero */
.hx-hero-cover,.hx-video-player{position:absolute;inset:0;overflow:hidden;}
.hx-hero-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.hx-video-player video{width:100%;height:100%;object-fit:cover;}

/* 暗角遮罩（四角压暗，提升封面氛围感，弱化低质量封面的粗糙感） */
.hx-hero-vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,28,.08) 0%, transparent 20%, transparent 80%, rgba(10,8,28,.18) 100%);
}

/* 播放按钮 —— 三层光环呼吸效果 */
.hx-vplay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;z-index:4;
  background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;
  color:var(--hx-indigo);font-size:28px;font-style:normal;box-shadow:
    var(--hx-glow),
    0 2px 20px rgba(99,102,241,.3),
    inset 0 -2px 6px rgba(79,70,229,.1);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.hx-vplay::before{ /* 内圈光晕 */
  content:"";position:absolute;inset:-12px;border-radius:50%;
  border:1.5px solid rgba(139,92,246,.35);animation:hxRingA 2.5s ease-out infinite;
}
.hx-vplay::after{ /* 外圈扩散 */
  content:"";position:absolute;inset:-22px;border-radius:50%;
  border:1px solid rgba(168,85,247,.2);animation:hxRingB 2.5s ease-out .3s infinite;
}
@keyframes hxRingA{0%{transform:scale(.88);opacity:.9;}60%{transform:scale(1.15);opacity:0;}100%{opacity:0;}}
@keyframes hxRingB{0%{transform:scale(.82);opacity:.7;}65%{transform:scale(1.22);opacity:0;}100%{opacity:0;}}
.hx-vplay:active{transform:translate(-50%,-50%) scale(.90);}
.hx-vplay--disabled{
  background:rgba(255,255,255,.45);color:var(--hx-text-3);cursor:not-allowed;
  box-shadow:none;animation:none;
}
.hx-vplay--disabled::before,.hx-vplay--disabled::after{display:none;}

/* 免费标签 —— 更精致 */
.hx-course__tag{
  position:absolute;top:14px;right:14px;z-index:5;
  padding:5px 13px;border-radius:var(--hx-r-pill);
  font-size:11px;font-weight:800;color:#fff;letter-spacing:.5px;
  background:linear-gradient(135deg,#059669,#10b981 55%,#34d399);
  box-shadow:0 6px 20px -6px rgba(16,185,129,.55), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ====== 课程头部（与封面分离的独立卡片） ====== */
.hx-course-head{
  position:relative;z-index:5;margin:14px 14px 0;padding:22px 20px 20px;
  border-radius:var(--hx-r-lg);background:var(--hx-surface);
  box-shadow:var(--hx-shadow), inset 0 1px 0 rgba(255,255,255,.7);
}
.hx-course-head__title{
  margin:0 0 16px;font-size:21px;font-weight:900;line-height:1.36;
  letter-spacing:-.2px;color:var(--hx-text);
}
.hx-course-head__row{display:flex;align-items:center;justify-content:space-between;gap:14px;}
/* 价格：大号渐变文字 */
.hx-course-head__price{
  font-size:30px;font-weight:900;letter-spacing:-.5px;
  background:var(--hx-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.hx-course-head__price--free{background:none;-webkit-text-fill-color:#059669;color:#059669;}
/* 讲师胶囊 */
.hx-teacher-mini{
  display:flex;align-items:center;gap:10px;max-width:58%;
  padding:7px 15px 7px 7px;border-radius:var(--hx-r-pill);
  background:linear-gradient(135deg,#faf5ff,var(--hx-surface-2));
  border:1px solid rgba(139,92,246,.12);cursor:pointer;transition:all .22s ease;
}
.hx-teacher-mini:active{background:#f3e8ff;transform:scale(.97);}
.hx-teacher-mini img{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,255,255,.9);box-shadow:0 3px 10px -4px rgba(99,102,241,.35);
}
.hx-teacher-mini__txt{min-width:0;}
.hx-teacher-mini__name{font-size:13.5px;font-weight:700;color:var(--hx-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;}
.hx-teacher-mini__title{font-size:11px;color:var(--hx-violet);font-weight:600;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;}

/* 数据指标：精致 pill 标签 */
.hx-detail-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:17px;border-top:1px solid var(--hx-line);
}
.hx-detail-meta span{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--hx-text-2);font-weight:600;
  padding:6px 14px;border-radius:var(--hx-r-pill);
  background:var(--hx-surface-2);border:1px solid var(--hx-line);
}
.hx-detail-meta i{color:var(--hx-indigo);font-size:12px;opacity:.75;}

/* ====== 底部操作栏升级 ====== */
.hx-actionbar{
  padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
  gap:10px;background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(248,245,255,.97));
}
/* 图标按钮 */
.hx-abtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:52px;padding:6px 8px;border-radius:var(--hx-r-sm);cursor:pointer;
  transition:background .2s, transform .15s;
}
.hx-abtn:active{background:var(--hx-surface-2);transform:scale(.94);}
.hx-abtn__icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--hx-text-2);background:var(--hx-surface-2);transition:all .2s;}
.hx-abtn span{font-size:10.5px;color:var(--hx-text-3);font-weight:600;}
.hx-abtn:hover .hx-abtn__icon{color:var(--hx-indigo);box-shadow:var(--hx-shadow-sm);}

/* 购买按钮 —— 强 CTA */
.hx-buy-btn{
  flex:1;height:52px;border-radius:var(--hx-r-pill);
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:16px;font-weight:900;letter-spacing:.8px;color:#fff;
  background:var(--hx-grad);
  box-shadow:
    var(--hx-glow),
    0 8px 24px -6px rgba(99,102,241,.5),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .2s, box-shadow .2s, filter .2s;
  border:none;cursor:pointer;
}
.hx-buy-btn:active{transform:scale(.97);box-shadow:0 4px 12px -4px rgba(99,102,241,.5), inset 0 2px 4px rgba(0,0,0,.15);}
.hx-buy-btn:hover{filter:brightness(1.06);box-shadow:var(--hx-shadow-lg), 0 12px 30px -4px rgba(99,102,241,.5);}
.hx-buy-btn--free{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 8px 24px -6px rgba(5,150,105,.45), inset 0 1px 0 rgba(255,255,255,.2);}

/* ====== 音频播放器（16:9 内紧凑布局，不超出封面范围） ====== */
.hx-audio-player{
  display:none;position:absolute;inset:0;z-index:7;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;padding:6px 16px;
  text-align:center;overflow:hidden;
}
.hx-audio-player.is-open{display:flex;animation:hxFade .25s ease both;}
@keyframes hxFade{from{opacity:0;}to{opacity:1;}}
.hx-ap-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:blur(20px) brightness(.4);transform:scale(1.1);}
.hx-ap-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(20,14,40,.65),rgba(30,20,55,.8));}
.hx-ap-art{
  position:relative;z-index:1;width:clamp(50px,15vw,70px);height:clamp(50px,15vw,70px);
  border-radius:10px;object-fit:cover;flex-shrink:0;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
.hx-ap-title{position:relative;z-index:1;color:#fff;font-size:12px;font-weight:700;
  max-width:88%;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hx-ap-controls{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;max-width:300px;}
.hx-ap-play{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--hx-indigo);font-size:14px;
  box-shadow:var(--hx-glow);transition:transform .2s;
}
.hx-ap-play:active{transform:scale(.92);}
.hx-ap-barwrap{flex:1;min-width:0;}
.hx-ap-progress{width:100%;-webkit-appearance:none;appearance:none;height:3px;border-radius:99px;background:rgba(255,255,255,.25);outline:none;}
.hx-ap-progress::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;}
.hx-ap-progress::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:#fff;}
.hx-ap-time{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.7);margin-top:4px;}

/* ====== 图文阅读弹层（页面内，不跳转） ====== */
.hx-text-modal{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;justify-content:flex-end;}
.hx-text-modal.is-open{display:flex;animation:hxFadeIn .25s ease both;}
@keyframes hxFadeIn{from{opacity:0;}to{opacity:1;}}
.hx-text-modal__mask{position:absolute;inset:0;background:rgba(10,8,28,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.hx-text-modal__panel{
  position:relative;z-index:1;max-height:84vh;display:flex;flex-direction:column;
  background:var(--hx-surface);border-radius:22px 22px 0 0;
  box-shadow:0 -12px 40px -12px rgba(67,56,202,.4);
  animation:hxSlideUp .3s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes hxSlideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.hx-text-modal__head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--hx-line);
  position:sticky;top:0;background:var(--hx-surface);border-radius:22px 22px 0 0;}
.hx-text-modal__title{font-size:16px;font-weight:800;color:var(--hx-text);}
.hx-text-modal__close{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--hx-surface-2);color:var(--hx-text-2);font-size:16px;cursor:pointer;transition:background .2s;}
.hx-text-modal__close:active{background:var(--hx-surface-3);}
.hx-text-modal__body{padding:18px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.hx-text-modal__foot{display:flex;gap:12px;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hx-line);}
.hx-text-nav{flex:1;height:44px;border-radius:var(--hx-r-pill);font-size:14px;font-weight:700;color:var(--hx-indigo);
  background:var(--hx-surface-2);display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:background .2s;}
.hx-text-nav:active{background:var(--hx-surface-3);}

/* ====== 通用组件微调（仅影响详情页上下文） ====== */
.hx-prose{font-size:14px;line-height:1.85;color:var(--hx-text-2);}
.hx-prose p{margin:0 0 14px;}
.hx-seg{display:none;} /* 旧选项卡隐藏 */

/* ====== Toast ====== */
.hx-toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(28,26,51,.92);color:#fff;padding:12px 22px;border-radius:14px;
  font-size:14px;z-index:999;box-shadow:var(--hx-shadow-lg);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;
}
.hx-toast.is-show{opacity:1;}

/* ====== 成功页 ====== */
.hx-success{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;padding:0 26px;text-align:center;}
.hx-success__icon{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#34d399,#059669);display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;box-shadow:0 18px 40px -14px rgba(5,150,105,.6);margin-bottom:22px;}
.hx-success h1{font-size:22px;font-weight:800;}
.hx-success p{color:var(--hx-text-3);margin-top:8px;font-size:13px;}

/* ====== 空状态 ====== */
.hx-empty{text-align:center;padding:48px 20px;color:var(--hx-text-3);}
.hx-empty__icon{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;background:var(--hx-surface-2);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--hx-text-3);}
.hx-empty p{font-size:13px;}

/* 入场动画 */
@keyframes hxFadeUp{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes hxScaleIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
.hx-anim{animation:hxFadeUp .55s cubic-bezier(.22,.8,.27,1) both;}
.hx-anim-1{animation-delay:.06s;}
.hx-anim-2{animation-delay:.14s;}
.hx-anim-3{animation-delay:.22s;}
.hx-anim-4{animation-delay:.30s;}
.hx-anim--pop{animation:hxScaleIn .45s cubic-bezier(.34,1.56,.64,1) both;}

/* 安全区占位 */
.hx-safe-top{height:env(safe-area-inset-top,0px);}

/* =============================================================
   维吾尔语字体 · ALKATIP Basma
   通过 body font-family + @font-face unicode-range 实现全页面自动生效：
   浏览器遇到中文用 PingFang SC、遇到英文用 Arial、遇到阿拉伯/维文
   自动切到 Alkatip Basma，无需给每个元素手动加类。
   JS 自动检测仅负责给维文文本节点加 dir="rtl"（方向无法靠 font-face 解决）。
   ============================================================= */
@font-face{
  font-family:"Alkatip Basma";
  src:url("/fonts/alkatip.otf") format("opentype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
  /* unicode-range：阿拉伯字母 + 阿拉伯扩展 A/B，覆盖维文全部字符（用 ASCII 连字符） */
  unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF;
}
/* dir=rtl 方向与对齐（字体已经全局 body font-family 覆盖） */
.ug,html[lang="ug"],[lang="ug"]{direction:rtl;text-align:right;}
.ug *{direction:rtl;}
/* 维文中的数字保持 LTR（混合场景不把 123 也反着排） */
.ug bdi,.ug [dir="ltr"]{direction:ltr;unicode-bidi:isolate;}
/* RTL：方向性箭头图标水平镜像（返回键朝右、列表进入箭头朝左、上一篇/下一篇互换） */
html[lang="ug"] .fa-angle-left,
html[lang="ug"] .fa-angle-right,
html[lang="ug"] .fa-arrow-left,
html[lang="ug"] .fa-arrow-right,
html[lang="ug"] .fa-chevron-left,
html[lang="ug"] .fa-chevron-right{
  transform:scaleX(-1);
}