/* ══════════════════════════════════════════════════════════════════
   SEO 磁石页公共壳样式（B1）· 从已验收 demo image-compressor-light.html 模板化
   红线7：颜色零硬编码——所有色值只在 :root / [data-theme=dark] token 块定义，
          其余一律 var()。A5 裸色值扫描闸门据此校验（token 块外不得出现 #hex/rgb()/hsl()）。
   双主题：默认浅色（百度正文友好），html[data-theme=dark] 覆盖；官网深色基线不适用 /tools/。
   ══════════════════════════════════════════════════════════════════ */
:root{
  --primary:#00A3C7;--primary-dim:rgba(0,163,199,.10);--primary-line:rgba(0,163,199,.35);
  --primary-strong:#006E85;--line-strong:#8E9EAE;
  --btn-fg:#FFFFFF;--bg:#F6F8FA;--bg-2:#FFFFFF;--card:#FFFFFF;--line:#DFE5EC;
  --text:#1E2630;--muted:#5B6875;--success:#0FA36B;
  --warn-bg:rgba(250,200,80,.22);--warn-line:rgba(176,130,0,.35);--warn-fg:#7a5800;
  --cta-bg:rgba(0,163,199,.08);--note-bg:#f3efff;--note-line:#9a7cff;--note-fg:#5b43b8;
  --card-shadow:0 1px 3px rgba(30,38,48,.06);--mono:"Cascadia Code",Consolas,monospace;
  --qr-bg:#FFFFFF;--logo-halo:rgba(255,255,255,.85);
}
html[data-theme=dark]{
  --primary:#00D4FF;--primary-dim:rgba(0,212,255,.14);--primary-line:rgba(0,212,255,.3);
  --primary-strong:#5CE1FF;--line-strong:#4A5A6B;
  --btn-fg:#04121a;--bg:#0B0D10;--bg-2:#11151B;--card:#141A21;--line:#222B36;
  --text:#E8EDF2;--muted:#8A97A6;--success:#3DDC97;
  --warn-bg:rgba(255,201,77,.08);--warn-line:rgba(255,201,77,.3);--warn-fg:#FFC94D;
  --cta-bg:rgba(0,212,255,.1);--note-bg:#1a1033;--note-line:#7a5cff;--note-fg:#b8a3ff;
  --card-shadow:none;--qr-bg:#FFFFFF;--logo-halo:rgba(255,255,255,.6);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:"Segoe UI","Microsoft YaHei UI",system-ui,sans-serif;line-height:1.7}
a{color:var(--primary);text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
/* 导航 */
nav.top{border-bottom:1px solid var(--line);background:var(--bg-2);position:sticky;top:0;z-index:9}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-weight:800;letter-spacing:.5px;font-size:17px;color:var(--text)}
.logo img{height:26px;vertical-align:middle;filter:drop-shadow(0 0 1px var(--logo-halo))}
.logo b{color:var(--primary)}
nav.top .links a{margin-left:18px;font-size:14px;color:var(--muted)}
nav.top .links a:hover{color:var(--primary)}
nav.top .links a.on{color:var(--primary);font-weight:700}
nav.top .logo{display:inline-flex;align-items:center;gap:6px}
/* 面包屑 */
.crumb{font-size:13px;color:var(--muted);padding:16px 0 6px}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--primary)}.crumb .sep{margin:0 6px}
/* 头部 */
header.tool h1{font-size:30px;font-weight:800;letter-spacing:-.3px;margin:10px 0 6px}
.tagline{color:var(--muted);font-size:15px;margin-bottom:8px}
.badges{margin:10px 0 22px}
.badge{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--primary);background:var(--primary-dim);border:1px solid var(--primary-line);padding:4px 12px;border-radius:999px;margin-right:8px}
/* 工具卡片 = slot 区 */
.toolcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;margin-bottom:22px}
.btn{display:inline-block;background:var(--primary);color:var(--btn-fg);font-weight:700;border:none;border-radius:10px;padding:11px 22px;font-size:15px;cursor:pointer;margin-top:14px;margin-right:10px}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.privline{font-size:12.5px;color:var(--muted);margin-top:14px}
.privline b{color:var(--success)}
/* 说明区 */
section.blk{margin-bottom:30px}
section.blk h2{font-size:21px;font-weight:800;margin-bottom:12px;padding-left:12px;border-left:3px solid var(--primary)}
.steps{counter-reset:s;list-style:none}
.steps li{counter-increment:s;position:relative;padding:0 0 14px 46px;color:var(--muted)}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:28px;height:28px;border-radius:50%;background:var(--primary-dim);border:1px solid var(--primary-line);color:var(--primary);font-family:var(--mono);font-size:14px;display:flex;align-items:center;justify-content:center}
.steps li b{color:var(--text)}
.scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.scene{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px;font-size:14px;color:var(--muted)}
.scene b{color:var(--text);display:block;margin-bottom:4px}
/* FAQ 折叠 */
details.faq{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:13px 18px;margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:600;list-style:none}
details.faq summary::before{content:"＋ ";color:var(--primary)}
details.faq[open] summary::before{content:"－ "}
details.faq p{color:var(--muted);font-size:14px;margin-top:9px}
/* 约束接线区 */
.con-banner{display:flex;gap:12px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:14px 18px;font-size:14px;color:var(--warn-fg);margin-bottom:14px}
.proclaim{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:12px;padding:20px 22px;margin-bottom:26px}
.proclaim .l1{font-size:15px}
.proclaim .l2{font-size:13px;color:var(--muted);margin-top:8px}
.proclaim .l3{margin-top:12px}
.proclaim .l3 a{font-weight:700}
/* 内链 */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.related a{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:13px 16px;font-size:14px;color:var(--text);transition:.2s}
.related a:hover{border-color:var(--primary)}
.related a span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
/* 页脚 CTA 与站点页脚 */
.footer-cta{background:linear-gradient(135deg,var(--cta-bg),transparent);border:1px solid var(--primary-line);border-radius:16px;padding:26px;text-align:center;margin:34px 0}
.footer-cta h3{font-size:19px;font-weight:800}
.footer-cta p{color:var(--muted);font-size:14px;margin:8px 0 4px}
footer.site{border-top:1px solid var(--line);padding:38px 0 30px;margin-top:56px;font-size:13.5px;color:var(--muted)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:28px;margin-bottom:26px}
.f-brand .logo-img{height:34px;display:block;margin-bottom:8px}
.f-brand p{font-size:13px;line-height:1.7;max-width:300px}
.f-qr{display:none;flex-wrap:wrap;align-items:flex-start;gap:10px}
.f-qr-slot{display:flex;flex-direction:column;align-items:center;gap:4px}
.f-qr img{width:88px;height:88px;border-radius:8px;border:1px solid var(--line);background:var(--qr-bg)}
.f-qr-label{font-size:12px;color:var(--muted)}
.f-qr>p{flex-basis:100%;font-size:12px;text-align:center;line-height:1.6}
footer.site h4{font-size:13px;color:var(--text);margin-bottom:10px;font-weight:700}
footer.site .fl{display:block;color:var(--muted);margin-bottom:7px;transition:.2s}
footer.site .fl:hover{color:var(--primary)}
.f-bottom{border-top:1px solid var(--line);padding-top:16px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;font-size:12.5px}
.f-bottom a{color:var(--muted)}
.f-bottom .dom{color:var(--primary);font-family:var(--mono)}
.toolcard,.scene,details.faq,.related a,nav.top{box-shadow:var(--card-shadow)}
#themeBtn{background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:15px;padding:3px 10px;color:var(--text)}
/* 插槽通用控件（B2）· 与 demo 样板同源结构 */
.drop{border:2px dashed var(--line);border-radius:12px;padding:42px 20px;text-align:center;cursor:pointer;transition:.2s}
.drop.over,.drop:hover{border-color:var(--primary);background:var(--primary-dim)}
.drop .big{font-size:40px}.drop p{color:var(--muted);margin-top:8px;font-size:14px}
.ctrls{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px}
.ctrl{flex:1;min-width:220px}
.ctrl label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
.ctrl label b{font-family:var(--mono);color:var(--primary)}
input[type=range]{width:100%;accent-color:var(--primary);margin-top:8px}
.field{margin-top:14px}
.field label{font-size:13px;color:var(--muted);display:block;margin-bottom:6px}
textarea.inp,select.inp,input.inp{width:100%;background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:14px;font-family:var(--mono)}
textarea.inp{min-height:130px;resize:vertical}
.outbox{display:none;margin-top:20px;border-top:1px solid var(--line);padding-top:6px}
.outbox.show{display:block}
.out{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:13.5px;color:var(--text);word-break:break-all;white-space:pre-wrap;margin-top:12px}
.out .k{display:inline-block;color:var(--muted);min-width:70px}
.result{display:none;margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.result.show{display:block}
.result .cmp{font-family:var(--mono);font-size:14px;color:var(--muted)}
.result .cmp b{color:var(--text)}
.result .save{color:var(--success);font-weight:700}
.note{background:var(--note-bg);border:1px dashed var(--note-line);color:var(--note-fg);font-size:12.5px;padding:8px 14px;border-radius:8px;margin-top:14px}
.errbox{display:none;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-fg);font-size:13.5px;padding:12px 16px;border-radius:10px;margin-top:14px}
.errbox.show{display:block}
/* 索引页（B3） */
.idx h3{font-size:16px;margin:24px 0 10px;color:var(--text);padding-left:10px;border-left:3px solid var(--primary-line)}
.idx .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.idx .grid a{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--text);transition:.2s}
.idx .grid a:hover{border-color:var(--primary);color:var(--primary)}
.idx .grid a span{display:block;font-size:12px;color:var(--muted)}
@media(max-width:640px){
  .f-grid{grid-template-columns:1fr 1fr}
  .wrap{padding:0 14px}
  header.tool h1{font-size:24px}
}
/* 文章页（§31 内容库 · changelog）· 红线7：只用 token */
.post-meta{font-size:13px;color:var(--muted);margin-bottom:14px}
.post-body{font-size:15.5px;line-height:1.85;max-width:820px}
.post-body h2{font-size:20px;font-weight:800;margin:26px 0 10px;padding-left:12px;border-left:3px solid var(--primary)}
.post-body h3{font-size:17px;font-weight:700;margin:20px 0 8px}
.post-body p{margin:10px 0}
.post-body ul,.post-body ol{margin:10px 0 10px 22px;color:var(--muted)}
.post-body li{margin:4px 0}
.post-body code{font-family:var(--mono);font-size:13.5px;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.post-body pre{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow:auto;margin:12px 0}
.post-body pre code{background:none;border:none;padding:0}
.post-body table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px}
.post-body th,.post-body td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.post-body th{background:var(--bg-2);font-weight:700}
.post-body blockquote{border-left:3px solid var(--primary-line);background:var(--primary-dim);padding:10px 16px;margin:12px 0;border-radius:0 10px 10px 0;color:var(--muted)}
.post-body img{max-width:100%;border-radius:10px}
.post-item{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:12px 0;color:var(--text);transition:.2s}
.post-item:hover{border-color:var(--primary)}
.post-item time{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:4px}
.post-item b{font-size:16px}
.post-item span{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.rssline{margin-top:18px;font-size:13px;color:var(--muted)}
/* 总索引首页露出（§31 最新动态 + §30 工作台占位）· 红线7：只用 token */
.idx-search{display:flex;gap:10px;align-items:center;margin:4px 0 14px}
.searchbox{flex:1;background:var(--bg);border:1px dashed var(--line-strong);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--text)}
.searchbox::placeholder{color:var(--muted);opacity:1}
.ph-badge{font-size:12px;color:var(--primary-strong);background:var(--primary-dim);border:1px solid var(--primary-line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.pill{background:var(--bg);border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--text);transition:.2s}
.pill:hover{border-color:var(--primary-strong);color:var(--primary-strong)}
.pill.off{color:var(--muted);border-style:dashed;cursor:default}
.idx-h2{font-size:16px;margin:26px 0 10px;color:var(--text);padding-left:10px;border-left:3px solid var(--primary-strong)}
.post-list{margin:0;padding:0;list-style:none}
.post-list li{display:flex;gap:10px;align-items:baseline;padding:11px 4px;border-bottom:1px dashed var(--line);font-size:14.5px}
.post-list a{color:var(--text);transition:.2s}
.post-list a:hover{color:var(--primary-strong)}
.post-date{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.post-kind{font-size:11px;color:var(--primary-strong);background:var(--primary-dim);border-radius:6px;padding:2px 9px;white-space:nowrap;font-weight:700}
.post-more{display:flex;gap:16px;margin-top:12px;font-size:13px}
.post-more a{color:var(--primary-strong);font-weight:700}