:root { --primary:#0ea5e9; --border:#e6e8ec; --text:#0f172a; }
body { font-family: Inter, system-ui, sans-serif; margin:0; color:var(--text); background:#f8fafc; }
.container { max-width: 980px; margin: 0 auto; padding: 1rem; }
.card { background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(15,23,42,0.06); }
.card .card-body { padding:1rem; }
.input { width:100%; padding:0.65rem 0.8rem; border:1px solid var(--border); border-radius:10px; }
.btn { padding:0.55rem 0.9rem; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--text); font-weight:600; }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.nav { background:#fff; border-bottom:1px solid var(--border); }
.nav .container { display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:0.5rem; }
.logo img { height:36px; }
.footer { text-align:center; padding:1rem; color:#475569; }