:root{--bg:#eef2ff;--panel:#f8fafc;--text:#0f172a;--muted:#475569;--primary:#4f46e5;--border:#e2e8f0;--card:#ffffff}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(135deg,#6366f1 0%,#60a5fa 40%,#eef2ff 40%,#eef2ff 100%);background-attachment:fixed;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"PingFang SC","Microsoft YaHei",sans-serif}
.nav-header{max-width:1100px;margin:40px auto 16px;background:var(--panel);border:1px solid var(--border);padding:18px;border-radius:18px;box-shadow:0 10px 30px rgba(2,6,23,0.08)}
.title{display:flex;align-items:center;gap:12px}
.title h1{margin:0;font-size:28px;font-weight:700}
.icon{font-size:28px}
.search{margin-top:12px;width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:999px;font-size:15px;background:#fff}
.container{max-width:1100px;margin:0 auto 40px;padding:0 12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{display:flex;align-items:center;justify-content:flex-start;padding:16px 18px;background:var(--card);border:1px solid var(--border);border-radius:16px;text-decoration:none;color:#0f172a;font-weight:600;box-shadow:0 6px 20px rgba(2,6,23,0.06)}
.card:hover{border-color:#cbd5e1;transform:translateY(-1px);transition:all .15s ease}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}