/* ==========================================================================
   画笔星球 · 前台改版样式 v1
   用法：放到 public/assets/index/css/upgrade.css，在模板里 <link> 引入
   设计基准：iPhone 375，所有尺寸 px 直接落地（H5 自适应用 rem 由 js 换算）
   ========================================================================== */

:root{
  --brand:#E8453C;
  --brand-soft:#FFF1EF;
  --brand-deep:#C4342B;
  --ink:#1F2328;
  --ink-2:#5A6169;
  --ink-3:#98A0A8;
  --line:#EDEFF2;
  --bg:#F6F7F9;
  --card:#FFFFFF;
  --gold:#C8871B;
  --teal:#2F6E63;
  --teal-soft:#EAF4F1;

  --r-s:8px; --r-m:12px; --r-l:16px; --r-full:999px;
  --sh-1:0 1px 2px rgba(31,35,40,.05);
  --sh-2:0 4px 16px rgba(31,35,40,.08);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- 复位（只作用于本套样式的容器，不污染原有站点） ---------- */
.hbx *{box-sizing:border-box}
.hbx{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  padding-bottom:64px;
}

/* ---------- 顶栏 ---------- */
.hbx-topbar{
  background:#fff;padding:10px 16px;display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line);
}
.hbx-logo{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px;flex-shrink:0;color:var(--ink);text-decoration:none}
.hbx-logo i{
  width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#F0784E);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-style:normal;
}
.hbx-search{
  flex:1;height:34px;background:var(--bg);border-radius:var(--r-full);
  display:flex;align-items:center;padding:0 12px;gap:7px;font-size:12.5px;color:var(--ink-3);
  border:none;outline:none;
}
.hbx-search input{border:none;background:transparent;outline:none;font-size:12.5px;width:100%;color:var(--ink)}
.hbx-avatar{
  width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#F2B8A8,#E8453C);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;
}

/* ---------- 年龄主导航 ---------- */
.hbx-agebox{background:#fff;padding:16px 16px 4px}
.hbx-agebox h2{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.35;margin:0}
.hbx-agebox h2 em{color:var(--brand);font-style:normal}
.hbx-agebox p{font-size:12.5px;color:var(--ink-2);margin:7px 0 0;line-height:1.6}
.hbx-agegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:14px 0 4px}
.hbx-agebtn{
  background:var(--bg);border-radius:var(--r-m);padding:11px 4px;text-align:center;
  transition:all .22s var(--ease);cursor:pointer;border:1.5px solid transparent;user-select:none;
}
.hbx-agebtn:hover{background:#EEF1F4}
.hbx-agebtn.on{background:var(--brand);border-color:var(--brand)}
.hbx-agebtn.on .n,.hbx-agebtn.on .c{color:#fff}
.hbx-agebtn .n{font-size:14px;font-weight:700;letter-spacing:-.02em;transition:color .22s;color:var(--ink)}
.hbx-agebtn .c{font-size:10px;color:var(--ink-3);margin-top:2px;transition:color .22s}

/* ---------- 胶囊筛选 ---------- */
.hbx-pills{display:flex;gap:8px;overflow-x:auto;padding:0 16px 4px;-ms-overflow-style:none;scrollbar-width:none}
.hbx-pills::-webkit-scrollbar{display:none}
.hbx-pill{
  flex-shrink:0;height:32px;padding:0 15px;border-radius:var(--r-full);
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  font-size:13px;font-weight:500;display:flex;align-items:center;
  transition:all .22s var(--ease);white-space:nowrap;cursor:pointer;user-select:none;
}
.hbx-pill:hover{border-color:#D8DCE2}
.hbx-pill.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 3px 10px rgba(232,69,60,.28);font-weight:600}
.hbx-pill.teal.on{background:var(--teal);border-color:var(--teal);box-shadow:0 3px 10px rgba(47,110,99,.26)}
.hbx-pill.ghost.on{background:var(--ink);border-color:var(--ink);box-shadow:0 3px 10px rgba(31,35,40,.22)}
.hbx-pill .x{font-size:11px;opacity:.8;margin-left:5px}

/* ---------- 章节标题 ---------- */
.hbx-sec{display:flex;align-items:baseline;justify-content:space-between;padding:18px 16px 10px}
.hbx-sec h2{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin:0}
.hbx-sec h2 em{font-size:11.5px;font-weight:500;color:var(--ink-3);font-style:normal;margin-left:7px}
.hbx-sec a{font-size:12px;color:var(--ink-3);text-decoration:none}

/* ---------- 卡片 ---------- */
.hbx-card{background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden}
.hbx-pad{padding:14px 16px}

/* ---------- 结果入口卡 ---------- */
.hbx-result{
  margin:14px 16px 0;border-radius:var(--r-l);padding:16px;
  background:linear-gradient(120deg,#E8453C,#F0784E);
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 6px 20px rgba(232,69,60,.26);
}
.hbx-result .t{color:#fff;font-size:14.5px;font-weight:700}
.hbx-result .s{color:rgba(255,255,255,.82);font-size:11.5px;margin-top:5px}
.hbx-result .go{
  background:rgba(255,255,255,.95);color:#E8453C;font-size:12.5px;font-weight:600;
  padding:8px 15px;border-radius:var(--r-full);white-space:nowrap;cursor:pointer;border:none;
}

/* ---------- 老师榜单 ---------- */
.hbx-rank{display:flex;gap:10px;padding:0 16px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.hbx-rank::-webkit-scrollbar{display:none}
.hbx-rankitem{
  flex-shrink:0;width:76px;text-align:center;padding:12px 6px;background:#fff;
  border-radius:var(--r-m);box-shadow:var(--sh-1);text-decoration:none;color:inherit;
}
.hbx-rankitem .crown{font-size:15px;line-height:1}
.hbx-rankitem .av{
  width:38px;height:38px;border-radius:50%;margin:6px auto;overflow:hidden;
  background:linear-gradient(135deg,#F2B8A8,#E8453C);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:13px;font-weight:600;
}
.hbx-rankitem .av img{width:100%;height:100%;object-fit:cover}
.hbx-rankitem .nm{font-size:11.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbx-rankitem .sl{font-size:10px;color:var(--ink-3);margin-top:3px}

/* ---------- 双列网格 ---------- */
.hbx-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
.hbx-gcard{background:#fff;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-1);cursor:pointer;transition:all .25s var(--ease);text-decoration:none;color:inherit;display:block}
.hbx-gcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.hbx-gcard .gc{height:118px;position:relative;overflow:hidden;background:var(--bg)}
.hbx-gcard .gc img{display:block;width:100%;height:100%;object-fit:cover}
.hbx-gcard .gb{padding:10px 11px 12px}
.hbx-gcard .gn{font-size:13px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.hbx-gcard .gm{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.hbx-gcard .gp{margin-top:9px;display:flex;align-items:baseline;justify-content:space-between}

/* ---------- 标签 ---------- */
.hbx-tag{font-size:10.5px;padding:2.5px 7px;border-radius:5px;font-weight:500;background:var(--brand-soft);color:var(--brand-deep);white-space:nowrap}
.hbx-tag.teal{background:var(--teal-soft);color:var(--teal)}
.hbx-tag.grey{background:#F1F3F5;color:var(--ink-2)}

/* ---------- 价格 / 老师 ---------- */
.hbx-price{color:var(--brand);font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1}
.hbx-price small{font-size:11px;font-weight:600;margin-right:1px}
.hbx-price .unit{font-size:11px;font-weight:500;color:var(--ink-3);margin-left:3px}
.hbx-teacher{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3)}
.hbx-teacher i{width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,#F2B8A8,#E8453C);display:inline-block;flex-shrink:0;overflow:hidden}
.hbx-teacher i img{width:100%;height:100%;object-fit:cover}

/* ---------- 列表卡片（横排） ---------- */
.hbx-courses{padding:0 16px;display:flex;flex-direction:column;gap:12px}
.hbx-course{
  display:flex;gap:12px;background:#fff;border-radius:var(--r-l);
  box-shadow:var(--sh-1);padding:10px;transition:all .25s var(--ease);cursor:pointer;position:relative;
  text-decoration:none;color:inherit;
}
.hbx-course:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.hbx-course .cover{width:112px;height:84px;border-radius:var(--r-m);overflow:hidden;flex-shrink:0;position:relative;background:var(--bg)}
.hbx-course .cover img{display:block;width:100%;height:100%;object-fit:cover}
.hbx-course .cover .pages{
  position:absolute;right:5px;bottom:5px;background:rgba(31,35,40,.72);color:#fff;
  font-size:10px;padding:2px 6px;border-radius:5px;font-weight:500;
}
.hbx-course .body{flex:1;min-width:0;display:flex;flex-direction:column;padding:2px 0}
.hbx-course .name{
  font-size:14px;font-weight:600;line-height:1.4;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hbx-course .meta{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.hbx-course .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;padding-top:8px}
.hbx-badge-new{position:absolute;left:10px;top:10px;background:var(--brand);color:#fff;font-size:10px;font-weight:600;padding:2.5px 7px;border-radius:5px;z-index:2}

/* ---------- 排序条 ---------- */
.hbx-sorts{display:flex;gap:16px;padding:12px 16px 4px;font-size:12.5px;color:var(--ink-3)}
.hbx-sorts span{cursor:pointer}
.hbx-sorts span.on{color:var(--brand);font-weight:600;border-bottom:2px solid var(--brand);padding-bottom:3px}

/* ---------- 详情页 ---------- */
.hbx-hero{position:relative;height:230px;background:#fff;overflow:hidden}
.hbx-hero img{display:block;width:100%;height:100%;object-fit:contain;background:#FAFAFB}
.hbx-hero .back{
  position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
  font-size:15px;box-shadow:var(--sh-1);cursor:pointer;border:none;color:var(--ink);
}
.hbx-hero .pager{
  position:absolute;right:14px;bottom:14px;background:rgba(31,35,40,.7);color:#fff;
  font-size:11px;padding:4px 10px;border-radius:var(--r-full);
}
.hbx-thumbs{display:flex;gap:7px;padding:10px 16px;background:#fff;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.hbx-thumbs::-webkit-scrollbar{display:none}
.hbx-thumbs i{
  width:44px;height:34px;border-radius:7px;overflow:hidden;display:block;opacity:.62;
  border:1.5px solid transparent;transition:all .2s var(--ease);cursor:pointer;flex-shrink:0;background:var(--bg);
}
.hbx-thumbs i.on{opacity:1;border-color:var(--brand)}
.hbx-thumbs i img{display:block;width:100%;height:100%;object-fit:cover}

.hbx-dtitle{background:#fff;padding:16px}
.hbx-dtitle h1{font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.02em;margin:0}
.hbx-dprice{display:flex;align-items:baseline;gap:9px;margin-top:12px;flex-wrap:wrap}
.hbx-dprice .p{color:var(--brand);font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1}
.hbx-dprice .p small{font-size:15px;font-weight:600}
.hbx-dprice .s{font-size:12px;color:var(--ink-3);text-decoration:line-through}
.hbx-dprice .save{font-size:11px;background:var(--brand-soft);color:var(--brand-deep);padding:3px 8px;border-radius:5px;font-weight:600;margin-left:auto}

/* ---------- 信息表 ---------- */
.hbx-info-row{display:flex;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.hbx-info-row:last-child{border-bottom:none}
.hbx-info-row .k{width:74px;color:var(--ink-3);flex-shrink:0}
.hbx-info-row .v{flex:1;font-weight:500}

/* ---------- 折叠区块 ---------- */
.hbx-acc{background:#fff;margin-top:10px}
.hbx-acc-h{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;font-size:14px;font-weight:600;cursor:pointer;user-select:none}
.hbx-acc-h .arw{color:var(--ink-3);font-size:12px;transition:transform .36s var(--ease)}
.hbx-acc.open .arw{transform:rotate(180deg)}
.hbx-acc-b{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .36s var(--ease),opacity .36s var(--ease),padding .36s var(--ease);
  padding:0 16px;
}
.hbx-acc.open .hbx-acc-b{max-height:600px;opacity:1;padding:0 16px 16px}
.hbx-inc{display:flex;gap:9px;font-size:12.5px;color:var(--ink-2);line-height:1.6;padding:6px 0}
.hbx-inc i{
  width:16px;height:16px;border-radius:5px;background:var(--brand-soft);color:var(--brand);
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-style:normal;margin-top:1px;
}

/* ---------- 老师卡 ---------- */
.hbx-dteacher{display:flex;align-items:center;gap:11px;padding:14px 16px;background:#fff;margin-top:10px}
.hbx-dteacher .av{
  width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#F2B8A8,#E8453C);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600;flex-shrink:0;overflow:hidden;
}
.hbx-dteacher .av img{width:100%;height:100%;object-fit:cover}
.hbx-dteacher .tn{font-size:14px;font-weight:600}
.hbx-dteacher .ts{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.hbx-dteacher .follow{
  margin-left:auto;font-size:12px;font-weight:600;color:var(--brand);
  border:1px solid var(--brand);padding:5px 13px;border-radius:var(--r-full);text-decoration:none;
}

/* ---------- 相关推荐行 ---------- */
.hbx-rk-row{display:flex;align-items:center;gap:11px;padding:11px 16px;background:#fff;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.hbx-rk-row:last-child{border-bottom:none}
.hbx-rk-row .rc{width:52px;height:40px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg)}
.hbx-rk-row .rc img{display:block;width:100%;height:100%;object-fit:cover}
.hbx-rk-row .rb{flex:1;min-width:0}
.hbx-rk-row .rn{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbx-rk-row .rs{font-size:10.5px;color:var(--ink-3);margin-top:3px}
.hbx-rk-row .rp{font-size:13px;font-weight:700;color:var(--brand);flex-shrink:0}

/* ---------- 吸底操作栏 ---------- */
.hbx-dock{
  position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:10px 16px;display:flex;align-items:center;gap:12px;z-index:200;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  max-width:1200px;margin:0 auto;
}
.hbx-dock .dinfo{line-height:1.3}
.hbx-dock .dinfo .lb{font-size:10.5px;color:var(--ink-3)}
.hbx-dock .dinfo .pv{font-size:20px;font-weight:700;color:var(--brand);letter-spacing:-.02em;margin-top:2px}
.hbx-dock .dinfo .pv small{font-size:12px;font-weight:600}
.hbx-btn{
  height:44px;border-radius:var(--r-full);font-size:14.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .2s var(--ease);cursor:pointer;border:none;font-family:inherit;
}
.hbx-btn.primary{flex:1;background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(232,69,60,.32)}
.hbx-btn.primary:hover{background:var(--brand-deep)}
.hbx-btn.primary:active{transform:scale(.98)}
.hbx-btn.primary:disabled{background:#E5A5A0;box-shadow:none;cursor:not-allowed}
.hbx-btn.ghost{width:44px;background:#fff;border:1px solid var(--line);color:var(--ink-2);flex-shrink:0}
.hbx-btn.ghost:hover{border-color:#D8DCE2;color:var(--ink)}
.hbx-btn.done{background:var(--teal)!important;box-shadow:0 4px 14px rgba(47,110,99,.3)!important}

/* ---------- 空状态 ---------- */
.hbx-empty{text-align:center;padding:56px 24px;color:var(--ink-3)}
.hbx-empty .ic{font-size:40px;line-height:1;margin-bottom:14px;opacity:.5}
.hbx-empty .t{font-size:14px;color:var(--ink-2);font-weight:600}
.hbx-empty .s{font-size:12.5px;margin-top:7px;line-height:1.6}
.hbx-empty .hbx-btn{display:inline-flex;margin-top:18px;padding:0 26px;background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(232,69,60,.28)}

/* ---------- 骨架屏 ---------- */
.hbx-sk{background:linear-gradient(90deg,#EFF1F4 25%,#F7F8FA 37%,#EFF1F4 63%);background-size:400% 100%;animation:hbx-sk 1.4s ease infinite}
@keyframes hbx-sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- 轻提示 ---------- */
.hbx-toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(31,35,40,.88);color:#fff;font-size:13.5px;padding:11px 20px;
  border-radius:var(--r-m);z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
  max-width:76%;text-align:center;line-height:1.5;
}
.hbx-toast.show{opacity:1}

/* ---------- PC 端限宽（手机浏览不受影响） ---------- */
@media (min-width:768px){
  .hbx{max-width:1200px;margin:0 auto;box-shadow:0 0 40px rgba(31,35,40,.06);min-height:100vh}
  .hbx-agegrid{grid-template-columns:repeat(8,1fr)}
  .hbx-grid{grid-template-columns:repeat(4,1fr)}
  .hbx-pills{flex-wrap:wrap;overflow:visible}
  .hbx-rank{overflow:visible;flex-wrap:wrap}
}

/* ---------- 动效：卡片进入 ---------- */
.hbx-in{opacity:0;transform:translateY(12px);transition:opacity .3s ease-out,transform .3s ease-out}
.hbx-in.show{opacity:1;transform:translateY(0)}

/* ---------- 动效：筛选（FILTER 三类曲线） ---------- */
.hbx-out{animation:hbxOut .18s var(--ease) forwards}
@keyframes hbxOut{to{opacity:0;transform:scale(.92)}}
.hbx-grow{animation:hbxGrow .22s cubic-bezier(.34,1.4,.64,1) forwards}
@keyframes hbxGrow{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.hbx-move{transition:transform .26s var(--ease)}