:root { --bg:#f6f7fb; --card:#fff; --text:#222; --muted:#667; --primary:#e11d48; --border:#e4e7ef;}
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Arial}
body{margin:0;background:var(--bg);color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:16px}
header{display:flex;justify-content:space-between;align-items:center;margin:8px 0 16px}
h1{font-size:20px;margin:0}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;max-width:380px;margin:60px auto}
label{display:block;font-size:13px;color:var(--muted);margin-top:10px}
input,select{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;margin-top:6px}
button{padding:10px 14px;border-radius:10px;border:1px solid var(--border);cursor:pointer;background:#fff}
button:hover{background:#f0f2f8}
button.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.secondary{background:#f8f9fc}
.hidden{display:none}
.error{color:#c00;margin-top:8px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin:12px 0}
.actions button{margin-left:8px}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin:12px 0}
dialog{max-width:900px;width:95%;border:none;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.15)}
dialog::backdrop{background:rgba(0,0,0,.4)}
menu{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:800px){.grid{grid-template-columns:1fr}}
.badge{display:inline-block;padding:2px 8px;background:#edf2ff;border-radius:999px;border:1px solid #cfe1ff;color:#345;margin-left:6px;font-size:12px}