body{margin:0;font-family:Arial,Helvetica,sans-serif;background-color:#f4f4f9;color:#333;display:flex;flex-direction:column;min-height:100vh}h1,h3{font-size:1.5rem;margin:0}a{color:#007bff}header,footer{background-color:#0056b3;color:#fff;padding:1rem 2rem}header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}footer{text-align:center;margin-top:auto;padding-top:1rem;padding-bottom:1rem}footer a{color:#add8e6}main{flex-grow:1;padding:2rem;text-align:center}nav menu{display:flex;list-style-type:none;margin:0;padding:0;gap:1rem}nav a{color:#fff;text-decoration:none;font-weight:700;padding:.5rem 1rem;border-radius:5px;transition:background-color .2s ease-in-out}nav a:hover,nav a.active{background-color:#007bff}.user-display{font-style:italic;font-size:.9rem}form div{display:flex;align-items:center;border:1px solid #ccc;border-radius:5px;max-width:400px;margin:10px auto;background-color:#fff}form span{padding:.5rem;background-color:#eee;border-right:1px solid #ccc}input[type=text],input[type=password]{border:none;padding:.5rem;width:100%;font-size:1rem;border-radius:0 5px 5px 0}button{background-color:#28a745;color:#fff;padding:.75rem;border:none;border-radius:5px;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .2s;margin:5px}button:hover{background-color:#218838}table{width:80%;margin:2rem auto;border-collapse:collapse;background-color:#fff;box-shadow:0 4px 15px #0000001a}th,td{padding:1rem;border-bottom:1px solid #ddd}th{background-color:#007bff;color:#fff}.websocket-box{margin-top:2rem;padding:1rem;background-color:#fff;border:1px dashed #0056b3;border-radius:8px;text-align:left;max-width:600px;margin-left:auto;margin-right:auto}header img{height:50px;width:50px;border-radius:50%;border:2px solid white}img{max-width:100%;height:auto}@media(max-width:768px){header{flex-direction:column;text-align:center}nav menu{flex-direction:column;width:100%;align-items:center}}