@charset "UTF-8";

/* 工具页局部变量：全部映射到站点 CSS 变量，深浅色主题自动跟随 */
.tool-root{
  --tl-bg: var(--bg-subtle);
  --tl-panel: var(--bg-elevated);
  --tl-line: var(--border);
  --tl-line-strong: color-mix(in srgb, var(--border) 65%, var(--text) 12%);
  --tl-ink: var(--text);
  --tl-ink-2: var(--text-soft);
  --tl-ink-3: var(--text-faint);
  --tl-accent: var(--brand);
  --tl-accent-soft: var(--brand-soft);
  --tl-ok: #12805c; --tl-warn: #b45309; --tl-bad: #b42318; --tl-bad-soft: #fef3f2;
  --tl-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --tl-radius: 12px;
  background: var(--tl-bg);
  color: var(--tl-ink);
  font: 15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 34px;
}
.tool-root, .tool-root *, .tool-root *::before, .tool-root *::after { box-sizing: border-box; }
/* 页头：站点顶栏已承担吸顶，这里只做标题行 */
.tool-root .tool-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:20px 22px 0;
}
.tool-root .tool-head h1{font-size:20px; margin:0; font-weight:650; letter-spacing:.2px}
.tool-root .tool-head .sub{color:var(--tl-ink-3); font-size:12.5px}
.tool-root .tool-head .badge{
  margin-left:auto; font-size:12px; color:var(--tl-accent);
  background:var(--tl-accent-soft); border:1px solid color-mix(in srgb, var(--tl-accent) 22%, transparent);
  border-radius:999px; padding:2px 10px;
}
.tool-root .wrap{display:grid; grid-template-columns:236px minmax(0,1fr); gap:18px; padding:18px 22px 60px; max-width:1360px}
@media (max-width:900px){.tool-root .wrap{grid-template-columns:1fr; padding:14px}
.tool-root nav.side{position:static; max-height:none; display:flex; gap:6px; overflow-x:auto; padding:0 0 8px; border-bottom:1px solid var(--tl-line); -webkit-overflow-scrolling:touch}
.tool-root nav.side .grp{display:none}
.tool-root nav.side button{width:auto; flex:0 0 auto; white-space:nowrap; border:1px solid var(--tl-line); background:var(--tl-panel); font-size:13px; padding:5px 10px}
.tool-root nav.side button .n{display:none}
.tool-root .indbar{padding:9px 14px}
.tool-root .indbar select{min-width:0; width:100%}}
.tool-root nav.side{position:sticky; top:calc(var(--header-h) + 12px); align-self:start; max-height:calc(100vh - 96px); overflow:auto}
.tool-root nav.side .grp{font-size:12px; color:var(--tl-ink-3); margin:14px 0 6px; padding-left:10px; letter-spacing:.4px}
.tool-root nav.side .grp:first-child{margin-top:0}
.tool-root nav.side button{
    display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
    padding:7px 10px; border-radius:7px; font:inherit; font-size:13.5px; color:var(--tl-ink-2);
    line-height:1.45;
  }
.tool-root nav.side button:hover{background:var(--tl-bg)}
.tool-root nav.side button.on{background:var(--tl-accent-soft); color:var(--tl-accent); font-weight:600}
.tool-root nav.side button .n{color:var(--tl-ink-3); font-size:11.5px; margin-left:4px}
.tool-root nav.side button.on .n{color:var(--tl-accent)}
.tool-root .panel{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:18px; align-items:start}
@media (max-width:1100px){.tool-root .panel{grid-template-columns:1fr}}
.tool-root .card{background:var(--tl-panel); border:1px solid var(--tl-line); border-radius:var(--tl-radius); overflow:hidden}
.tool-root .card .hd{padding:14px 16px; border-bottom:1px solid var(--tl-line); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.tool-root .card .hd h2{margin:0; font-size:15.5px; font-weight:650}
.tool-root .card .hd .tag{font-size:11.5px; color:var(--tl-ink-3); border:1px solid var(--tl-line); border-radius:5px; padding:1px 7px}
.tool-root .card .bd{padding:16px}
.tool-root .desc{color:var(--tl-ink-2); font-size:13.5px; margin:0 0 14px}
.tool-root .fields{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px}
.tool-root .f label{display:block; font-size:12.5px; color:var(--tl-ink-2); margin-bottom:5px}
.tool-root .f .row{display:flex; align-items:stretch; border:1px solid var(--tl-line-strong); border-radius:7px; overflow:hidden; background:var(--tl-panel)}
.tool-root .f .row:focus-within{border-color:var(--tl-accent); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.tool-root .f input{
    flex:1; min-width:0; border:0; outline:0; padding:8px 10px; font:inherit; font-size:14px;
    font-family:var(--tl-mono); color:var(--tl-ink); background:transparent;
  }
.tool-root .f .u{padding:8px 9px; font-size:12px; color:var(--tl-ink-3); background:var(--tl-bg); border-left:1px solid var(--tl-line); min-width:44px; text-align:center}
.tool-root .f .hintline{font-size:11.5px; color:var(--tl-ink-3); margin-top:4px}
.tool-root .actions{margin-top:16px; display:flex; gap:8px; flex-wrap:wrap}
.tool-root .btn{
    border:1px solid var(--tl-line-strong); background:var(--tl-panel); color:var(--tl-ink-2); border-radius:7px;
    padding:6px 12px; font:inherit; font-size:13px; cursor:pointer;
  }
.tool-root .btn:hover{background:var(--tl-bg)}
.tool-root .btn.pri{background:var(--tl-accent); border-color:var(--tl-accent); color:#fff}
.tool-root .btn.pri:hover{background:var(--brand-strong)}
.tool-root .res{background:var(--tl-panel); border:1px solid var(--tl-line); border-radius:var(--tl-radius); position:sticky; top:calc(var(--header-h) + 12px)}
@media (max-width:1100px){.tool-root .res{position:static}}
.tool-root .res .hd{padding:13px 16px; border-bottom:1px solid var(--tl-line); font-size:13px; color:var(--tl-ink-3); display:flex; justify-content:space-between}
.tool-root .res table{width:100%; border-collapse:collapse}
.tool-root .res td{padding:9px 16px; border-bottom:1px solid var(--tl-line); font-size:13.5px; vertical-align:top}
.tool-root .res tr:last-child td{border-bottom:0}
.tool-root .res td.k{color:var(--tl-ink-2); width:56%}
.tool-root .res td.v{text-align:right; font-family:var(--tl-mono); font-weight:600; white-space:nowrap}
.tool-root .res td.v small{font-weight:400; color:var(--tl-ink-3); font-size:11.5px; margin-left:3px}
.tool-root .res td.v.txt{font-family:inherit; font-weight:700; color:var(--tl-accent); font-size:14.5px}
.tool-root .res tr.key td{background:var(--tl-bg)}
.tool-root .res tr.key td.v{color:var(--tl-accent); font-size:16px}
.tool-root .res .note{padding:10px 16px; font-size:12px; color:var(--tl-ink-3); border-top:1px solid var(--tl-line); background:var(--tl-bg)}
.tool-root .flag{margin:12px 16px 0; padding:8px 11px; border-radius:7px; font-size:12.5px; line-height:1.55}
.tool-root .flag.w{background:#fff8ed; border:1px solid #f6dfb8; color:#8a4b06}
.tool-root .flag.b{background:#fef3f2; border:1px solid #f8d3cf; color:#9d261d}
.tool-root .flag.g{background:#effaf4; border:1px solid #cdefe0; color:#0f6b4d}
.tool-root .formula{margin-top:16px; border-top:1px dashed var(--tl-line-strong); padding-top:12px}
.tool-root .formula h3{margin:0 0 8px; font-size:12.5px; color:var(--tl-ink-3); font-weight:600; letter-spacing:.3px}
.tool-root .formula pre{
    margin:0 0 8px; padding:10px 12px; background:var(--tl-bg); border:1px solid var(--tl-line);
    border-radius:7px; font-family:var(--tl-mono); font-size:12.5px; line-height:1.7; overflow:auto; color:var(--tl-ink);
  }
.tool-root .formula ul{margin:6px 0 0; padding-left:18px; color:var(--tl-ink-2); font-size:12.5px; line-height:1.8}
.tool-root .formula .ref{margin-top:10px; font-size:12px; color:var(--tl-ink-3)}
.tool-root .formula .ref b{color:var(--tl-ink-2); font-weight:600}
.tool-root .indbar{background:var(--tl-panel); border-bottom:1px solid var(--tl-line); padding:9px 22px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.tool-root .indbar .lbl{font-size:12.5px; color:var(--tl-ink-3); letter-spacing:.3px}
.tool-root .indbar select{font:inherit; font-size:13.5px; padding:5px 8px; border:1px solid var(--tl-line-strong); border-radius:7px; background:var(--tl-panel); color:var(--tl-ink); min-width:210px}
.tool-root .indbar select:focus{outline:0; border-color:var(--tl-accent); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.tool-root .indbar .kv{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.tool-root .indbar .kv em{font-size:12px; color:var(--tl-ink-3); font-style:normal}
.tool-root .indbar .kv span{font-size:11.8px; color:var(--tl-ink-2); background:var(--tl-bg); border:1px solid var(--tl-line); border-radius:999px; padding:2px 9px; white-space:nowrap}
.tool-root .indbar .kv span b{color:var(--tl-accent); font-weight:600}
.tool-root .indbar .btn{padding:5px 10px; font-size:12.5px}
.tool-root .inddetail{flex-basis:100%; padding:9px 12px; background:var(--tl-bg); border:1px solid var(--tl-line); border-radius:8px; font-size:12.6px; color:var(--tl-ink-2); line-height:1.75}
.tool-root .inddetail b{color:var(--tl-ink)}
.tool-root .inddetail ol{margin:3px 0 2px 18px; padding:0}
.tool-root .inddetail .src{color:var(--tl-ink-3); font-size:11.8px; margin-top:4px}
.tool-root .chip{display:inline-block; font-size:10.5px; color:var(--tl-accent); background:var(--tl-accent-soft); border:1px solid color-mix(in srgb, var(--tl-accent) 22%, transparent); border-radius:4px; padding:0 5px; margin-left:5px; line-height:1.5; vertical-align:1px; font-weight:600}
.tool-root .f.from-ind .row{border-color:color-mix(in srgb, var(--tl-accent) 32%, transparent); background:var(--tl-bg)}
.tool-root .f.from-ind .hintline{color:#4b6ea8}
.tool-root footer.foot{color:var(--tl-ink-3); font-size:12px; padding:0 22px 30px; max-width:1360px; line-height:1.8}
.tool-root .kbd{font-family:var(--tl-mono); background:var(--tl-bg); border:1px solid var(--tl-line); border-radius:4px; padding:0 4px; font-size:11.5px}
@media print{.tool-root nav.side, .tool-root .tool-head .badge, .tool-root .actions{display:none}
.tool-root .wrap{display:block}
.tool-root .card, .tool-root .res{border-color:var(--tl-line-strong)}}
/* ---------- 容器内布局适配（由独立页改为站点版心内的卡片式条带） ---------- */
.tool-root .tool-head{padding:18px 2px 0}
.tool-root .indbar{margin-top:16px; border:1px solid var(--tl-line); border-radius:12px; padding:10px 14px}
.tool-root .inddetail{background:var(--tl-panel)}
.tool-root .wrap{margin:0; padding:18px 2px 40px; max-width:none}
.tool-root footer.foot{padding:0 2px 10px; margin:0 auto; max-width:none}
@media (max-width:900px){.tool-root .tool-head{padding:12px 2px 0}.tool-root .indbar{margin-top:12px}}

/* ---------- 多行表格（房间组）模块 ---------- */
.tool-root .tbar{display:flex; gap:8px; align-items:center; margin:0 0 8px; flex-wrap:wrap}
.tool-root .tbar .hintline{margin:0 0 0 auto}
.tool-root .tgrid-wrap{grid-column:1/-1; margin-top:4px}
/* 表格类模块：卡片占满整行，结果面板移到下方 */
.tool-root .panel.tbl{grid-template-columns:1fr}
.tool-root .panel.tbl .res{position:static}
.tool-root .tscroll{overflow-x:auto; border:1px solid var(--tl-line-strong); border-radius:8px; background:var(--tl-panel)}
.tool-root table.tgrid{border-collapse:collapse; width:100%; font-size:12px; min-width:760px}
.tool-root .tgrid th,.tool-root .tgrid td{border-bottom:1px solid var(--tl-line); border-right:1px solid var(--tl-line); padding:3px 4px; text-align:center; white-space:nowrap}
/* 最后一列「操作」横向滚动时固定在右侧 */
.tool-root .tgrid th:last-child,.tool-root .tgrid td:last-child{position:sticky; right:0; z-index:2; border-right:0; border-left:1px solid var(--tl-line-strong); background:var(--tl-panel); box-shadow:-10px 0 12px -10px rgba(16,24,40,.25)}
.tool-root .tgrid thead th:last-child{background:var(--tl-bg); z-index:3}
.tool-root .tgrid thead th{background:var(--tl-bg); color:var(--tl-ink-2); font-weight:600; padding:6px 4px; font-size:11.5px}
.tool-root .tgrid thead th small{display:block; color:var(--tl-ink-3); font-weight:400}
.tool-root .tgrid thead th.c{color:var(--tl-accent)}
.tool-root .tgrid input[type=number],.tool-root .tgrid input[type=text]{width:74px; border:1px solid transparent; background:transparent; font:inherit; font-family:var(--tl-mono); font-size:12px; color:var(--tl-ink); text-align:center; padding:4px 2px; border-radius:5px}
.tool-root .tgrid input[type=text]{width:96px; font-family:inherit; text-align:left}
.tool-root .tgrid input:hover{border-color:var(--tl-line-strong)}
.tool-root .tgrid input:focus{outline:0; border-color:var(--tl-accent); background:var(--tl-bg)}
.tool-root .tgrid select{font:inherit; font-size:11.5px; border:1px solid var(--tl-line-strong); border-radius:5px; background:var(--tl-panel); color:var(--tl-ink); padding:3px 2px}
.tool-root .tgrid td.c{font-family:var(--tl-mono); font-weight:600; color:var(--tl-ink); background:var(--tl-bg); min-width:72px}
.tool-root .tgrid td.c.bad{color:var(--tl-bad)}
.tool-root .tgrid tfoot th{background:var(--tl-accent-soft); color:var(--tl-ink-2); font-weight:700; border-top:1px solid var(--tl-line-strong); text-align:left; padding-left:10px}
.tool-root .tgrid tfoot td{background:var(--tl-accent-soft); font-family:var(--tl-mono); font-weight:700; border-top:1px solid var(--tl-line-strong)}
.tool-root .tgrid .btn.del{padding:2px 8px; font-size:11px; line-height:1.4}

.tool-calc .source-notice{margin:16px 2px 0; padding:14px 16px; border:1px solid var(--tl-line-strong); border-radius:12px; background:var(--tl-panel); color:var(--tl-ink-2); font-size:13px}
.tool-calc .source-notice strong{color:var(--tl-ink)}
.tool-calc .source-notice p{margin:6px 0 0}
.tool-calc [hidden]{display:none!important}
.tool-calc .fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.tool-calc .f input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--tl-bad)}
.tool-calc .f .u{max-width:125px; overflow-wrap:anywhere}
.tool-calc .formula h3{margin-top:14px; color:var(--tl-ink-2)}
.tool-calc .formula pre{white-space:pre-wrap; overflow-wrap:anywhere}
.tool-calc .formula .ref{color:var(--tl-ink-2); overflow-wrap:anywhere; line-height:1.8}
.tool-calc #copyStatus:empty{display:none}
.tool-calc #copyStatus{color:var(--tl-ink-2); font-size:13px}
.tool-calc .btn:disabled{opacity:.55; cursor:not-allowed}
.tool-calc .res .k{padding:9px 14px; border-bottom:1px solid var(--tl-line); font-size:13px; text-align:left; font-weight:400; vertical-align:top}
.tool-calc .res td.v{white-space:normal; overflow-wrap:anywhere}
.tool-calc .res td.v small{display:block}
.tool-calc .panel.tbl{min-width:0}
.tool-calc .tgrid-wrap,.tool-calc .tscroll{min-width:0; max-width:100%}
.tool-calc .tgrid{min-width:1420px}
.tool-calc .tgrid input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--tl-bad)}
.tool-calc .tool-head .sub,.tool-calc footer.foot,.tool-calc .res .note{color:var(--tl-ink-2)}
@media(max-width:900px){
  .tool-calc nav.side{position:static; max-height:none}
  .tool-calc nav.side button{width:auto; flex:0 0 auto}
}