*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2)}#root{height:100%;width:100%;overflow:hidden}.app{height:100vh;width:100vw;display:flex;flex-direction:column;overflow:hidden}.app-header{background:#667eea26;color:#fff;padding:1.25rem 2rem;box-shadow:0 8px 32px #0000001a,inset 0 1px #fff3,inset 0 -1px #ffffff0d;backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);position:relative;z-index:100;border-bottom:1px solid rgba(255,255,255,.18);overflow:hidden;display:flex;justify-content:space-between}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea1a,#764ba214),radial-gradient(circle at 20% 30%,rgba(255,255,255,.15) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.1) 0%,transparent 40%);pointer-events:none;z-index:0}.app-header:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);pointer-events:none;z-index:1}.app-header>*{position:relative;z-index:1}.app-header h1{font-size:1.75rem;margin-bottom:.875rem;font-weight:700;letter-spacing:-.5px;color:#fffffff2;text-shadow:0 2px 8px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.1)}.status-bar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.status-indicator{font-size:.9rem;font-weight:600;padding:.625rem 1.125rem;border-radius:2rem;background:#ffffff1f;backdrop-filter:blur(16px) saturate(200%);-webkit-backdrop-filter:blur(16px) saturate(200%);border:1px solid rgba(255,255,255,.25);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #00000014,inset 0 1px #ffffff40,inset 0 -1px #ffffff0d;display:flex;align-items:center;gap:.5rem;letter-spacing:.3px}.status-indicator:before{content:"";width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor;animation:pulse 2s ease-in-out infinite}.status-indicator.online{background:#2ecc7126;border-color:#2ecc7159;color:#2ecc71f2}.status-indicator.online:before{background-color:#2ecc71e6;box-shadow:0 0 10px #2ecc7199}.status-indicator.offline{background:#e74c3c26;border-color:#e74c3c59;color:#e74c3cf2}.status-indicator.offline:before{background-color:#e74c3ce6;box-shadow:0 0 10px #e74c3c99}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}.pending-indicator{font-size:.875rem;padding:.625rem 1.125rem;border-radius:2rem;background:#f1c40f26;color:#f1c40ff2;backdrop-filter:blur(16px) saturate(200%);-webkit-backdrop-filter:blur(16px) saturate(200%);border:1px solid rgba(241,196,15,.35);font-weight:600;box-shadow:0 4px 16px #f1c40f1f,inset 0 1px #ffffff40,inset 0 -1px #ffffff0d;letter-spacing:.3px;transition:all .3s cubic-bezier(.4,0,.2,1)}.pending-indicator:hover{transform:translateY(-1px);background:#f1c40f2e;box-shadow:0 6px 20px #f1c40f26,inset 0 1px #ffffff4d,inset 0 -1px #ffffff0d}.app-main{flex:1;display:flex;flex-direction:column;padding:0;width:100%;height:100%;overflow:hidden;min-height:0}.scanner-section{background:transparent;border-radius:0;padding:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}.scanner-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.toast-container{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;width:100%;max-width:600px;padding:0 1rem}.toast{position:relative;background:#fffffff2;backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:24px;padding:1.5rem 2rem;box-shadow:0 20px 60px #0000004d,0 8px 32px #00000026,inset 0 1px #fff9,inset 0 -1px #fff3;border:1px solid rgba(255,255,255,.4);pointer-events:auto;transition:all .4s cubic-bezier(.34,1.56,.64,1);transform-origin:top center}.toast-visible{opacity:1;transform:translateY(0) scale(1)}.toast-hidden{opacity:0;transform:translateY(-20px) scale(.95)}.toast-content{position:relative;z-index:2;display:flex;align-items:center;gap:1rem}.toast-icon{font-size:1.25rem;font-weight:700;width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.toast-icon-check{background-color:#2ecc71;color:#fff}.toast-icon-warning{background-color:#e74c3c;color:#fff;font-size:1.375rem}.toast-message{font-size:1rem;font-weight:500;color:#1a1a1a;line-height:1.5}.toast-success{border:1px solid rgba(255,255,255,.4);border-left:4px solid #2ecc71}.toast-error,.toast-info{border:2px solid #e74c3c;box-shadow:0 20px 60px #0000004d,0 8px 32px #00000026,0 0 0 1px #e74c3c33,inset 0 1px #fff9,inset 0 -1px #fff3}.toast-info{border-color:#e74c3c}.qr-scanner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;width:100%;height:100%;position:relative;overflow:hidden}.qr-scanner-container{width:100%;height:100%;border-radius:0;overflow:hidden;background-color:#000;box-shadow:none;border:none;position:relative;display:block}#qr-reader{width:100%!important;height:100%!important;position:relative}#qr-reader__dashboard_section,#qr-shaded-region,#qr-reader__camera_selection{display:none}#qr-reader__scan_region{width:100%!important;height:100%!important;position:relative}#qr-reader__scan_region video{width:100%!important;height:100%!important;object-fit:cover!important}#qr-reader__scan_region_canvas,#qr-reader__scan_region_canvas_clipper{z-index:10!important;position:absolute!important;pointer-events:none!important}#qr-reader__scan_region_canvas_clipper>div{border:3px solid #00ff00!important;box-shadow:0 0 0 9999px #00000080!important;border-radius:8px!important;display:block!important;visibility:visible!important;opacity:1!important}#qr-reader__scan_region_canvas_clipper canvas{border:3px solid #00ff00!important;box-shadow:0 0 0 9999px #00000080!important;border-radius:8px!important;display:block!important;visibility:visible!important;opacity:1!important}#qr-reader__scan_region_canvas_clipper,#qr-reader__scan_region_canvas_clipper *{display:block!important;visibility:visible!important;opacity:1!important}.viewfinder-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:100}.viewfinder-box{position:relative;border:3px solid #00ff00;border-radius:12px;box-shadow:0 0 0 9999px #00000080,0 0 20px #00ff0080,inset 0 0 20px #0f03;background:transparent}.viewfinder-corner{position:absolute;width:30px;height:30px;border:4px solid #00ff00}.viewfinder-corner-top-left{top:-4px;left:-4px;border-right:none;border-bottom:none;border-top-left-radius:12px}.viewfinder-corner-top-right{top:-4px;right:-4px;border-left:none;border-bottom:none;border-top-right-radius:12px}.viewfinder-corner-bottom-left{bottom:-4px;left:-4px;border-right:none;border-top:none;border-bottom-left-radius:12px}.viewfinder-corner-bottom-right{bottom:-4px;right:-4px;border-left:none;border-top:none;border-bottom-right-radius:12px}.scanner-controls{display:flex;gap:1rem;position:fixed;bottom:5px;right:5px;z-index:200;pointer-events:auto}.scanner-controls .btn{background:transparent;box-shadow:none}.scanner-controls .btn:hover,.scanner-controls .btn:focus{background:transparent;box-shadow:none}.btn{padding:15px;font-size:1.15rem;font-weight:300;border:none;border-radius:1rem;cursor:pointer;min-width:180px;touch-action:manipulation;box-shadow:0 4px 12px #00000026;letter-spacing:.5px}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{background:linear-gradient(135deg,#764ba2,#667eea);transform:translateY(-3px);box-shadow:0 8px 20px #667eea66}.btn-primary:active{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.btn-secondary{background:linear-gradient(135deg,#95a5a6,#7f8c8d);color:#fff}.btn-secondary:hover{background:linear-gradient(135deg,#7f8c8d,#95a5a6);transform:translateY(-3px);box-shadow:0 8px 20px #95a5a666}.btn-secondary:active{transform:translateY(-1px);box-shadow:0 4px 12px #95a5a64d}.error-message{color:#e74c3c;font-size:1rem;padding:1rem;background-color:#ffeeeef2;border-radius:.5rem;border:1px solid #e74c3c;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:300;max-width:90%;box-shadow:0 4px 12px #0000004d}.scan-notification-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:2000;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1)}.scan-notification-overlay:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0000004d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}.scan-notification-visible{opacity:1}.scan-notification-hidden{opacity:0}.scan-notification{position:relative;z-index:1;background:#fffffff2;backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:24px;padding:2rem 2.5rem;box-shadow:0 20px 60px #0000004d,0 8px 32px #00000026,inset 0 1px #fff9,inset 0 -1px #fff3;border:1px solid rgba(255,255,255,.4);max-width:90%;width:auto;min-width:320px;max-width:600px;pointer-events:auto;transform-origin:center;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.scan-notification-visible .scan-notification{transform:scale(1) translateY(0)}.scan-notification-hidden .scan-notification{transform:scale(.9) translateY(-20px)}.scan-notification:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d),radial-gradient(circle at 30% 30%,rgba(102,126,234,.1) 0%,transparent 50%),radial-gradient(circle at 70% 70%,rgba(118,75,162,.08) 0%,transparent 50%);border-radius:24px;pointer-events:none;z-index:0}.scan-notification:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);border-radius:24px 24px 0 0;pointer-events:none;z-index:1}.scan-notification-content{position:relative;z-index:2;color:#1a1a1a;font-size:1.125rem;font-weight:500;line-height:1.6;text-align:center}.scan-notification-content h4{margin:0;font-size:1.25rem;font-weight:600;color:#2c3e50;line-height:1.5}.scan-notification-content div{margin:0}.scan-notification-content *{margin:0;padding:0}@media (min-width: 768px){.scan-notification{padding:2.5rem 3rem;border-radius:28px}.scan-notification-content{font-size:1.25rem}.scan-notification-content h4{font-size:1.375rem}}@media (min-width: 1024px){.scan-notification{padding:3rem 3.5rem;border-radius:32px}.scan-notification-content{font-size:1.375rem}.scan-notification-content h4{font-size:1.5rem}}@media (min-width: 768px){.app-header h1{font-size:1.75rem}.toast-container{top:1.5rem;max-width:700px}}@media (min-width: 1024px){.app-header h1{font-size:2rem}.toast-container{top:2rem;max-width:800px}}