*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:linear-gradient(to bottom,#e6f7ff,#cce7ff);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#333;display:flex;flex-direction:column;align-items:center;padding:0}body h2{color:#555;font-size:24px;font-weight:700;text-transform:uppercase}#table{width:95%;margin:20px auto 15px;padding:20px;background-color:#fff;border-radius:10px;box-shadow:0 6px 15px #00000026;overflow-x:auto}table{width:100%;border-collapse:collapse;background-color:#f9f9f9;border-radius:5px;box-shadow:0 3px 8px #0000001a;overflow:hidden}thead th{background-color:#55608f;color:#fff;font-size:14px;font-weight:700;padding:12px 20px;text-transform:uppercase}tbody tr{border-bottom:1px solid #ddd}tbody td{padding:8px 15px;text-align:center;color:#333}tbody tr:hover{background-color:#f0f4f8}#sort_div{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;justify-content:center}#sort_by,#filter{padding:10px;font-size:14px;border:1px solid #ccc;border-radius:5px;outline:none;transition:all .3s}#filter{width:200px}.settings-icon-btn{display:flex;align-items:center;justify-content:center;height:38px;width:38px;padding:0;background-color:#4caf50;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.settings-icon-btn:hover{background-color:#45a049}.settings-icon-btn .material-symbols-outlined{font-size:20px}#sort_by:focus,#filter:focus{border-color:#4caf50;box-shadow:0 0 5px #4caf504d}button{padding:10px 15px;font-size:14px;border:none;border-radius:5px;cursor:pointer;background-color:#4caf50;color:#fff;transition:background-color .3s,transform .2s}button:hover{background-color:#45a049}button:active{transform:translateY(2px)}button:disabled{background-color:#bfbfbf;color:#fff;cursor:not-allowed;opacity:.6;box-shadow:none}button:disabled:hover{background-color:#bfbfbf}#manage_users_section{display:inline-flex;justify-content:center;gap:20px;margin:0 auto 14px;max-width:95%;flex-wrap:wrap}#add_user_section,#remove_user_section{flex:1;min-width:300px;padding:5px;background-color:#f9f9f9;border-radius:8px;box-shadow:0 3px 8px #0000001a;text-align:center}#add_user_section h3,#remove_user_section h3{font-size:12px;margin-bottom:1px;font-weight:700}.add-user-controls{display:flex;flex-direction:row;align-items:center;gap:5px;flex-wrap:wrap}.add-user-controls input{flex:1;max-width:50%;padding:4px;font-size:14px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}#add_user_btn{flex:1;padding:4px;font-size:14px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer}.remove-user-controls select,.remove-user-controls button{width:100%;margin:1px 0;font-size:14px;padding:4px}@media (max-width: 768px){#manage_users_section{flex-direction:column;gap:10px;margin:10px auto}#add_user_section,#remove_user_section{min-width:unset;width:100%;height:auto}.add-user-controls{flex-direction:column;gap:10px}.add-user-controls input{max-width:100%}#add_user_btn{width:100%}}#authentication{margin:30px 0;width:100%;display:flex;justify-content:center;align-items:center;background-color:#fff;padding:20px 10px;border-radius:10px;box-shadow:0 5px 15px #0003}.login-container{display:flex;justify-content:center;align-items:center;width:100%}.login-form{width:100%;max-width:400px;text-align:center}.login-form h2{margin-bottom:20px;color:#444}.login-form input[type=password]{width:100%;padding:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:5px;outline:none}.login-form input[type=password]:focus{border-color:#4caf50;box-shadow:0 0 8px #4caf5080}#verifybtn{display:block;width:100%;background-color:#4caf50;border:none;padding:10px;color:#fff;font-size:16px;font-weight:700;border-radius:5px;cursor:pointer;text-transform:uppercase;transition:all .3s ease-in-out}#verifybtn:hover{background-color:#45a049}#verifybtn:active{transform:translateY(2px)}.connected-row{background-color:#dff0d8;color:#3c763d}.disconnected-row{background-color:#f2dede;color:#a94442}.connected-row:hover,.disconnected-row:hover{opacity:.9;cursor:pointer}.status-connected{color:green;font-weight:700;text-align:center}.status-disconnected{color:red;font-weight:700;text-align:center}.status-connected:hover,.status-disconnected:hover{text-decoration:underline;cursor:pointer}.toast{position:fixed;top:25px;right:25px;max-width:300px;background:#fff;padding:.5rem;border-radius:4px;box-shadow:-1px 1px 10px #0000004d;z-index:1023;animation:slideInRight .3s ease-in-out forwards,fadeOut .5s ease-in-out forwards 3s;transform:translate(110%)}.toast.closing{animation:slideOutRight .5s ease-in-out forwards}.toast-progress{position:absolute;display:block;bottom:0;left:0;height:4px;width:100%;background:#b7b7b7;animation:toastProgress 3s ease-in-out forwards}.toast-content-wrapper{display:flex;justify-content:space-between;align-items:center}.toast-icon{padding:.35rem .5rem;font-size:1.5rem}.toast-message{flex:1;font-size:.9rem;color:#000;padding:.5rem}.toast.toast-success{background:#95eab8}.toast.toast-success .toast-progress{background-color:#2ecc71}.toast.toast-danger{background:#efaca5}.toast.toast-danger .toast-progress{background-color:#e74c3c}.toast.toast-info{background:#bddaed}.toast.toast-info .toast-progress{background-color:#3498db}.toast.toast-warning{background:#ead994}.toast.toast-warning .toast-progress{background-color:#f1c40f}@keyframes slideInRight{0%{transform:translate(110%)}75%{transform:translate(-10%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}25%{transform:translate(-10%)}to{transform:translate(110%)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes toastProgress{0%{width:100%}to{width:0%}}.toast-buttons{max-width:700px;display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin:2em auto}.toast-row{display:flex;justify-content:center;margin:1em 0;padding:1rem;flex-wrap:wrap}.settings-section{margin:30px auto;padding:25px;width:90%;max-width:600px;background-color:#fff;border-radius:10px;box-shadow:0 4px 10px #0003;text-align:left}.settings-actions{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:15px}.actions-row{display:flex;gap:10px;align-items:center;width:100%;justify-content:center}.settings-title{margin-bottom:15px;font-size:22px;color:#333;font-weight:700;text-transform:capitalize;text-align:center}.settings-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}label{font-size:14px;font-weight:600;color:#444}.settings-input:focus{border-color:#4caf50;box-shadow:0 0 5px #4caf504d}.settings-btn:hover{background-color:#45a049}.settings-btn:disabled{background-color:#ccc;color:#666;cursor:not-allowed}.settings-btn:hover:not(:disabled){background-color:#45a049}.settings-btn:active:not(:disabled){transform:scale(.98)}.select-row th,.select-row td{text-align:left;padding:10px}.settings-input{margin-right:10px;padding:10px;width:100%;max-width:300px;font-size:14px;border:1px solid #ccc;border-radius:5px;outline:none;transition:border-color .3s,box-shadow .3s}.settings-btn{padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px;background-color:#4caf50;color:#fff;border:none;transition:background-color .3s;height:40px}#update_btn{margin-top:20px;padding:10px 20px;background-color:#4caf50;color:#fff;border:none;border-radius:5px;font-size:14px;cursor:pointer;transition:background-color .3s}#update_btn:hover,.settings-btn:hover{background-color:#45a049}@media (max-width: 768px){.settings-section{width:95%;padding:20px}.settings-title{font-size:20px}}.info-container{max-width:800px;margin:50px auto;padding:20px;background-color:#fff;border-radius:10px;box-shadow:0 4px 10px #0000001a;text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.info-title{font-size:28px;font-weight:700;margin-bottom:20px;color:#333;text-transform:uppercase}.info-content{display:flex;flex-direction:column;gap:20px}.info-box{padding:15px 20px;border-left:5px solid #4caf50;background:#f9f9f9;box-shadow:0 2px 5px #0000001a;border-radius:8px;text-align:left}.info-version{font-size:20px;font-weight:700;color:#4caf50;margin-bottom:8px}.info-box p{font-size:16px;line-height:1.6;color:#555}@media (max-width: 768px){.info-container{padding:15px;margin:20px}.info-title{font-size:24px}.info-box p{font-size:14px}}