/* 全局重置 */
* {margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
body {background:#0a0a2a url('https://img-blog.csdnimg.cn/20240102153612.jpg') no-repeat center top/cover;color:#fff;min-height:100vh;transition:all .3s ease;overflow-x:hidden;}
body.dark {background:#000 url('https://img-blog.csdnimg.cn/20240102153612.jpg') no-repeat center top/cover;}
a {text-decoration:none;color:inherit;}
img {border:0;vertical-align:middle;}
.container {max-width:1200px;margin:0 auto;padding:0 16px;}

/* 左侧分类弹窗样式 */
.cate-modal {position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;display:none;}
.cate-modal-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(2px);}
.cate-modal-content {position:absolute;top:0;left:0;width:85%;max-width:350px;height:100%;background:#fff;color:#333;border-radius:0 12px 12px 0;box-shadow:2px 0 20px rgba(0,0,0,0.2);overflow-y:auto;animation:slideIn .3s ease-out;}
@keyframes slideIn {from {transform:translateX(-100%);} to {transform:translateX(0);}}
.cate-modal-header {padding:20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;}
.cate-modal-title {font-size:18px;font-weight:600;color:#165DFF;}
.cate-modal-close {border:none;background:none;font-size:24px;cursor:pointer;color:#999;transition:color .2s;}
.cate-modal-close:hover {color:#f53f3f;}
.cate-modal-body {padding:15px;}
.cate-group {margin-bottom:15px;border-radius:8px;background:#f8f9fa;overflow:hidden;}
.cate-parent {padding:12px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:#fff;border-bottom:1px solid #eee;}
.cate-icon {font-size:16px;margin-right:8px;}
.cate-name {font-size:15px;font-weight:500;flex:1;}
.cate-arrow {font-size:12px;color:#999;transition:transform .3s;}
.cate-children {padding:8px 15px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.cate-child {padding:8px 10px;border-radius:6px;background:#f0f0f0;display:flex;align-items:center;font-size:14px;transition:all .2s;}
.cate-child:hover {background:#165DFF;color:#fff;transform:translateY(-2px);}
.cate-sub-icon {font-size:12px;margin-right:6px;}
.cate-sub-name {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 顶部Header：新增左上角分类按钮 */
.header {padding:15px 0;border-bottom:1px solid rgba(255,255,255,0.1);position:relative;}
.header .container {display:flex;align-items:center;justify-content:space-between;}
.header-left {flex:0 0 auto;}
.cate-btn {width:40px;height:40px;border:none;border-radius:8px;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);color:#fff;font-size:18px;cursor:pointer;transition:all .2s;}
.cate-btn:hover {background:rgba(255,255,255,0.2);transform:scale(1.05);}
.header-middle {flex:1;text-align:center;}
.logo-box {display:flex;align-items:center;justify-content:center;gap:10px;}
.logo-icon {width:32px;height:32px;border-radius:50%;}
.logo-text {font-size:24px;font-weight:700;color:#40e0d0;margin:0;}
.header-right {flex:0 0 auto;}
@media (max-width:768px) {.logo-text {font-size:20px;}.cate-btn {width:36px;height:36px;}}

/* 搜索区：动态透明毛玻璃效果 */
.search-section {padding:30px 0;}
.search-form {display:flex;align-items:center;gap:0;width:100%;max-width:600px;margin:0 auto;}
.search-input-wrap {flex:1;height:48px;border-radius:24px 0 0 24px;position:relative;overflow:hidden;
    background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);
    transition:all .3s ease;
}
.search-input-wrap:focus-within {
    box-shadow:0 0 0 3px rgba(64,224,208,0.2);
    border-color:rgba(64,224,208,0.5);
}
.search-input {width:100%;height:100%;padding:0 20px;border:none;background:transparent;color:#fff;font-size:16px;outline:none;position:relative;z-index:2;}
.search-input::placeholder {color:#ccc;}
/* 动态背景装饰 */
.search-input-wrap::before {
    content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:linear-gradient(45deg, transparent, rgba(64,224,208,0.1), transparent);
    transform:rotate(0deg);
    animation:gradientMove 8s linear infinite;
    z-index:1;
}
@keyframes gradientMove {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}
.search-btn {width:48px;height:48px;border:none;border-radius:0 24px 24px 0;background:#40e0d0;color:#000;font-size:18px;cursor:pointer;transition:background .2s;}
.search-btn:hover {background:#30c0b0;}

/* 搜索引擎切换 */
.engine-list {display:flex;justify-content:center;gap:12px;margin-top:15px;flex-wrap:wrap;}
.engine-item {padding:6px 12px;border-radius:16px;background:rgba(255,255,255,0.1);font-size:14px;transition:all .2s;}
.engine-item.active {background:#40e0d0;color:#000;font-weight:600;}
.engine-item:hover:not(.active) {background:rgba(255,255,255,0.2);}

/* 公告模块 */
.notice-section {padding:10px 0;}
.notice-box {display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:8px;background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);max-width:600px;margin:0 auto;}
.notice-icon {font-size:16px;color:#ffd700;}
.notice-text {font-size:14px;flex:1;}

/* 自助广告位 */
.ad-self-section {padding:20px 0;}
.ad-self-box {display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-radius:8px;background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);max-width:600px;margin:0 auto;}
.ad-title {font-size:14px;color:#ff9900;}
.ad-content {display:flex;gap:10px;flex-wrap:wrap;}
.ad-item {padding:4px 10px;border-radius:4px;background:#ff66b3;color:#fff;font-size:12px;}
.ad-join {padding:6px 12px;border-radius:4px;background:#ff9900;color:#fff;font-size:14px;}

/* 网址列表 */
.main {padding-bottom:60px;}
.sites-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:16px;}
.site-item {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 0;border-radius:8px;background:rgba(255,255,255,0.05);transition:all .2s;}
.site-item:hover {background:rgba(255,255,255,0.1);transform:translateY(-3px);}
.site-icon {width:24px;height:24px;border-radius:4px;object-fit:cover;}
.site-name {font-size:13px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
.empty-tip {grid-column:1/-1;text-align:center;padding:40px 0;color:#ccc;font-size:14px;}

/* 底部 */
.footer {padding:20px 0;border-top:1px solid rgba(255,255,255,0.1);font-size:12px;color:#ccc;text-align:center;}
.footer a {color:#40e0d0;}

/* 暗黑模式按钮 */
.dark-btn {position:fixed;bottom:30px;right:30px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,0.1);cursor:pointer;transition:all .2s;}
.dark-btn::before {content:"🌙";font-size:18px;}
body.dark .dark-btn::before {content:"☀️";}
@media (max-width:768px) {.dark-btn {width:36px;height:36px;bottom:20px;right:20px;}}