:root { color-scheme: light; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #f8fafc; color: #0f172a; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; }
.nav { display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 0; }
.btn { display:inline-flex; align-items:center; gap:8px; padding: 10px 14px; border-radius: 12px; border: 1px solid #e2e8f0; background:#fff; }
.btnPrimary { background:#2563eb; color:#fff; border-color:#2563eb; }
.grid { display:grid; gap:16px; }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } }
.hero { background: linear-gradient(135deg, #1d4ed8, #2563eb); color:#fff; border-radius: 24px; padding: 26px; overflow:hidden; }
.input { width:100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #cbd5e1; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.badge { display:inline-flex; padding: 6px 10px; border-radius: 999px; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; font-size:12px; }