body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f6f7fb;color:#222;}
header{background:#111827;color:#fff;padding:14px 18px;}
header h1{margin:0;font-size:18px}
header small{display:block;color:#9ca3af;margin-top:4px}

.nav{display:flex;gap:10px;padding:12px 18px;background:#fff;border-bottom:1px solid #e5e7eb}
.nav button{border:1px solid #d1d5db;background:#f3f4f6;padding:8px 10px;border-radius:6px;cursor:pointer}
.nav button.active{background:#111827;color:#fff;border-color:#111827}

main{padding:18px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;margin-bottom:18px}
.card h2{margin-top:0;font-size:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

table{width:100%;border-collapse:collapse}
th,td{border:1px solid #e5e7eb;padding:8px;font-size:12px}
th{background:#f3f4f6;text-align:left}
input,select{width:100%;padding:8px;border:1px solid #d1d5db;border-radius:6px;font-size:13px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.actions{margin-top:12px}
.actions button{background:#111827;color:#fff;border:none;padding:10px 12px;border-radius:8px;cursor:pointer}
small.note{display:block;margin-top:6px;color:#6b7280;font-size:12px}