/* ===================================================================
   1. Reset & Tokens (颜色、变量)
   =================================================================== */
:root {
  --brand-50:#eef2ff;
  --brand-100:#e0e7ff;
  --brand-200:#c7d2fe;
  --brand-300:#a5b4fc;
  --brand-400:#818cf8;
  --brand-500:#6366f1;
  --brand-600:#4f46e5;
  --brand-700:#4338ca;
  --brand-800:#3730a3;
  --brand-900:#312e81;

  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --card:#ffffff;
    --card-bg:#f9fafb;   /* ✅ 新增 */
  --border:rgba(0,0,0,0.08);
  --text:#0f172a;
  --text-weak:#475569;
  --muted:#64748b;
  --link:var(--brand-600);
  --link-hover:var(--brand-700);
  --shadow:0 8px 30px rgba(2,6,23,.06);
  --radius:14px;
  --radius-lg:20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b1020;
    --bg-soft:#0f172a;
    --card:#121a2f;
        --card-bg:#1e293b;  /* ✅ 修复 result-box 背景色 */
    --border:rgba(255,255,255,0.08);
    --text:#e5e7eb;
    --text-weak:#cbd5e1;
    --muted:#9aa7bd;
    --link:#8da2ff;
    --link-hover:#b6c3ff;
    --shadow:0 8px 30px rgba(0,0,0,.35);
  }
}

/* ===================================================================
   2. Base (html, body, typography, links)
   =================================================================== */
* { box-sizing:border-box; }
html, body {
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a {
  color:var(--link);
  text-decoration:none;
  transition:color .2s, text-decoration .2s;
  background-color: transparent;
}
a:hover, a:focus {
  color:var(--link-hover);
  text-decoration: none;
  background-color: transparent;
}
/* 通用表格样式 */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

/* 表头 */
.table thead {
  background: var(--bg-soft);
}
.table th {
  text-align: left;
  font-weight: 600;
  padding: 12px 16px;
  color: var(--text-weak);
  border-bottom: 1px solid var(--border);
}

/* 表体 */
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
  word-break: break-word;
}

/* 去掉最后一行边框 */
.table tbody tr:last-child td {
  border-bottom: none;
}

/* 行 hover 效果 */
.table tbody tr:hover {
  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
}

/* Typography */
.h1 { font-size:clamp(32px, 5vw, 48px); margin:0 0 16px; font-weight:800; letter-spacing:-0.01em; background:linear-gradient(90deg,var(--brand-600),var(--brand-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.h2 { font-size:clamp(20px,3vw,28px); line-height:1.3; margin:14px 0 24px; font-weight:700; }
.sub { color:var(--text-weak); margin:0 0 16px; }

/* ===================================================================
   3. Layout (container, grid, flex, section)
   =================================================================== */
.container { max-width:1100px; margin:0 auto; padding:0; }
.header-nav{display:flex;justify-content: space-between; width: 1100px;}
.panel{background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 18px;
    box-shadow: var(--shadow);}
.section { padding:20px 0; }
main, #main { min-height:auto !important; width: 100%;margin: 10px auto}
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.space-between { justify-content:space-between; }

.grid { display:grid; gap:16px; }
.grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){ .grid.cols-4{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:768px){ .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .grid,.grid.cols-2{grid-template-columns:1fr;} }

/* ===================================================================
   4. Components
   =================================================================== */
/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--text); font-weight:600; cursor:pointer; transition:transform .05s ease, box-shadow .2s; }
.btn:hover { box-shadow:var(--shadow); }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--brand-600); border-color:transparent; color:#fff; }
.btn.success { background:#16a34a; color:#fff; border-color:transparent; }
.btn.warn { background:#f59e0b; color:#111827; border-color:transparent; }
.btn.ghost { background:transparent; }

/* Cards */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 20px; margin-bottom: 10px}
.card:hover { box-shadow:0 10px 40px rgba(0,0,0,.08); }

/* Forms */
.input, input[type="text"], input[type="number"], input[type="email"], input[type="url"], textarea, select {
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--text); outline:none; transition:border .15s, box-shadow .15s;
}
textarea { min-height:110px; resize:vertical; }
.input:focus, input:focus, textarea:focus, select:focus { border-color:var(--brand-400); box-shadow:0 0 0 3px color-mix(in oklab,var(--brand-400) 25%, transparent); }
.input[readonly],textarea[readonly]{opacity:.7;}

/* Header / Footer */
.site-header { position:sticky; top:0; background:color-mix(in oklab,var(--bg) 92%, transparent); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--border); z-index:20; }
.site-header .inner { display:flex; align-items:center; justify-content:center; gap:24px; padding:10px 24px; max-width:none; width:100%; }
.site-footer { padding:24px 0; border-top:1px solid var(--border); color:var(--text-weak); font-size:14px; margin-top:auto; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0)); }
.site-footer a{ color:var(--link);text-decoration: none;background-color: transparent; }
.site-footer .links{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* ===================================================================
   5. Utilities
   =================================================================== */
.mt-12 { margin-top:48px; }
.mb-12 { margin-bottom:48px; }
.w-full { width:100%; max-width:none; }
.center { text-align:center; }
.round { border-radius:var(--radius); }
.round-lg { border-radius:var(--radius-lg); }
.hide { display:none!important; }

/* ===================================================================
   6. Custom Sections
   =================================================================== */
/* IP 卡片 */
.ip-card { margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }

/* 工具区 Grid */
.tools-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; justify-items:center; margin-top:32px; }
@media (max-width:1024px){ .tools-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .tools-grid{grid-template-columns:1fr;} }
/* 工具卡片统一尺寸 */
.tool-card {
  width: 100%;
  min-height: 120px;        /* ✅ 统一高度 */
  display: flex;            /* ✅ 使用 flex 居中 */
  flex-direction: column;   /* 上下排版 */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  transition: transform .2s, box-shadow .2s;
}
.tool-card strong {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.tool-card p {
  font-size: 14px;
  color: var(--text-weak);
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.tool-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }


/* ============================
   Changelog 样式
   ============================ */
.changelog-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.changelog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.changelog-card .post-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-600);
  margin-bottom: 12px;
}

.changelog-card ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  color: var(--text);
}

.changelog-card ul li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* 关于我们正文样式 */
.about-article {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

.about-article p {
  margin-bottom: 1.2em;
  text-align: justify;  /* ✅ 两端对齐，更整齐 */
}

.about-article p:last-child {
  margin-bottom: 0;
}

.about-article strong {
  font-weight: 600;
  color: var(--brand-600);
}

.about-article a {
  color: var(--link);
  text-decoration: underline;
}
.about-article a:hover {
  color: var(--link-hover);
}

.about-article ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0.8em 0;
}
.about-article li {
  margin-bottom: 0.4em;
}

/* 最近查询记录 */
.history-list { list-style:none; padding:0; margin-top:24px; }
.history-list li { padding:10px 0; border-bottom:1px solid var(--border); color:var(--text-weak); transition:background .2s; }
.history-list li:hover { background:color-mix(in oklab,var(--bg-soft) 70%, transparent); }
.history-list li:last-child { border-bottom:none; }

/* ===================================================================
   7. Section spacing
   =================================================================== */
.section > .card,
.section > .w-full {
  margin-top:60px;
  margin-bottom:60px;
}

.section > .card:last-child {
  margin-bottom:120px;
}

/* ===================================================================
   8. 工具页大气布局
   =================================================================== */
/* 外层容器：上下左右居中 */
.tool-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  max-width: 100% !important; /* 覆盖 container 限制 */
}


.tool-box {
  max-width: 960px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 48px;
  text-align: center;
}
/* 表单元素间距（工具页） */
.tool-box form .form-group {
  margin-bottom: 20px;
}

.tool-box form .btn {
  margin-top: 10px;
}

/* 表单横向布局 */
.tool-form-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.tool-form-row .input {
  flex: 1;
  min-height: 48px;
  font-size: 16px;
}

.tool-form-row .btn {
  padding: 0 24px;
  font-size: 16px;
}

/* 表单横向布局 */
.tool-form-row {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.tool-form-row .input {
  flex: 1;
  min-height: 54px;
  font-size: 16px;
}

.tool-form-row .btn {
  padding: 0 28px;
  font-size: 16px;
  font-weight: 600;
}

/* 查询结果 */
.tool-result {
  margin-top: 40px;
  padding: 28px;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg-soft);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: left;
}
.result-box {
  background: var(--card-bg, #f9fafb);
  border-radius: 8px;
  padding: 16px;
}
.result-table {
  width: 100%;
  border-collapse: collapse;
}
.result-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.result-table td:first-child {
  font-weight: 600;
  color: var(--brand-400); /* ✅ 改为变量 */
}
.result-box {
  background: var(--card-bg); /* ✅ 亮暗模式可切换 */
}
.dark .result-table td {
  border-color: rgba(255,255,255,0.1);
}
/* 结果展示区域的 pre 自动换行 */
.result-box, pre {
  white-space: pre-wrap;   /* 保留换行，但允许自动换行 */
  word-break: break-all;   /* 长字符串自动断行 */
  overflow-wrap: break-word;
}

/* API 页面样式 */
.api-header {
  text-align: center;
}

.api-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  text-align: left;
  transition: all 0.25s ease;
  box-shadow: var(--shadow);
}

.api-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.api-path {
  font-family: monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono";
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-600);
  margin-bottom: 8px;
}

.api-desc {
  font-size: 14px;
  color: var(--text-weak);
}
/* =============================
   API 页面优化
   ============================= */
.api-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.api-header {
  text-align: center;
  margin-bottom: 40px;
}

.api-list {
  display: grid;
  gap: 20px;
}


/* API 路径突出显示 */
.api-path {
  font-family: monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono";
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-600);
  margin-bottom: 12px;
  display: inline-block;
  background: var(--brand-50);
  padding: 4px 10px;
  border-radius: 6px;
}

/* API 描述 */
.api-desc {
  font-size: 15px;
  color: var(--text-weak);
  line-height: 1.6;
}
/* 键值对一行展示 */
.kv {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 行间距 */
}

.kv .item {
  display: flex;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
}

.kv .k {
  font-weight: 600;
  color: var(--text-weak);
}

.kv .v {
  color: var(--text);
  word-break: break-all; /* 长 IP 不会撑爆 */
}
.logo span{
  color: var(--text);
}

.post-date{
  font-size: 14px;
}

.history-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}

.history-list .qtype {
  min-width: 120px;  /* 保证类型文字对齐 */
  font-weight: 600;
  color: var(--text-weak);
  flex-shrink: 0;
}

.history-list .qval {
  flex: 1;
  color: var(--text);
  word-break: break-all;
}

/* 默认按钮 */
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: none;
  padding: 8px 12px;
  transition: color 0.2s, background 0.2s;
}

/* hover 效果 */
.btn.ghost:hover {
  color: var(--link-hover);
  background: color-mix(in srgb, var(--bg-soft) 80%, transparent);
  border-radius: var(--radius);
}

/* active 高亮 */
.btn.ghost.active {
  font-weight: 700;
  color: var(--link);
  border-bottom: 2px solid var(--link);
  border-radius: 0;
}

/* 暗黑模式下的 active */
.force-dark .btn.ghost.active {
  color: var(--link-hover);
  border-bottom: 2px solid var(--link-hover);
}


/* ===================================================================
   10. 手动切换暗黑模式 (force-dark)
   =================================================================== */
.force-dark {
  --bg:#0b1020;
  --bg-soft:#0f172a;
  --card:#121a2f;
  --card-bg:#1e293b;
  --border:rgba(255,255,255,0.08);
  --text:#e5e7eb;
  --text-weak:#cbd5e1;
  --muted:#9aa7bd;
  --link:#8da2ff;
  --link-hover:#b6c3ff;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
.force-light {
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --card:#ffffff;
  --card-bg:#f9fafb;
  --border:rgba(0,0,0,0.08);
  --text:#0f172a;
  --text-weak:#475569;
  --muted:#64748b;
  --link:#4f46e5;
  --link-hover:#3730a3;
  --shadow:0 8px 30px rgba(2,6,23,.06);
}