/* 工具区共用样式（所有工具页都引用它）。不要在工具页里写 style="…" 或 <style>：CSP 禁止内联样式。 */
:root { color-scheme: light dark; --bg:#fafafa; --fg:#222; --muted:#666; --line:#e2e2e2; --link:#0b5fd0; --card:#fff; --code-bg:#f0f0f0; --accent:#0b5fd0; --err:#b3261e; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#181818; --fg:#e6e6e6; --muted:#a0a0a0; --line:#333; --link:#7ab2ff; --card:#212121; --code-bg:#262626; --accent:#7ab2ff; --err:#f2b8b5; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--fg);
       font:18px/1.7 system-ui,-apple-system,"Segoe UI","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif; }
a { color: var(--link); }
h1 { font-size:1.6rem; line-height:1.3; margin:.3rem 0 .5rem; }
h2 { font-size:1.15rem; margin:0 0 .6rem; }
.muted { color: var(--muted); }

/* 双语：tool.js 会在 <html> 上设置 data-lang，隐藏另一种语言。没有 JS 时两种语言都显示。 */
html[data-lang="zh"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="zh"] { display: none; }

.tool-header { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem 1.5rem;
               padding:.9rem 1.25rem; border-bottom:1px solid var(--line); font-size:.95rem; }
.tool-header a { text-decoration:none; }
.tool-header a:hover { text-decoration:underline; }
.lang-switch { color: var(--muted); }
.lang-switch button { font:inherit; color:var(--link); background:none; border:0; padding:0; cursor:pointer; }
.lang-switch button:hover { text-decoration:underline; }
.lang-switch button[aria-current="true"] { color:var(--fg); font-weight:600; cursor:default; text-decoration:none; }

.tool-main { flex:1; width:100%; max-width:46rem; margin:0 auto; padding:1.25rem 1.25rem 2rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:.6rem; padding:1rem 1.1rem; margin:1rem 0; }

.field { display:flex; flex-direction:column; gap:.25rem; margin:.6rem 0; }
.field label { font-size:.85rem; color:var(--muted); }
input[type="text"], input[type="number"], select, textarea {
  font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:.4rem; padding:.45rem .6rem; width:100%; min-width:0; }
input:focus-visible, select:focus-visible, button:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
button.btn { font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:.4rem; padding:.45rem .9rem; cursor:pointer; }
button.btn:hover { border-color:var(--accent); }
.error { color:var(--err); min-height:1.5em; margin:.3rem 0 0; font-size:.9rem; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
table.data { width:100%; border-collapse:collapse; font-size:.95rem; }
table.data td { padding:.3rem .4rem; border-top:1px solid var(--line); }
table.data td:last-child { text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

.site-footer { padding:1rem 1.25rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; text-align:center; }