:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-width:320px;min-height:100vh}button{font-family:inherit}.login-container{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.login-card{background:#fff;padding:2.5rem;border-radius:16px;box-shadow:0 10px 25px #0000000d;width:100%;max-width:400px;text-align:center}.login-card h2{margin-bottom:.5rem;color:#333;font-weight:700}.subtitle{color:#666;margin-bottom:2rem;font-size:.9rem}.input-group{margin-bottom:1.5rem;text-align:left}.input-group label{display:block;margin-bottom:.5rem;color:#444;font-size:.9rem;font-weight:500}.input-group input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:8px;font-size:1rem;transition:border-color .2s;box-sizing:border-box}.input-group input:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 3px #007bff1a}.error-message{color:#dc3545;font-size:.875rem;margin-bottom:1rem}.login-button{width:100%;padding:.85rem;background-color:#007bff;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s}.login-button:hover{background-color:#0056b3}.login-button.admin-btn{background-color:#343a40}.login-button.admin-btn:hover{background-color:#23272b}.login-button:active{transform:scale(.98)}.login-footer{margin-top:1.5rem;border-top:1px solid #eee;padding-top:1rem}.text-button{background:none;border:none;color:#6c757d;font-size:.85rem;cursor:pointer;text-decoration:underline}.text-button:hover{color:#495057}.checkin-container{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#e0eaec,#4ca1af)}.checkin-card{background:#fff;border-radius:20px;box-shadow:0 20px 40px #0000001a;width:100%;max-width:500px;overflow:hidden;display:flex;flex-direction:column}.checkin-header{background-color:#f8f9fa;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee}.user-info{display:flex;flex-direction:column}.welcome-text{font-size:.8rem;color:#888;text-transform:uppercase;letter-spacing:1px}.username{font-size:1.2rem;font-weight:700;color:#333}.logout-button{background:none;border:1px solid #ddd;padding:.4rem .8rem;border-radius:6px;color:#666;cursor:pointer;font-size:.85rem;transition:all .2s}.logout-button:hover{background-color:#f1f1f1;color:#333}.checkin-body{padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;gap:2rem}.status-indicator{font-size:.9rem;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:1.5px}.status-indicator.success{color:#28a745}.status-indicator.error{color:#dc3545}.status-indicator.loading{color:#007bff}.button-group{display:flex;gap:1.5rem;justify-content:center;width:100%}.checkin-button{width:160px;height:160px;border-radius:20px;border:none;cursor:pointer;transition:all .3s ease;display:flex;justify-content:center;align-items:center;outline:none}.checkin-button.entry{background:linear-gradient(145deg,#fff,#e6e6e6);box-shadow:10px 10px 30px #d1d1d1,-10px -10px 30px #fff;color:#28a745}.checkin-button.exit{background:linear-gradient(145deg,#fff,#e6e6e6);box-shadow:10px 10px 30px #d1d1d1,-10px -10px 30px #fff;color:#dc3545}.checkin-button:active{transform:scale(.95);box-shadow:inset 10px 10px 30px #d1d1d1,inset -10px -10px 30px #fff}.checkin-button.disabled{opacity:.7;cursor:not-allowed;pointer-events:none}.button-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.button-content .icon{font-size:2.5rem}.button-content .text{font-size:1rem;font-weight:700;color:inherit;text-align:center}.message-box{padding:1rem;border-radius:8px;background-color:#f8f9fa;width:100%;text-align:center;font-size:.9rem;line-height:1.4}.message-box.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.message-box.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.admin-container{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;background-color:#f0f2f5;padding:2rem;box-sizing:border-box}.admin-card{background:#fff;width:100%;max-width:600px;border-radius:12px;box-shadow:0 4px 12px #0000001a;overflow:hidden}.admin-header{background:#343a40;color:#fff;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.admin-header h2{margin:0;font-size:1.25rem}.exit-button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.4rem .8rem;border-radius:4px;cursor:pointer}.exit-button:hover{background:#ffffff1a}.admin-section{padding:1.5rem;border-bottom:1px solid #eee}.admin-section h3{margin-top:0;margin-bottom:1rem;color:#444;font-size:1.1rem}.admin-form{display:flex;gap:.5rem}.admin-form input{flex:1;padding:.6rem;border:1px solid #ddd;border-radius:4px}.action-button{padding:.6rem 1rem;border:none;border-radius:4px;color:#fff;cursor:pointer;font-weight:500}.action-button.add{background-color:#28a745}.action-button.update{background-color:#007bff}.users-list ul{list-style:none;padding:0;margin:0;max-height:200px;overflow-y:auto;border:1px solid #eee;border-radius:4px}.users-list li{padding:.8rem;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.users-list li:last-child{border-bottom:none}.delete-btn{background:#dc3545;color:#fff;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem}.admin-message{padding:1rem;text-align:center;font-weight:500}.admin-message.success{background-color:#d4edda;color:#155724}.admin-message.error{background-color:#f8d7da;color:#721c24}.no-users{color:#888;font-style:italic;text-align:center;padding:1rem}