/* ==============================================================================
   qqzeng-ip · 小工具页共享基础层（ip-cidr.html / ip-int.html）
   ------------------------------------------------------------------------------
   v20261028 对齐 ip/index.html 的 QZ2 设计语言：
   曜石黑 #070b14 · 薄荷 #5fe8d8 · 天青 #6cc8ff · 香槟金 #c9a961
   纯色主按钮（实心薄荷+深墨字，弃荧光渐变）、渐变描边玻璃卡、发丝线。
   字体与旗舰页共用同一批 fontsource@5 URL，跨页命中浏览器缓存。
   ============================================================================== */

:root {
    --qz-bg: #070b14;
    --qz-panel: #0a0e17;
    --qz-line: rgba(255, 255, 255, 0.08);
    --qz-line-soft: rgba(255, 255, 255, 0.05);
    --qz-txt: #f1f5f9;
    --qz-mut: #94a3b8;
    --qz-dim: #8494aa;
    --qz-cyan: #5fe8d8;
    --qz-cyan-deep: #04211c;
    --qz-blue: #6cc8ff;
    --qz-sapphire: #7aa8ff;
    --qz-gold: #c9a961;
    --qz-gold-light: #e5c07b;
    --qz-font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    --qz-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {	font-family: var(--qz-font-display); -webkit-overflow-scrolling: touch; }
html { box-sizing: border-box; }
*,*::before,*::after { padding: 0; margin: 0; box-sizing: inherit; }
.no-underline, [data-no-format] { text-decoration: none !important; color: inherit !important; pointer-events: none !important; }

body {
    background: radial-gradient(1100px 620px at 50% -160px, rgba(95, 232, 216, 0.10), transparent 65%),
                radial-gradient(900px 520px at 88% 12%, rgba(122, 168, 255, 0.09), transparent 60%),
                radial-gradient(760px 480px at 8% 55%, rgba(201, 169, 97, 0.05), transparent 60%),
                #070b14;
    background-color: #070b14;
    color: #f1f5f9;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 16px;
}

/* 卡片外壳：与 .qz2-card 同源的渐变描边 + 内发光，入场一次完成，不悬停升降 */
.container {
    border-radius: 24px;
    border: 1px solid transparent;
    padding: 32px 36px;
    max-width: 720px;
    width: 100%;
    background: linear-gradient(165deg, #0e141d, #080c12) padding-box,
                linear-gradient(150deg, rgba(95, 232, 216, 0.32), rgba(255, 255, 255, 0.06) 38%, rgba(108, 200, 255, 0.18)) border-box;
    box-shadow: 0 40px 80px -40px #000, inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: qz-rise 0.7s 0.08s var(--ease) both;
}
@keyframes qz-rise {
    from { opacity: 0; transform: translateY(18px); }
}
@media (hover: hover) and (pointer: fine) {
    .container:hover { border-color: rgba(95, 232, 216, 0.14); }
}

.header { text-align: center; margin-bottom: 14px; }
.logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.logo img { width: 36px; height: 36px; filter: drop-shadow(0 0 10px rgba(95, 232, 216, 0.35)); }
.logo h1 { font-size: 1.6rem; color: #5fe8d8; text-shadow: 0 0 16px rgba(95, 232, 216, 0.4); letter-spacing: -0.02em; }
.site-h1 { background: linear-gradient(135deg, #ffffff 12%, #5fe8d8 55%, #6cc8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 22px; }

.nav-menu { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.nav-menu a { color: #94a3b8; text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 6px 14px; border-radius: 999px; transition: color .2s, border-color .2s, background .2s, transform .15s var(--ease); border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); }
.nav-menu a:hover { background: rgba(95, 232, 216, 0.08); color: #5fe8d8; border-color: rgba(95, 232, 216, 0.3); transform: translateY(-1px); }
.nav-menu a:active { transform: scale(0.96); }

a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid rgba(95, 232, 216, 0.55); outline-offset: 2px; }

.search-bar { justify-content: center; width: 85%; margin: 0 auto 30px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 8px 10px 8px 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); position: relative; transition: border-color 0.2s, box-shadow 0.2s; }
.search-bar:focus-within { border-color: rgba(95, 232, 216, 0.5); box-shadow: 0 0 0 3px rgba(95, 232, 216, 0.16); }
.search-bar input[type=text] { flex-grow: 1; background-color: transparent; border: none; outline: 0; color: #f1f5f9; font-size: 1em; padding-right: 15px; font-family: var(--qz-font-mono); }
.search-bar input[type=text]::placeholder { color: #64748b; opacity: 1; }
input:-internal-autofill-selected { background-color: transparent !important; color: #f1f5f9 !important; }
/* 主操作：QZ2 实心薄荷按钮（同 .q-btn），深墨字 + 辉光悬停 */
.search-action { background: #5fe8d8; color: #04211c; font-weight: 700; border: 1px solid rgba(95, 232, 216, 0.5); border-radius: 10px; padding: 10px 22px; font-size: 0.92em; letter-spacing: 0.06em; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: filter 0.2s, box-shadow 0.2s, transform 0.15s var(--ease); }
.search-action:hover { filter: brightness(1.09); transform: translateY(-1px); box-shadow: 0 0 16px rgba(95, 232, 216, 0.35); }
.search-action:active { transform: scale(0.96); }
.shortcut { font-size: 1.1em; opacity: 0.8; }

/*ip*/
.ip-address { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.4rem; margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.03); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--qz-font-mono); }
.ip-address img { width: auto; height: 20px; display: none; }

.ip-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.ip-info-grid.show { opacity: 1; transform: translateY(0); }
.ip-info-grid .info-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 14px 14px; text-align: left; display: flex; justify-content: space-between; align-items: center; transition: all 0.25s var(--ease); }
.ip-info-grid .info-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(95, 232, 216, 0.3); transform: translateY(-2px); }
.ip-info-grid .info-card h3 { font-size: 1.05rem; color: #5fe8d8; margin-right: 10px; white-space: nowrap; font-weight: 700; }
.ip-info-grid .info-card p { font-size: 1.1rem; color: #f1f5f9; flex-grow: 1; text-align: right; font-weight: 500; }
.ip-info-grid .info-group { margin-bottom: 15px; }
.ip-info-grid .info-group h2 { font-size: 1.1rem; color: #5fe8d8; margin-bottom: 10px; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
.ip-info-grid #geoinfo { order: 1; }
.ip-info-grid #geobase { order: 2; }
.ip-info-grid #geolatlng { order: 3; }
.ip-info-grid #network { order: 4; }

/*phone*/
.phone-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.phone-info-grid.show { opacity: 1; transform: translateY(0); }
.phone-info-grid .info-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 16px; text-align: center; transition: transform 0.25s var(--ease), border-color 0.25s; }
.phone-info-grid .info-card:hover { transform: translateY(-3px); border-color: rgba(95, 232, 216, 0.35); }
.phone-info-grid .info-card h3 { font-size: 1.1rem; color: #5fe8d8; margin-bottom: 8px; font-weight: 700; }
.phone-info-grid .info-card p { font-size: 1.15rem; color: #f1f5f9; }
.container.phone { max-width: 620px; }
.container.phone { background: linear-gradient(165deg, #0e141d, #080c12); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 32px 36px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }

/*弹出层*/
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.7);  }
.modal { background-color: #0a0e17; color: #f1f5f9; border: 1px solid rgba(255, 255, 255, 0.12); padding: 24px; border-radius: 16px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8); text-align: center; max-width: 90%; max-height: 90%; overflow: auto; }
.modal-title { font-size: 1.3em; font-weight: 700; margin-bottom: 12px; color: #5fe8d8; }
.modal-content { margin-bottom: 18px; }

/*range-cidr*/
.converter-toggle { position: relative; z-index: 10; display: flex; justify-content: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 42px; padding: 4px; width: 88%; margin: 28px auto; gap: 8px; }
.converter-toggle .item { display: flex; flex: 1; text-align: center; position: relative; z-index: 10; }
.converter-toggle button { position: relative; z-index: 12; flex: 1; padding: 10px 16px; font-size: 0.95em; font-weight: 600; cursor: pointer; border: none; background-color: transparent; color: #94a3b8; border-radius: 42px; transition: all 0.25s var(--ease); outline: 0; }
.converter-toggle button:hover { color: #f1f5f9; }
.converter-toggle button:active { transform: scale(0.96); }
/* 滑块指示器：实心薄荷 + 深墨字（对齐 .q-btn，弃荧光渐变） */
.converter-toggle .indicator { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: calc(100% - 8px); max-height: 40px; background: #5fe8d8; box-shadow: 0 0 16px rgba(95, 232, 216, 0.3); color: #04211c; border-radius: 42px; transition: left 0.3s var(--ease), width 0.3s var(--ease); z-index: 1; }

.converter-form { max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), max-height 0.45s var(--ease); }
.converter-form.show { max-height: 500px; opacity: 1; visibility: visible; transform: translateY(0); }
/* 表单标题：香槟金权威渐变（各页内联覆盖保持一致） */
.converter-form h2 { background: linear-gradient(135deg, #ffffff 15%, #c9a961 70%, #e5c07b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; font-size: 1.55rem; font-weight: 700; margin-bottom: 20px; }
.input-group { margin-bottom: 16px; }
.input-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #94a3b8; text-align: center; font-size: 0.92rem; }
.input-group input[type=text] { text-align: center; width: 100%; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; outline: 0; background: rgba(255, 255, 255, 0.04); color: #f1f5f9; font-family: var(--qz-font-mono); }
.input-group input[type=text]:focus { border-color: rgba(95, 232, 216, 0.6); box-shadow: 0 0 0 3px rgba(95, 232, 216, 0.16); }
.submit-btn { margin-top: 36px; display: block; width: 100%; padding: 14px; background: #5fe8d8; color: #04211c; border: 1px solid rgba(95, 232, 216, 0.5); border-radius: 10px; font-size: 1rem; font-weight: 700; letter-spacing: 0.12em; text-indent: 0.12em; cursor: pointer; transition: filter 0.2s, box-shadow 0.2s, transform 0.15s var(--ease); outline: 0; }
.submit-btn:hover { filter: brightness(1.09); transform: translateY(-2px); box-shadow: 0 0 20px rgba(95, 232, 216, 0.35); }
.submit-btn:active { transform: scale(0.97); }

.results-area { opacity: 0; visibility: hidden; overflow: hidden; max-height: 0; background: rgba(13, 18, 30, 0.88); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; transform: translateY(5px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), max-height 0.5s var(--ease); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.results-area.show { max-height: 600px; opacity: 1; visibility: visible; transform: translateY(0); margin-top: 30px; padding: 22px; }
.results-area h3 { margin-top: 0; color: #c9a961; font-weight: 700; letter-spacing: 1.5px; }
.results-area pre { color: #e2e8f0; background: rgba(5, 7, 15, 0.8); padding: 16px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); white-space: pre-wrap; word-wrap: break-word; font-family: var(--qz-font-mono); font-size: 0.95em; max-height: 300px; overflow-y: auto; }
.copy-btn { display: block; margin: 16px auto 0; padding: 10px 22px; background: rgba(95, 232, 216, 0.12); color: #5fe8d8; border: 1px solid rgba(95, 232, 216, 0.35); border-radius: 8px; font-size: 0.9em; font-weight: 600; cursor: pointer; transition: all 0.2s var(--ease); }
.copy-btn:hover { background: rgba(95, 232, 216, 0.22); color: #fff; transform: translateY(-1px); }
.copy-btn:active { transform: scale(0.95); }

.error-message { opacity: 0; visibility: hidden; max-height: 0; background-color: rgba(255, 123, 123, 0.08); color: #ff9a9a; border: 1px solid rgba(255, 123, 123, 0.35); border-radius: 10px; text-align: center; transform: translateY(5px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), max-height 0.4s var(--ease); }
.error-message.show { max-height: 300px; opacity: 1; visibility: visible; transform: translateY(0); margin-top: 36px; padding: 15px; }

footer { text-align: center; margin-top: 40px; padding-top: 20px; font-size: 0.9em; color: #64748b; }


@media (max-width:768px){
.logo h1{font-size:1.3rem}
.nav-menu{flex-wrap:wrap;gap:5px}
.nav-menu a{font-size:.9rem;padding:5px 8px}
.container{padding:20px;margin:0}
.converter-toggle{ width: 100%;}
.converter-toggle button{font-size:.9em;padding:10px}


}
@media (max-width:767px){
    .ip-info-grid #geoinfo {    order: 3;  }
.ip-info-grid #geobase {    order: 1;  }
.ip-info-grid #geolatlng {    order: 4;  }
.ip-info-grid #network {    order: 2;  }
}

@media (max-width:600px){
.logo h1{font-size:1.3rem}
.nav-menu{flex-wrap:wrap;gap:5px}
.nav-menu a{font-size:.95rem;padding:5px 8px}
.search-bar button,.search-bar input{font-size:1.1rem;padding:8px 15px;width:80%;display:inline}
.search-bar{flex-direction:column;padding:15px;width:100%}
.search-bar input[type=text]{width:100%;margin-bottom:10px;padding-right:0;text-align:center}
.search-action{width:auto;padding:10px 25px}
.header h1{font-size:1.5rem}
.ip-address{font-size:1.4rem;background:#ffffff0d}
.ip-info-grid {grid-template-columns:1fr}
.ip-info-grid .info-card h3,.ip-info-grid .info-card p{font-size:1.2rem}

.phone-info-grid .info-card h3{font-size:1.2rem}
.phone-info-grid .info-card p{font-size:1.2rem}
.phone-info-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.container.phone{padding: 30px 15px 42px 15px;}
}



@media (max-width:480px){
.input-group input[type=text],.submit-btn{font-size:.95em}

.converter-toggle button:last-child{margin-bottom:0}
}



.search-action,.search-bar input[type=text]{z-index:1}
.search-bar{box-shadow:0 2px 8px 1px rgb(0 0 0 / 5%)}
.rainbow-layer{position:absolute;contain:paint;border-radius:inherit;inset:0}
.rainbow-layer::before{content:"";position:absolute;opacity:0;background:conic-gradient(rgba(52,168,82,0) 0deg,#34a852 38.9738deg,#ffd314 62.3678deg,#ff4641 87.0062deg,#3186ff 107.428deg,rgba(49,134,255,.5) 204.48deg,rgba(49,134,255,0) 308.88deg,rgba(52,168,82,0) 360deg) border-box;left:50%;top:50%;translate:-50% -50%;width:900px;height:900px;scale:1 .4;pointer-events:none;transition:opacity .3s;}
.rainbow-layer::after{animation:color-pulse-on-expand .6s cubic-bezier(.4,0,.2,1)}
.rainbow-layer::after{border-radius:inherit;content:"";position:absolute;inset:0;background:#193b4b;z-index:-1}
.plate-layer{position:absolute;inset:0;border-radius:inherit;border:0 solid transparent;display:flex;align-items:center;padding:0 16px;box-sizing:border-box;contain:paint}
.plate-layer::before{content:"";position:absolute;inset:0;border-radius:inherit;contain:paint;background:#193b4b;transition:filter .3s}
.search-bar.is-focused .rainbow-layer::before{animation:gradient-spin-expand .9s cubic-bezier(.2,0,0,1)}
.search-bar.is-focused .plate-layer{animation:gradient-border-width .9s cubic-bezier(.4,0,.2,1)}
.search-bar.is-focused .plate-layer::before{animation:plate-background-blur-on-expand .9s cubic-bezier(.4,0,.2,1),color-pulse-on-expand .6s cubic-bezier(.4,0,.2,1)}
@keyframes gradient-spin-expand{0%{opacity:0;transform:rotate(90deg)}
11%{opacity:1}
100%{opacity:0;transform:rotate(250deg)}
}
@keyframes gradient-border-width{0%{border-width:0}
11%{border-width:2px}
100%{border-width:0}
}
@keyframes plate-background-blur-on-expand{0%{}
11%{}
100%{}
}
@keyframes color-pulse-on-expand{11%{background-color:#193b4b}
}

/* ── 矿物钛金细滑块与恒宽防抖 ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #05070f; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #c9a961, #8b6d36); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #f3e5ab; }
.tabular-nums, input, .result-text, [data-tabular-nums="true"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }