/* 工具页共享样式 — 所有 tools/tools/*.html 引用
   编辑式设计系统：暖白纸张底 · 衬线大标题 · 无衬线正文 · 等宽元信息
   与 /tools/css/tools.css（工具合集首页）保持同一视觉语言 */
:root {
  color-scheme: light;
  --canvas:#FBFBFA; --surface:#FFFFFF; --surface-soft:#F9F9F8;
  --ink:#2F3437; --ink2:#787774; --ink3:#B4B4B0;
  --line:#EAEAEA; --line-soft:rgba(0,0,0,.04);
  --accent:#1744E8; --accent-soft:#E9EEFF;
  --ok-bg:#EDF3EC; --ok-text:#346538;
  --warn-bg:#FBF3DB; --warn-text:#956400;
  --err:#C0392B;
  --code-bg:#111111; --code-text:#F4F2EE;
  --card-shadow:0 1px 2px rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.03);
  --font-serif:'Instrument Serif','Noto Serif SC',Georgia,serif;
  --font-sans:'Manrope','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
[data-theme="dark"] {
  color-scheme: dark;
  --canvas:#0E0F11; --surface:#181B20; --surface-soft:#1E2127;
  --ink:#ECEAE6; --ink2:#A7A5A0; --ink3:#6E6C68;
  --line:#26292F; --line-soft:rgba(255,255,255,.04);
  --accent:#7BC0E5; --accent-soft:#0E2533;
  --ok-bg:#112218; --ok-text:#86C098;
  --warn-bg:#2B2010; --warn-text:#D9A85F;
  --err:#E74C3C;
  --code-bg:#1E2127; --code-text:#ECEAE6;
  --card-shadow:0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.2);
}
* { box-sizing:border-box; }
::selection { background:var(--accent-soft); color:var(--ink); }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--canvas); color:var(--ink);
  font:400 14px/1.65 var(--font-sans); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- 页面骨架 ---------- */
.tool { max-width:980px; margin:0 auto; padding:14px 28px 64px; }

/* 顶栏：品牌 · 面包屑 · 主题切换（与工具合集首页同款） */
.tool-topbar { display:flex; gap:18px; align-items:center; padding:10px 0 14px; border-bottom:1px solid var(--line); }
.tool-topbar .brand { display:flex; gap:10px; align-items:center; color:var(--ink); }
.tool-topbar .brand:hover { text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:7px;
  color:#fff; background:var(--accent); font-size:16px; flex-shrink:0; }
.brand-text { display:flex; flex-direction:column; }
.brand-name { font:400 17px/1.1 var(--font-serif); letter-spacing:-.02em; }
.brand-sub { color:var(--ink3); font:500 8.5px/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; margin-top:2px; }
.tool-crumbs { flex:1; display:flex; gap:8px; align-items:center; min-width:0;
  color:var(--ink3); font:500 11.5px var(--font-mono); letter-spacing:.02em; }
.tool-crumbs a { color:var(--ink2); }
.tool-crumbs a:hover { color:var(--ink); text-decoration:none; }
.tool-crumbs .crumb-here { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.theme-toggle { width:30px; height:30px; margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink);
  cursor:pointer; transition:all .2s; font-size:13px; line-height:1; padding:0; flex-shrink:0; }
.theme-toggle:hover { background:var(--line-soft); border-color:var(--ink3); }
.theme-toggle .icon-sun { display:none; }
.theme-toggle .icon-moon { display:inline; }
[data-theme="dark"] .theme-toggle .icon-sun { display:inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }

/* 标题区 */
.tool-head { display:flex; gap:14px; align-items:baseline; justify-content:space-between; margin-top:36px; }
.tool-head h1 { margin:0; font:400 clamp(30px,5vw,42px)/1.15 var(--font-serif); letter-spacing:-.015em; }
.tool-head .id { flex-shrink:0; padding:4px 11px; border-radius:9999px; background:var(--accent-soft);
  color:var(--accent); font:500 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.tool-desc { margin:10px 0 26px; max-width:62ch; color:var(--ink2); font-size:14px; }

/* ---------- 表单控件 ---------- */
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 14px; }
.row label { color:var(--ink2); font-size:12.5px; white-space:nowrap; }
.grow { flex:1 1 240px; min-width:120px; }
input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],select,textarea {
  padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:var(--ink); font:13px/1.5 var(--font-sans); outline:none;
  transition:border-color .15s, box-shadow .15s; box-shadow:0 1px 2px rgba(0,0,0,.02); }
textarea { width:100%; resize:vertical; }
input:hover,select:hover,textarea:hover { border-color:var(--ink3); }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.mono,input.mono { font:12.5px/1.6 var(--font-mono); }
input[type=color] { width:38px; height:34px; padding:3px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); cursor:pointer; }
input[type=range] { accent-color:var(--accent); }
input[type=checkbox] { accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }
select { cursor:pointer; }

button,.btn { display:inline-flex; gap:6px; align-items:center; padding:8px 16px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink); cursor:pointer; font-size:13px; font-weight:600;
  font-family:var(--font-sans); letter-spacing:.01em; transition:all .15s; box-shadow:0 1px 2px rgba(0,0,0,.03); }
button:hover { border-color:var(--ink3); background:var(--line-soft); transform:translateY(-1px); }
button:active { transform:translateY(0); box-shadow:none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 2px 8px rgba(23,68,232,.25); }
button.primary:hover { filter:brightness(1.08); border-color:var(--accent); }
[data-theme="dark"] button.primary { color:#0E0F11; }
button.mini { padding:4px 10px; font-size:12px; border-radius:6px; }

/* ---------- 内容块 ---------- */
.pane { display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-bottom:14px; }
.pane.single { grid-template-columns:1fr; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.field > span { color:var(--ink3); font:500 10.5px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.output { width:100%; min-height:110px; padding:14px 16px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); font:12.5px/1.65 var(--font-mono); color:var(--ink);
  white-space:pre-wrap; word-break:break-all; overflow:auto; box-shadow:var(--card-shadow); }
.output.dark { background:var(--code-bg); color:var(--code-text); border-color:transparent; }
textarea[readonly] { background:var(--surface-soft); }

.stat { display:inline-flex; flex-direction:column; gap:3px; align-items:flex-start; min-width:96px;
  padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--card-shadow); }
.stat b { font:400 26px/1.1 var(--font-serif); letter-spacing:-.01em; }
.stat span { color:var(--ink3); font:500 10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }

.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:9999px;
  font:500 11px/1.7 var(--font-mono); }
.badge.ok { background:var(--ok-bg); color:var(--ok-text); }
.badge.warn { background:var(--warn-bg); color:var(--warn-text); }
.badge.blue { background:var(--accent-soft); color:var(--accent); }
.msg { padding:10px 14px; border:1px solid transparent; border-radius:10px; font-size:13px; margin-bottom:12px; }
.msg.err { background:rgba(192,57,43,.07); border-color:rgba(192,57,43,.15); color:var(--err); }
.msg.ok { background:var(--ok-bg); border-color:rgba(52,101,56,.15); color:var(--ok-text); }

table.ref { width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--card-shadow); }
table.ref th, table.ref td { padding:8px 13px; text-align:left; border-bottom:1px solid var(--line); }
table.ref th { color:var(--ink3); font:500 10.5px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; background:var(--surface-soft); }
table.ref tr:last-child td { border-bottom:0; }
table.ref tbody tr { transition:background .12s; }
table.ref tbody tr:hover { background:var(--line-soft); }
table.ref td.mono { font:12px var(--font-mono); }
.clickable { cursor:pointer; }

.grid-cards { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.hr { border:0; border-top:1px solid var(--line); margin:22px 0; }

/* ---------- 源码面板 ---------- */
.tool-source { margin-top:44px; padding-top:18px; border-top:1px solid var(--line); }
.tool-source .src-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tool-source .src-note { flex:1; min-width:200px; color:var(--ink3); font-size:12px; }

/* ---------- 反馈 ---------- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(6px); z-index:99;
  padding:9px 20px; border-radius:9999px; background:var(--ink); color:var(--canvas); font-size:13px;
  box-shadow:0 8px 28px rgba(0,0,0,.18); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 滚动条 ---------- */
.output, textarea, .tool-crumbs { scrollbar-width:thin; scrollbar-color:var(--ink3) transparent; }
.output::-webkit-scrollbar, textarea::-webkit-scrollbar { width:8px; height:8px; }
.output::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }
.output::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover { background:var(--ink3); }

/* ---------- 响应式 ---------- */
@media (max-width:640px) {
  .pane { grid-template-columns:1fr; }
  .tool { padding:10px 16px 48px; }
  .tool-crumbs { display:none; }
  .tool-head { margin-top:26px; flex-direction:column; gap:10px; }
  .row { align-items:stretch; }
  .row > * { flex:1 1 auto; }
  .row label, .row > span { flex:0 0 auto; }
}