/* ============================================================
   初一 · 工具页外壳
   所有 static/tools/*.html 共用这套样式。
   ============================================================ */
:root{
  --ink:#15242d;--ink-2:#445665;--ink-3:#5f6b76;
  --paper:#f2efe8;--shell:#fffdf8;--line:#e4dfd4;--line-2:#efebe1;
  --teal:#0e6b7f;--teal-s:#e9f3f5;--teal-l:#c7dfe3;
  --amber:#8a5a12;--amber-s:#faf1e0;--amber-l:#eed8b0;
  --coral:#a84c39;--coral-s:#fbefea;--sage:#4a7a5f;--sage-s:#edf4ef;
  --serif:"Noto Serif SC","Songti SC","Source Han Serif SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Noto Sans SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sh-1:0 1px 2px rgba(21,36,45,.04),0 10px 30px -22px rgba(21,36,45,.4);
  --sh-2:0 2px 5px rgba(21,36,45,.05),0 26px 52px -30px rgba(21,36,45,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:.02em;}
p{margin:0;}
::selection{background:#d8e9ec;color:#0b2a33;}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px;}

/* ---------- 顶栏 ---------- */
.top{
  position:fixed;inset:0 0 auto;z-index:60;height:64px;display:flex;align-items:center;
  padding:0 max(22px,calc((100% - 1120px)/2));
  color:#f2ece0;border-bottom:1px solid transparent;
  transition:background .38s var(--ease),color .38s,border-color .38s;
}
.top.solid{
  background:rgba(255,253,248,.9);color:var(--ink);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);
}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:16px;letter-spacing:.14em;font-weight:600;}
.brand .mark{
  width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#12707f,#0a4e5c);color:#f7efd9;
}
.brand .mark svg{width:15px;height:15px;}
.top nav{margin-left:auto;display:flex;gap:28px;font-size:13.5px;letter-spacing:.06em;}
.top nav a{opacity:.82;transition:opacity .2s;}
.top nav a:hover,.top nav a[aria-current]{opacity:1;}

/* ---------- 页头 ---------- */
.ph{
  position:relative;overflow:hidden;color:#f2ece0;padding:112px 0 46px;
  background:
    radial-gradient(760px 400px at 82% 0%,rgba(88,150,150,.18),transparent 64%),
    linear-gradient(172deg,#0a1b24,#0e2c37 62%,#173f4b);
}
.ph::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(180deg,rgba(242,239,232,0),var(--paper));
}
.wrap{width:min(760px,calc(100% - 40px));margin:0 auto;}
.wrap-wide{width:min(960px,calc(100% - 40px));margin:0 auto;}
.kicker{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:#a9c0be;}
.ph h1{margin-top:18px;font-size:clamp(28px,4.6vw,42px);line-height:1.25;color:#fbf5e7;}
.ph .lead{margin-top:14px;font-size:14.5px;line-height:1.9;color:#c9d8d4;max-width:600px;}

/* ---------- 面板 ---------- */
.panel{
  position:relative;margin-top:-34px;z-index:5;
  background:var(--shell);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--sh-2);padding:26px;
}
.panel + .panel{margin-top:22px;}

/* ---------- 表单 ---------- */
.row{display:grid;grid-template-columns:1fr 52px 1fr;gap:14px;align-items:end;}
.field label{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);margin-bottom:7px;}
.field input,.field select{
  width:100%;height:52px;padding:0 16px;border-radius:12px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--mono);font-size:21px;font-variant-numeric:tabular-nums;
  transition:border-color .2s,box-shadow .2s;
}
.field input[type="number"]{-moz-appearance:textfield;}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.field input:focus,.field select:focus{outline:none;border-color:var(--teal-l);box-shadow:0 0 0 3px rgba(14,107,127,.1);}
.field input[readonly]{background:#faf8f2;color:var(--teal);font-weight:600;}
.field .hint{margin-top:6px;font-size:11px;color:var(--ink-3);}

.swap{
  height:52px;width:52px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  transition:border-color .2s,color .2s,transform .3s var(--ease);
}
.swap:hover{border-color:var(--teal-l);color:var(--teal);transform:rotate(180deg);}
.swap svg{width:18px;height:18px;}

.rate-box{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2);}
.rate-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.rate-row label{font-size:12.5px;color:var(--ink-2);letter-spacing:.04em;}
.rate-row input{
  width:120px;height:36px;padding:0 11px;border-radius:9px;border:1px solid var(--line);
  background:#fff;font-family:var(--mono);font-size:13.5px;color:var(--ink);
}
.rate-row input:focus{outline:none;border-color:var(--teal-l);}
.btn-sm{
  height:36px;padding:0 15px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font-family:inherit;font-size:12.5px;
  transition:border-color .2s,color .2s,background .2s;
}
.btn-sm:hover{border-color:var(--teal-l);color:var(--teal);background:var(--teal-s);}
.btn-sm.primary{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600;}
.btn-sm.primary:hover{background:#0b5a6b;color:#fff;}

.status{margin-top:12px;font-size:11.5px;line-height:1.7;color:var(--ink-3);letter-spacing:.02em;min-height:1.7em;}
.status b{color:var(--teal);font-weight:600;}
.status .warn{color:var(--amber);}
.status .bad{color:var(--coral);}

/* ---------- 快捷数值 ---------- */
.quick{margin-top:22px;}
.quick h2{font-size:12px;letter-spacing:.16em;color:var(--ink-3);font-family:var(--sans);font-weight:600;margin-bottom:12px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chips button{
  height:32px;padding:0 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;
  transition:border-color .2s,color .2s,background .2s;
}
.chips button:hover{border-color:var(--teal-l);color:var(--teal);background:var(--teal-s);}

/* ---------- 结果卡 ---------- */
.result{
  margin-top:22px;padding:20px;border-radius:14px;
  background:linear-gradient(150deg,#0d5d6d,#0a4a58);color:#f2f7f6;
  box-shadow:0 18px 40px -24px rgba(10,70,84,.7);
}
.result .k{font-size:10.5px;letter-spacing:.18em;opacity:.68;}
.result .v{font-family:var(--mono);font-size:34px;line-height:1.2;font-weight:600;margin-top:8px;font-variant-numeric:tabular-nums;}
.result .v small{font-family:var(--sans);font-size:13px;font-weight:400;opacity:.72;margin-left:6px;}
.result .n{font-size:11.5px;opacity:.66;margin-top:8px;line-height:1.7;}

/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{
  text-align:left;font-weight:600;font-size:10.5px;letter-spacing:.12em;color:var(--ink-3);
  padding:10px 12px;background:#faf8f2;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);}
.tbl tr:last-child td{border-bottom:none;}
.tbl .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.tbl tbody tr:hover{background:#fdfbf6;}

/* ---------- 同类工具切换栏（所有工具页共用） ---------- */
.sibling-tools{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line-2);
  font-size:12px;
}
.sibling-tools .lbl{color:var(--ink-3);letter-spacing:.08em;margin-right:2px;}
.sibling-tools a{
  height:28px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);text-decoration:none;
  transition:border-color .2s,color .2s,background .2s;
}
.sibling-tools a:hover{border-color:var(--teal-l);color:var(--teal);background:var(--teal-s);}
.sibling-tools a[aria-current]{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600;}

/* ---------- 说明与页脚 ---------- */
.note{margin:26px 0 0;font-size:12.5px;line-height:1.9;color:var(--ink-3);}
.note a{color:var(--teal);text-decoration:underline;text-decoration-color:var(--teal-l);text-underline-offset:3px;}
.foot{
  margin-top:30px;padding:30px 0 46px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
}
.foot a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.foot a:hover{color:var(--teal);border-bottom-color:var(--teal-l);}

/* ---------- 响应式 ---------- */
@media (max-width:620px){
  .top{height:58px;padding:0 18px;}
  .top nav{gap:16px;font-size:12.5px;}
  .brand{font-size:14px;letter-spacing:.1em;}
  .ph{padding:96px 0 40px;}
  .panel{padding:20px;border-radius:16px;}
  .row{grid-template-columns:1fr;gap:10px;}
  .swap{width:100%;height:40px;}
  .swap:hover{transform:none;}
  .field input{font-size:18px;height:48px;}
  .result .v{font-size:28px;}
}
@media print{
  .top,.foot,.ph::after{display:none !important;}
  body{background:#fff;}
  .panel{box-shadow:none;border-color:#ccc;margin-top:0;}
  .ph{background:none;color:#000;padding:0 0 16px;}
  .ph h1,.ph .lead{color:#000;}
  .kicker{color:#666;}
}