*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#333}.text-center{text-align:center}.mt-2{margin-top:1rem}.mb-2{margin-bottom:1rem}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.login-card{background:#fff;padding:2rem;border-radius:10px;box-shadow:0 10px 25px #0000001a;width:100%;max-width:400px}.login-card h2{text-align:center;margin-bottom:1.5rem;color:#333;font-size:1.8rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:5px;font-size:1rem;transition:border-color .3s}.form-group input:focus{outline:none;border-color:#667eea}button[type=submit]{width:100%;padding:.75rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:5px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s}button[type=submit]:hover:not(:disabled){transform:translateY(-2px)}button[type=submit]:disabled{opacity:.7;cursor:not-allowed}.error-message{background-color:#f8d7da;color:#721c24;padding:.75rem;border-radius:5px;margin-bottom:1rem;text-align:center}.toggle-mode{text-align:center;margin-top:1rem;color:#666}.toggle-button{background:none;border:none;color:#667eea;cursor:pointer;font-weight:600;text-decoration:underline;padding:0}.toggle-button:hover{color:#764ba2}.app-container{min-height:100vh;background-color:#f5f5f5}.app-header{background-color:#fff;padding:1rem 2rem;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;align-items:center}.user-info{display:flex;align-items:center;gap:1rem}.logout-button{padding:.5rem 1rem;background-color:#dc3545;color:#fff;border:none;border-radius:5px;cursor:pointer}.logout-button:hover{background-color:#c82333}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}