/* godip.cn · IP 工具箱 —— 冷色工具风 */
:root{
  --bg:#f5f7fb; --card:#fff; --line:#e4e9f2; --line2:#eef2f8;
  --text:#0f172a; --muted:#64748b; --brand:#2563eb; --brand2:#06b6d4;
  --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444;
  --radius:16px; --shadow:0 8px 24px rgba(15,23,42,.05);
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.75 system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.tool-wrap{max-width:900px;margin:0 auto;padding:0 20px}

/* 顶部提示条 */
.gnotice{background:#10243f;color:#c7d6ee;font-size:13px;text-align:center;padding:7px 16px}
.gnotice b{color:#fff}
.gnotice a{color:#7fd7f0;text-decoration:none}

/* 头部 */
.hd{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:16px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;text-decoration:none;letter-spacing:-.2px}
.logo-mark{width:29px;height:29px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700}
.logo em{font-style:normal;font-weight:600;font-size:12.5px;color:var(--muted);padding-left:2px}
.nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:14px}
.nav a:hover,.nav a.on{color:var(--brand)}
.btn{display:inline-block;border:1px solid var(--line);border-radius:10px;padding:9px 16px;font-size:14px;text-decoration:none;background:#fff;color:var(--text);cursor:pointer;transition:.15s}
.btn:hover{border-color:#bfd4f7;color:var(--brand)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn-primary:hover{background:#1d4ed8;color:#fff}
.btn-lg{padding:12px 26px;font-size:15px}
.btn-sm{padding:6px 12px;font-size:13px}

/* Hero */
.hero{padding:50px 0 34px;background:linear-gradient(180deg,#eaf2ff,#f5f7fb)}
.hero h1{margin:14px 0 10px;font-size:33px;line-height:1.25;letter-spacing:-.6px}
.tag{display:inline-block;background:#e0edff;color:#1d4ed8;font-size:12px;padding:4px 11px;border-radius:999px}
.sub{color:var(--muted);max-width:640px;margin:0;font-size:16px}

/* 速测卡 */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.quick-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.ql{font-size:12px;color:var(--muted)}
.qip{display:block;font-family:var(--mono);font-size:25px;margin:4px 0;letter-spacing:-.5px;word-break:break-all}
.qmeta{font-size:13px;color:var(--muted)}
.dim{color:var(--muted)}

/* 区块 */
.sec{padding:42px 0}
.sec-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{margin:0 0 6px;font-size:22px;letter-spacing:-.3px}
.sec-sub{color:var(--muted);margin:0 0 22px;font-size:14px}

/* 工具网格 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tool{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;transition:.15s}
.tool:hover{border-color:#bfd4f7;box-shadow:0 10px 24px rgba(37,99,235,.1);transform:translateY(-2px)}
.tool .ic{font-size:22px;line-height:1}
.tool b{display:block;margin:9px 0 4px;font-size:15px}
.tool p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

/* 教程 */
.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gcard{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;transition:.15s}
.gcard:hover{border-color:#bfd4f7}
.gcard b{font-size:15px}
.gcard p{color:var(--muted);font-size:13px;margin:6px 0 0}

/* CTA */
.cta{text-align:center;background:linear-gradient(135deg,#1d4ed8,#0891b2);color:#fff;border-radius:20px;padding:38px 20px}
.cta h2{color:#fff;margin:0 0 8px;font-size:22px}
.cta p{opacity:.92;margin:0 0 18px}
.cta .btn{background:#fff;color:#1d4ed8;border-color:#fff;font-weight:700}

/* 工具页 */
.crumb{font-size:13px;color:var(--muted);padding:18px 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brand)}
.page-h1{font-size:26px;margin:8px 0 6px;letter-spacing:-.4px}
.lead{color:var(--muted);margin:0 0 22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card+.card{margin-top:16px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.big{font-family:var(--mono);font-size:30px;letter-spacing:-.5px;margin:2px 0 4px;word-break:break-all}
.chip{font-size:12px;padding:3px 10px;border-radius:999px;background:#eef2f8;color:var(--muted)}
.chip.ok{background:#e8f7ee;color:#15803d}
.chip.warn{background:#fef4e6;color:#b45309}
.chip.bad{background:#fdecec;color:#b91c1c}
table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
td{padding:9px 8px;border-top:1px solid var(--line2);vertical-align:top}
td:first-child{color:var(--muted);width:190px;white-space:nowrap}
.mono{font-family:var(--mono)}
.kv{font-family:var(--mono);font-size:13.5px;word-break:break-all}
input[type=text]{width:100%;max-width:420px;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:15px;font-family:var(--mono);outline:none}
input[type=text]:focus{border-color:#93b8f5;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.note{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin-top:16px}
.note h3{margin:0 0 8px;font-size:16px}
.note p{margin:0 0 6px;color:var(--muted);font-size:14px}
.note ul{margin:6px 0 0 18px;color:var(--muted);font-size:14px;padding:0}
.links{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.links a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;text-decoration:none;color:var(--muted)}
.links a:hover{border-color:#bfd4f7;color:var(--brand)}
pre{background:#0f172a;color:#dbe6f5;border-radius:12px;padding:14px 16px;overflow:auto;font-size:13.5px;line-height:1.6}
code{font-family:var(--mono);background:#eef2f8;padding:2px 6px;border-radius:6px;font-size:13px}
pre code{background:none;padding:0}
.err{color:var(--bad);font-size:14px}
.loading{color:var(--muted);font-size:14px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid #cbd5e1;border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.hero-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.hero-mini .m{background:#f8fafd;border:1px solid var(--line2);border-radius:12px;padding:12px 14px}
.hero-mini .m span{display:block;font-size:12px;color:var(--muted)}
.hero-mini .m strong{font-family:var(--mono);font-size:17px;font-weight:600}

/* 页脚 */
footer{padding:30px 0;color:var(--muted);font-size:13px;text-align:center;border-top:1px solid var(--line);background:#fff;margin-top:40px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--brand)}

/* 网络工具推荐 */
.rec-hd{gap:8px;margin-bottom:2px}
.rec-name{font-size:17px;font-weight:700;margin-right:2px}
.rec .chip{border:1px solid var(--line);background:#f8fafd}
.rec table{margin-top:6px}
.rec table td:first-child{width:96px}
.rec-note{font-size:13.5px;color:#8a5300;background:#fffaf0;border:1px solid #f6e3bd;border-radius:10px;padding:10px 13px;margin:14px 0 0;line-height:1.7}
.rec-note a{color:var(--brand);text-decoration:none}
.rec-note a:hover{text-decoration:underline}
.rec-note.alt{color:#155e75;background:#f0fbfe;border-color:#c8ecf6;margin-top:8px}

@media(max-width:880px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .guide,.hero-mini{grid-template-columns:1fr}
  .quick{grid-template-columns:1fr}
  .nav{display:none}
  .hero h1{font-size:26px}
  .big{font-size:24px}
  td:first-child{width:120px}
}