:root { --accent:#2d6cdf; --danger:#d9534f; --ok:#4caf50; }
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;margin:0;color:#111}
header{background:#1f2937;color:#fff;padding:12px 16px;display:flex;gap:16px;align-items:center}
header a{color:#fff;text-decoration:none}
.container{max-width:1100px;margin:20px auto;padding:0 16px}
.card{border:1px solid #e5e7eb;border-radius:8px;padding:16px;margin-bottom:16px;background:#fff}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #eee;text-align:left}
th{background:#fafafa}
.btn{display:inline-block;padding:8px 12px;border-radius:6px;border:1px solid #cbd5e1;background:#e5e7eb;text-decoration:none;color:#111}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row .field{flex:1;min-width:220px}
input,select,textarea{width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:6px}
.nav{display:flex;gap:12px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;font-size:12px;margin-right:6px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:800px){.kpis{grid-template-columns:1fr}}