*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:13px/1.5 "Microsoft YaHei",Arial,sans-serif;color:#3f4654;background:#f8f9fb}a{text-decoration:none;color:inherit}.hero{height:294px;color:#fff;background:linear-gradient(90deg,rgba(14,18,32,.14),rgba(0,0,0,.18)),url("hero.jpg") center 45%/cover no-repeat}.topbar{height:44px;display:flex;justify-content:space-between;align-items:flex-start;padding:10px 18px;color:#fff;font-size:11px}.topbar a{margin-right:15px;opacity:.87}.topbar a:hover{opacity:1}.top-right a{margin-right:10px}.hero-center{width:min(560px,92%);margin:48px auto 0}.brand{display:flex;align-items:center;justify-content:center;gap:9px;height:39px;margin-bottom:7px}.avatar{width:31px;height:31px;border-radius:50%;background:#6277d4;display:grid;place-items:center;font-size:18px}.brand-name{font-size:17px;letter-spacing:1px}.brand small{font-size:9px;color:#d7dae7}.engine-tabs{display:flex;gap:15px;align-items:center;height:22px;font-size:11px;overflow:auto;white-space:nowrap;scrollbar-width:none}.engine-tabs button{color:#eee;background:none;border:0;padding:3px 0;cursor:pointer;font-size:11px}.engine-tabs button.selected{color:white;font-weight:700;border-bottom:2px solid white}.search-bar{height:38px;display:flex;width:100%;box-shadow:0 2px 12px #0001;border-radius:4px;overflow:hidden}.search-bar input{flex:1;border:0;min-width:0;padding:0 14px;outline:0;color:#565d6e}.search-bar button{width:55px;border:0;background:#536ad7;color:white;font-size:25px;cursor:pointer}.quick{display:flex;gap:15px;margin-top:6px;overflow:hidden;white-space:nowrap;font-size:10px}.quick a{color:#e5e7f0}.quick a:first-child:before{content:"1";background:#db4a44;color:white;margin-right:5px;padding:0 4px}.content{background:white;width:min(900px,94%);margin:10px auto 28px;padding:8px 12px 28px;border-radius:4px;box-shadow:0 1px 12px #12192d06}.titlebar{padding:10px 5px 12px;border-bottom:1px solid #eee;font-size:14px}.titlebar span{float:right;color:#afb2bc;font-size:10px;margin-top:4px}.group{padding:13px 0 7px;border-bottom:1px solid #f0f1f4}.group-heading{display:flex;align-items:center;justify-content:space-between;padding:0 5px 12px;font-size:12px}.group-heading h2{font-size:12px;font-weight:500;margin:0}.group-heading a{font-size:10px;color:#868b9c}.site-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px 15px}.site-card{min-width:0;height:50px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #fafbfc;border-radius:5px;padding:7px;transition:.18s;box-shadow:0 1px 6px rgba(39,51,78,.025)}.site-card:hover{transform:translateY(-2px);border-color:#e2e8fe;box-shadow:0 5px 15px #17275d18}.site-icon{width:28px;height:28px;flex:none;object-fit:cover;border-radius:50%;background:#f2f5fd}.icon-fallback{width:28px;height:28px;flex:none;border-radius:50%;color:white;display:none;place-items:center;font-size:12px;font-weight:600}.site-text{min-width:0;flex:1}.site-name{font-size:11px;font-weight:600;color:#454955;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.site-desc{font-size:9px;margin-top:2px;color:#a2a7b2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-arrow{color:#e1e3e9;font-size:12px}footer{text-align:center;color:#a2a6b0;padding:10px 12px 30px;font-size:11px}#top-button{position:fixed;bottom:20px;right:23px;background:#fff;border:1px solid #eaedf3;border-radius:7px;padding:9px 14px;cursor:pointer;color:#586aca;box-shadow:0 3px 15px #0001}@media(min-width:1400px){.content{width:900px}}@media(max-width:800px){.site-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.content{width:96%}.hero-center{margin-top:42px}}@media(max-width:600px){.hero{height:260px}.topbar{padding:10px}.top-left a:nth-child(n+3),.top-right{display:none}.hero-center{margin-top:38px}.content{margin-top:8px;padding:6px 9px}.site-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.site-card{height:57px;padding:5px}.site-name{font-size:12px}.site-desc{font-size:10px}.site-icon,.icon-fallback{width:30px;height:30px}.engine-tabs{gap:12px}.quick{gap:8px}}
/* 夜猫子导航图片 Logo：适应深色背景，保持比例 */
.brand{height:74px;margin-bottom:3px;align-items:center;}
.brand-logo{display:block;width:240px;height:80px;max-width:85vw;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.12));}
.hero-center{margin-top:26px;}
@media(max-width:600px){.brand{height:65px}.brand-logo{width:205px;height:68px}.hero-center{margin-top:20px}}