body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#d3d3d3;margin:0;padding:0}.container{max-width:1200px;margin:30px auto;padding:25px;background-color:#fff;border-radius:12px;box-shadow:0 8px 20px #0000001a}h1{text-align:center;font-size:2.4rem;color:tomato;margin-bottom:25px;text-shadow:1px 1px 3px gray}button{padding:8px 16px;margin:3px;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out;box-shadow:0 3px 6px #00000026}button:hover{transform:translateY(-2px);opacity:.95}button.save{background-color:#32cd32;color:#fff}button.cancel{background-color:red;color:#fff}button.edit{background-color:#1e90ff;color:#fff}button.delete{background-color:orange;color:#fff}button.add-user{background-color:#7b68ee;color:#fff}button.filter{background-color:#3cb371;color:#fff}button.add-user:hover{background-color:#6a5acd}button.filter:hover{background-color:#2e8b57}input[type=text],input[type=email]{padding:8px 12px;margin:3px 0;border:1px solid darkgray;border-radius:6px;font-size:14px;width:100%;box-sizing:border-box;transition:all .2s ease-in-out}input:focus{outline:none;border-color:#1e90ff;box-shadow:0 0 5px #1e90ff}form{margin:15px 0;display:flex;flex-wrap:wrap;gap:10px}form input{flex:1 1 200px}form button{flex:0 0 auto}table{width:100%;border-collapse:collapse;margin-top:20px;border-radius:10px;overflow:hidden;box-shadow:0 5px 10px #0000000d}th,td{padding:12px 10px;text-align:left;border-bottom:1px solid gray}th{background-color:#000;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}th:hover{background-color:#2f4f4f}tr:hover{background-color:#dcdcdc}tr.editing{background-color:#ffffe0;transition:background .2s}select{padding:5px 10px;border-radius:6px;border:1px solid darkgray}.pagination{margin-top:15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.search-filter{margin:10px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.search-filter input{flex:1 1 200px}.filter-box{margin-bottom:15px;border:1px solid gray;padding:12px;display:flex;gap:10px;flex-wrap:wrap;border-radius:8px;background-color:#d3d3d3}@media (max-width: 992px){form input{flex:1 1 100%}.search-filter,.filter-box{flex-direction:column;align-items:stretch}}@media (max-width: 768px){table,thead,tbody,th,td,tr{display:block;width:100%}thead tr{display:none}tr{margin-bottom:15px;border:1px solid gray;border-radius:8px;padding:10px;background-color:#fff}td{display:flex;justify-content:space-between;padding:5px 10px;border:none;border-bottom:1px solid gray}td:last-child{display:flex;justify-content:flex-start;gap:5px}td:before{content:attr(data-label);font-weight:700;flex-basis:40%}}