.app{grid-template-columns:280px 1fr;min-height:100vh;display:grid}.sidebar{color:#f9fafb;background:#111827;flex-direction:column;gap:24px;padding:24px;display:flex}.sidebar-logo{align-items:center;gap:12px;display:flex}.sidebar-logo div:first-child{font-size:28px}.sidebar button{text-align:left;width:100%;color:inherit;background:0 0;border:none;border-radius:12px;margin-bottom:6px;padding:12px 14px}.sidebar button.active,.sidebar button:hover{background:#ffffff14}.main{padding:24px}.topbar{justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px;display:flex}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px;display:grid}.stat-card{background:#fff;border-radius:18px;padding:18px;box-shadow:0 10px 30px #0f172a0a}.add-employee-bar{flex-wrap:wrap;gap:12px;margin-bottom:20px;display:flex}.add-employee-bar input,.search-filter-bar input,.search-filter-bar select{background:#fff;border:1px solid #d1d5db;border-radius:12px;min-width:180px;padding:12px 14px}.btn-add{color:#fff;background:#2563eb;border:none;border-radius:12px;padding:12px 18px}.employee-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.employee-card{background:#fff;border-radius:22px;padding:18px;box-shadow:0 14px 30px #0f172a14}.card-header{align-items:center;gap:14px;margin-bottom:16px;display:flex}.avatar{color:#fff;border-radius:14px;place-items:center;width:48px;height:48px;font-weight:700;display:grid}.avatar.purple{background:#7c3aed}.avatar.teal{background:#0ea5e9}.avatar.amber{background:#f59e0b}.avatar.rose{background:#ec4899}.avatar.sky{background:#38bdf8}.card-actions{gap:10px;margin-top:16px;display:flex}.btn-danger{color:#fff;background:#dc2626;border:none;border-radius:12px;padding:10px 14px}.search-filter-bar{flex-wrap:wrap;gap:12px;margin-bottom:20px;display:flex}.empty-state{text-align:center;color:#6b7280;background:#fff;border-radius:22px;padding:32px}.modal-overlay{z-index:40;background:#0f172a6b;place-items:center;display:grid;position:fixed;inset:0}.modal-box{background:#fff;border-radius:24px;width:min(560px,95vw);padding:24px;box-shadow:0 24px 60px #0f172a2e}.modal-form label{gap:8px;margin-bottom:16px;font-weight:600;display:grid}.modal-form input{border:1px solid #d1d5db;border-radius:12px;width:100%;padding:12px}.modal-actions{justify-content:flex-end;gap:12px;display:flex}.modal-close{background:0 0;border:none;font-size:20px}:focus{outline:none}html,body,#root{color:#111827;background:#f3f4f6;min-height:100%;margin:0;font-family:Inter,sans-serif}button{cursor:pointer}