/* 磁力搜索导航 - 优化压缩版CSS */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.6;color:#334155;background:#f8fafc;min-height:100vh;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(251,191,36,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(251,146,60,.12) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(250,204,21,.1) 0%,transparent 50%),linear-gradient(135deg,#fef3c7 0%,#fde68a 30%,#fcd34d 60%,#fbbf24 100%);z-index:-1;animation:gradientShift 20s ease-in-out infinite;pointer-events:none}
@keyframes gradientShift{0%,100%{opacity:1}33%{opacity:.9}66%{opacity:.95}}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

.header{background:rgba(255,255,255,.9);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(251,191,36,.2);box-shadow:0 4px 30px rgba(251,191,36,.1);padding:2rem 0;position:sticky;top:0;z-index:100}
.header-content{text-align:center}
.logo{font-size:2.5rem;font-weight:700;color:#92400e;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
.logo-icon{font-size:2.5rem;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.subtitle{font-size:1.1rem;color:#78350f;font-weight:300}

.breadcrumb{background:rgba(255,255,255,.7);backdrop-filter:blur(20px);padding:1rem 0;border-bottom:1px solid rgba(251,191,36,.2)}
.breadcrumb-list{display:flex;align-items:center;list-style:none;font-size:.9rem}
.breadcrumb-list li{color:#78350f}
.breadcrumb-list li:not(:last-child)::after{content:'›';margin:0 .5rem;color:#92400e}
.breadcrumb-list a{color:#92400e;text-decoration:none;transition:color .3s ease}
.breadcrumb-list a:hover{color:#78350f}
.breadcrumb-list .current{color:#334155}

.main{padding:2rem 0}

.search-section{margin-bottom:4rem}
.search-container{text-align:center;max-width:600px;margin:0 auto}
.search-title{font-size:2rem;color:#78350f;margin-bottom:2rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:.5rem}
.search-title .logo-icon{font-size:1.8rem;animation:pulse 2s infinite}
.search-box{display:flex;gap:1rem;margin-bottom:1.5rem;background:rgba(255,255,255,.8);border-radius:50px;padding:.5rem;backdrop-filter:blur(20px);border:1px solid rgba(251,191,36,.3);box-shadow:0 8px 32px rgba(251,191,36,.15),inset 0 1px 0 rgba(255,255,255,.9)}
#searchInput{flex:1;padding:1rem 1.5rem;border:none;background:transparent;color:#1f2937;font-size:1rem;font-weight:500;outline:none;autocomplete:off;-webkit-autocomplete:off}
#searchInput::-webkit-calendar-picker-indicator{display:none}
#searchInput::-webkit-outer-spin-button,#searchInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#searchInput:-webkit-autofill,#searchInput:-webkit-autofill:hover,#searchInput:-webkit-autofill:focus,#searchInput:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px rgba(255,255,255,.8) inset!important;-webkit-text-fill-color:#1f2937!important;transition:background-color 5000s ease-in-out 0s}
#searchInput::placeholder{color:#6b7280}
#searchInput:focus{color:#1f2937;box-shadow:none}
#searchBtn{padding:1rem 2rem;background:linear-gradient(135deg,#f59e0b 0%,#f97316 50%,#ea580c 100%);color:#fff;border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;white-space:nowrap;box-shadow:0 4px 20px rgba(245,158,11,.4),0 2px 10px rgba(249,115,22,.3);will-change:transform}
#searchBtn:hover{box-shadow:0 6px 25px rgba(245,158,11,.5),0 3px 15px rgba(249,115,22,.4);transform:translateY(-2px);background:linear-gradient(135deg,#fbbf24 0%,#fb923c 50%,#f97316 100%)}
#searchBtn:active{transform:translateY(0)}

.hot-searches{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem}
.hot-label{color:#92400e;font-size:.9rem}
.hot-tag{padding:.3rem .8rem;background:rgba(251,191,36,.1);color:#92400e;border-radius:20px;text-decoration:none;font-size:.85rem;transition:all .3s ease;border:1px solid rgba(251,191,36,.2)}
.hot-tag:hover{background:rgba(251,191,36,.2);border-color:rgba(251,191,36,.4);color:#78350f;box-shadow:0 2px 10px rgba(251,191,36,.3);transform:translateY(-1px)}

.nav-section{margin-bottom:4rem}
.section-title{font-size:1.8rem;text-align:center;margin-bottom:3rem;font-weight:600;position:relative;background:linear-gradient(135deg,#a78bfa 0%,#c084fc 50%,#e879f9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 20px rgba(167,139,250,.3)}
.section-title::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:60px;height:3px;background:linear-gradient(135deg,#a78bfa 0%,#c084fc 50%,#e879f9 100%);box-shadow:0 2px 10px rgba(167,139,250,.4);border-radius:2px}
.nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:3rem}
.nav-item{background:rgba(255,255,255,.9);border:1px solid rgba(251,191,36,.2);border-radius:15px;padding:2rem 1.5rem;text-decoration:none;color:#78350f;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;backdrop-filter:blur(20px);text-align:center;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(251,191,36,.1),inset 0 1px 0 rgba(255,255,255,.9);animation:modernFadeInUp .8s cubic-bezier(.4,0,.2,1);will-change:transform}
.nav-item::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(251,191,36,.1) 0%,rgba(245,158,11,.1) 50%,rgba(217,119,6,.1) 100%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.nav-item:hover{border-color:rgba(251,191,36,.4);box-shadow:0 8px 40px rgba(251,191,36,.2),0 4px 20px rgba(245,158,11,.15),inset 0 1px 0 rgba(255,255,255,1);transform:translateY(-8px) scale(1.02)}
.nav-item:hover::before{opacity:1}
.nav-icon{font-size:3rem;margin-bottom:1rem;display:block;transition:transform .4s cubic-bezier(.4,0,.2,1),filter .4s ease;will-change:transform}
.nav-item:hover .nav-icon{transform:scale(1.15) rotate(5deg);filter:drop-shadow(0 4px 20px rgba(99,102,241,.4))}
.nav-title{font-size:1.2rem;font-weight:600;margin-bottom:.5rem;color:#92400e}
.nav-desc{font-size:.9rem;color:#78350f;line-height:1.4}

.category-section{margin-bottom:4rem}
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}
.category-item{background:rgba(255,255,255,.8);border:1px solid rgba(251,191,36,.2);border-radius:12px;padding:1.5rem 1rem;text-decoration:none;color:#78350f;transition:all .3s ease;text-align:center;backdrop-filter:blur(20px);box-shadow:0 4px 15px rgba(251,191,36,.1),inset 0 1px 0 rgba(255,255,255,.9);animation:modernFadeInUp .8s cubic-bezier(.4,0,.2,1)}
.category-item:hover{background:rgba(255,255,255,.9);border-color:rgba(251,191,36,.4);box-shadow:0 6px 25px rgba(251,191,36,.2),inset 0 1px 0 rgba(255,255,255,1);transform:translateY(-4px)}
.category-icon{font-size:2rem;margin-bottom:.5rem;display:block}
.category-item span{font-size:.9rem;font-weight:500}

.help-section{margin-bottom:4rem}
.help-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:900px;margin:0 auto}
.help-item{background:rgba(255,255,255,.8);border:1px solid rgba(251,191,36,.2);border-radius:12px;padding:2rem;backdrop-filter:blur(20px);box-shadow:0 4px 20px rgba(251,191,36,.1),inset 0 1px 0 rgba(255,255,255,.9);animation:modernFadeInUp .8s cubic-bezier(.4,0,.2,1)}
.help-item h3{font-size:1.2rem;color:#92400e;margin-bottom:1rem;font-weight:600}
.help-item p{color:#78350f;line-height:1.6;font-size:.95rem}

.footer{background:rgba(255,255,255,.9);backdrop-filter:blur(20px);border-top:1px solid rgba(251,191,36,.2);box-shadow:0 -4px 30px rgba(251,191,36,.1);padding:2rem 0;margin-top:auto}
.footer-content{text-align:center}
.footer-content p{color:#78350f;font-size:.9rem;margin-bottom:.5rem}
.disclaimer{font-size:.8rem;color:#92400e}

@keyframes modernFadeInUp{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,.5)}
::selection{background:rgba(99,102,241,.3);color:#fff}
button:focus{outline:2px solid rgba(99,102,241,.5);outline-offset:2px;box-shadow:0 0 0 4px rgba(99,102,241,.1)}

@media (max-width:768px){
.container{padding:0 15px}
.logo{font-size:2rem}
.logo-icon{font-size:2rem}
.search-title{font-size:1.5rem}
.search-box{flex-direction:column;gap:.5rem;border-radius:15px}
#searchInput{padding:1rem}
#searchBtn{padding:1rem;border-radius:10px}
.hot-searches{justify-content:flex-start}
.nav-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.nav-item{padding:1.5rem 1rem}
.nav-icon{font-size:2.5rem}
.category-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
.help-content{grid-template-columns:1fr;gap:1rem}
.help-item{padding:1.5rem}
}

@media (max-width:480px){
.header{padding:1.5rem 0}
.main{padding:2rem 0}
.nav-grid{grid-template-columns:repeat(2,1fr)}
.category-grid{grid-template-columns:repeat(2,1fr)}
.section-title{font-size:1.5rem}
}