:root{--bg-primary:#fff;--bg-secondary:#f3f4f6;--text-primary:#111827;--text-secondary:#4b5563;--accent-color:#3b82f6;--accent-hover:#2563eb;--border-color:#e5e7eb;--success:#10b981;--error:#ef4444;--warning:#f59e0b;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}@media (prefers-color-scheme:dark){:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-color:#3b82f6;--accent-hover:#60a5fa;--border-color:#334155}}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;transition:background-color .3s,color .3s;overflow-x:hidden}a{color:var(--accent-color);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-hover)}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.btn{cursor:pointer;font-family:inherit;font-weight:500;font-size:inherit;border:none;border-radius:.375rem;outline:none;justify-content:center;align-items:center;padding:.5rem 1rem;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--accent-color);color:#fff}.btn-primary:hover{background-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:.75rem;padding:1.5rem;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 6px -1px #0000000d}.card:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.input{border:1px solid var(--border-color);background-color:var(--bg-primary);width:100%;color:var(--text-primary);appearance:none;border-radius:.5rem;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f633}.header-container{grid-template-columns:1fr auto 1fr;align-items:center;max-width:1200px;margin:0 auto;display:grid}.header-logo-wrapper{justify-content:flex-start;display:flex}.header-logo{object-fit:contain;height:60px;display:block}.header-text-container{text-align:center}.header-title{color:var(--accent-color);text-transform:uppercase;margin:0;font-size:1.15rem;font-weight:700;line-height:1.3}.header-subtitle{color:var(--text-secondary);text-transform:uppercase;margin:.2rem 0 0;font-size:.85rem;font-weight:600}.lookup-footer{color:#fff;background-color:#1e40af;margin-top:auto;padding:1.5rem 1rem}.lookup-footer-content{text-align:center;flex-direction:column;justify-content:center;align-items:center;max-width:1000px;margin:0 auto;display:flex}.lookup-footer-text{color:#bfdbfe;margin:0;font-size:.85rem;line-height:1.6}@media (width<=768px){.header-container{text-align:center;flex-direction:column;gap:.5rem;display:flex}.header-logo-wrapper{justify-content:center}.header-logo{height:50px}.header-spacer{display:none}.header-title{font-size:1rem}.header-subtitle{font-size:.8rem}.lookup-footer{padding:1.25rem 1rem}.lookup-footer-text{font-size:.8rem}.card{padding:1.25rem}}@media (width<=480px){.header-container{gap:.35rem}.header-logo{height:40px}.header-title{font-size:.9rem}.header-subtitle{margin-top:.1rem;font-size:.7rem}.lookup-footer{padding:1rem .75rem}.lookup-footer-text{font-size:.75rem;line-height:1.5}.card{border-radius:.625rem;padding:1rem}.input{border-radius:.375rem;padding:.65rem .85rem;font-size:16px}}@media (width<=360px){.header-logo{height:36px}.header-title{font-size:.8rem}.header-subtitle{font-size:.65rem}.lookup-footer-text{font-size:.7rem}}.home-page{background:linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);justify-content:center;align-items:center;min-height:calc(100vh - 160px);padding:2rem 1rem;display:flex}.home-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:24px;width:100%;max-width:520px;overflow:hidden;box-shadow:0 20px 60px -12px #00000014,0 0 0 1px #00000005}.home-hero{text-align:center;padding:2.5rem 2rem 1.5rem}.home-icon-wrapper{color:#fff;background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);border-radius:20px;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 1.25rem;display:flex;box-shadow:0 10px 25px -5px #3b82f666}.home-title{color:var(--text-primary);letter-spacing:-.5px;margin:0 0 .5rem;font-size:1.75rem;font-weight:800;line-height:1.2}.home-subtitle{color:var(--text-secondary);max-width:360px;margin:0 auto;font-size:.95rem;line-height:1.5}.home-qr-section{padding:1.5rem 2rem 2rem}.home-qr-visual{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;justify-content:center;align-items:center;gap:2rem;margin-bottom:1.5rem;padding:1.5rem;display:flex}.qr-phone-mockup{color:#3b82f6;opacity:.8;position:relative}.qr-scan-overlay{color:#10b981;animation:2s ease-in-out infinite pulse-scan;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes pulse-scan{0%,to{opacity:.4;transform:translate(-50%,-50%)scale(.8)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}}.qr-code-mockup{color:#94a3b8;background:#fff;border:2px dashed #cbd5e1;border-radius:12px;padding:1rem}.home-steps{flex-direction:column;gap:.75rem;display:flex}.step-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;align-items:center;gap:.75rem;padding:.75rem 1rem;transition:transform .2s,box-shadow .2s;display:flex}.step-item:hover{transform:translate(4px);box-shadow:0 2px 8px #0000000a}.step-number{color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.8rem;font-weight:700;display:flex}.step-text{color:var(--text-secondary);font-size:.9rem;line-height:1.4}.step-text strong{color:var(--text-primary)}.home-admin-section{border-top:1px solid var(--border-color);text-align:center;background:var(--bg-secondary);padding:1.5rem 2rem}.home-admin-text{color:var(--text-secondary);margin:0 0 .75rem;font-size:.85rem}.home-admin-btn{border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;border-radius:50px;align-items:center;gap:.5rem;padding:.6rem 1.5rem;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.home-admin-btn:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}@media (width<=768px){.home-page{min-height:calc(100vh - 140px);padding:1.5rem 1rem}.home-hero{padding:2rem 1.5rem 1.25rem}.home-icon-wrapper{border-radius:16px;width:68px;height:68px}.home-icon-wrapper svg{width:40px;height:40px}.home-title{font-size:1.5rem}.home-subtitle{font-size:.9rem}.home-qr-section{padding:1.25rem 1.5rem 1.75rem}}@media (width<=480px){.home-page{align-items:flex-start;padding:1.5rem .75rem 1rem}.home-card{border-radius:20px}.home-hero{padding:1.75rem 1.25rem 1rem}.home-icon-wrapper{border-radius:14px;width:60px;height:60px;margin-bottom:1rem}.home-icon-wrapper svg{width:32px;height:32px}.home-title{font-size:1.35rem}.home-subtitle{font-size:.85rem}.home-qr-section{padding:1rem 1.25rem 1.5rem}.home-qr-visual{gap:1.25rem;padding:1.25rem 1rem}.qr-phone-mockup svg{width:36px;height:36px}.qr-code-mockup{padding:.75rem}.qr-code-mockup svg{width:44px;height:44px}.step-item{padding:.65rem .85rem}.step-number{width:24px;height:24px;font-size:.75rem}.step-text{font-size:.85rem}.home-admin-section{padding:1.25rem}.home-admin-btn{justify-content:center;width:100%;padding:.7rem 1rem}}@media (width<=360px){.home-title{font-size:1.2rem}.home-subtitle{font-size:.8rem}.home-qr-visual{flex-direction:column;gap:1rem}.step-text{font-size:.8rem}}@media (prefers-color-scheme:dark){.home-qr-visual{background:#1e293b;border-color:#334155}.qr-code-mockup{color:#64748b;background:#0f172a;border-color:#475569}.step-item:hover{box-shadow:0 2px 8px #0003}}.manual-lookup-section{border-top:1px solid var(--border-color);margin-top:1.5rem;padding-top:1.5rem}.manual-lookup-divider{text-align:center;color:var(--text-secondary);align-items:center;margin-bottom:1rem;font-size:.85rem;display:flex}.manual-lookup-divider:before,.manual-lookup-divider:after{content:"";border-bottom:1px solid var(--border-color);flex:1}.manual-lookup-divider span{padding:0 10px}.manual-lookup-form{gap:8px;display:flex}.manual-lookup-form .input{border:1px solid var(--border-color);border-radius:10px;flex:1;padding:.75rem 1rem}.manual-lookup-form .btn{white-space:nowrap;border-radius:10px;padding:.75rem 1.25rem}.result-page-container{background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:Inter,sans-serif;display:flex}.result-glass-panel{-webkit-backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #fff3;border-radius:24px;width:100%;max-width:480px;padding:32px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000080,inset 0 1px #fff3}.result-header{text-align:center;margin-bottom:32px}.result-logo{object-fit:contain;height:48px;margin-bottom:16px}.result-title{color:#1e293b;letter-spacing:-.5px;margin:0;font-size:20px;font-weight:700}.result-loading-state{color:#64748b;flex-direction:column;justify-content:center;align-items:center;padding:40px 0;font-weight:500;display:flex}.spinner{border:3px solid #3b82f61a;border-top-color:#3b82f6;border-radius:50%;width:40px;height:40px;margin-bottom:20px;animation:1s ease-in-out infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.result-error-state{text-align:center;padding:20px 0}.error-icon-wrapper{background:#fef2f2;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;margin:0 auto 20px;display:flex;box-shadow:0 10px 15px -3px #ef444433}.result-error-state h2{color:#ef4444;margin-bottom:12px;font-size:24px}.result-error-state p{color:#64748b;word-wrap:break-word;overflow-wrap:break-word;margin-bottom:24px}.result-success-state{flex-direction:column;gap:24px;animation:.5s ease-out forwards slideUpFade;display:flex}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.status-banner{letter-spacing:.5px;border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:12px;font-size:16px;font-weight:700;display:flex}.status-banner.valid{color:#166534;background:#dcfce7;border:1px solid #bbf7d0}.status-banner.locked{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.student-profile-card{text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:20px;padding:24px;box-shadow:0 4px 6px -1px #00000005}.profile-avatar-wrapper{background:linear-gradient(135deg,#3b82f6 0%,#1e3a8a 100%);border-radius:50%;width:120px;height:120px;margin:0 auto 16px;padding:4px;box-shadow:0 10px 25px -5px #3b82f666}.profile-avatar{object-fit:cover;background:#fff;border:2px solid #fff;border-radius:50%;width:100%;height:100%}.profile-name{color:#0f172a;word-wrap:break-word;overflow-wrap:break-word;margin:0 0 4px;font-size:24px;font-weight:800}.profile-id{color:#3b82f6;word-wrap:break-word;overflow-wrap:break-word;background:#eff6ff;border-radius:20px;max-width:100%;margin-bottom:24px;padding:4px 12px;font-size:14px;font-weight:600;display:inline-block}.profile-details{text-align:left;grid-template-columns:1fr;gap:12px;margin-bottom:24px;display:grid}.detail-item{background:#fff;border:1px solid #e2e8f0;border-radius:12px;align-items:center;gap:12px;padding:12px 16px;display:flex}.detail-icon{color:#3b82f6;flex-shrink:0}.detail-label{color:#64748b;margin-bottom:2px;font-size:12px;font-weight:500}.detail-value{color:#1e293b;word-wrap:break-word;overflow-wrap:break-word;font-size:15px;font-weight:600}.security-notice{color:#64748b;text-align:left;background:#f1f5f9;border-radius:12px;align-items:flex-start;gap:10px;padding:12px;font-size:12px;line-height:1.5;display:flex}.security-notice svg{color:#10b981;flex-shrink:0;margin-top:2px}.btn-block{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);border:none;border-radius:12px;justify-content:center;align-items:center;width:100%;padding:14px;font-size:16px;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 14px #2563eb4d}.btn-block:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2563eb66}.btn-secondary{color:#475569;background:#fff;border:1px solid #e2e8f0}.btn-secondary:hover{color:#1e293b;background:#f8fafc}@media (width<=768px){.result-page-container{align-items:flex-start;padding:24px 16px 16px}.result-glass-panel{border-radius:20px;padding:24px}.result-header{margin-bottom:24px}.result-logo{height:40px;margin-bottom:12px}.result-title{font-size:18px}.error-icon-wrapper{width:80px;height:80px}.result-error-state h2{font-size:20px}.profile-avatar-wrapper{width:100px;height:100px}.profile-name{font-size:20px}.student-profile-card{border-radius:16px;padding:20px}.result-success-state{gap:20px}}@media (width<=480px){.result-page-container{padding:16px 12px 12px}.result-glass-panel{border-radius:18px;padding:20px}.result-header{margin-bottom:20px}.result-logo{height:36px;margin-bottom:10px}.result-title{font-size:16px}.error-icon-wrapper{width:72px;height:72px}.error-icon-wrapper svg{width:40px;height:40px}.result-error-state h2{margin-bottom:8px;font-size:18px}.result-error-state p{margin-bottom:20px;font-size:14px}.status-banner{border-radius:10px;gap:8px;padding:10px;font-size:14px}.profile-avatar-wrapper{width:88px;height:88px;margin-bottom:12px}.profile-name{font-size:18px}.profile-id{margin-bottom:16px;padding:3px 10px;font-size:12px}.student-profile-card{border-radius:14px;padding:16px}.detail-item{border-radius:10px;gap:10px;padding:10px 12px}.detail-label{font-size:11px}.detail-value{font-size:13px}.security-notice{border-radius:10px;gap:8px;padding:10px;font-size:11px}.btn-block{border-radius:10px;padding:12px;font-size:14px}.result-success-state{gap:16px}}@media (width<=360px){.result-glass-panel{border-radius:16px;padding:16px}.result-title{font-size:15px}.profile-avatar-wrapper{width:76px;height:76px}.profile-name{font-size:16px}.detail-item{flex-direction:column;align-items:flex-start;gap:4px}.detail-icon{display:none}}.staff-scanner-page{max-width:900px;min-height:80vh;margin:0 auto;padding:24px;font-family:Inter,sans-serif}.staff-login-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;background:#fffffff2;border:1px solid #fff6;border-radius:24px;max-width:420px;margin:100px auto;padding:40px;box-shadow:0 25px 50px -12px #00000040}.staff-login-container h2{color:#0f172a;margin-bottom:8px;font-size:26px;font-weight:800}.login-form{flex-direction:column;gap:20px;margin-top:24px;display:flex}.form-group{text-align:left}.form-group label{color:#334155;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.form-group input{background:#f8fafc;border:1px solid #cbd5e1;border-radius:12px;width:100%;padding:14px 16px;font-size:16px;transition:all .2s}.form-group input:focus{background:#fff;border-color:#3b82f6;outline:none;box-shadow:0 0 0 4px #3b82f626}.scanner-header-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;margin-bottom:24px;padding:24px 24px 0;box-shadow:0 4px 20px #0000000d}.scanner-header-top{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.scanner-header-top h2{color:#0f172a;align-items:center;gap:10px;margin:0;font-size:24px;font-weight:800;display:flex}.logout-btn{color:#475569;cursor:pointer;background:#f1f5f9;border:none;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s}.logout-btn:hover{color:#ef4444;background:#e2e8f0}.scanner-tabs{gap:8px;padding-bottom:16px;display:flex}.tab-btn{color:#64748b;cursor:pointer;background:#f8fafc;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:8px;padding:14px;font-size:15px;font-weight:700;transition:all .2s;display:flex}.tab-btn.active{color:#3b82f6;background:#eff6ff;box-shadow:0 4px 12px #3b82f626}.tab-btn:hover:not(.active){background:#f1f5f9}.scanner-body-wrap{background:#0f172a;border-radius:24px;margin-bottom:32px;padding:8px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0003}.scanner-body-wrap:before{content:"";z-index:0;background:conic-gradient(#0000,#3b82f6cc,#0000 30%);width:200%;height:200%;animation:4s linear infinite rotate;position:absolute;top:-50%;left:-50%}@keyframes rotate{to{transform:rotate(360deg)}}.scanner-inner{z-index:1;background:#0f172a;border-radius:18px;padding:16px;position:relative;overflow:hidden}#reader{background:#000;border-radius:12px;overflow:hidden;border:none!important}#reader__dashboard_section_csr span{color:#fff!important}#reader button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);border:none;border-radius:8px;margin:4px;padding:10px 20px;font-weight:600;transition:transform .2s;box-shadow:0 4px 10px #3b82f64d}#reader button:hover{transform:translateY(-2px)}.qr-student-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #fffc;border-radius:24px;margin-bottom:24px;animation:.5s cubic-bezier(.4,0,.2,1) cardEntrance;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000026,inset 0 1px #fff9,0 0 20px #3b82f61a}@keyframes cardEntrance{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.qr-student-card.locked{background:#fef2f2f2;border-color:#fca5a5;box-shadow:0 20px 40px #ef444426,inset 0 0 0 2px #ef4444}.card-header{background:linear-gradient(90deg,#f8fafc 0%,#f1f5f9 100%);border-bottom:1px solid #0000000d;justify-content:center;padding:16px 24px;display:flex}.status-badge{letter-spacing:.5px;border-radius:20px;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:800;display:flex;box-shadow:0 4px 10px #0000001a}.status-badge.valid{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%)}.status-badge.locked{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);animation:2s infinite pulse-red}.card-body{align-items:center;gap:32px;padding:32px 24px;display:flex}@media (width<=640px){.card-body{text-align:center;flex-direction:column}}.student-avatar-wrap{background:#f1f5f9;border:4px solid #fff;border-radius:20px;flex-shrink:0;width:140px;height:180px;position:relative;overflow:hidden;box-shadow:0 15px 30px #00000026}.student-avatar{object-fit:cover;width:100%;height:100%}.info-grid{text-align:left;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:20px;display:grid}.info-item{background:#f8fafccc;border:1px solid #e2e8f0;border-radius:12px;align-items:flex-start;gap:12px;padding:12px 16px;transition:all .2s;display:flex}.info-item:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 16px #0000000a}.info-icon{color:#3b82f6;flex-shrink:0;margin-top:2px}.info-text{flex-direction:column;display:flex}.info-label{color:#64748b;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.info-value{color:#0f172a;font-size:15px;font-weight:700}.card-footer{background:#f8fafccc;border-top:1px solid #0000000d;padding:24px}.attendance-panel{background:#fff;border:1px solid #e2e8f0;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px #0000000d}.attendance-table{border-collapse:collapse;width:100%}.attendance-table th{color:#475569;text-transform:uppercase;letter-spacing:.5px;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:16px;font-size:13px;font-weight:700}.attendance-table td{vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:16px}.attendance-table tr:hover{background:#f8fafc}.status-pill{border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex}.status-pill.in{color:#166534;background:#dcfce7}.status-pill.out{color:#854d0e;background:#fef08a}