*{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;--success:#10b981;--warning:#facc15;--error:#ef4444;--gradient-primary:linear-gradient(135deg, #3b82f6, #60a5fa);--gradient-secondary:linear-gradient(135deg, #1d4ed8, #2563eb);--glassmorphism:#ffffff26}.container{max-width:1200px;margin:0 auto}.header{background:var(--gradient-primary);color:var(--white);border-radius:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:2.5rem;padding:2.5rem;display:flex;box-shadow:0 8px 24px #3b82f633}.header h1{background:var(--gradient-secondary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.25rem;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);-webkit-backdrop-filter:blur(10px);border-radius:20px;margin-bottom:2.5rem;padding:3rem;transition:all .3s;box-shadow:0 10px 25px #00000014}.card:hover{transform:translateY(-5px);box-shadow:0 12px 30px #0000001a}.btn{cursor:pointer;text-transform:uppercase;border:none;border-radius:12px;align-items:center;gap:.75rem;padding:.875rem 1.75rem;font-size:.9375rem;font-weight:600;transition:all .25s;display:inline-flex}.btn-primary{background:var(--gradient-secondary);color:var(--white);border:1px solid var(--blue)}.btn-primary:hover{background:var(--blue);transform:translateY(-1px)}.btn-secondary{background:var(--light-blue);color:var(--white);border:1px solid var(--light-blue)}.btn-secondary:hover{background:#1d4ed8;transform:translateY(-1px)}.input-field{border:1px solid var(--border);background:var(--bg-light);border-radius:12px;width:100%;padding:1rem 1.25rem;font-size:1rem;transition:border-color .2s,box-shadow .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:2rem;margin-bottom:2.5rem;display:grid}.filter-group div{flex-direction:column;display:flex}.stats-card{background:var(--bg-light);text-align:center;border-radius:16px;padding:2.5rem;transition:all .3s;position:relative;overflow:hidden}.stats-card:before{content:"";background:var(--gradient-primary);opacity:.1;width:200%;height:200%;position:absolute;top:-50%;left:-50%;transform:rotate(45deg)}.stats-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000014}.task-card{background:var(--white);border-radius:20px;flex-direction:column;padding:2rem;transition:all .2s;display:flex;box-shadow:0 6px 16px #0000000d}.task-card:hover{transform:translate(5px);box-shadow:0 8px 20px #00000014}.status-tag{text-transform:uppercase;border-radius:999px;padding:.5rem 1rem;font-size:.875rem;font-weight:600}.status-pending{background-color:var(--warning);color:#1f2937}.status-inprogress{background-color:var(--blue);color:var(--white)}.status-done{background-color:var(--success);color:var(--white)}.user-card{background:var(--white);border-radius:20px;flex-direction:column;padding:2rem;transition:all .2s;display:flex;box-shadow:0 6px 16px #0000000d}.user-card:hover{transform:translate(5px);box-shadow:0 8px 20px #00000014}.user-status{text-transform:uppercase;border-radius:999px;padding:.4rem 1rem;font-size:.875rem;font-weight:600}.user-active{background-color:var(--success);color:var(--white)}.user-inactive{background-color:var(--error);color:var(--white)}.list-group{flex-direction:column;gap:2rem;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.5rem;height:1.5rem}.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}