:root{--main:#2563eb;--bg:#f8fafc;--card:#fff;--text:#1e293b;--gray:#64748b}
html[data-theme="dark"]{--bg:#0f172a;--card:#1e293b;--text:#f1f5f9;--gray:#94a3b8}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui}
body{background:var(--bg);color:var(--text);padding:20px}
.container{max-width:1400px;margin:0 auto}
.glass{background:var(--card);backdrop-filter:blur(12px);border:1px rgba(148,163,184,0.15) solid;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,0.05)}
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;margin-bottom:24px}
.logo{font-size:22px;font-weight:600;color:var(--main)}
.search-box input{width:400px;padding:11px 16px;border:none;border-radius:10px;background:rgba(148,163,184,0.1);color:var(--text);outline:none}
.header-btn button{background:transparent;border:1px rgba(148,163,184,0.2) solid;padding:8px 14px;border-radius:8px;color:var(--text);margin-left:10px;cursor:pointer}
.hot-list{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.hot-tag{padding:6px 14px;border-radius:20px;background:rgba(37,99,235,0.1);color:var(--main);font-size:14px;cursor:pointer}
.main-wrap{display:grid;gap:26px}
.cate-card{padding:20px}
.cate-title{margin-bottom:16px;font-size:18px}
.site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.site-item{padding:12px;border-radius:10px;text-align:center;cursor:pointer;transition:0.2s all}
.site-item:hover{transform:translateY(-4px);background:rgba(148,163,184,0.08)}
.site-icon{width:36px;height:36px;border-radius:8px;margin:0 auto 8px;object-fit:cover}
.site-icon-text{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--main);color:#fff;border-radius:8px;margin:0 auto 8px}
.modal-wrap{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);display:none;align-items:center;justify-content:center;z-index:99}
.modal{width:620px;max-height:80vh;overflow:auto;padding:22px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-close{font-size:24px;cursor:pointer}
.search-suggest{position:absolute;background:var(--card);border-radius:10px;padding:10px;width:400px;display:none}
.footer{text-align:center;margin-top:60px;color:var(--gray);padding:20px 0;font-size:14px}
.footer a{color:var(--main);margin-left:10px}
@media(max-width:768px){.header{flex-wrap:wrap;gap:12px}.search-box input{width:100%}.site-grid{grid-template-columns:repeat(2,1fr)}}