*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#000;color:#fff;height:100vh;width:100vw;overflow:hidden;position:relative}.app-container{position:relative;height:100vh;width:100vw;overflow:hidden}.logo-container{position:absolute;top:20px;left:20px;z-index:100;display:flex;align-items:center}.logo-bg{background-color:#f5f6fe;width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px #0003}.logo-img{width:32px;height:32px}.app-title{color:#fff;margin-left:12px;font-size:18px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}.camera-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}video{width:100%;height:100%;object-fit:cover}canvas{display:none}.camera-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;display:flex;justify-content:center;align-items:center}.captured-image-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background-color:#000;display:none}.captured-image{width:100%;height:100%;object-fit:contain}.debug-bar{position:absolute;bottom:0;left:0;width:100%;background-color:#000000b3;padding:8px 16px;font-size:12px;color:#aaa;z-index:30;display:flex;justify-content:space-between;align-items:center;height:40px;transform:translateY(100%);transition:transform .3s ease}.show-debug .debug-bar{transform:translateY(0)}.debug-status{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.debug-controls{display:flex;gap:16px}.match-notification{position:absolute;top:-100px;left:50%;transform:translate(-50%);width:90%;max-width:400px;background-color:#fff;border-radius:12px;padding:16px;box-shadow:0 5px 25px #0000004d;z-index:50;transition:top .5s cubic-bezier(.175,.885,.32,1.275);opacity:0;pointer-events:none}.match-notification.show{top:80px;opacity:1;pointer-events:auto}.match-title{font-weight:700;font-size:1.2rem;margin-bottom:8px;color:#333}.match-subtitle{color:#666;font-size:.9rem;margin-bottom:16px}.timer-bar-container{width:100%;height:4px;background-color:#444aff33;border-radius:2px;margin-top:12px;overflow:hidden}.timer-bar{height:100%;width:100%;background-color:#444aff;transform-origin:left;transition:transform .1s linear}.match-button{background-color:#444aff;color:#fff;border:none;border-radius:8px;padding:12px 16px;width:100%;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;justify-content:center;align-items:center;gap:8px;animation:pulse 2s infinite;margin-bottom:4px}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #444affb3}70%{transform:scale(1.02);box-shadow:0 0 0 10px #444aff00}to{transform:scale(1);box-shadow:0 0 #444aff00}}.control-button{position:absolute;bottom:10vh;left:50%;transform:translate(-50%,-50%);background-color:#444aff;color:#fff;border:none;border-radius:50px;height:80px;width:80px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #444affb3;z-index:20;cursor:pointer;transition:all .3s ease}.control-button:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 6px 25px #444affcc}.control-button svg{width:40px;height:40px;fill:#fff}.control-button.active{background-color:#ff4545;animation:scan 2s infinite}@keyframes scan{0%{box-shadow:0 0 #ff4545b3}70%{box-shadow:0 0 0 15px #ff454500}to{box-shadow:0 0 #ff454500}}.scanning-line{position:absolute;top:0;left:0;width:100%;height:2px;background-color:#444aff;box-shadow:0 0 8px #444aff;opacity:0;z-index:3;pointer-events:none}.scanning-active .scanning-line{animation:scan-line 3s infinite;opacity:1}@keyframes scan-line{0%{top:0}50%{top:100%}50.1%{top:0}to{top:100%}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000b3;z-index:40;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease}.loading-overlay.show{opacity:1;pointer-events:auto}.loading-spinner{width:80px;height:80px;border:5px solid rgba(68,74,255,.3);border-radius:50%;border-top-color:#444aff;animation:spin 1.5s linear infinite}.loading-text{margin-top:20px;font-size:18px;color:#fff;font-weight:500}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.shake{animation:shake .6s cubic-bezier(.36,.07,.19,.97) both}.loader{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s linear infinite;margin-left:8px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}