/* coderqh /tools/ — 只给工具页(2026-11-05 工具页试水)。单独成文件:不动 site.css 的 ?v=,
   工具页不上线时整份从 dist 删掉(同 preview.css)。颜色只用 site.css 的令牌。 */
.tool{padding:0 0 clamp(48px,6vw,80px)}
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(20px,3vw,34px);align-items:start}
.tool-side{position:sticky;top:88px}
.tool-side-h{font:600 20px/1.2 var(--body);margin:0 0 6px}
.tool-count{margin:0 0 14px;font-size:14px}
.tool-side .btn[hidden]{display:none}

.tool-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:190px;padding:28px 20px;border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--ink-2);text-align:center;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.tool-drop:hover,.tool-drop.is-over{border-color:var(--blue);background:var(--glow)}
.tool-drop:focus-within{outline:2px solid var(--amber);outline-offset:3px}
.tool-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tool-drop-h{font:600 17px/1.3 var(--body);color:var(--text)}
.tool-drop-sub{font-size:14px;color:var(--muted)}

.tool-opts{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin:18px 0 0}
.tool-opt{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--text-2)}
.tool-hex{font:500 14.5px/1 var(--mono);color:var(--text);background:var(--ink-3);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;width:11ch;box-sizing:content-box}
.tool-hex:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--glow)}
.tool-hex[aria-invalid="true"]{border-color:var(--text);border-style:dashed}
.tool-check input{width:18px;height:18px;accent-color:var(--blue)}

.tool-status{margin:16px 0 0;font-size:15px;color:var(--text-2)}
.tool-status.is-error{color:var(--text);font-weight:600}

.tool-previews{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0 0}
.tool-previews[hidden]{display:none}
.tool-prev{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.tool-prev img{display:block;width:96px;height:96px;background:var(--stage);border:1px solid var(--line)}
.tool-prev.is-ios img{border-radius:22%}
.tool-prev.is-round img{border-radius:50%}
.tool-prev.is-play img{border-radius:20%}

.tool-table{border-collapse:collapse;font-size:14.5px;min-width:100%}
.tool-table th,.tool-table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;color:var(--text-2)}
.tool-table th{color:var(--text);font-weight:600}
.tool-table code{font:400 13px/1.4 var(--mono);overflow-wrap:anywhere}
.tool-h3{font:600 18px/1.3 var(--body);margin:34px 0 4px}

.tool-howto .cols-asym > div:first-child{position:static}
/* 网格子项默认 min-width:auto:不换行的 <pre> 会把单列网格撑出屏幕(窄屏探针 11-05 抓到) */
.tool-layout > *,.tool-howto .cols-asym > *{min-width:0}
.tool-steps{margin:0;padding-left:20px;color:var(--text-2)}
.tool-steps li{margin-bottom:10px}
.tool-howto code,.tool-index code{font:400 .88em/1.4 var(--mono);overflow-wrap:anywhere}
.tool-snippet{margin:14px 0 12px;white-space:pre}

.tool-index{padding-top:0}
.tool-funnel-grid{margin-top:28px}
.tool-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.tool-list li{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--ink-3);padding:20px 22px}
.tool-list h2{font:600 19px/1.3 var(--body);margin:0 0 6px}
.tool-list h2 a{text-decoration:none}
.tool-list p{margin:0;color:var(--text-2);font-size:15px}

@media (max-width:860px){
  .tool-layout{grid-template-columns:minmax(0,1fr)}
  .tool-side{position:static}
}