@import"https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Doto:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap";:root{--bg-deep: #060918;--bg-mid: #0d1129;--bg-card: #141937;--bg-glass: rgba(20, 25, 55, .6);--accent: #fcff2c;--accent-glow: rgba(252, 255, 44, .15);--accent-dim: #d4d626;--text: #ffffff;--text-muted: #6b7294;--text-soft: #a0a8c8;--danger: #ff3b5c;--danger-glow: rgba(255, 59, 92, .15);--success: #00e676;--success-glow: rgba(0, 230, 118, .15);--radius-sm: 12px;--radius-md: 20px;--radius-lg: 32px;--radius-xl: 48px;--font-display: "Outfit", sans-serif;--font-mono: "Space Mono", monospace;--font-doto: "Doto", sans-serif;--font-inter: "Inter", sans-serif;--font-arabic: "Cairo", sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--bg-deep);color:var(--text);font-family:var(--font-display);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}html[dir=rtl],html[dir=rtl] .brand h1,html[dir=rtl] .instruction,html[dir=rtl] .landing-island,html[dir=rtl] .landing-title,html[dir=rtl] .landing-tagline,html[dir=rtl] .liquid-glass-content,html[dir=rtl] .btn,html[dir=rtl] .btn-back,html[dir=rtl] .btn-confirm,html[dir=rtl] .btn-retry,html[dir=rtl] .btn-register,html[dir=rtl] .result-name,html[dir=rtl] .result-message,html[dir=rtl] .confirm-card .emp-name,html[dir=rtl] .confirm-card label,html[dir=rtl] .step-label,html[dir=rtl] .lang-toggle,html[dir=rtl] .clock-date,html[dir=rtl] .weather-feels,html[dir=rtl] .weather-label{font-family:var(--font-arabic)}body:before{content:"";position:fixed;inset:0;background:url(/assets/background-3ku3vh2O.png) center / cover no-repeat;pointer-events:none;z-index:0}#root{height:100%;position:relative;z-index:1}.page{display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;height:100%;padding:48px 32px;gap:16px}.brand{text-align:center}.brand h1{font-family:var(--font-display);font-weight:700;font-size:56px;letter-spacing:-1px;color:var(--text)}.brand span{font-family:var(--font-mono);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--text-muted)}.instruction{font-size:22px;font-weight:400;color:var(--text-soft);text-align:center;line-height:1.4}.camera-portal{position:relative;top:20px;right:1px;width:35vw;height:28.96vh;clip-path:url(#window-clip);align-self:center;justify-self:center}.camera-portal video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-portal .camera-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-card);color:var(--text-muted);font-size:15px;text-align:center;padding:40px}.camera-portal .countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#06091899;font-family:var(--font-display);font-weight:700;font-size:96px;color:var(--accent);text-shadow:0 0 40px rgba(243,255,114,.4);animation:countdown-pulse 1s ease-in-out infinite}@keyframes countdown-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}.camera-portal .processing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#060918b3}.spinner{width:48px;height:48px;border:3px solid rgba(243,255,114,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.camera-portal.face-detected{filter:drop-shadow(0 0 6px var(--success)) drop-shadow(0 0 20px rgba(0,230,118,.3));transition:filter .3s}.face-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.face-guide-ring{width:60%;height:60%;border-radius:50%;border:2px dashed rgba(255,255,255,.2);animation:guide-pulse 2s ease-in-out infinite}@keyframes guide-pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.03)}}.btn-row{display:flex;gap:20px;width:100%;max-width:520px}.btn{flex:1;height:88px;border:2px solid var(--accent);border-radius:var(--radius-lg);background:transparent;color:var(--accent);font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:1px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;transition:opacity .3s ease}.btn:active:before{opacity:.15}.btn:active{transform:scale(.97);box-shadow:0 0 30px #f3ff7233}.btn-register{background:none;border:none;color:var(--text-muted);font-family:var(--font-mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;padding:12px 24px;transition:color .3s}.btn-register:active{color:var(--accent)}.page-footer{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;align-self:end}.btn-back{position:absolute;top:40px;left:32px;background:var(--accent);border:none;color:var(--bg-deep);font-family:var(--font-display);font-size:15px;padding:10px 20px;border-radius:var(--radius-md);cursor:pointer;transition:all .3s;z-index:10}.btn-back:active{border-color:var(--accent);color:var(--accent)}.result-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px;padding:48px}.result-icon{width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:64px;animation:result-pop .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes result-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.result-icon.success{background:var(--success-glow);border:2px solid var(--success);color:var(--success);box-shadow:0 0 60px #00e67626}.result-icon.failure{background:var(--danger-glow);border:2px solid var(--danger);color:var(--danger);box-shadow:0 0 60px #ff3b5c26}.result-name{font-size:42px;font-weight:700;animation:result-fade .5s ease .2s both}.result-message{font-size:20px;color:var(--text-muted);animation:result-fade .5s ease .3s both}.result-time{font-family:var(--font-mono);font-size:24px;color:var(--text-muted);letter-spacing:2px;animation:result-fade .5s ease .35s both}.result-countdown{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);opacity:.5;letter-spacing:1px;margin-top:24px;animation:result-fade .5s ease .5s both}.btn-retry{margin-top:8px;padding:14px 40px;border:1px solid var(--danger);border-radius:var(--radius-lg);background:var(--danger-glow);color:var(--danger);font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .3s;animation:result-fade .5s ease .4s both}.btn-retry:active{transform:scale(.97);background:#ff3b5c40}@keyframes result-fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.event-badge{display:inline-block;padding:8px 28px;border-radius:var(--radius-lg);font-family:var(--font-mono);font-weight:700;font-size:18px;letter-spacing:3px;text-transform:uppercase;animation:result-fade .5s ease .4s both}.event-badge.in{background:var(--success-glow);border:1px solid var(--success);color:var(--success)}.event-badge.out{background:var(--danger-glow);border:1px solid var(--danger);color:var(--danger)}.step-indicator{display:flex;gap:12px;align-items:center}.step-dot{width:10px;height:10px;border-radius:50%;background:var(--text-muted);transition:all .3s}.step-dot.active{background:var(--accent);box-shadow:0 0 12px #f3ff7266}.step-dot.done{background:var(--success)}.step-label{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted)}.card-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:420px}.card-type-btn{padding:18px 16px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);background:var(--bg-glass);color:var(--text-soft);font-family:var(--font-display);font-size:15px;font-weight:500;cursor:pointer;transition:all .3s;text-align:center}.card-type-btn:active,.card-type-btn.selected{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.confirm-card{background:var(--bg-glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:28px 32px;text-align:center;width:100%;max-width:420px}.confirm-card .id-number{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--accent);margin:8px 0}.confirm-card .emp-name{font-size:22px;color:var(--text);margin-bottom:4px}.confirm-card label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted)}.btn-confirm{width:100%;max-width:420px;height:64px;border:none;border-radius:var(--radius-lg);background:var(--accent);color:var(--bg-deep);font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .3s}.btn-confirm:active{transform:scale(.97);opacity:.9}.info-bar{display:grid;grid-template-columns:1fr 1.5fr 1fr;grid-column-gap:0;align-items:center;position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#fcff2cf2,#e4e714eb);padding:14px 18px;border-radius:50px;box-shadow:0 -4px 24px #fcff2c1f,0 8px 32px #0000002e,inset 0 1px #fff6;margin:40px 36px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.info-bar-section{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:8px;padding:0 20px;position:relative;font-family:var(--font-inter);font-size:16px;font-weight:600;color:#0d1129}.info-bar-section:not(:last-child):after{content:"";position:absolute;right:0;top:15%;height:70%;width:2px;background:#060918;border-radius:1px}.info-bar-section svg{font-size:20px;color:var(--bg-deep);opacity:1}.weather-section{padding-right:0}.weather-stack{display:flex;flex-direction:column;align-items:center;gap:4px}.weather-top{display:flex;align-items:center;gap:8px}.weather-icon{font-size:30px!important;opacity:1!important;color:var(--bg-deep)!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.weather-temp{font-family:var(--font-doto);font-size:22px;font-weight:800;color:var(--bg-deep);letter-spacing:.5px}.weather-feels{font-family:var(--font-inter);font-size:10px;font-weight:400;color:var(--danger);opacity:1;letter-spacing:.5px}.weather-bottom{display:flex;gap:20px}.weather-stat{display:flex;flex-direction:column;align-items:center;gap:1px}.weather-label{font-family:var(--font-inter);font-size:9px;font-weight:400;color:var(--bg-deep);opacity:1;text-transform:uppercase;letter-spacing:.8px}.weather-value{font-family:var(--font-doto);font-size:11px;font-weight:700;color:var(--danger);opacity:1}.clock-stack{display:flex;flex-direction:column;align-items:center;gap:1px}.clock-time{font-family:var(--font-doto);font-size:20px;font-weight:800;color:var(--bg-deep);letter-spacing:2px}.clock-date{font-family:var(--font-inter);font-size:11px;font-weight:400;color:var(--danger);opacity:1;letter-spacing:.5px;text-transform:uppercase}.flight-code{font-family:var(--font-doto);font-size:20px;font-weight:800;color:var(--danger);letter-spacing:2px}.flight-grid{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding-left:inherit;padding-right:inherit}.flight-col{display:flex;flex-direction:column;align-items:center;gap:2px}.flight-middle{position:relative;display:flex;align-items:center;justify-content:center;color:var(--bg-deep);flex:1}.flight-arc{width:100%;height:36px;color:var(--bg-deep);font-size:unset!important;opacity:1!important;overflow:visible}.flight-plane-icon{position:absolute;top:2px;left:41%;font-size:22px;color:var(--bg-deep);transform:rotate(44deg)}.flight-time{font-family:var(--font-doto);font-size:12px;font-weight:700;color:var(--bg-deep);opacity:1}.flight-sep{font-size:11px;color:var(--bg-deep);opacity:1}.lang-toggle{position:absolute;top:44px;right:36px;background:var(--accent);border:none;border-radius:50%;width:48px;height:48px;color:var(--bg-deep);font-family:var(--font-display);font-size:13px;font-weight:700;padding:0;cursor:pointer;transition:all .3s;z-index:10;letter-spacing:0;display:flex;align-items:center;justify-content:center}.lang-toggle:active{transform:scale(.92);opacity:.85}.landing-active{cursor:default}.landing-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;grid-row:1 / -1;grid-column:1 / -1;width:100%;height:100%}.landing-header{text-align:center;position:absolute;top:180px;left:0;right:0}.landing-island{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--text-soft);display:block;margin-bottom:14px}.landing-title{font-family:var(--font-display);font-weight:900;font-size:96px;letter-spacing:6px;text-transform:uppercase;color:#fff;line-height:1}.landing-tagline{font-family:var(--font-display);font-size:22px;font-weight:300;color:var(--text-soft);margin-top:20px;letter-spacing:1px}.landing-prompt{position:relative;margin-top:0;padding:20px 48px;cursor:pointer;border-radius:50px;overflow:hidden;background:#0000001f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.212);box-shadow:0 8px 32px #0000001a,inset 0 1px #ffffff80,inset 0 -1px #ffffff1a,inset 0 0 32px 16px #ffffff0f;transition:transform .2s ease,box-shadow .2s ease;animation:glass-breathe 3s ease-in-out infinite}.landing-prompt:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);pointer-events:none}.landing-prompt:after{content:"";position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent,rgba(255,255,255,.3));pointer-events:none}.liquid-glass-effect{position:absolute;inset:0;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);filter:url(#glass-distortion);overflow:hidden;pointer-events:none}.liquid-glass-highlight{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#ffffff26,#ffffff08 45%,#fff0 60%);pointer-events:none}.liquid-glass-content{position:relative;z-index:1;font-family:var(--font-mono);font-size:18px;font-weight:500;letter-spacing:2px;color:#fffffff2;text-shadow:0 1px 3px rgba(0,0,0,.2)}.landing-content>svg{position:absolute;width:0;height:0}.landing-prompt:active{transform:scale(.97);box-shadow:0 2px 12px #00000026,inset 0 1px #ffffff4d,inset 0 -1px #ffffff0d,inset 0 0 24px 12px #ffffff0a}@keyframes glass-breathe{0%,to{opacity:.65}50%{opacity:1}}.brand h1{font-size:clamp(32px,5vw,56px)}.brand span{font-size:clamp(10px,1.4vw,14px)}.instruction{font-size:clamp(16px,2.2vw,22px)}.landing-title{font-size:clamp(40px,10vw,96px)}.landing-island{font-size:clamp(12px,1.8vw,18px)}.landing-tagline{font-size:clamp(14px,2.2vw,22px)}.liquid-glass-content{font-size:clamp(14px,1.8vw,18px)}.result-name{font-size:clamp(24px,4.5vw,42px)}.result-message{font-size:clamp(14px,2vw,20px)}.result-time{font-size:clamp(16px,2.4vw,24px)}.btn{font-size:clamp(16px,2.2vw,22px);height:clamp(56px,9vw,88px)}.confirm-card .id-number{font-size:clamp(20px,2.8vw,28px)}.confirm-card .emp-name{font-size:clamp(16px,2.2vw,22px)}.btn-confirm{font-size:clamp(14px,1.8vw,18px);height:clamp(48px,6.5vw,64px)}.countdown{font-size:clamp(48px,10vw,96px)}.clock-time{font-size:clamp(14px,2vw,20px)}.clock-date{font-size:clamp(8px,1.1vw,11px)}.flight-code{font-size:clamp(12px,2vw,20px)}.flight-time{font-size:clamp(9px,1.2vw,12px)}.flight-plane-icon{font-size:clamp(14px,2.2vw,22px)}.flight-arc{height:clamp(20px,3.5vw,36px)}.weather-temp{font-size:clamp(14px,2.2vw,22px)}.weather-icon{font-size:clamp(20px,3vw,30px)!important}.weather-feels{font-size:clamp(7px,1vw,10px)}.weather-label{font-size:clamp(6px,.9vw,9px)}.weather-value{font-size:clamp(8px,1.1vw,11px)}.weather-bottom{gap:clamp(6px,2vw,20px)}.info-bar{margin:clamp(8px,4vw,40px) clamp(12px,3.5vw,36px);padding:clamp(8px,1.4vw,14px) clamp(10px,1.8vw,18px)}.page{padding:clamp(24px,4vh,48px) clamp(16px,3vw,32px)}.result-page{padding:clamp(24px,4vh,48px)}.camera-portal{width:clamp(200px,35vw,500px);height:clamp(180px,29vh,400px)}.result-icon{width:clamp(80px,14vw,140px);height:clamp(80px,14vw,140px);font-size:clamp(36px,6.5vw,64px)}@media(max-width:900px){.page{gap:12px}.btn-row{max-width:100%;gap:12px}.landing-header{top:clamp(80px,15vh,180px)}.landing-prompt{padding:16px 36px}.info-bar{grid-template-columns:1fr 1.5fr 1fr;padding:10px 16px;margin:16px 20px;border-radius:30px}.info-bar-section{padding:0 10px;gap:5px}.clock-time{font-size:16px;letter-spacing:1px}.clock-date{font-size:9px}.flight-code{font-size:14px;letter-spacing:1px}.flight-time{font-size:10px}.flight-plane-icon{font-size:18px}.flight-arc{height:28px}.weather-temp{font-size:16px}.weather-icon{font-size:24px!important}.weather-label{font-size:7px}.weather-value{font-size:9px}.weather-bottom{gap:8px}.weather-feels{font-size:8px}.lang-toggle{width:40px;height:40px;font-size:12px;top:24px;right:20px}.btn-back{top:24px;left:20px;font-size:13px;padding:8px 16px}.card-type-grid{max-width:100%}.confirm-card{max-width:100%;padding:20px 24px}.btn-confirm{max-width:100%}}@media(max-width:600px){.page{padding:16px 12px;gap:8px}.camera-portal{width:70vw;height:35vh}.btn-row{flex-direction:column;gap:10px}.btn{height:56px}.info-bar{grid-template-columns:1fr;grid-template-rows:auto auto auto;border-radius:20px;padding:12px 16px;margin:12px;gap:6px}.info-bar-section{padding:6px 0}.info-bar-section:not(:last-child):after{top:unset;bottom:0;right:10%;left:10%;width:80%;height:1px}.flight-grid{padding-left:10px;padding-right:10px}.flight-code{font-size:16px}.flight-time{font-size:11px}.flight-plane-icon{font-size:18px}.flight-arc{height:28px}.weather-bottom{flex-wrap:wrap;justify-content:center}.landing-header{top:clamp(40px,8vh,100px)}.landing-prompt{padding:14px 28px}.lang-toggle{width:36px;height:36px;font-size:11px;top:16px;right:12px}.btn-back{top:16px;left:12px;font-size:12px;padding:6px 12px;border-radius:var(--radius-sm)}.btn-register{font-size:11px;padding:8px 16px}.page-footer{gap:10px}.result-page{gap:16px}.result-countdown{margin-top:12px}.btn-retry{padding:10px 28px;font-size:14px}.event-badge{font-size:14px;padding:6px 20px}}@media(max-width:380px){.landing-title{letter-spacing:2px}.landing-island{letter-spacing:2px;margin-bottom:8px}.info-bar{margin:8px;padding:10px 12px}.camera-portal{width:80vw;height:30vh}}@media(orientation:landscape)and (max-height:600px){.page{padding:12px 24px;gap:8px}.camera-portal{width:30vh;height:50vh}.landing-header{top:10px}.landing-title{font-size:clamp(28px,6vh,48px)}.landing-island{font-size:10px;margin-bottom:4px}.landing-tagline{font-size:12px;margin-top:6px}.info-bar{padding:8px 16px;margin:8px 20px;border-radius:24px}.flight-plane-icon{font-size:16px}.flight-arc{height:24px}.flight-code{font-size:12px;letter-spacing:1px}.flight-time{font-size:9px}.clock-time{font-size:14px}.clock-date{font-size:8px}.weather-temp{font-size:14px}.weather-icon{font-size:20px!important}.weather-label{font-size:6px}.weather-value{font-size:8px}.weather-feels{font-size:7px}.weather-bottom{gap:6px}.result-page{gap:12px;padding:16px}.result-icon{width:60px;height:60px;font-size:28px}.btn{height:48px}.btn-confirm{height:44px}}