/* ============================================================
   沃选数学岛 · 共用组件（依赖 tokens.css，先引 tokens.css 再引本文件）
   门户父页面、家长、知识三处共用同一套按钮/卡片/标签/弹层。
   ============================================================ */
.wx-root,.wx-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.wx-root{margin:0;background:var(--wx-bg);color:var(--wx-text);font-family:var(--wx-font);
  font-size:var(--wx-fs-md);line-height:1.6}
.wx-root a{color:var(--wx-primary)}
.wx-wrap{max-width:var(--wx-content-w);margin:0 auto;padding:var(--wx-s4) var(--wx-s4) var(--wx-s10)}
.wx-wrap--narrow{max-width:720px}

/* ---- 图标 ---- */
.wx-ic{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:-4px}
.wx-ic--sm{width:16px;height:16px;vertical-align:-3px}
.wx-ic--lg{width:28px;height:28px}
.wx-ic--reward{color:var(--wx-reward)}
.wx-ic--muted{color:var(--wx-text-3)}

/* ---- 标题 ---- */
.wx-h1{font-family:var(--wx-font-title);font-size:var(--wx-fs-xl);font-weight:800;margin:0 0 var(--wx-s1)}
.wx-h2{font-family:var(--wx-font-title);font-size:var(--wx-fs-lg);font-weight:800;margin:0 0 var(--wx-s2)}
.wx-muted{color:var(--wx-text-2);font-size:var(--wx-fs-sm)}
.wx-sec{display:flex;align-items:center;gap:var(--wx-s2);font-size:var(--wx-fs-md);font-weight:800;
  color:var(--wx-text);margin:var(--wx-s6) 0 var(--wx-s3)}
.wx-sec .wx-step{font-size:var(--wx-fs-xs);font-weight:700;color:var(--wx-primary);background:var(--wx-primary-soft);
  border-radius:var(--wx-r-pill);padding:2px var(--wx-s2)}

/* ---- 卡片 ---- */
.wx-card{background:var(--wx-surface);border-radius:var(--wx-r-lg);box-shadow:var(--wx-shadow);
  padding:var(--wx-s5);margin-bottom:var(--wx-s4)}
.wx-card--flat{box-shadow:none;border:1px solid var(--wx-line)}

/* ---- 按钮 ---- */
.wx-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--wx-s2);
  font:inherit;font-size:var(--wx-fs-md);font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;
  border:1px solid var(--wx-line);background:var(--wx-surface);color:var(--wx-text);
  border-radius:var(--wx-r-md);padding:var(--wx-s3) var(--wx-s5);min-height:44px}
.wx-btn:active{transform:translateY(1px)}
.wx-btn:focus-visible{outline:2px solid var(--wx-primary);outline-offset:2px}
.wx-btn[disabled]{background:var(--wx-disabled);color:var(--wx-text-3);border-color:var(--wx-disabled);cursor:default}
/* 主操作：唯一允许厚底边的按钮 */
.wx-btn--primary{background:var(--wx-primary);border-color:var(--wx-primary);color:var(--wx-surface);
  box-shadow:var(--wx-edge);padding-bottom:calc(var(--wx-s3) + 3px)}
.wx-btn--primary:active{box-shadow:none;transform:translateY(3px)}
.wx-btn--ghost{background:none;border-color:transparent;color:var(--wx-primary)}
.wx-btn--soft{background:var(--wx-primary-soft);border-color:var(--wx-primary-soft);color:var(--wx-primary)}
.wx-btn--block{display:flex;width:100%}
.wx-btn--sm{min-height:36px;padding:var(--wx-s2) var(--wx-s3);font-size:var(--wx-fs-sm)}
.wx-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--wx-s1);
  min-width:40px;height:40px;padding:0 var(--wx-s2);border:0;border-radius:var(--wx-r-md);
  background:none;color:var(--wx-text-2);font:inherit;font-size:var(--wx-fs-sm);font-weight:700;cursor:pointer}
.wx-iconbtn:hover{background:var(--wx-bg);color:var(--wx-text)}
.wx-iconbtn:focus-visible{outline:2px solid var(--wx-primary);outline-offset:1px}

/* ---- 标签 / 选择片 ---- */
.wx-chips{display:flex;flex-wrap:wrap;gap:var(--wx-s2)}
.wx-chip{font:inherit;font-size:var(--wx-fs-sm);font-weight:700;cursor:pointer;
  border:1px solid var(--wx-line);background:var(--wx-surface);color:var(--wx-text);
  border-radius:var(--wx-r-md);padding:var(--wx-s2) var(--wx-s3);min-height:40px}
.wx-chip.is-on{background:var(--wx-primary);border-color:var(--wx-primary);color:var(--wx-surface)}
.wx-chip[disabled]{background:var(--wx-disabled);border-color:var(--wx-disabled);color:var(--wx-text-3);cursor:default}
.wx-chip small{display:block;font-size:var(--wx-fs-xs);font-weight:400}
.wx-badge{display:inline-flex;align-items:center;gap:var(--wx-s1);font-size:var(--wx-fs-xs);font-weight:700;
  border-radius:var(--wx-r-pill);padding:2px var(--wx-s2);background:var(--wx-primary-soft);color:var(--wx-primary)}
.wx-badge--reward{background:var(--wx-reward-soft);color:var(--wx-text)}
.wx-badge--ok{background:var(--wx-success-soft);color:var(--wx-success-ink)}

/* ---- 进度条（星星进度用奖励色） ---- */
.wx-bar{height:8px;border-radius:var(--wx-r-pill);background:var(--wx-disabled);overflow:hidden}
.wx-bar>i{display:block;height:100%;border-radius:var(--wx-r-pill);background:var(--wx-reward);min-width:0}
.wx-bar--primary>i{background:var(--wx-primary)}

/* ---- 列表项（家长锦囊） ---- */
.wx-list{background:var(--wx-surface);border-radius:var(--wx-r-lg);box-shadow:var(--wx-shadow);
  padding:var(--wx-s1) var(--wx-s5);margin-bottom:var(--wx-s4)}
.wx-item{display:flex;align-items:center;gap:var(--wx-s3);padding:var(--wx-s4) 0;
  border-bottom:1px solid var(--wx-line);text-decoration:none;color:inherit}
.wx-list .wx-item:last-child{border-bottom:0}
.wx-item .wx-num{flex:0 0 28px;height:28px;border-radius:var(--wx-r-pill);background:var(--wx-primary-soft);
  color:var(--wx-primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--wx-fs-sm)}
.wx-item .wx-t{flex:1;min-width:0}
.wx-item .wx-t b{display:block;font-size:var(--wx-fs-md)}
.wx-item .wx-t span{display:block;color:var(--wx-text-2);font-size:var(--wx-fs-sm)}
.wx-item>.wx-ic:last-child{color:var(--wx-text-3)}
.wx-item:hover .wx-t b{color:var(--wx-primary)}

/* ---- 弹层（设置、速度榜、关于、引导、看一招） ---- */
.wx-sheet{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center;
  background:var(--wx-mask)}
.wx-sheet.is-open{display:flex}
.wx-sheet__box{position:relative;width:100%;max-width:560px;max-height:86vh;overflow:auto;
  background:var(--wx-surface);border-radius:var(--wx-r-xl) var(--wx-r-xl) 0 0;box-shadow:var(--wx-shadow);
  padding:var(--wx-s5) var(--wx-s5) calc(var(--wx-s5) + env(safe-area-inset-bottom))}
.wx-sheet__head{display:flex;align-items:center;gap:var(--wx-s2);margin-bottom:var(--wx-s3)}
.wx-sheet__head .wx-h2{margin:0;flex:1}
@media (min-width:640px){
  .wx-sheet{align-items:center}
  .wx-sheet__box{border-radius:var(--wx-r-xl);padding-bottom:var(--wx-s5)}
}

/* ---- 空状态 ---- */
.wx-empty{text-align:center;padding:var(--wx-s6) var(--wx-s4);color:var(--wx-text-2)}
.wx-empty img{width:120px;height:120px;display:block;margin:0 auto var(--wx-s3)}

@media (prefers-reduced-motion:reduce){.wx-root *{transition:none!important;animation:none!important}}