*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{color:#101828;background:#f5f7fa}button{font:inherit}button:disabled{opacity:.5;cursor:not-allowed}.app{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.card{background:#fff;border-radius:22px;width:100%;max-width:430px;padding:30px 24px;box-shadow:0 10px 35px #00000014}.header{text-align:center;margin-bottom:28px}.header h1{margin:0;font-size:24px;font-weight:700;line-height:1.2}.header p{color:#667085;margin:8px 0 0;font-size:14px}.login-section{text-align:center}.login-section h2{margin:0 0 10px;font-size:20px}.google-login{justify-content:center;min-height:44px;margin-top:25px;display:flex}.attendance-section{text-align:center}.employee-avatar{color:#fff;background:#111827;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 12px;font-size:24px;font-weight:700;display:flex}.attendance-section h2{margin:6px 0;font-size:21px;line-height:1.3}.email{color:#667085;margin:0;font-size:14px}.employee-id{color:#667085;margin:5px 0 0;font-size:13px}.login-badge{color:#12b76a;margin-top:12px;font-size:14px;font-weight:600;display:inline-block}.action-title{margin:32px 0 14px;font-size:17px;font-weight:600}.attendance-options{grid-template-columns:1fr 1fr;gap:12px;display:grid}.attendance-option{color:#344054;cursor:pointer;background:#fff;border:2px solid #e4e7ec;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:9px;min-height:105px;font-size:16px;font-weight:600;transition:border-color .15s,background .15s,transform .1s;display:flex}.attendance-option:hover{border-color:#98a2b3}.attendance-option:active{transform:scale(.98)}.attendance-option.selected{color:#111827;background:#f2f4f7;border-color:#111827}.option-icon{background:#f2f4f7;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;font-weight:700;display:flex}.attendance-option.selected .option-icon{color:#fff;background:#111827}.attendance-button{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:14px;width:100%;min-height:56px;margin-top:18px;font-size:16px;font-weight:600;transition:transform .1s,opacity .15s}.attendance-button:hover{background:#1f2937}.attendance-button:active{transform:scale(.98)}.description{color:#667085;margin:14px 0 0;font-size:13px;line-height:1.5}.status-message{text-align:center;border-radius:12px;margin-top:18px;padding:14px;font-size:14px;line-height:1.5}.status-message.error{color:#b42318;background:#fef3f2}.logout-button{color:#344054;cursor:pointer;background:#fff;border:1px solid #d0d5dd;border-radius:10px;margin-top:20px;padding:10px 20px}.logout-button:hover{background:#f9fafb}.success-screen{text-align:center;padding:20px 0}.success-icon{color:#fff;background:#12b76a;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 20px;font-size:38px;font-weight:700;display:flex}.success-screen h1{margin:0;font-size:23px;line-height:1.3}.attendance-result{background:#f2f4f7;border-radius:16px;margin-top:26px;padding:22px}.result-name{color:#111827;margin-bottom:14px;font-size:20px;font-weight:700;line-height:1.3}.result-type{color:#667085;letter-spacing:1px;font-size:14px;font-weight:700}.result-date{color:#344054;margin-top:12px;font-size:16px}.result-time{color:#111827;margin-top:5px;font-size:32px;font-weight:700;line-height:1.2}.success-text{color:#667085;margin-top:18px;font-size:14px;line-height:1.5}.secondary-button{color:#344054;cursor:pointer;background:#fff;border:1px solid #d0d5dd;border-radius:12px;width:100%;min-height:50px;margin-top:20px;font-weight:600}.secondary-button:hover{background:#f9fafb}.qr-scanner{color:#fff;background:#000;min-height:100vh;padding:20px}.qr-header{align-items:center;gap:14px;width:100%;max-width:500px;margin:0 auto 24px;display:flex}.qr-header h2{margin:0;font-size:19px;font-weight:600}.qr-back-button{color:#fff;cursor:pointer;background:#222;border:none;border-radius:50%;flex-shrink:0;width:42px;height:42px;font-size:22px}.qr-back-button:hover{background:#333}.scanner-container{border-radius:16px;width:100%;max-width:500px;margin:0 auto;overflow:hidden}#qr-reader{width:100%}#qr-reader video{border-radius:16px;width:100%!important}#qr-reader__dashboard{color:#fff}#qr-reader__dashboard button{color:#fff;cursor:pointer;background:#222;border:1px solid #444;border-radius:8px;padding:8px 14px}.scanner-instruction{text-align:center;width:100%;max-width:400px;margin:22px auto}.scanner-instruction p{margin:0 0 8px;font-size:15px;line-height:1.5}.scanner-instruction span{color:#98a2b3;font-size:13px}@media (width<=480px){.app{align-items:flex-start;padding:30px 16px 16px}.card{border-radius:18px;padding:26px 18px}.header{margin-bottom:26px}.header h1{font-size:22px}.attendance-options{gap:10px}.attendance-option{min-height:95px}.result-time{font-size:29px}.success-screen{padding-top:10px}.qr-scanner{padding:26px 16px 16px}}@media (width<=360px){.card{padding:22px 15px}.attendance-option{min-height:90px;font-size:14px}.option-icon{width:36px;height:36px;font-size:21px}.result-time{font-size:26px}}