

  :root{
    --ink:#141a24; --dim:#5f6d84; --line:#e6ebf3; --bg:#f4f7fb; --card:#fff;
    --red:#b3261e; --red-2:#d8503f; --red-soft:#fdf1ef;
    --green:#0f7d5b; --green-soft:#eefaf5;
    --blue:#1f5fd8; --blue-soft:#eef3ff;
    --gold:#c9a54f;
    --s1:0 1px 2px rgba(20,26,36,.04), 0 4px 14px rgba(20,26,36,.05);
    --s2:0 12px 34px rgba(20,26,36,.10);
    --s3:0 26px 70px rgba(20,26,36,.18);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,-apple-system,sans-serif;
    line-height:1.85;font-size:15px;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  #bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:80;
    background:linear-gradient(90deg,var(--red),var(--gold));transition:width .12s linear}
  nav{
    position:sticky;top:0;z-index:50;background:rgba(255,255,255,.7);
    backdrop-filter:blur(15px) saturate(170%);border-bottom:1px solid transparent;
    transition:background .3s, border-color .3s, box-shadow .3s;
  }
  nav.scrolled{background:rgba(255,255,255,.93);border-bottom-color:var(--line);
    box-shadow:0 6px 24px rgba(20,26,36,.06)}
  .nav-in{max-width:1160px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .brand{font-weight:700;letter-spacing:.08em;color:var(--red);white-space:nowrap;font-size:15px}
  .brand small{display:block;font-weight:400;font-size:11px;color:var(--dim);letter-spacing:.06em;margin-top:1px}
  .nav-links{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
  .nav-links a{
    text-decoration:none;font-size:13px;padding:7px 13px;border-radius:9px;color:var(--dim);
    white-space:nowrap;transition:.2s;
  }
  .nav-links a:hover{background:#eef2f8;color:var(--ink)}
  .nav-links a.on{background:var(--red-soft);color:var(--red);font-weight:600}
  .nav-links a.tool{color:var(--blue);font-weight:600}
  header.hero{position:relative;overflow:hidden;background:#0d121b}
  .hero-bg{position:absolute;inset:0;
    background:url("img/hero-xikanglu.jpg") center 78%/cover no-repeat;transform:scale(1.03)}
  .hero-bg::after{content:"";position:absolute;inset:0;
    background:
      radial-gradient(1000px 560px at 88% 0%, rgba(179,38,30,.55), transparent 62%),
      radial-gradient(700px 500px at 0% 100%, rgba(31,95,216,.32), transparent 60%),
      linear-gradient(180deg, rgba(9,13,20,.88), rgba(9,13,20,.72) 45%, rgba(9,13,20,.94));}
  .hero-in{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:104px 22px 76px}
  .eyebrow{
    display:inline-block;font-size:12px;letter-spacing:.16em;color:#f6d9a8;
    background:rgba(201,165,79,.14);border:1px solid rgba(201,165,79,.4);
    padding:5px 14px;border-radius:99px;
  }
  h1{margin:20px 0 14px;font-size:44px;line-height:1.32;letter-spacing:-.005em;color:#fff}
  h1 span{color:#ffb4a7}
  .sub{margin:0;font-size:17px;color:rgba(255,255,255,.78);max-width:780px}
  .meta{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
  .meta span{
    font-size:12.5px;color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:5px 14px;
    backdrop-filter:blur(8px);
  }
  .kpis{
    margin-top:36px;display:grid;gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  }
  .kpi{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:16px;
    padding:16px 18px;backdrop-filter:blur(12px);transition:.25s}
  .kpi:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}
  .kpi b{display:block;font-size:27px;letter-spacing:-.01em;color:#fff;
    font-variant-numeric:tabular-nums;line-height:1.25}
  .kpi span{font-size:12px;color:rgba(255,255,255,.66)}
  main{max-width:1160px;margin:0 auto;padding:10px 22px 90px}
  section{padding:64px 0;border-bottom:1px solid var(--line)}
  section:last-of-type{border-bottom:0}
  .sec-head{margin-bottom:28px}
  .sec-head h2{margin:0 0 8px;font-size:29px;letter-spacing:-.01em;line-height:1.4}
  .sec-head p{margin:0;color:var(--dim);font-size:13.5px;max-width:780px}
  .tag-line{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
    color:var(--red);letter-spacing:.14em;margin-bottom:12px}
  .tag-line::before{content:"";width:18px;height:2px;background:var(--red);border-radius:2px}
  p.lead{margin:0 0 14px;color:#33404f}
  .grid{display:grid;gap:18px}
  .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .card{
    background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
    box-shadow:var(--s1);transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
  }
  .card:hover{transform:translateY(-3px);box-shadow:var(--s2)}
  .card h3{margin:0 0 8px;font-size:16px;display:flex;align-items:center;gap:8px}
  .card p{margin:0;color:#41506a;font-size:13.5px}
  .dot{width:9px;height:9px;border-radius:99px;flex:none}
  .d-red{background:var(--red)} .d-green{background:var(--green)} .d-blue{background:var(--blue)}
  .mode-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:4px}
  .mode-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
    box-shadow:var(--s1)}
  .mode-block h3{margin:0 0 4px;font-size:15px}
  .mode-block .num{font-size:12px;color:var(--dim);letter-spacing:.1em}
  .steps{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-top:10px}
  .step{
    flex:1 1 180px;background:var(--red-soft);border:1px solid #f4d9d4;border-radius:12px;padding:13px 15px;
    position:relative;
  }
  .step b{display:block;font-size:14px;color:var(--red)}
  .step span{font-size:12.5px;color:#5c4a48}
  .step i{
    position:absolute;right:12px;top:10px;font-style:normal;font-size:11px;color:#c9a7a2;
  }
  .colors{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
  .color-card{border-radius:14px;padding:20px;border:1px solid}
  .color-card h3{margin:0 0 8px;font-size:16px}
  .color-card p{margin:0 0 10px;font-size:13.5px;color:#3f4b5c}
  .color-card ul{margin:0;padding-left:18px;font-size:13px;color:#4a5768}
  .c-red{background:var(--red-soft);border-color:#f2d5d0}
  .c-green{background:var(--green-soft);border-color:#cdeee1}
  .c-blue{background:var(--blue-soft);border-color:#d5e2fd}
  .route{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .stop{
    background:#fff;border:1.5px dashed #cfd8e6;border-radius:14px;padding:16px 18px;
  }
  .stop b{display:block;font-size:14.5px;color:#39465a;margin-bottom:4px}
  .stop span{font-size:12.5px;color:#7b8899}
  .stop em{font-style:normal;font-size:11px;color:#a9b4c2;display:block;margin-top:8px}
  .note{
    margin-top:16px;background:#fff8ec;border:1px solid #f2e2c4;border-radius:12px;
    padding:12px 16px;font-size:13px;color:#7a5c22;
  }
  .media-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
  .hero-photo{margin:0 0 4px;border-radius:16px;overflow:hidden;position:relative;
    box-shadow:0 12px 32px rgba(26,34,48,.10)}
  .hero-photo img{width:100%;height:360px;object-fit:cover;object-position:center 72%;display:block}
  .hero-photo figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:40px 22px 14px;font-size:13px;color:#fff;
    background:linear-gradient(transparent,rgba(0,0,0,.66));
  }
  @media (max-width:640px){ .hero-photo img{height:200px} }
  .media-row span{
    font-size:13px;font-weight:600;color:#41506a;background:#fff;border:1px solid var(--line);
    border-radius:10px;padding:8px 16px;
  }
  .media-row span b{color:var(--red)}
  .news-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .news{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
    box-shadow:var(--s1);display:flex;flex-direction:column;
    transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s}
  .news:hover{transform:translateY(-3px);box-shadow:var(--s2)}
  .news .src{
    align-self:flex-start;font-size:11.5px;font-weight:600;color:#fff;background:var(--red);
    border-radius:6px;padding:3px 10px;letter-spacing:.06em;
  }
  .news .src.blue{background:var(--blue)}
  .news h3{margin:11px 0 6px;font-size:15px;line-height:1.6}
  .news .meta{font-size:12px;color:var(--dim);margin-bottom:8px}
  .news p{margin:0;font-size:13px;color:#41506a;flex:1}
  .news .read{
    align-self:flex-start;margin-top:12px;font-size:13px;font-weight:600;color:var(--blue);
    text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;
  }
  .news .read:hover{border-bottom-color:var(--blue)}
  .photo-wall{
    display:grid;gap:10px;margin-top:20px;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  }
  .photo-wall a{display:block;border-radius:12px;overflow:hidden;position:relative;background:#eef1f6}
  .photo-wall img{width:100%;height:170px;object-fit:cover;display:block;transition:transform .35s ease}
  .photo-wall a:hover img{transform:scale(1.04)}
  .photo-wall .cap{
    position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px;font-size:12px;color:#fff;
    background:linear-gradient(transparent,rgba(0,0,0,.62));
  }
  .photo-wall .wide{grid-column:span 2}
  .honor-fig{margin:18px 0 6px;text-align:center}
  .honor-fig img{max-width:660px;width:100%;border-radius:12px;border:1px solid var(--line);background:#fff}
  .honor-fig figcaption{font-size:12px;color:var(--dim);margin-top:8px}
  @media (max-width:640px){ .photo-wall .wide{grid-column:span 1} }
  .honors{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  .honor{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:13px}
  .honor b{color:var(--red)}
  footer{background:#0d121b;border-top:0;padding:34px 22px 44px;color:rgba(255,255,255,.58);font-size:13px}
  .foot-in{max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
  footer b{color:#fff;font-weight:600}
  .cta{
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;font-weight:600;
    color:#fff;background:var(--blue);padding:11px 20px;border-radius:10px;margin-top:6px;
  }
  .cta:hover{filter:brightness(1.06)}
  .demo-flag{
    display:inline-block;font-size:11px;font-weight:400;color:#8a6d1f;background:#fff6e0;
    border:1px solid #f0dfae;border-radius:6px;padding:2px 9px;margin-left:9px;vertical-align:3px;
    letter-spacing:0;
  }
  .chart-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
  .chart-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
    box-shadow:var(--s1)}
  .chart-card h3{margin:0 0 3px;font-size:15px}
  .chart-card .cap{font-size:12px;color:var(--dim);margin-bottom:15px}
  .bar-row{display:grid;grid-template-columns:70px 1fr 84px;align-items:center;gap:10px;margin-bottom:9px;font-size:12.5px}
  .bar-track{display:block;height:14px;background:#f1f4f9;border-radius:8px;overflow:hidden}
  .bar-fill{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#e0715f,#c0392b)}
  .bar-fill.g{background:linear-gradient(90deg,#3dbb92,#17916a)}
  .bar-fill.b{background:linear-gradient(90deg,#6d9bfb,#2f6df6)}
  .bar-fill.o{background:linear-gradient(90deg,#f3b26a,#d9822b)}
  .bar-val{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;font-size:12px}
  .months{display:flex;align-items:flex-end;gap:3px;height:112px}
  .mcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
  .mbar{width:100%;border-radius:3px 3px 0 0;background:#b9cdf5}
  .mbar.low{background:#f0b27a}
  .mlab{font-size:8.5px;color:#9aa7b8;margin-top:5px;text-align:center;white-space:nowrap;height:12px}
  .legend{display:flex;gap:16px;font-size:11.5px;color:var(--dim);margin-top:8px;flex-wrap:wrap}
  .legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
  .todo{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-top:18px}
  .todo .card h3{font-size:15px;color:var(--red)}
  .todo .card .why{font-size:12.5px;color:var(--dim);margin-top:8px}
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  @media (max-width:640px){
    h1{font-size:27px} .sub{font-size:15px} .hero-in{padding:64px 18px 46px}
    section{padding:44px 0} .sec-head h2{font-size:22px}
  }


  .page-hero{position:relative;overflow:hidden;background:#0d121b;padding:54px 22px 46px}
  .page-hero::after{content:"";position:absolute;inset:0;
    background:radial-gradient(760px 320px at 88% 0%, rgba(179,38,30,.5), transparent 62%),
               radial-gradient(620px 320px at 0% 100%, rgba(31,95,216,.28), transparent 60%);}
  .page-hero-in{position:relative;z-index:2;max-width:1160px;margin:0 auto}
  .crumb{font-size:12.5px;color:rgba(255,255,255,.5);margin-bottom:12px;letter-spacing:.04em}
  .crumb a{color:rgba(255,255,255,.78);text-decoration:none}
  .crumb a:hover{color:#fff}
  .page-hero h1{margin:0;font-size:32px;color:#fff;letter-spacing:-.01em;line-height:1.4}
  .page-hero p{margin:10px 0 0;color:rgba(255,255,255,.72);font-size:14px;max-width:760px}
  .entries{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
  .entry{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);
    border-radius:16px;padding:22px 24px;box-shadow:var(--s1);
    transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s}
  .entry:hover{transform:translateY(-4px);box-shadow:var(--s2);border-color:#e0d6d3}
  .entry .no{font-size:11.5px;letter-spacing:.18em;color:var(--red);font-weight:700}
  .entry h3{margin:9px 0 7px;font-size:17px}
  .entry p{margin:0;font-size:13.5px;color:var(--dim)}
  .entry i{display:block;margin-top:15px;font-style:normal;font-size:13px;font-weight:600;color:var(--blue)}


/* ==========================================================
   升级层 v2（2026-09-24）
   1) 暗色模式   2) 移动端导航   3) 无障碍   4) 细节打磨
   ========================================================== */

/* ---------- 1. 暗色模式：把浅色硬编码逐个换成变量 ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e8eef8; --dim:#9db0ca; --line:#26313f; --bg:#0a0e15; --card:#121923;
  --red:#f0776a; --red-2:#ff9a88; --red-soft:#2b1a18;
  --green:#43d4a5; --green-soft:#0f2620;
  --blue:#7aa5ff; --blue-soft:#141d33;
  --gold:#e6c976;
  --s1:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
  --s2:0 12px 34px rgba(0,0,0,.55);
  --s3:0 26px 70px rgba(0,0,0,.65);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] nav{background:rgba(10,14,21,.72);border-bottom-color:transparent}
html[data-theme="dark"] nav.scrolled{background:rgba(10,14,21,.94);border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(0,0,0,.5)}
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-in a.back:hover,
html[data-theme="dark"] .back:hover{background:#1b2431;color:#fff}
html[data-theme="dark"] p.lead{color:#c3d0e2}
html[data-theme="dark"] .card p,html[data-theme="dark"] .color-card p,
html[data-theme="dark"] .color-card ul,html[data-theme="dark"] .media-row span,
html[data-theme="dark"] .news p,html[data-theme="dark"] .stop span{color:#c3d0e2}
html[data-theme="dark"] .mode-block,html[data-theme="dark"] .stop,
html[data-theme="dark"] .news,html[data-theme="dark"] .honor,
html[data-theme="dark"] .honor-fig img,html[data-theme="dark"] .media-row span,
html[data-theme="dark"] .chart-card,html[data-theme="dark"] .entry,
html[data-theme="dark"] .panel,html[data-theme="dark"] .qcard,
html[data-theme="dark"] article,html[data-theme="dark"] .toc,
html[data-theme="dark"] .stat,html[data-theme="dark"] .mode,
html[data-theme="dark"] .opt,html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .btn.grey,html[data-theme="dark"] .score .ops button,
html[data-theme="dark"] .vtwo img,html[data-theme="dark"] #drop,
html[data-theme="dark"] select,html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] .field select,html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea{
  background:var(--card);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .bar-track,html[data-theme="dark"] .bars .track,
html[data-theme="dark"] .bar,html[data-theme="dark"] .photo-wall a,
html[data-theme="dark"] .opt i,html[data-theme="dark"] .score{background:#1e2836}
html[data-theme="dark"] .mbar{background:#3a5aa8}
html[data-theme="dark"] th{background:#182231}
html[data-theme="dark"] .note,html[data-theme="dark"] .hint,
html[data-theme="dark"] .demo-flag{background:#2a2416;border-color:#4a3f1e;color:#e8d59a}
html[data-theme="dark"] .step{border-color:#4a2622}
html[data-theme="dark"] .step span{color:#d6c3c0}
html[data-theme="dark"] .step i,html[data-theme="dark"] .mlab{color:#8b98ab}
html[data-theme="dark"] .c-red{border-color:#4a2622}
html[data-theme="dark"] .c-green{border-color:#1c4438}
html[data-theme="dark"] .c-blue{border-color:#1e2f57}
html[data-theme="dark"] .stop{border-color:#2f3b4d}
html[data-theme="dark"] .stop b{color:#c8d5e6}
html[data-theme="dark"] .stop em{color:#7d8b9e}
html[data-theme="dark"] .entry:hover{border-color:#3a2b28}
html[data-theme="dark"] .advice{background:linear-gradient(180deg,#1c1315,#121923);border-color:#4a2622}
html[data-theme="dark"] .tag{background:#16233d;color:#8fb0ff}
html[data-theme="dark"] .tag.t2{background:#0f2620;color:#4fd6ac}
html[data-theme="dark"] .tag.t3{background:#2a1d13;color:#e3a06a}
html[data-theme="dark"] #drop:hover,html[data-theme="dark"] #drop.over{background:#151f2e}
html[data-theme="dark"] .opt:hover:not(.locked),
html[data-theme="dark"] .mode:hover{background:#182231;border-color:#31415a}
html[data-theme="dark"] .fb.no{color:#f3a79c;border-color:#4a2622}
html[data-theme="dark"] .opt.right i,html[data-theme="dark"] .opt.wrong i{color:#0a0e15}

/* ---------- 2. 移动端导航（≤900px 收成汉堡菜单） ---------- */
/* 导航一行要放下：品牌 + 10 个链接 + 主题按钮 —— 原来 1160px 装不下，
   主题按钮会被挤到第二行最左边，所以这里放宽到 1240 并收一点内边距 */
.nav-in{max-width:1240px}
.nav-links a{padding:7px 11px;font-size:12.5px}
.nav-toggle{display:none;align-items:center;gap:7px;margin-left:auto;font-family:inherit;
  font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);transition:.2s}
.nav-toggle::before{content:"";width:14px;height:2px;background:currentColor;border-radius:2px;
  box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.nav-toggle:hover{border-color:var(--red);color:var(--red)}
@media (max-width:900px){
  .nav-in{padding:11px 16px;gap:12px}
  .brand{font-size:14px}
  .brand small{font-size:10.5px}
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;width:100%;margin-left:0;flex-direction:column;gap:2px;
    padding:6px 0 4px;border-top:1px solid var(--line);margin-top:10px}
  nav.open .nav-links{display:flex}
  .nav-links a{padding:10px 12px;font-size:14px;border-radius:10px}
  .nav-links a.on{background:var(--red-soft)}
}
@media (max-width:640px){
  .page-hero{padding:38px 16px 32px}
  .page-hero h1{font-size:25px}
  main{padding:0 16px}
  .kpis{gap:10px}
  .kpi{padding:14px 16px}
  .photo-wall{gap:10px}
  .entry{padding:18px 18px}
  .sec-head h2{font-size:21px}
}

/* ---------- 3. 无障碍：键盘焦点可见 + 跳到正文 ---------- */
a:focus-visible,button:focus-visible,select:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--blue);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:10px 16px;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:0 0 10px 0;
  font-size:13.5px;text-decoration:none}
.skip-link:focus{left:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 4. 细节打磨 ---------- */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
::selection{background:rgba(179,38,30,.18)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.table-scroll table{min-width:520px}
img{max-width:100%}
img[data-lazy]{opacity:0;transition:opacity .5s ease}
img[data-lazy].loaded{opacity:1}
#toTop{position:fixed;right:20px;bottom:24px;z-index:70;width:44px;height:44px;
  display:none;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  box-shadow:var(--s2);transition:transform .2s,opacity .2s;font-size:17px}
#toTop:hover{transform:translateY(-3px)}
#toTop.show{display:flex}
.theme-btn{margin-left:6px;width:34px;height:34px;flex:none;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);transition:.2s}
.theme-btn:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:900px){.theme-btn{margin-left:0;order:-1}}
@media print{
  nav,#bar,#toTop,.theme-btn,.nav-toggle{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  .page-hero,header.hero,footer{background:#fff!important;color:#000!important}
  .page-hero h1,.page-hero p,.crumb,.crumb a,header.hero h1,header.hero p{color:#000!important}
}
