body{font-family:Arial,sans-serif;background:#f4f7f4;text-align:center;margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100vh;transition:background-color .3s,color .3s}body.dark-mode{background:#2c3e50;color:#ecf0f1}#login-container,#login-form,#main-content,#developer-code-form,#developer-training-screen,#webcam-view,#help-me-screen,#entry-code-screen,#entry-code-input-screen,#guardian-connect-screen{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.title{font-size:72px;font-weight:700;color:#2ecc71;margin-bottom:80px}#main-content .title,#developer-training-screen .title,#help-me-screen .title,#entry-code-screen .title,#entry-code-input-screen .title,#guardian-connect-screen .title{font-size:48px;margin-top:60px;margin-bottom:40px}#developer-code-form{padding-top:120px}.input-field{display:block;width:300px;margin:15px auto;padding:18px;font-size:18px;border-radius:25px;border:2px solid #ddd;box-sizing:border-box;text-align:center;background-color:#ecf0f1;transition:border-color .3s,box-shadow .3s}.input-field:focus{outline:none;border-color:#3498db;box-shadow:0 0 10px #3498db80}.input-field.long-text{height:150px;text-align:left;border-radius:15px}.button{display:block;width:300px;margin:20px auto;padding:18px;font-size:22px;font-weight:700;border-radius:25px;border:none;background:#fff;cursor:pointer;transition:transform .25s,box-shadow .25s}.button:hover{transform:scale(1.05);box-shadow:0 6px 18px #00000026}.login{background-color:#3498db;color:#fff}.signup,.helpme{background-color:#e74c3c;color:#fff}.helper{background-color:#3498db;color:#fff}.guardian{background-color:#8e44ad;color:#fff}.training{background-color:#f1c40f;color:#333}#developer-code-form .button{background-color:#2ecc71;color:#fff}.guardian-connect{background-color:#1abc9c;color:#fff}.help-request{background-color:#e67e22;color:#fff}.entry-code{background-color:#9b59b6;color:#fff}.help-request.emergency{background-color:#e74c3c;color:#fff;font-weight:700;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #e74c3cb3}70%{transform:scale(1.05);box-shadow:0 0 0 20px #e74c3c00}to{transform:scale(1);box-shadow:0 0 #e74c3c00}}.entry-item{display:flex;align-items:center;justify-content:space-between;width:450px;margin:10px 0}.entry-item .button{margin:0;width:200px;font-size:18px}.entry-value{background-color:#ecf0f1;padding:10px 15px;border-radius:8px;font-size:14px;width:220px;text-align:left;color:#333;overflow-wrap:break-word}.entry-method{background-color:#3498db;color:#fff}.door-password{background-color:#f1c40f;color:#333}.other-info{background-color:#95a5a6;color:#fff}.logout-link,a{font-size:16px;text-decoration:underline;cursor:pointer;margin-top:30px;color:#7f8c8d}body.dark-mode .logout-link,body.dark-mode a{color:#bdc3c7}#dark-mode-toggle{position:absolute;top:20px;right:20px;padding:10px 15px;border-radius:8px;border:1px solid #ddd;background:#fff;cursor:pointer}.code-section{margin:20px 0;padding:20px;border:2px dashed #3498db;border-radius:10px}.code-display{display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;letter-spacing:5px;margin:10px 0}.code-display span{background-color:#ecf0f1;padding:10px 20px;border-radius:5px}.copy-btn{width:auto!important;font-size:16px!important;padding:8px 15px!important;margin-left:15px!important;background-color:#3498db!important;color:#fff!important}.timer{font-size:16px;color:#e74c3c}.guardian-list{margin-top:30px;width:450px}.guardian-list ul{list-style:none;padding:0}.guardian-list li{display:flex;justify-content:space-between;align-items:center;background-color:#ecf0f1;padding:15px;border-radius:8px;margin-bottom:10px}.disconnect-btn{width:auto!important;font-size:14px!important;padding:8px 12px!important;margin:0!important;background-color:#e74c3c!important;color:#fff!important}body.dark-mode .button,body.dark-mode #dark-mode-toggle,body.dark-mode .input-field{background:#34495e;border-color:#55687d;color:#ecf0f1}body.dark-mode .input-field::placeholder{color:#95a5a6}body.dark-mode .login{background-color:#3498db}body.dark-mode .signup,body.dark-mode .helpme{background-color:#e74c3c}body.dark-mode .helper{background-color:#3498db}body.dark-mode .guardian{background-color:#8e44ad}body.dark-mode .training{background-color:#f39c12;color:#fff}body.dark-mode #developer-code-form .button{background-color:#27ae60}body.dark-mode .guardian-connect{background-color:#16a085}body.dark-mode .help-request{background-color:#d35400}body.dark-mode .entry-code{background-color:#8e44ad}body.dark-mode .entry-value{background-color:#2c3e50;color:#ecf0f1;border:1px solid #55687d}body.dark-mode .code-section{border-color:#2980b9}body.dark-mode .code-display span,body.dark-mode .guardian-list li{background-color:#34495e}#modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}#logout-confirm-modal{background:#fff;padding:30px 40px;border-radius:15px;box-shadow:0 5px 20px #0003;text-align:center;width:320px}#logout-confirm-modal p{font-size:20px;margin-bottom:25px;font-weight:700}.modal-buttons{display:flex;justify-content:space-around}.modal-buttons .button{width:120px;font-size:18px;margin:0}.modal-buttons .confirm{background-color:#e74c3c}.modal-buttons .cancel{background-color:#95a5a6}body.dark-mode #logout-confirm-modal{background:#34495e;color:#ecf0f1}body.dark-mode .modal-buttons .confirm{background-color:#c0392b}body.dark-mode .modal-buttons .cancel{background-color:#7f8c8d}#webcam-view video{border:5px solid #2ecc71;box-shadow:0 4px 15px #0003;margin-bottom:20px}body.dark-mode #webcam-view video{border-color:#27ae60}