*{box-sizing:border-box;margin:0;padding:0}body{color:#1a202c;background-color:#f0f4f8;padding:2rem;font-family:Inter,sans-serif}:root{--dark-blue:#0f172a;--blue:#3b82f6;--light-blue:#60a5fa;--white:#fff;--neutral:#64748b;--bg-light:#f8fafc;--border:#e2e8f0;--shadow:#0000000d;--gray-100:#f9fafb;--gray-200:#edf2f7;--gray-300:#cbd5e0;--gray-400:#94a3b8;--gray-500:#64748b}.container{max-width:1200px;margin:0 auto}.header{background:var(--dark-blue);color:var(--white);box-shadow:0 4px 12px var(--shadow);border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:2rem;display:flex}.header h1{background:linear-gradient(90deg,#3b82f6,#60a5fa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2rem;font-weight:700}.nav-bar{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.nav-bar h2{font-size:1.5rem;font-weight:600}.card{background:var(--white);box-shadow:0 6px 16px var(--shadow);border-radius:16px;margin-bottom:2rem;padding:2.5rem;transition:box-shadow .3s}.card:hover{box-shadow:0 8px 20px var(--shadow)}.btn{cursor:pointer;border:none;border-radius:10px;align-items:center;gap:.6rem;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--blue);color:var(--white);border:1px solid var(--blue)}.btn-primary:hover{background-color:#2563eb;border-color:#2563eb}.btn-secondary{background-color:var(--light-blue);color:var(--white);border:1px solid var(--light-blue)}.btn-secondary:hover{background-color:#1d4ed8;border-color:#1d4ed8}.input-field{border:1px solid var(--border);border-radius:10px;width:100%;padding:.875rem 1.25rem;font-size:1rem;transition:border-color .2s}.input-field:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 2px #3b82f633}.filter-group{grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-bottom:2rem;display:grid}.filter-group div{flex-direction:column;display:flex}.stats-card{background:var(--bg-light);text-align:center;border-radius:12px;padding:2rem;transition:transform .2s}.stats-card:hover{transform:translateY(-2px)}.task-card{background:var(--white);box-shadow:0 3px 10px var(--shadow);border-radius:16px;padding:1.75rem;transition:all .2s}.task-card:hover{box-shadow:0 5px 15px var(--shadow)}.status-tag{border-radius:999px;padding:.4375rem .875rem;font-size:.8125rem;font-weight:600}.status-pending{color:#1f2937;background-color:#facc15}.status-inprogress{background-color:var(--blue);color:var(--white)}.status-done{color:var(--white);background-color:#10b981}.user-card{background:var(--white);box-shadow:0 3px 10px var(--shadow);border-radius:16px;padding:1.75rem;transition:all .2s}.user-card:hover{box-shadow:0 5px 15px var(--shadow)}.user-status{border-radius:999px;padding:.3125rem .875rem;font-size:.8125rem;font-weight:600}.user-active{color:var(--white);background-color:#10b981}.user-inactive{color:var(--white);background-color:#f87171}.list-group{flex-direction:column;gap:1.5rem;display:flex}@media (width<=1024px){.filter-group{grid-template-columns:1fr 1fr}}@media (width<=768px){.container{padding:1.5rem}.filter-group{grid-template-columns:1fr}.header{text-align:center;flex-direction:column}}.icon{vertical-align:middle;fill:currentColor;width:1.25rem;height:1.25rem}.state-hover{transition:background .2s}.state-hover:hover{background:var(--bg-light)}.border-radius{border-radius:12px}.shadow-md{box-shadow:0 4px 12px var(--shadow)}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.font-bold{font-weight:700}.text-center{text-align:center}.mt-6{margin-top:1.5rem}.mb-8{margin-bottom:2rem}.py-8{padding-top:2rem;padding-bottom:2rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}