/* 宝刀网络工具箱 · 网页版
   视觉取向：中国经典古典 · 清新典雅
   宣纸为底、墨字为骨、黛青为脉、朱砂只作状态印；直角、界栏、题签，忌渐变与玻璃拟态。 */

:root {
  --paper:        #f6f0e4;
  --paper-raise:  #fbf7ee;
  --paper-sunk:   #efe7d6;
  --ink:          #2a2723;
  --ink-soft:     #5f584e;
  --ink-faint:    #8c8375;
  --line:         #ddd1b8;
  --line-strong:  #b9a882;
  --dai:          #3d5f66;   /* 黛青 */
  --dai-deep:     #2c464c;
  --shi:          #33566e;   /* 石青 */
  --zhu:          #ad3c2b;   /* 朱砂 */
  --zhu-soft:     #c96a5a;
  --zhu-pale:     #f3e0da;
  --qing:         #5c7a52;   /* 竹青 */
  --qing-pale:    #e4ecdf;
  --zhe:          #98682f;   /* 赭石 */
  --zhe-pale:     #f1e6d3;
  --mono: "Cascadia Mono", Consolas, "Sarasa Mono SC", Menlo, monospace;
  --serif: "Songti SC", "Noto Serif SC", SimSun, "Source Han Serif SC", serif;
  --kai: "Kaiti SC", KaiTi, STKaiti, "Songti SC", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--paper);
  /* 宣纸筋络：两道极淡斜纹 + 顶部微光，浓度控制在几乎不可察 */
  background-image:
    repeating-linear-gradient(45deg,  rgba(185,168,130,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(185,168,130,.035) 0 1px, transparent 1px 9px),
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.6), transparent 60%);
  background-attachment: fixed;
}

a { color: var(--dai); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { color: var(--zhu); border-bottom-color: var(--zhu-soft); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 18px 64px; }

/* ── 页眉：题签与印 ─────────────────────────────── */
.masthead {
  padding: 34px 0 18px;
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 3px 0 -1px var(--paper), 0 4px 0 0 var(--line);
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
}
.masthead__seal {
  font-family: var(--kai); font-weight: 700;
  color: var(--paper-raise); background: var(--zhu);
  width: 52px; height: 52px; display: grid; place-items: center;
  font-size: 21px; line-height: 1.05; letter-spacing: 0;
  padding: 5px; text-align: center;
  box-shadow: inset 0 0 0 2px rgba(246,240,228,.5);
  writing-mode: vertical-rl;
}
.masthead__title { font-family: var(--kai); font-size: 27px; letter-spacing: 5px; margin: 0; font-weight: 600; }
.masthead__sub { color: var(--ink-faint); font-size: 13px; letter-spacing: 3px; margin-top: 3px; }
.masthead__right { margin-left: auto; font-size: 13px; color: var(--ink-soft); display: flex; gap: 14px; align-items: center; }

/* ── 导航：竖排小签 ─────────────────────────────── */
.nav { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px 0 20px; }
.nav__group { display: flex; align-items: center; gap: 10px; }
.nav__tag {
  font-family: var(--kai); font-size: 12px; letter-spacing: 2px; color: var(--dai);
  border: 1px solid var(--line-strong); padding: 1px 7px; background: var(--paper-raise);
}
.nav__items { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.nav__items a { font-size: 14px; color: var(--ink-soft); border-bottom: none; padding: 1px 0; }
.nav__items a:hover { color: var(--zhu); }
.nav__items a.on { color: var(--zhu); border-bottom: 2px solid var(--zhu); font-weight: 600; }

/* ── 卡片：册页 ─────────────────────────────────── */
.card {
  background: var(--paper-raise);
  border: 1px solid var(--line);
  padding: 18px 20px 20px;
  margin-bottom: 16px;
  position: relative;
}
.card__title {
  font-family: var(--kai); font-size: 17px; letter-spacing: 3px; margin: 0 0 4px;
  color: var(--ink); font-weight: 600;
}
.card__desc { color: var(--ink-faint); font-size: 13px; margin: 0 0 14px; }
.card__rule { height: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 3px; margin-bottom: 16px; background: linear-gradient(var(--paper-raise), var(--paper-raise)) padding-box; }

/* 主体/来源印记：明确标注探测对象 */
.seal {
  font-family: var(--kai); font-size: 11px; letter-spacing: 2px;
  color: var(--zhu); border: 1px solid var(--zhu); padding: 0 6px; line-height: 1.7;
  display: inline-block; vertical-align: middle; white-space: nowrap;
}
.seal--srv { color: var(--dai); border-color: var(--dai); }
.seal--fill { color: var(--paper-raise); background: var(--zhu); border-color: var(--zhu); }
.seal--fill-srv { color: var(--paper-raise); background: var(--dai); border-color: var(--dai); }
.card > .seal { position: absolute; top: 18px; right: 20px; }

/* ── 表单 ───────────────────────────────────────── */
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 2px; min-width: 130px; flex: 1 1 160px; }
.field > label { font-size: 12px; color: var(--ink-faint); letter-spacing: 1px; }
input[type=text], input[type=number], input[type=password], input[type=email], select, textarea {
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  padding: 4px 2px; outline: none; border-radius: 0; width: 100%;
}
input:focus, select:focus, textarea:focus { border-bottom-color: var(--zhu); background: rgba(255,255,255,.5); }
textarea { font-family: var(--mono); font-size: 13px; line-height: 1.6; border: 1px solid var(--line); padding: 8px; }
select { appearance: none; padding-right: 18px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: right 6px center, right 1px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.btn {
  font-family: var(--kai); font-size: 14px; letter-spacing: 3px;
  color: var(--dai); background: var(--paper-raise);
  border: 1px solid var(--dai); padding: 5px 18px; cursor: pointer; border-radius: 0;
  transition: background .12s linear, color .12s linear;
}
.btn:hover { background: var(--dai); color: var(--paper-raise); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--zhu { color: var(--zhu); border-color: var(--zhu); }
.btn--zhu:hover { background: var(--zhu); color: var(--paper-raise); }
.btn--sm { font-size: 12px; padding: 2px 10px; letter-spacing: 2px; }
.btn.on { background: var(--dai); color: var(--paper-raise); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 数据展示 ───────────────────────────────────── */
.kv { display: grid; grid-template-columns: minmax(84px, 132px) 1fr; gap: 0; font-size: 14px; }
.kv > dt { color: var(--ink-faint); padding: 5px 8px 5px 0; border-bottom: 1px dotted var(--line); }
.kv > dd { margin: 0; padding: 5px 0; border-bottom: 1px dotted var(--line); word-break: break-all; }
.kv > dd b { font-weight: 600; }

pre.out {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  background: var(--paper-sunk); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  padding: 10px 12px; margin: 0; overflow: auto; max-height: 340px; white-space: pre-wrap; word-break: break-all;
}
table.tb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tb th { text-align: left; font-family: var(--kai); font-weight: 600; letter-spacing: 1px;
  color: var(--ink-faint); border-bottom: 1px solid var(--line-strong); padding: 6px 8px; white-space: nowrap; }
table.tb td { padding: 6px 8px; border-bottom: 1px dotted var(--line); vertical-align: top; }
table.tb tr:hover td { background: rgba(255,255,255,.55); }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 12.5px; }

.tag { font-size: 12px; padding: 0 7px; border: 1px solid currentColor; display: inline-block; line-height: 1.7; }
.tag--ok { color: var(--qing); background: var(--qing-pale); border-color: var(--qing); }
.tag--warn { color: var(--zhe); background: var(--zhe-pale); border-color: var(--zhe); }
.tag--bad { color: var(--zhu); background: var(--zhu-pale); border-color: var(--zhu); }
.tag--mute { color: var(--ink-faint); border-color: var(--line-strong); }
.tag--info { color: var(--shi); background: #e2eaf0; border-color: var(--shi); }

.msg { font-size: 13.5px; margin-top: 10px; padding: 7px 11px; border-left: 3px solid var(--line-strong);
  background: var(--paper-sunk); color: var(--ink-soft); }
.msg--ok { border-left-color: var(--qing); background: var(--qing-pale); color: #3f5a37; }
.msg--bad { border-left-color: var(--zhu); background: var(--zhu-pale); color: #8c2f21; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stat { text-align: center; padding: 6px 4px; }
.stat__v { font-family: var(--kai); font-size: 26px; letter-spacing: 1px; color: var(--dai); line-height: 1.2; word-break: break-all; }
.stat__v--zhu { color: var(--zhu); }
.stat__k { font-size: 12px; color: var(--ink-faint); letter-spacing: 2px; margin-top: 2px; }

.path { font-family: var(--mono); font-size: 12.5px; line-height: 1.9; word-break: break-all;
  background: var(--paper-sunk); border: 1px solid var(--line); padding: 8px 11px; }
.path i { color: var(--ink-faint); font-style: normal; padding: 0 3px; }
.hop-addr { font-family: var(--mono); font-size: 13px; }
.hop-addr--mute { color: var(--ink-faint); }
.hop-host { font-size: 12px; color: var(--ink-faint); }

.bar { height: 5px; background: var(--paper-sunk); border: 1px solid var(--line); margin-top: 4px; }
.bar > i { display: block; height: 100%; background: var(--dai); width: 0; transition: width .2s linear; }

/* ── 首页功能签 ─────────────────────────────────── */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.tile {
  display: block; background: var(--paper-raise); border: 1px solid var(--line);
  padding: 15px 16px 14px; color: var(--ink); border-bottom: 1px solid var(--line);
}
.tile:hover { border-color: var(--line-strong); color: var(--zhu); box-shadow: -3px 3px 0 0 var(--paper-sunk); }
.tile__t { font-family: var(--kai); font-size: 16px; letter-spacing: 2px; }
.tile__d { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.tile__s { float: right; }

/* ── 页脚 ───────────────────────────────────────── */
.foot { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line-strong);
  color: var(--ink-faint); font-size: 12.5px; letter-spacing: 1px; display: flex; gap: 16px; flex-wrap: wrap; }
.foot .seal { transform: scale(.92); }

.pane { display: none; }
.pane.on { display: block; }
.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.muted { color: var(--ink-faint); }
.small { font-size: 12.5px; }
hr.rule { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 3px; margin: 18px 0; }
.spin { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--dai); border-top-color: transparent;
  border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -1px; margin-right: 5px; }
@keyframes sp { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  body { font-size: 14px; }
  .wrap { padding: 0 12px 44px; }
  .masthead { padding-top: 22px; gap: 12px; }
  .masthead__title { font-size: 22px; letter-spacing: 3px; }
  .card > .seal { position: static; display: block; margin-bottom: 8px; }
  .nav { gap: 4px 14px; }
  .kv { grid-template-columns: 1fr; }
  .kv > dt { border-bottom: none; padding-bottom: 0; }
}