/* 师小猿 AI 教育 · 品牌皮肤 (2026-11-08)
   由 nginx sub_filter 注入 /bio/ 下的 HTML 响应。
   作用域隔离：所有规则以 body:has(.header) 为前缀 —— 仅 22 个旧页面
   (body 内含 .header) 生效；home.html 用 .nav，uni-app SPA 壳无 .header，零污染。
   零外部依赖、零 JS、可逆（移除 nginx 注入即恢复）。 */
:root{
  --wb-ink:#10142a; --wb-ink2:#4a5470; --wb-ink3:#7b849e;
  --wb-line:#e8eaf3; --wb-bg:#f7f8fd;
  --wb-brand:#3b5bdb; --wb-mint:#0ca678;
  --wb-grad:linear-gradient(115deg,#4f46e5 0%,#3b5bdb 45%,#0ea5e9 100%);
  --wb-shadow:0 10px 40px rgba(24,36,88,.08);
}
body:has(.header){
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--wb-ink);background:var(--wb-bg);-webkit-font-smoothing:antialiased;line-height:1.65;
}
body:has(.header) > .header{
  background:var(--wb-grad)!important;color:#fff;
  padding:28px 20px 26px;box-shadow:0 8px 24px rgba(59,91,219,.18);
}
body:has(.header) .header h1{font-size:23px;font-weight:800;letter-spacing:-.025em;color:#fff;line-height:1.3}
body:has(.header) .header p{font-size:13px;opacity:.9;margin-top:6px;color:#fff}
body:has(.header) > .container{max-width:780px;margin:0 auto;padding:22px 16px}
body:has(.header) .card,
body:has(.header) .question{
  background:#fff!important;border:1px solid var(--wb-line);
  border-radius:18px!important;padding:22px!important;margin-bottom:16px;
  box-shadow:var(--wb-shadow)!important;
}
body:has(.header) .card h2,
body:has(.header) .card h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
body:has(.header) .card p,
body:has(.header) .question p{color:var(--wb-ink2);font-size:13px;line-height:1.8}
body:has(.header) .btn{
  display:inline-block;width:auto;background:var(--wb-grad)!important;color:#fff!important;
  border:none;border-radius:999px!important;padding:12px 22px;font-size:14px;font-weight:600;
  cursor:pointer;box-shadow:0 8px 22px rgba(59,91,219,.24);
  transition:transform .2s,box-shadow .2s;
}
body:has(.header) .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(59,91,219,.32)}
body:has(.header) .btn:disabled{opacity:.5;transform:none;box-shadow:none}
body:has(.header) .q-title{font-size:16px;font-weight:700;color:var(--wb-ink);margin-bottom:15px;line-height:1.6}
body:has(.header) .q-option{
  padding:12px 14px;margin:8px 0;border:2px solid var(--wb-line)!important;
  border-radius:12px!important;cursor:pointer;font-size:14px;
  transition:all .2s;background:#fff;
}
body:has(.header) .q-option:hover{border-color:var(--wb-brand)!important;background:#f7f8fd}
body:has(.header) .q-option.selected{border-color:var(--wb-brand)!important;background:rgba(59,91,219,.07);font-weight:600}
body:has(.header) .q-num{
  display:inline-block;width:28px;height:28px;background:var(--wb-grad)!important;
  color:#fff;border-radius:50%;text-align:center;line-height:28px;font-size:13px;margin-right:8px;
}
body:has(.header) .progress{height:6px;background:var(--wb-line)!important;border-radius:999px;margin:10px 0;overflow:hidden}
body:has(.header) .progress-fill{height:100%;background:var(--wb-grad)!important;border-radius:999px;transition:width .3s}
body:has(.header) .result-score{
  font-size:48px;font-weight:800;letter-spacing:-.04em;
  background:var(--wb-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:15px 0;
}
body:has(.header) .result{text-align:center;padding:30px}
body:has(.header) .start-screen{text-align:center;padding:40px 20px}
body:has(.header) .start-screen h2{font-size:22px;font-weight:800;color:var(--wb-ink);letter-spacing:-.02em;margin-bottom:15px}
body:has(.header) .start-screen p{color:var(--wb-ink2);line-height:1.8;margin-bottom:25px}
body:has(.header) .loading{text-align:center;padding:60px;color:var(--wb-ink3)}
body:has(.header) .table,
body:has(.header) table{
  width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;
  font-size:13px;box-shadow:var(--wb-shadow);
}
body:has(.header) .table th,
body:has(.header) table th{background:var(--wb-bg);color:var(--wb-ink2);font-weight:600;text-align:left;padding:12px 14px;border-bottom:1px solid var(--wb-line)}
body:has(.header) .table td,
body:has(.header) table td{padding:12px 14px;border-bottom:1px solid var(--wb-line);color:var(--wb-ink)}
body:has(.header) .table tr:last-child td,
body:has(.header) table tr:last-child td{border-bottom:0}
body:has(.header) .empty,
body:has(.header) .note{color:var(--wb-ink3);font-size:13px;padding:18px 0}
body:has(.header) .status{display:inline-block;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;background:rgba(59,91,219,.09);color:var(--wb-brand)}
body:has(.header) .status-done,
body:has(.header) .status-paid,
body:has(.header) .status-published{background:rgba(12,166,120,.11);color:var(--wb-mint)}
body:has(.header) .status-in_progress,
body:has(.header) .status-pending,
body:has(.header) .status-negotiating{background:rgba(245,159,0,.13);color:#d97706}
body:has(.header) input,
body:has(.header) select,
body:has(.header) textarea{
  font-family:inherit;font-size:14px;color:var(--wb-ink);
  border:1px solid var(--wb-line);border-radius:10px;padding:10px 12px;background:#fff;
}
body:has(.header) input:focus,
body:has(.header) select:focus,
body:has(.header) textarea:focus{outline:none;border-color:var(--wb-brand);box-shadow:0 0 0 3px rgba(59,91,219,.1)}
body:has(.header) a{color:var(--wb-brand)}
body:has(.header) h1,
body:has(.header) h2,
body:has(.header) h3{color:var(--wb-ink)}
@media(max-width:600px){
  body:has(.header) > .header{padding:22px 16px}
  body:has(.header) .header h1{font-size:20px}
  body:has(.header) > .container{padding:16px 12px}
  body:has(.header) .card,
  body:has(.header) .question{padding:18px!important;border-radius:16px!important}
}