* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f0f0f; color: #e5e5e5; min-height: 100vh; }
header { background: #1a1a1a; border-bottom: 1px solid #2a2a2a; padding: 24px 32px; display: flex; align-items: center; gap: 16px; }
header h1 { font-size: 20px; font-weight: 600; color: #fff; }
header p { font-size: 14px; color: #888; margin-left: 8px; }
main { max-width: 1100px; margin: 0 auto; padding: 40px 32px; }
.category-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.category-btn { background: #1a1a1a; border: 1px solid #2a2a2a; color: #aaa; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.category-btn:hover, .category-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.category-section { margin-bottom: 48px; }
.category-section h2 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.category-section .cat-desc { font-size: 13px; color: #666; margin-bottom: 16px; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.skill-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; padding: 20px; }
.skill-card h3 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.skill-card p { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 12px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { background: #262626; color: #666; font-size: 11px; padding: 3px 8px; border-radius: 4px; }
.tier-badge { display: inline-block; background: #052e16; color: #4ade80; font-size: 11px; padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; }
.loading { color: #666; text-align: center; padding: 80px; }
.error { color: #f87171; text-align: center; padding: 80px; }