* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: #f5f7fb; padding: 20px; }
.container { max-width: 1200px; margin: 0 auto; }
h1 { font-size: 24px; color: #1e293b; margin-bottom: 20px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid #e9edf4; }
.card .id { font-size: 12px; color: #94a3b8; }
.card .title { font-weight: 600; font-size: 15px; margin: 4px 0; }
.card .desc { font-size: 13px; color: #64748b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .tag { display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 12px; background: #e2e8f0; color: #475569; }
.card .tag.reading { background: #dbeafe; color: #1d4ed8; }
.card .tag.working { background: #d1fae5; color: #065f46; }
.card .tag.unemployed { background: #fef3c7; color: #92400e; }
.card .tag.graduated { background: #fce4ec; color: #b91c1c; }
.empty { text-align: center; padding: 60px 20px; color: #94a3b8; }
.loading { text-align: center; padding: 40px 20px; color: #94a3b8; }