body{font-family:Arial,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;margin:0;padding:20px 10px;background-color:#f0f2f5;color:#333;box-sizing:border-box}h1{color:#333;margin-bottom:20px;font-size:1.8em;text-align:center}#video-container{position:relative;width:100%;max-width:400px;height:300px;background-color:#000;border-radius:8px;box-shadow:0 4px 8px #0000001a;overflow:hidden;margin-bottom:20px}video,canvas{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);position:absolute;top:0;left:0}#controls{margin-bottom:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;max-width:400px}#controls button,#auth-container button{flex:1 1 auto;padding:10px 15px;font-size:1em;cursor:pointer;border:none;border-radius:5px;transition:background-color .3s ease;box-shadow:0 2px 4px #0000001a}#controls button.start{background-color:#4caf50;color:#fff}#controls button.start:hover{background-color:#45a049}#controls button.stop{background-color:#f44336;color:#fff}#controls button.stop:hover{background-color:#da190b}#controls button.reset{background-color:#008cba;color:#fff}#controls button.reset:hover{background-color:#007bb5}#instructions,#feedback{margin-top:10px;padding:15px;background-color:#e0f2f7;border-left:5px solid #2196F3;border-radius:8px;box-shadow:0 2px 4px #0000000d;font-size:1em;color:#333;width:100%;max-width:400px;text-align:center;margin-bottom:20px;box-sizing:border-box}#feedback{background-color:#fff;border-left:5px solid #ccc;color:#555}#feedback h3{margin-top:0;color:#333}#feedback ul{list-style-type:none;padding:0}#feedback li{margin-bottom:5px;color:#d32f2f;font-weight:700}#feedback li.good{color:#388e3c;font-weight:700}#repCounter{font-size:1.4em;font-weight:700;color:#2196f3;margin-bottom:15px}#auth-container{margin-bottom:20px;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;width:100%;max-width:400px;text-align:center;box-sizing:border-box}#auth-container input{width:calc(100% - 20px);padding:10px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;font-size:1em;box-sizing:border-box}#auth-container button:hover{opacity:.9}#loginButton,#signupButton{background-color:#2196f3;color:#fff}#logoutButton{background-color:#ff9800;color:#fff}#authError{color:red;font-size:.9em;margin-top:10px}#guestModePrompt{margin-top:10px;padding:15px;background-color:#fffde7;border-left:5px solid #FFC107;border-radius:8px;box-shadow:0 2px 4px #0000000d;font-size:1em;color:#333;width:100%;max-width:400px;text-align:center;margin-bottom:20px;box-sizing:border-box}#assessmentActions{margin-bottom:20px}#assessmentActions button{background-color:#607d8b;color:#fff;flex:1 1 auto}#assessmentActions button:hover{background-color:#455a64}@media (min-width: 768px){body{padding:40px}h1{font-size:2.5em}#video-container{width:640px;height:480px;max-width:none}#controls{gap:15px;max-width:640px}#controls button,#auth-container button{padding:12px 25px;font-size:1.1em;flex:0 1 auto}#instructions,#feedback,#auth-container{font-size:1.1em;max-width:640px}#repCounter{font-size:1.8em}#guestModePrompt,#assessmentActions{max-width:640px}}