/* ==========================================================================
   站长工具站 /tool
   白底简洁风格，独立文件，不覆盖 app.css / status-page.css
   ========================================================================== */

:root {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --text: #1d2129;
  --text-2: #4e5969;
  --muted: #4e5969;
  --faint: #86909c;
  --line: #e5e6eb;
  --line-soft: #f0f1f3;
  --brand: #1677ff;
  --brand-dark: #0958d9;
  --brand-soft: #e8f3ff;
  --ok: #00b42a;
  --ok-bg: #e8ffea;
  --warn: #ff7d00;
  --warn-bg: #fff7e8;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(29,33,41,.05), 0 4px 16px rgba(29,33,41,.06);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p { margin: 0 0 8px; }
h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.3; }

.mono,
.wb-area,
.out-text,
.out-box,
.input,
.kv-input {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 20;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--brand);
  border-radius: 8px;
}

/* ------------------------------ 顶栏 ------------------------------ */
.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
}
.brand-mark svg { width: 18px; height: 18px; }

.brand-name { font-weight: 700; font-size: 15px; }
.brand-sep { width: 1px; height: 14px; background: var(--line); }
.brand-page { color: var(--muted); font-size: 13px; }

.head-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.head-nav::-webkit-scrollbar { display: none; }
.head-nav a {
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}
.head-nav a:hover { background: var(--line-soft); color: var(--text); }
.head-nav a.is-active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }

.head-cta {
  border: 1px solid var(--brand);
  color: var(--brand-dark) !important;
}
.head-cta:hover { background: var(--brand) !important; color: #fff !important; }

/* ------------------------------ 页首说明 ------------------------------ */
.page {
  /* 只写上下；写成 padding 简写会把同元素 .wrap 的左右 20px 顶掉，窄屏会贴边 */
  padding-top: 26px;
  padding-bottom: 46px;
}

.hero {
  margin-bottom: 22px;
  padding: 22px 24px;
  background: linear-gradient(180deg, #ffffff, #fafcff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero h1 {
  font-size: 28px;
  letter-spacing: -.4px;
}
.hero .lede {
  max-width: 780px;
  margin: 8px 0 0;
  color: var(--muted);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.hero-meta span {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12px;
  color: var(--faint);
}

/* 页首与卡片说明里的行内代码统一成小灰块 */
.hero code,
.tc-desc code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--line-soft);
  color: var(--text-2);
  font-family: "JetBrains Mono", Consolas, Menlo, monospace;
  font-size: 12px;
}

/* ------------------------------ 工具首页卡片 ------------------------------ */
.group-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 30px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  letter-spacing: -.2px;
}
.hero + .group-title {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.group-title small { color: var(--faint); font-weight: 400; }

/* ------------------------------ 搜索框 ------------------------------ */
.tool-search-wrap {
  position: relative;
  margin: 16px 0 4px;
  max-width: 560px;
}
.tool-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 1;
}
.tool-search-input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 42px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #1f2937;
  outline: none;
  transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.tool-search-input::placeholder { color: #9ca3af; }
.tool-search-input:hover { border-color: #d1d5db; }
.tool-search-input:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 3px rgba(22,119,255,.08);
}
.tool-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.tool-search-clear:hover { background: #e5e7eb; color: #4b5563; }

/* ------------------------------ 最近使用 ------------------------------ */
.recent-tools { margin-top: 8px; }
.recent-title {
  margin-top: 10px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.tool-card.is-recent {
  border-color: #c8ddff;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}
.tool-card.is-recent .tc-icon {
  background: var(--brand);
  color: #fff;
}

.tool-grid {
  display: grid;
  /* auto-fit：不满一行的空轨道会收起，3 张一组不会被拉成 4 列留白 */
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px;
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all .2s ease;
}
.tool-card:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 24px rgba(22,119,255,.12);
  transform: translateY(-3px);
}
.tool-card:hover .tc-title { color: var(--brand-dark); }
.tool-card:hover .tc-icon {
  background: var(--brand);
  color: #fff;
  transform: scale(1.08);
}
.tc-icon {
  transition: all .2s ease;
}

.tc-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tc-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 700;
  transition: background-color .15s ease, color .15s ease;
}
.tc-title { font-size: 15px; min-width: 0; }
.tc-desc {
  flex: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.tc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--faint);
}
.tc-go { color: var(--brand-dark); font-weight: 600; }
.tool-card:hover .tc-go { text-decoration: underline; text-underline-offset: 2px; }

.tool-card.is-soon {
  background: #fbfcfd;
  border-style: dashed;
  /* auto-fit 会把空轨道收掉，单张占位卡不封顶会拉成整行宽 */
  max-width: 340px;
}
.tool-card.is-soon:hover { border-color: var(--line); box-shadow: var(--shadow); transform: none; }
.tool-card.is-soon:hover .tc-icon { background: var(--line-soft); color: var(--faint); }
.tool-card.is-soon .tc-icon { background: var(--line-soft); color: var(--faint); }
.tool-card.is-soon .tc-title { color: var(--text-2); }
.tool-card.is-soon .tc-go { color: var(--faint); font-weight: 400; }

.tag {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--line-soft);
  color: var(--faint);
  font-size: 11px;
}
.tag.is-live { background: var(--ok-bg); color: var(--ok); }
.tag.is-soon { background: var(--warn-bg); color: var(--warn); }

/* ------------------------------ 面板与两栏布局 ------------------------------ */
.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 16px; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 16px; letter-spacing: -.1px; }
.panel-head p {
  margin: 2px 0 0;
  color: var(--faint);
  font-size: 12px;
}
/* 角标一律是胶囊：原先只有 .panel-head 直系子节点走胶囊，代码生成页与编码页那几处
   挂在 tabs / 输出框旁边的角标就退化成 11.5px 裸文本（实测高 18 vs 24，两种高度混在同一页）。
   默认值统一给到 .panel-note，父容器只管要不要强制不换行。 */
.panel-note {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}
.panel-note:empty { display: none; }
.panel-note.is-warn { background: var(--warn-bg); }
/* 中文能逐字折行，胶囊不锁 nowrap 就会被压成两三行；
   改由左边的标题块吸收收缩，长句自己换行。 */
.panel-head > div { flex: 1 1 auto; min-width: 0; }
.panel-head > .panel-note { flex: 0 1 auto; white-space: nowrap; }
.panel-body { padding: 16px; }

/* ------------------------------ 表单控件 ------------------------------ */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}
.field-label em {
  margin-left: 6px;
  color: var(--faint);
  font-weight: 400;
  font-style: normal;
}

.input,
.select,
.kv-input,
.wb-area {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.input:focus,
.select:focus,
.kv-input:focus,
.wb-area:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .12);
}

.wb-area {
  display: block;
  min-height: 74px;
  resize: vertical;
  font-size: 12.5px;
  line-height: 1.7;
}

.check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.check input { width: 15px; height: 15px; accent-color: var(--brand); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.btn {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .1s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { border-color: var(--faint); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.btn-primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-dark);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover { color: var(--brand); }

.seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--line-soft);
}
.seg button {
  padding: 5px 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.seg button:hover { background: #fff; color: var(--text); }
.seg button.is-active {
  background: #fff;
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow);
}

.help {
  margin: 6px 0 0;
  color: var(--faint);
  font-size: 12px;
}
.help code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--line-soft);
  color: var(--text-2);
  font-family: "JetBrains Mono", Consolas, Menlo, monospace;
  font-size: 11.5px;
}

.notice {
  padding: 10px 12px;
  border-left: 3px solid var(--brand);
  border-radius: 0 8px 8px 0;
  background: var(--brand-soft);
  color: var(--text-2);
  font-size: 12.5px;
}
.notice.is-warn { border-left-color: var(--warn); background: var(--warn-bg); }

/* ------------------------------ 词库框 ------------------------------ */
.wordbox { margin-bottom: 14px; }
.wb-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}
.wb-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--faint);
}
.wb-hint { flex: 1; }
.wb-count { color: var(--muted); white-space: nowrap; }

/* ------------------------------ 排列模板 / 参数表 ------------------------------ */
.rows { margin-top: 4px; }
.row-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.row-item .input,
.row-item .kv-input { flex: 1; }
.row-del {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.row-del:hover { border-color: #dc2626; color: #dc2626; }

.kv-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 28px;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--faint);
  font-size: 11.5px;
}
.kv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 28px;
  gap: 8px;
  margin-bottom: 8px;
}

/* ------------------------------ 输出区 ------------------------------ */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
  border-radius: var(--radius) var(--radius) 0 0;
}
.stat { display: flex; flex-direction: column; }
.stat b { font-size: 17px; font-weight: 650; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.stat span { color: var(--faint); font-size: 11.5px; }

.output-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.output-bar .spacer { flex: 1; }

.out-scroll {
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 输出框高度收成语义档位，模板里不再各写各的内联 max-height
   （原先同一站里飘着 560/420/320/240/190 五个值，纯文本块的 padding 也是内联的）。 */
.out-scroll.is-md { max-height: 420px; }
.out-scroll.is-sm { max-height: 300px; }
.out-scroll.is-xs { max-height: 220px; }
.out-scroll.is-text { padding: 14px 16px; }
.out-scroll.is-inset { border-radius: 8px; }

.out-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.out-row:nth-child(even) { background: #fbfcfd; }
.out-row:hover { background: var(--brand-soft); }
.out-idx {
  flex: 0 0 46px;
  color: #94a3b8;
  font-size: 11.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.out-text {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  font-size: 12.5px;
}
.out-row .btn-copy-one {
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity .12s ease;
}
.out-row:hover .btn-copy-one { opacity: 1; }

/* 标签速查行：标记名固定宽，右侧现算示例 */
.td-tag {
  flex: 0 0 140px;
  color: var(--brand-dark);
  font-size: 12px;
  word-break: break-all;
}
.td-ex {
  flex: 0 0 auto;
  max-width: 40%;
  color: var(--muted);
  font-size: 12px;
  word-break: break-all;
}

/* 归属地那张表是「标签 : 值」的定义表，不是一行行记录：
   斑马纹与 hover 底色在只读键值表上是噪声，所以关掉；
   标签列按最长标签（国家/地区、asn 组织）收到 104px，经纬度那类数字列用等宽数字对齐。 */
.out-scroll.is-kv .out-row:nth-child(even) { background: none; }
.out-scroll.is-kv .out-row:hover { background: none; }
.out-scroll.is-kv .out-row { padding: 7px 16px; }
.out-scroll.is-kv .td-tag {
  flex: 0 0 104px;
  color: var(--muted);
  font-weight: 600;
  word-break: normal;
}
.out-scroll.is-kv .out-text { font-variant-numeric: tabular-nums; }

.out-box {
  display: block;
  min-height: 260px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre;
  overflow: auto;
}
.out-box.is-light {
  background: #fbfcfd;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
}

.out-empty {
  padding: 40px 16px;
  color: var(--faint);
  text-align: center;
  font-size: 13px;
}

.out-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
}

/* ------------------------------ Tab（代码生成页） ------------------------------ */
/* 编码页与代码生成页的切换条就是这两页的「面板头」，但它们没有 .panel-head，
   所以给它一条与 .stats 同色的带底 + 圆角上沿，别让页首下面直接是一片白。 */
.tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: #fbfcfd;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  padding: 8px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.tabs button:hover {
  background: var(--line-soft);
  border-radius: 8px 8px 0 0;
  color: var(--text);
}
.tabs button.is-active {
  border-bottom-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}

/* ------------------------------ 代码生成页两栏 ------------------------------ */
.cg-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  align-items: stretch;
}
.cg-form {
  padding: 16px;
  border-right: 1px solid var(--line);
}
.cg-form .field:last-child { margin-bottom: 0; }
.cg-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cg-side .out-box {
  flex: 1;
  min-height: 300px;
  border-radius: 0;
}
.cg-side .out-foot {
  border-top: 1px solid var(--line);
}
.counter {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--faint);
}
.counter.is-over { color: #dc2626; }
.counter.is-good { color: var(--ok); }
.radio-col { display: grid; gap: 7px; }

/* ------------------------------ 页脚 ------------------------------ */
.site-foot {
  padding: 22px 0 30px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--faint);
  font-size: 12.5px;
}
.foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.foot-brand { color: var(--text); font-weight: 600; }
.foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-links a:hover { color: var(--brand-dark); }
.site-foot p { margin: 2px 0; }

/* ------------------------------ 焦点与滚动条 ------------------------------ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.out-scroll::-webkit-scrollbar,
.out-box::-webkit-scrollbar,
.tabs::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.out-scroll::-webkit-scrollbar-thumb,
.out-box::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #cbd5e1;
  background-clip: content-box;
}
.out-box::-webkit-scrollbar-thumb { background-color: #475569; }
.out-scroll::-webkit-scrollbar-track,
.out-box::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------ IP 反查频道（五个关键词页） ------------------------------ */
/* 结果是一张表（域名 / 首次 / 最近 / 状态 / 来源），不是纯文本行，所以不复用 .out-row，
   自己给一套 .ipr-table：表头吸顶、日期列等宽数字，便于上下扫。 */
.ipr-panel .panel-body { padding-bottom: 12px; }

.ipr-input-row { display: flex; gap: 8px; }
.ipr-input-row .input { flex: 1 1 auto; min-width: 0; }
.ipr-input-row .btn { flex: 0 0 auto; }

.ipr-hot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.ipr-hot-label { display: block; margin-bottom: 6px; color: var(--faint); font-size: 12px; }
.ipr-hot-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ipr-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.ipr-chip:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.ipr-chip b { font-weight: 600; }
.ipr-chip span { color: var(--faint); font-size: 11px; }

.ipr-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: #fbfcfd;
}
.ipr-sum-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ipr-ip { font-size: 15px; font-weight: 600; color: var(--text); word-break: break-all; }
.ipr-sum-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--faint); font-size: 12px; }
.ipr-sum-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.ipr-note { color: var(--warn); }

.ipr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ipr-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 16px;
  text-align: left;
  white-space: nowrap;
  background: #f7f8fa;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-weight: 600;
}
.ipr-table tbody td { padding: 7px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ipr-table tbody tr:hover { background: #fafbfc; }
.ipr-table tbody td a { color: var(--brand-dark); text-decoration: none; }
.ipr-table tbody td a:hover { text-decoration: underline; }
.ipr-idx { width: 44px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ipr-date { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ipr-src-cell { color: var(--faint); white-space: nowrap; }
.ipr-table td:last-child { width: 56px; text-align: right; }
.ipr-table-foot { padding: 8px 16px; color: var(--faint); font-size: 12px; }

/* 「活跃」标签：和工具首页卡片的 is-live 同一套绿，但这里是表格内的状态，单独命名免得互相牵连 */
.tag.is-ok { background: var(--ok-bg); color: var(--ok); }

/* 查询面板是整宽，下面两块说明文字并排；.panel + .panel 的 16px 上边距在栅格里会错位，按栅格 gap 收掉 */
.grid-panels > .panel + .panel { margin-top: 0; }
.ipr-related { margin-top: 16px; }
.ipr-links { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ipr-links a {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--text-2);
  text-decoration: none;
}
.ipr-links a b { display: block; font-size: 13px; color: var(--text); }
.ipr-links a span { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); }
.ipr-links a:hover { border-color: var(--brand); background: var(--brand-soft); }
.ipr-links a.is-current { border-color: var(--brand); background: var(--brand-soft); }
.ipr-links a.is-current b { color: var(--brand-dark); }

.ipr-foot-btns { display: inline-flex; align-items: center; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition: none !important; animation: none !important; }
  .tool-card:hover,
  .btn:active { transform: none; }
}

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width: 1080px) {
  .tool-layout { grid-template-columns: minmax(0, 1fr); }
  .cg-grid { grid-template-columns: minmax(0, 1fr); }
  .cg-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .cg-side .out-box { min-height: 220px; }
}
@media (max-width: 640px) {
  .head-inner { height: 54px; }
  .brand-sep, .brand-page { display: none; }
  .hero { padding: 18px 16px; }
  .hero h1 { font-size: 24px; }
  .hero-meta { gap: 6px; margin-top: 12px; }
  .hero-meta span { padding: 3px 8px; font-size: 11.5px; }
  .group-title { margin: 24px 0 12px; padding-top: 16px; }
  .stats { gap: 12px 18px; }
  .grid-2 { grid-template-columns: 1fr; }
  .out-idx { flex-basis: 34px; }
  .panel-head { flex-wrap: wrap; }
  .panel-head > .panel-note { max-width: 100%; white-space: normal; }
  /* 标签速查与归属地的「标签列」在 390 里占掉 42% 行宽（实测 140/335，
     示例那侧被挤到要横向溢出），窄屏收到 118 就够放最长标签名 */
  .td-tag { flex-basis: 118px; }
  /* 输出框在窄屏不该占满两屏高：顶到视口高的 60%，长内容仍走内部滚动 */
  .out-scroll { max-height: 60vh; }
  .out-scroll.is-md,
  .out-scroll.is-sm,
  .out-scroll.is-xs { max-height: 46vh; }
  /* IP 反查表在 390 里五列塞不下：去掉「序号」和「来源」两列（这两列信息量最小），
     日期列本身不会换行，剩下的三列刚好一行放完 */
  .ipr-table thead th:nth-child(1),
  .ipr-table tbody td:nth-child(1),
  .ipr-table thead th:nth-child(6),
  .ipr-table tbody td:nth-child(6) { display: none; }
  .ipr-input-row { flex-wrap: wrap; }
  .ipr-input-row .btn { width: 100%; }
  /* 分段控件在窄屏的正确姿势：按钮内部不许把「URL 参数段」这种标签折成两行
     （实测折行后单按钮高从 26 涨到 32，整条控件歪斜），改为整条换行、按钮保持一行。 */
  .seg {
    display: flex;
    flex-wrap: wrap;
  }
  .seg button {
    padding: 5px 9px;
    white-space: nowrap;
  }
}


/* ====================================================================
   公共 DNS 页（/tool/public-dns）
   全铺开：不折叠、不设下拉筛选，115 行一次到底。
   表格刻意不叫 .ipr-table：那边 640px 断点会隐藏第 1 列和第 6 列，
   这里的第 1 列是「服务商 / 运营商」，被藏掉整张表就没意义了。
   ==================================================================== */

.dns-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.dns-bar .help { flex: 1 1 260px; margin: 0; }

.dns-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dns-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.dns-table tbody td { padding: 8px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.dns-table tbody tr:hover { background: #fafbfc; }

/* 表格容器：只允许横向滑动，不设高度上限、不裁高度。
   原来两张表都套在 .out-scroll 里，那条规则带 max-height:560px + overflow-y:auto，
   等于在页面里又开了一个滚动框——115 行要一截截往下翻，这就是「要滑动」的来源。
   现在整页直接铺满，滚动交给浏览器窗口自己。 */
.dns-wrap { overflow-x: auto; }

/* 地区分组小标题：国内 / 国际 / 港澳台 各一条，纯分隔，不可折叠、不带筛选 */
.dns-group-row td {
  padding: 9px 16px;
  background: #f4f6f8;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
}
.dns-group-row td b { margin-right: 8px; font-size: 12.5px; color: var(--text); }
.dns-group-row td span { margin-right: 12px; }
.dns-group-row .dns-group-note { color: var(--faint); }

/* 本机测速脚本那一块：一行按钮 + 一段可直接复制的命令 */
.dns-script-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 10px;
}
.dns-script-bar .help { flex: 1 1 320px; margin: 0; }
.dns-script-code {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}



.dns-th-name { width: 200px; }
.dns-th-doh { width: 210px; }
.dns-th-ms { width: 96px; }
.dns-th-cmd { width: 250px; }
.dns-th-op { width: 148px; }
.dns-th-isp { width: 58px; }
.dns-th-prov { width: 76px; }

.dns-cell-name b { display: block; font-size: 13px; color: var(--text); }
.dns-region {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 11px;
}
.dns-note { display: block; margin-top: 4px; max-width: 240px; color: var(--faint); font-size: 11.5px; line-height: 1.5; }
.dns-cell-isp { color: var(--text-2); }
.dns-isp {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 11.5px;
}
.dns-cell-prov b { font-size: 12.5px; color: var(--text); }

.dns-addrs { display: flex; flex-wrap: wrap; gap: 6px; }
.dns-addr {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  line-height: 1.7;
}
.dns-addr b { font-size: 12px; font-weight: 500; color: var(--text); }
.dns-addr.is-v6 { background: #f4f7ff; border-color: #dfe8ff; }

.dns-ms {
  display: inline-block;
  min-width: 60px;
  font-style: normal;
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.dns-ms.is-pending { color: var(--faint); }
.dns-ms.is-fast { color: var(--ok); font-weight: 600; }
.dns-ms.is-mid { color: var(--text-2); }
.dns-ms.is-slow { color: var(--warn); font-weight: 600; }
.dns-ms.is-fail { color: #c0392b; }

.dns-cmd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fafbfc;
  color: var(--text-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.dns-cell-doh .dns-doh { color: var(--text-2); font-size: 11.5px; word-break: break-all; }
.dns-cell-doh .dns-doh.is-none { color: var(--line); }

.dns-ops { white-space: nowrap; text-align: right; }
.dns-ops .btn-link { display: inline-block; margin-left: 10px; }
.dns-ops .btn-link:first-child { margin-left: 0; }

.dns-list-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-size: 12px;
}

.panel-note.is-busy { background: var(--warn-bg); color: var(--warn); }

@media (max-width: 1080px) {
  /* DoH 地址那一列在窄屏信息量最低（点「测这一家」时也看不到它），先收掉 */
  .dns-table thead th.dns-th-doh,
  .dns-table tbody td.dns-cell-doh { display: none; }
  .dns-th-name { width: 160px; }
  .dns-th-cmd { width: auto; }
}

@media (max-width: 640px) {
  .dns-bar { padding: 10px 12px; }
  .dns-bar .btn { width: 100%; }
  /* 操作列收到窄屏以外：地址与命令本来就是给复制/粘贴用的，命令本身还在表格里 */
  .dns-table thead th.dns-th-op,
  .dns-table tbody td.dns-ops { display: none; }
  .dns-th-name { width: auto; }
  .dns-note { max-width: none; }
  .dns-cmd { white-space: normal; word-break: break-all; }
}