*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f0f2f5;color:#333;min-height:100vh;display:flex;flex-direction:column}
a{text-decoration:none;color:inherit}

/* Header */
.header{background:#fff;border-bottom:1px solid #e8e8e8;padding:16px 0;position:sticky;top:0;z-index:100}
.header-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:22px;font-weight:700;color:#1a1a1a;white-space:nowrap}
.logo span{color:#4f46e5}
.theme-btn{background:none;border:1px solid #e0e0e0;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:16px;transition:all .3s}
.theme-btn:hover{background:#f0f0f0}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:24px 20px 60px;flex:1}
.section{margin-bottom:32px}
.section-title{font-size:18px;font-weight:600;color:#1a1a1a;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Card */
.card{background:#fff;border-radius:12px;padding:20px;display:flex;align-items:flex-start;gap:14px;transition:all .25s;border:1px solid transparent;cursor:pointer}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:#4f46e5}
.card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.card-info{flex:1;min-width:0}
.card-name{font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:4px}
.card-desc{font-size:13px;color:#888;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Colors */
.bg-blue{background:#eff6ff}.bg-green{background:#f0fdf4}.bg-purple{background:#faf5ff}
.bg-orange{background:#fff7ed}.bg-red{background:#fef2f2}.bg-teal{background:#f0fdfa}
.bg-indigo{background:#eef2ff}.bg-pink{background:#fdf2f8}.bg-yellow{background:#fefce8}
.bg-cyan{background:#ecfeff}.bg-gray{background:#f3f4f6}

/* Footer */
.footer{text-align:center;padding:24px 20px;color:#999;font-size:13px;border-top:1px solid #e8e8e8;background:#fff}
.footer a{color:#4f46e5}.footer a:hover{text-decoration:underline}

/* Dark Mode */
body.dark{background:#0f172a;color:#e2e8f0}
body.dark .header{background:#1e293b;border-color:#334155}
body.dark .logo{color:#f1f5f9}
body.dark .theme-btn{border-color:#475569;color:#f1f5f9}
body.dark .theme-btn:hover{background:#334155}
body.dark .section-title{color:#f1f5f9}
body.dark .card{background:#1e293b;border-color:#334155}
body.dark .card:hover{border-color:#6366f1;box-shadow:0 8px 24px rgba(0,0,0,.3)}
body.dark .card-name{color:#f1f5f9}
body.dark .card-desc{color:#94a3b8}
body.dark .footer{background:#1e293b;border-color:#334155;color:#64748b}
body.dark .bg-blue{background:#1e3a5f}body.dark .bg-green{background:#1a3a2a}
body.dark .bg-purple{background:#2d1b4e}body.dark .bg-orange{background:#3d2b1a}
body.dark .bg-red{background:#3d1a1a}body.dark .bg-teal{background:#1a3d3d}
body.dark .bg-indigo{background:#1e1e4a}body.dark .bg-pink{background:#3d1a2e}
body.dark .bg-yellow{background:#3d3d1a}body.dark .bg-cyan{background:#1a3d3d}
body.dark .bg-gray{background:#2d2d2d}

/* Responsive */
@media(max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}