body {	font-family:Untitled Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;-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:linear-gradient(180deg, #1f2226, #082C36, #161618);background-color: #1f2226;color:#fff;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:15px}
.container{background:rgb(40 89 119 / 16%);backdrop-filter:blur(10px);border-radius:15px;padding:20px;max-width:700px;width:100%;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .3s ease}
.container:hover{transform:translateY(-5px)}
.header{text-align:center;margin-bottom:10px}
.logo{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:15px}
.logo img{width:30px;height:30px}
.logo h1{font-size:1.5rem;color:#00e1ff;text-shadow:0 0 10px rgb(0 225 255/50%)}
.site-h1{background:linear-gradient(90deg,#0ecff1,#0f8);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;font-size:2rem;margin-bottom:20px}
.nav-menu{display:flex;justify-content:center;gap:5px;margin-bottom:20px}
.nav-menu a{color:#f2ddcc;text-decoration:none;font-size:1rem;padding:5px 10px;border-radius:5px;transition:background .3s ease,color .3s ease}
.nav-menu a:hover{background:#0f8;color:#1e1e2f}
.search-bar{justify-content:center;width:80%;margin:0 auto 30px;display:flex;align-items:center;background-color:#ffffff0d;border-radius:30px;padding:10px 10px 10px 18px;box-shadow:0 4px 15px rgba(0,0,0,.2);position:relative}
.search-bar input[type=text]{flex-grow:1;background-color:transparent;border:none;outline:0;color:#c0caf5;font-size:1em;padding-right:15px}
.search-bar input[type=text]::placeholder{color:#9aa5ce;opacity:.8}
input:-internal-autofill-selected{background-color:transparent!important;color:#9aa5ce!important}
.search-action{background-color:rgba(0, 0, 0, 0.2);color:#f2ddcc;border:none;border-radius:20px;padding:10px 20px;font-size:.9em;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;transition:background-color .2s ease}
.search-action:hover{background-color:hsl(0 0% 99% /8%);}
.shortcut{font-size:1.1em;opacity:.8}

/*ip*/
.ip-address{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.4rem;margin-bottom:20px;padding:10px;background:rgb(255 255 255 / 3%);border-radius:10px}
.ip-address img{width:auto;height:20px; display: none;}

.ip-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;opacity:0;transform: translateY(10px);transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.ip-info-grid.show{opacity:1;transform: translateY(0);}
.ip-info-grid .info-card{background:rgba(255,255,255,.1);border-radius:8px;padding:13px 10px;text-align:left;display:flex;justify-content:space-between;align-items:center;transition:background .3s ease}
.ip-info-grid .info-card:hover{background:rgb(187 198 206 / 28%)}
.ip-info-grid .info-card h3{font-size:1.2rem;color:#0f8;margin-right:10px;white-space:nowrap}
.ip-info-grid .info-card p{font-size:1.2rem;color:#efefef;flex-grow:1;text-align:right}
.ip-info-grid .info-group{margin-bottom:15px}
.ip-info-grid .info-group h2{font-size:1.2rem;color:hsl(152deg 100% 50% / 75%);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:20px;opacity:0;transform: translateY(10px);transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.phone-info-grid.show{opacity:1;transform:translateY(0)}
.phone-info-grid .info-card{background:hsla(0,0%,100%,.15);border-radius:10px;padding:15px;text-align:center;transition:transform .3s ease}
.phone-info-grid .info-card:hover{transform:scale(1.05)}
.phone-info-grid .info-card h3{font-size:1.2rem;color:#0f8;margin-bottom:10px}
.phone-info-grid .info-card p{font-size:1.2rem;color:#ddd}
.container.phone{max-width: 600px;}
.container.phone{background:rgb(40 89 119 / 16%);backdrop-filter:blur(10px);border-radius:15px;padding:30px 30px 42px 30px;max-width:600px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .3s ease}
.container.phone:hover{transform:translateY(-5px)}

/*弹出层*/
.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,.5);backdrop-filter: blur(12px);}
.modal{background-color:#fff;color:#1e1e2f;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.2);text-align:center;max-width:90%;max-height:90%;overflow:auto}
.modal-title{font-size:1.2em;margin-bottom:10px}
.modal-content{margin-bottom:15px}



/*range-cidr*/
.converter-toggle{position:relative;z-index:10;display:flex;justify-content:center;background-color:hsl(0deg 0% 7.06% / 21%);border-radius:42px;padding:5px;width:86%;margin:30px auto;gap:16px}
.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:12px 15px;font-size:1em;font-weight:500;cursor:pointer;border:none;background-color:transparent;color:#d0d0d0;border-radius:42px;transition:all .3s ease;outline:0}
.converter-toggle .indicator{position:absolute;top:50%;left:0;transform:translateY(-50%);height:calc(100% - 8px);max-height:40px;background: linear-gradient(90deg, #3b6bff, #2e96ff 65%, #acb7ff);box-shadow:-1px 0 5px 1px rgba(192,198,203,.2);color:#fff;border-radius:42px;transition:left .3s ease,width .3s ease,height .3s ease,top .3s ease;z-index:1}

.converter-form{opacity: 0; display: none;transform: translateY(15px);    transition: opacity .4s ease, transform .4s ease;}
.converter-form.show{opacity: 1; display: block;transform: translateY(0);}

.converter-form h2{background:linear-gradient(90deg,#0ecff1,#0f8);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;font-size:1.5rem;margin-bottom:20px}
.input-group{margin-bottom:15px}
.input-group label{display:block;margin-bottom:8px;font-weight:500;color: #6a6a6a;text-align: center;}
.input-group input[type=text]{text-align: center;width:100%;padding:12px;border:1px solid hsl(186.79deg 100% 41.57% / 34%);border-radius:6px;font-size:1em;transition:border-color .3s ease,box-shadow .3s ease;outline:0;background:#143f4e;color:#efefef}
.input-group input[type=text]:focus{border-color:#00bcd496;box-shadow:0 0 0 .1rem rgba(52,152,219,.25)}
.submit-btn{margin-top: 50px; display:block;width:100%;padding:14px;background-color:#004558;color:#fff;border:none;border-radius:6px;font-size:1.1em;font-weight:600;cursor:pointer;transition:background-color .3s ease,transform .1s ease;outline:0;box-shadow:0 0 5px 1px hsl(0deg 0% 0% / 5%);}
.submit-btn:hover{background-color:rgba(0,105,100,.5)}
.submit-btn:active{transform:translateY(1px)}
.results-area{margin-top:30px;padding:20px;background-color:#fff;border:1px solid #bce8f1;border-radius:8px}
.results-area h3{margin-top:0;color:#31708f}
.results-area pre{color:#333;background-color:#f8f9fa;padding:15px;border-radius:4px;border:1px solid #dee2e6;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;font-size:.95em;max-height:300px;overflow-y:auto}
.copy-btn{display:block;margin:15px auto;padding:10px 18px;background-color:#10ac9e;color:#fff;border:none;border-radius:6px;font-size:.9em;font-weight:500;cursor:pointer;transition:background-color .3s ease}
.copy-btn:hover{background-color:#1f9cff}
.error-message{margin-top:50px;padding:15px;background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb;border-radius:6px;text-align:center}
footer{text-align:center;margin-top:40px;padding-top:20px;font-size:.9em;color:#7f8c8d}


@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;filter:blur(20px)}
.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;filter:blur(0);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%{filter:blur(0)}
11%{filter:blur(7px)}
100%{filter:blur(0)}
}
@keyframes color-pulse-on-expand{11%{background-color:#193b4b}
}