/* 售后教程中心 —— 手机优先样式 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#f5f7f7;color:#17201f;
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
.wrap{max-width:680px;margin:0 auto;padding:0 16px}

/* ---------- 头部 ---------- */
.hd{
  position:sticky;top:0;z-index:20;background:rgba(245,247,247,.92);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid #e3e8e7;
}
.hd .wrap{display:flex;align-items:center;gap:10px;height:54px}
.logo{font-size:17px;font-weight:600;color:#0f766e;letter-spacing:.2px}
.logo span{color:#17201f;font-weight:500}
.back{margin-left:auto;font-size:14px;color:#6b7280;padding:8px 4px}

/* ---------- 搜索 ---------- */
.search{margin:18px 0 6px;position:relative}
.search input{
  width:100%;height:48px;border:1px solid #dfe5e4;border-radius:12px;
  background:#fff;padding:0 16px 0 44px;font-size:16px;color:#17201f;outline:none;
}
.search input:focus{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.1)}
.search .ic{
  position:absolute;left:15px;top:15px;width:18px;height:18px;
  stroke:#8a9492;stroke-width:2;fill:none;
}

/* ---------- 分类 ---------- */
h2.sec{font-size:15px;font-weight:600;color:#6b7280;margin:26px 0 12px;letter-spacing:.3px}
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:520px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{
  background:#fff;border:1px solid #e6ebe9;border-radius:14px;padding:14px 14px 13px;
  display:block;transition:transform .12s,border-color .12s;
}
.cat:active{transform:scale(.98)}
.cat b{display:block;font-size:15px;font-weight:600;color:#17201f}
.cat s{display:block;text-decoration:none;font-size:12.5px;color:#8a9492;margin-top:3px}
.cat em{
  font-style:normal;float:right;font-size:12.5px;color:#0f766e;
  background:#e6f4f2;border-radius:20px;padding:1px 9px;margin-top:-2px;
}

/* ---------- 列表 ---------- */
.list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.list{grid-template-columns:repeat(3,1fr)}}
.card{
  background:#fff;border:1px solid #e6ebe9;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .12s;
}
.card:active{transform:scale(.98)}
.card .th{
  position:relative;aspect-ratio:16/10;background:#eef2f1;overflow:hidden;
}
.card .th img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:10px 11px 12px;flex:1;display:flex;flex-direction:column}
.card .tt{
  font-size:14px;font-weight:500;line-height:1.45;color:#17201f;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card .mt{margin-top:auto;padding-top:7px;font-size:12px;color:#8a9492}
.pill{
  position:absolute;left:8px;top:8px;font-size:11px;font-weight:500;
  padding:2px 7px;border-radius:6px;color:#fff;background:rgba(23,32,31,.72);
}
.pill.v{background:rgba(15,118,110,.88)}
.pill.a{background:rgba(180,83,9,.88)}
.pill i{
  display:inline-block;width:0;height:0;border-style:solid;
  border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff;
  margin-right:5px;vertical-align:1px;
}

/* ---------- 详情 ---------- */
article{margin-top:14px}
h1.ti{font-size:20px;font-weight:600;line-height:1.45;margin:6px 0 4px}
.pan{
  margin-top:14px;background:#fff;border:1px solid #e6ebe9;border-radius:14px;
  overflow:hidden;
}
.pan video{width:100%;display:block;background:#000;max-height:76vh}
.pan .shot{width:100%;display:block;cursor:zoom-in}
.note{
  font-size:13.5px;color:#6b7280;padding:11px 14px;border-top:1px solid #eef2f1;
  display:flex;gap:8px;align-items:flex-start;
}
.tips{margin-top:16px;background:#fff;border:1px solid #e6ebe9;border-radius:14px;padding:14px 16px}
.tips p{margin:0;font-size:14px;color:#4b5856;line-height:1.8}
.tips b{color:#0f766e}

/* 图集 */
.album{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
@media(min-width:520px){.album{grid-template-columns:repeat(3,1fr)}}
.album figure{
  margin:0;background:#fff;border:1px solid #e6ebe9;border-radius:12px;
  overflow:hidden;cursor:zoom-in;
}
.album figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.album figcaption{font-size:12.5px;color:#6b7280;padding:7px 9px;line-height:1.4}

/* ---------- 灯箱 ---------- */
.lb{
  position:fixed;inset:0;z-index:80;background:rgba(12,16,15,.94);
  display:none;align-items:center;justify-content:center;padding:16px;
}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lb .cl{
  position:absolute;top:14px;right:18px;color:#fff;font-size:30px;line-height:1;
  opacity:.85;cursor:pointer;font-weight:300;
}
.lb .nav{
  position:absolute;bottom:26px;left:0;right:0;text-align:center;
  color:#fff;font-size:15px;opacity:.85;
}

/* ---------- 底部 ---------- */
footer{margin:34px 0 40px;text-align:center;font-size:13px;color:#9aa3a1;line-height:1.9}
footer b{color:#0f766e;font-weight:500}
.empty{text-align:center;color:#8a9492;font-size:14px;padding:36px 0}