.qr-scanner-overlay{position:fixed;inset:0;background:#000000f2;z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.qr-scanner-container{width:100%;max-width:500px;height:100%;max-height:700px;background:#1a1a1a;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px #00000080;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.qr-scanner-header{padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px #0003}.qr-scanner-header h2{margin:0;font-size:20px;font-weight:600}.btn-close{background:#fff3;border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.btn-close:hover{background:#ffffff4d;transform:rotate(90deg)}.qr-scanner-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow:auto}.qr-reader-wrapper{position:relative;width:100%;max-width:400px;display:flex;align-items:center;justify-content:center}.qr-reader-wrapper:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,rgba(0,0,0,.6) calc(50% - 125px),transparent calc(50% - 125px),transparent calc(50% + 125px),rgba(0,0,0,.6) calc(50% + 125px),rgba(0,0,0,.6) 100%),linear-gradient(to right,rgba(0,0,0,.6) 0%,rgba(0,0,0,.6) calc(50% - 125px),transparent calc(50% - 125px),transparent calc(50% + 125px),rgba(0,0,0,.6) calc(50% + 125px),rgba(0,0,0,.6) 100%);pointer-events:none;z-index:5;border-radius:12px}.qr-reader{width:100%;max-width:400px;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px #667eea4d}.qr-reader video{border-radius:12px;width:100%!important;height:auto!important;display:block}.qr-reader canvas{display:none!important}.scan-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:250px;height:250px;pointer-events:none;z-index:10;transition:all .3s ease}.scan-frame.success{animation:successPulse .5s ease-out}@keyframes successPulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1)}}.scan-frame.error{animation:errorShake .5s ease-out}@keyframes errorShake{0%,to{transform:translate(-50%,-50%)}10%,30%,50%,70%,90%{transform:translate(calc(-50% - 10px),-50%)}20%,40%,60%,80%{transform:translate(calc(-50% + 10px),-50%)}}.corner{position:absolute;width:30px;height:30px;border:4px solid #10b981;box-shadow:0 0 10px #10b98199}.corner-top-left{top:0;left:0;border-right:none;border-bottom:none;border-top-left-radius:8px}.corner-top-right{top:0;right:0;border-left:none;border-bottom:none;border-top-right-radius:8px}.corner-bottom-left{bottom:0;left:0;border-right:none;border-top:none;border-bottom-left-radius:8px}.corner-bottom-right{bottom:0;right:0;border-left:none;border-top:none;border-bottom-right-radius:8px}.scan-frame.success .corner{border-color:#10b981;animation:cornerGlow .5s ease-out}@keyframes cornerGlow{0%,to{box-shadow:0 0 10px #10b98199}50%{box-shadow:0 0 30px #10b981}}.scan-frame.error .corner{border-color:#ef4444;animation:cornerError .5s ease-out}@keyframes cornerError{0%,to{box-shadow:0 0 10px #ef444499}50%{box-shadow:0 0 30px #ef4444}}.scan-line{position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent 0%,rgba(16,185,129,.3) 20%,rgba(16,185,129,1) 50%,rgba(16,185,129,.3) 80%,transparent 100%);box-shadow:0 0 10px #10b981cc,0 0 20px #10b98180;animation:scanLineMove 2.5s linear infinite;filter:drop-shadow(0 0 5px rgba(16,185,129,.8))}@keyframes scanLineMove{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(250px);opacity:0}}.scan-frame.success .scan-line{animation:none;opacity:0}.scan-success-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;background:#10b981f2;width:250px;height:250px;border-radius:12px;z-index:20;animation:successFadeIn .3s ease-out}@keyframes successFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.success-icon{font-size:80px;color:#fff;font-weight:700;margin-bottom:10px;animation:successIconBounce .5s ease-out}@keyframes successIconBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.success-text{font-size:24px;color:#fff;font-weight:600;animation:successTextSlide .5s ease-out .2s both}@keyframes successTextSlide{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.scanner-hint{margin-top:30px;text-align:center;color:#fff}.scanner-hint p{margin:8px 0;font-size:16px;line-height:1.5}.hint-sub{font-size:14px;opacity:.7}.scanner-error{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:20px}.error-icon{font-size:64px;margin-bottom:20px;animation:shake .5s ease-in-out}.error-message{font-size:18px;font-weight:600;margin-bottom:20px;line-height:1.5;max-width:350px}.error-hint{background:#ffffff1a;border-radius:12px;padding:20px;margin-bottom:20px;max-width:350px;text-align:left}.error-hint p{margin:0 0 12px;font-size:14px;font-weight:600}.error-hint ol{margin:0;padding-left:20px;font-size:14px;line-height:1.8}.error-hint li{margin-bottom:8px}.btn-retry{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #667eea66}.btn-retry:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea80}.btn-retry:active{transform:translateY(0)}.qr-scanner-footer{padding:20px;background:#2a2a2a;display:flex;justify-content:center;box-shadow:0 -2px 10px #0003}.btn-cancel{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.3);padding:12px 40px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-cancel:hover{background:#fff3;border-color:#ffffff80}@media (max-width: 768px){.qr-scanner-container{max-width:100%;max-height:100%;border-radius:0}.qr-scanner-header h2{font-size:18px}.scanner-hint p{font-size:14px}.error-message{font-size:16px}.scan-frame{width:220px;height:220px}.qr-reader-wrapper:before{background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,rgba(0,0,0,.6) calc(50% - 110px),transparent calc(50% - 110px),transparent calc(50% + 110px),rgba(0,0,0,.6) calc(50% + 110px),rgba(0,0,0,.6) 100%),linear-gradient(to right,rgba(0,0,0,.6) 0%,rgba(0,0,0,.6) calc(50% - 110px),transparent calc(50% - 110px),transparent calc(50% + 110px),rgba(0,0,0,.6) calc(50% + 110px),rgba(0,0,0,.6) 100%)}@keyframes scanLineMove{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(220px);opacity:0}}.scan-success-overlay{width:220px;height:220px}.success-icon{font-size:70px}.success-text{font-size:20px}}@media (max-width: 480px){.qr-scanner-header,.qr-scanner-body,.qr-scanner-footer{padding:16px}.btn-close{width:32px;height:32px;font-size:20px}.error-hint{padding:16px}.error-hint ol{font-size:13px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.camera-video-player{transition:transform .3s ease,box-shadow .3s ease}.camera-video-player img{transition:none!important;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;transform:translateZ(0);will-change:auto;backface-visibility:hidden}.camera-video-player:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0000004d}.single-view-player{min-height:300px}.multi-camera-container{width:100%}.multi-camera-monitor{width:100%;display:flex;justify-content:center;align-items:center}.cameras-grid{max-width:100%;overflow-x:auto;padding:4px}.cameras-grid::-webkit-scrollbar{height:4px}.cameras-grid::-webkit-scrollbar-track{background:#ffffff1a;border-radius:2px}.cameras-grid::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:2px}.cameras-grid::-webkit-scrollbar-thumb:hover{background:#ffffff80}.camera-monitor:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.multi-camera-container .grid-container{grid-template-columns:1fr!important}.single-view-player{min-height:250px}.cameras-grid{flex-direction:column;gap:6px!important}.camera-monitor{min-width:60px!important;padding:4px 8px!important}.camera-info{font-size:9px!important}}@media (max-width: 480px){.cameras-grid{gap:4px!important}.camera-monitor{min-width:50px!important;padding:3px 6px!important}.camera-icon{font-size:16px!important}.camera-info{font-size:8px!important}}.tennis-court-card{background:linear-gradient(135deg,#2e5c8a,#4a90e2);border-radius:16px;padding:0;box-shadow:0 10px 40px #2e5c8a4d,inset 0 0 100px #0000001a;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border:4px solid rgba(255,255,255,.9);overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.tennis-court-card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px);pointer-events:none;z-index:1}.tennis-court-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px #2e5c8a66,inset 0 0 100px #00000026,0 0 30px #ffffff4d;border-color:#fff}.court-field{position:relative;padding:20px;min-height:400px;display:flex;flex-direction:column;z-index:2}.court-field:before{content:"";position:absolute;inset:15px;border:2px solid rgba(255,255,255,.6);pointer-events:none;z-index:0}.court-field:after{content:"";position:absolute;top:15px;bottom:15px;left:50%;width:2px;background:#fff6;transform:translate(-50%);pointer-events:none;z-index:0}.baseline-area{position:relative;padding:15px;z-index:3}.baseline-top{border-bottom:2px solid rgba(255,255,255,.5);margin-bottom:10px}.baseline-bottom{border-top:2px solid rgba(255,255,255,.5);margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px}.service-area{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:20px;z-index:3;overflow:visible}.service-area:before{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:#fff6;z-index:0}.service-area:after{content:"🎾";position:absolute;font-size:22px;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));z-index:10;display:none}.service-area:has(.recording-badge):after{display:block;opacity:1}@keyframes tennisRally{0%{left:5%;top:50%;transform:translateY(-50%) rotate(0) scale(1);opacity:1}12%{left:25%;top:20%;transform:translateY(-50%) rotate(90deg) scale(1.1)}25%{left:50%;top:10%;transform:translateY(-50%) rotate(180deg) scale(1.2)}37%{left:75%;top:20%;transform:translateY(-50%) rotate(270deg) scale(1.1)}50%{left:95%;top:50%;transform:translateY(-50%) rotate(360deg) scale(1);opacity:1}62%{left:75%;top:20%;transform:translateY(-50%) rotate(450deg) scale(1.1)}75%{left:50%;top:10%;transform:translateY(-50%) rotate(540deg) scale(1.2)}87%{left:25%;top:20%;transform:translateY(-50%) rotate(630deg) scale(1.1)}to{left:5%;top:50%;transform:translateY(-50%) rotate(720deg) scale(1);opacity:1}}.net-area{position:relative;height:3px;margin:15px 0;z-index:3}.net-line{position:absolute;top:0;left:10%;right:10%;height:3px;background:#fffc;box-shadow:0 0 10px #ffffff80,0 2px 5px #0000004d;animation:netLineGlow 2s ease-in-out infinite}@keyframes netLineGlow{0%,to{box-shadow:0 0 10px #ffffff80,0 2px 5px #0000004d}50%{box-shadow:0 0 20px #fffc,0 2px 8px #0006}}.net-area:before{content:"🎾";position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(-45deg);font-size:28px;opacity:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));pointer-events:none;z-index:5}.net-area:after{content:"🎾";position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(45deg);font-size:28px;opacity:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));pointer-events:none;z-index:5}.tennis-court-card:has(.recording-badge) .net-area:before{animation:racketSwingLeft 3.5s ease-in-out infinite}.tennis-court-card:has(.recording-badge) .net-area:after{animation:racketSwingRight 3.5s ease-in-out infinite}@keyframes racketSwingLeft{0%,45%,55%,to{opacity:0;transform:translateY(-50%) rotate(-45deg) scale(1)}48%,52%{opacity:.8;transform:translateY(-50%) rotate(-25deg) scale(1.2)}50%{opacity:1;transform:translateY(-50%) rotate(-15deg) scale(1.3)}}@keyframes racketSwingRight{0%,95%,to{opacity:0;transform:translateY(-50%) rotate(45deg) scale(1)}0%,45%{opacity:0;transform:translateY(-50%) rotate(45deg) scale(1)}48%,52%{opacity:.8;transform:translateY(-50%) rotate(25deg) scale(1.2)}50%{opacity:1;transform:translateY(-50%) rotate(15deg) scale(1.3)}}.card-header{text-align:center;margin-bottom:10px;position:relative;z-index:4}.court-name{margin:0;font-size:24px;font-weight:800;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3),0 0 20px rgba(255,255,255,.3);line-height:1.3;letter-spacing:1px;position:relative}.card-header:before{content:"🎾";position:absolute;right:-10px;top:-10px;font-size:24px;opacity:.7;animation:tennisBounce 2s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));z-index:5}.card-header:after{content:"🎾";position:absolute;left:-10px;top:-10px;font-size:24px;opacity:.7;animation:tennisBounce 2s ease-in-out infinite 1s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));z-index:5}@keyframes tennisBounce{0%,to{transform:translateY(0) scale(1);opacity:.7}50%{transform:translateY(-10px) scale(1.1);opacity:1}}.camera-monitor{display:flex;align-items:center;gap:15px;padding:12px;background:#0003;border-radius:12px;backdrop-filter:blur(5px);transition:all .3s ease}.camera-monitor:hover{background:#0000004d;transform:translateY(-2px)}.camera-icon{position:relative;font-size:32px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));animation:cameraFloat 3s ease-in-out infinite;transform-origin:center center}@keyframes cameraFloat{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(5deg)}}.camera-monitor.status-online .camera-icon{animation:cameraFloat 3s ease-in-out infinite}.camera-monitor.status-online .camera-icon:before{position:absolute;font-size:16px;pointer-events:none}@keyframes tennisBallOrbit{0%{left:-20px;top:-10px;opacity:0;transform:scale(.5)}10%{opacity:1;transform:scale(1)}25%{left:10px;top:-25px}50%{left:40px;top:-10px}75%{left:10px;top:5px}90%{opacity:1}to{left:-20px;top:-10px;opacity:0;transform:scale(.5)}}.camera-monitor.status-offline .camera-icon{filter:grayscale(100%) drop-shadow(0 2px 4px rgba(0,0,0,.3));animation:none;opacity:.5}.camera-monitor.status-error .camera-icon{animation:cameraShake .5s ease-in-out infinite}@keyframes cameraShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.recording-light{position:absolute;top:-2px;right:-2px;width:12px;height:12px;background:#ef4444;border-radius:50%;box-shadow:0 0 10px #ef4444cc,0 0 20px #ef444480;animation:recordingBlink 1s ease-in-out infinite}@keyframes recordingBlink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}.recording-animation-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;opacity:0;pointer-events:none;animation:recordingAnimationFadeIn .5s ease-out forwards;will-change:opacity}@keyframes recordingAnimationFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:.7;transform:translate(-50%,-50%) scale(1)}}.recording-animation-overlay{animation:recordingAnimationFadeIn .5s ease-out forwards,recordingBreathing 3s ease-in-out .5s infinite}@keyframes recordingBreathing{0%,to{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.05)}}.recording-animation-overlay:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:120%;background:radial-gradient(circle,rgba(102,126,234,.2) 0%,rgba(118,75,162,.15) 30%,transparent 70%);border-radius:50%;animation:recordingGlow 2s ease-in-out infinite;pointer-events:none;z-index:-1}@keyframes recordingGlow{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}.camera-info{flex:1;display:flex;flex-direction:column;gap:4px}.camera-status{font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.camera-monitor.status-online .camera-status{color:#10b981;text-shadow:0 0 10px rgba(16,185,129,.5)}.camera-monitor.status-offline .camera-status{color:#ef4444}.camera-monitor.status-error .camera-status{color:#f59e0b}.camera-name{font-size:12px;color:#ffffffe6;font-weight:500}.camera-ip{font-size:11px;color:#ffffffb3;font-family:Courier New,monospace}.recording-info{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:#ffffff1a;border-radius:12px;backdrop-filter:blur(5px);border:2px solid rgba(255,255,255,.2)}.duration-display{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.duration-icon{font-size:24px;animation:clockTick 1s ease-in-out infinite}@keyframes clockTick{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.duration-text{font-family:Courier New,monospace;letter-spacing:1px}.recording-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ef444433;border:2px solid #ef4444;border-radius:20px;animation:badgePulse 2s ease-in-out infinite}@keyframes badgePulse{0%,to{background:#ef444433;box-shadow:0 0 10px #ef44444d}50%{background:#ef44444d;box-shadow:0 0 20px #ef444480}}.recording-dot{width:10px;height:10px;background:#ef4444;border-radius:50%;box-shadow:0 0 10px #ef4444cc;animation:dotBlink 1s ease-in-out infinite}@keyframes dotBlink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}.recording-text{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.card-content{margin-bottom:20px}.device-status{margin-bottom:18px;padding:16px;background:linear-gradient(135deg,#f8f9ff,#f0f4ff);border-radius:16px;border:2px solid #e8f0fe;transition:all .3s ease}.device-status:hover{border-color:#667eea;transform:translate(3px)}.status-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.status-item:last-child{margin-bottom:0}.status-label{font-size:15px;color:#555;font-weight:600;display:flex;align-items:center;gap:6px}.status-label:before{content:"📡";font-size:16px}.status-value{font-size:15px;font-weight:700;text-align:right;padding:4px 12px;border-radius:12px;transition:all .3s ease}.status-value.status-online{color:#10b981;background:#10b9811a}.status-value.status-offline{color:#ef4444;background:#ef44441a}.status-value.status-error{color:#f59e0b;background:#f59e0b1a}.status-value.status-unknown{color:#9ca3af;background:#9ca3af1a}.device-name{font-size:13px;color:#667eea;margin-top:8px;text-align:center;font-weight:600;padding:6px 12px;background:#667eea1a;border-radius:8px}.recording-status{margin-bottom:18px;padding:16px;background:linear-gradient(135deg,#fff5f5,#ffe8e8);border-radius:16px;border:2px solid #fecaca;transition:all .3s ease;position:relative;overflow:hidden}.recording-status:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#ef4444,#dc2626)}.recording-status:after{content:"🎾";position:absolute;top:50%;left:-30px;font-size:20px;opacity:0;animation:none}.recording-status:has(.recording-indicator):after{animation:tennisFly 3s ease-in-out infinite}@keyframes tennisFly{0%{left:-30px;top:50%;opacity:0;transform:translateY(-50%) rotate(0) scale(.8)}10%{opacity:1}25%{top:20%;transform:translateY(-50%) rotate(90deg) scale(1)}50%{left:50%;top:10%;transform:translateY(-50%) rotate(180deg) scale(1.1)}75%{top:20%;transform:translateY(-50%) rotate(270deg) scale(1)}90%{opacity:1}to{left:calc(100% + 30px);top:50%;opacity:0;transform:translateY(-50%) rotate(360deg) scale(.8)}}.recording-status:hover{border-color:#ef4444;transform:translate(3px)}.recording-status .status-label:before{content:"⏱️"}.card-footer{display:flex;justify-content:center;align-items:center;padding-top:20px;border-top:2px solid #f0f4ff;position:relative}.card-footer:before{content:"";position:absolute;bottom:-10px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(102,126,234,.3) 10%,rgba(102,126,234,.6) 50%,rgba(102,126,234,.3) 90%,transparent 100%);animation:courtLineFlow 3s ease-in-out infinite}@keyframes courtLineFlow{0%,to{opacity:.5;transform:scaleX(.8)}50%{opacity:1;transform:scaleX(1)}}.tennis-court-card:hover .card-footer:before{animation:courtLineFlowGlow 2s ease-in-out infinite}@keyframes courtLineFlowGlow{0%,to{opacity:.6;box-shadow:0 0 5px #667eea4d}50%{opacity:1;box-shadow:0 0 15px #667eea99}}.btn-recording{display:flex;align-items:center;gap:10px;padding:16px 40px;border:3px solid rgba(255,255,255,.3);border-radius:50px;font-size:17px;font-weight:800;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#10b981,#059669);color:#fff;min-width:180px;justify-content:center;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.3);box-shadow:0 8px 25px #10b98180,0 0 20px #10b98166,0 0 40px #10b9814d,inset 0 -2px 10px #0003;animation:glowBreathing 2.5s ease-in-out infinite}@keyframes glowBreathing{0%,to{box-shadow:0 8px 25px #10b98166,0 0 15px #10b9814d,0 0 30px #10b98133}50%{box-shadow:0 8px 30px #10b98180,0 0 25px #10b98180,0 0 50px #10b98166,0 0 75px #10b9814d}}.btn-recording:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s;z-index:0}.btn-recording:hover:before{width:300px;height:300px}.btn-recording:after{content:"🎾";position:absolute;top:50%;left:-40px;transform:translateY(-50%);font-size:20px;opacity:0;transition:all .3s ease;z-index:0}.btn-recording:hover:after{left:-30px;opacity:.6;animation:tennisRoll 2s linear infinite}@keyframes tennisRoll{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.btn-recording:hover:not(:disabled){transform:translateY(-3px) scale(1.05);animation:glowBreathingHover 2s ease-in-out infinite}@keyframes glowBreathingHover{0%,to{box-shadow:0 12px 35px #10b98180,0 0 25px #10b98180,0 0 50px #10b98166,0 0 75px #10b9814d}50%{box-shadow:0 12px 40px #10b98199,0 0 35px #10b98199,0 0 70px #10b98180,0 0 100px #10b98166}}.btn-recording:active:not(:disabled){transform:translateY(-1px) scale(1.02);box-shadow:0 6px 20px #10b98180,0 0 15px #10b98166}.btn-recording:active:not(:disabled):after{animation:tennisBurst .6s ease-out}@keyframes tennisBurst{0%{opacity:1;transform:translateY(-50%) scale(1)}50%{opacity:.8;transform:translateY(-50%) scale(1.5) rotate(180deg)}to{opacity:0;transform:translateY(-50%) scale(2) rotate(360deg)}}.btn-recording.recording{background:linear-gradient(135deg,#ef4444,#dc2626);animation:glowBreathingRed 2.5s ease-in-out infinite}@keyframes glowBreathingRed{0%,to{box-shadow:0 8px 25px #ef444466,0 0 15px #ef44444d,0 0 30px #ef444433}50%{box-shadow:0 8px 30px #ef444480,0 0 25px #ef444480,0 0 50px #ef444466,0 0 75px #ef44444d}}.btn-recording.recording:hover:not(:disabled){animation:glowBreathingRedHover 2s ease-in-out infinite}@keyframes glowBreathingRedHover{0%,to{box-shadow:0 12px 35px #ef444480,0 0 25px #ef444480,0 0 50px #ef444466,0 0 75px #ef44444d}50%{box-shadow:0 12px 40px #ef444499,0 0 35px #ef444499,0 0 70px #ef444480,0 0 100px #ef444466}}.btn-recording.loading{opacity:.8;cursor:not-allowed;animation:pulse 1.5s infinite}.btn-recording.disabled{background:linear-gradient(135deg,#e5e7eb,#d1d5db);color:#9ca3af;cursor:not-allowed;box-shadow:none;animation:none}.btn-recording:disabled{transform:none;box-shadow:none;animation:none}.btn-recording.unauthorized{background:linear-gradient(135deg,#6b7280,#4b5563);color:#d1d5db;cursor:not-allowed;box-shadow:none;animation:none;opacity:.6;position:relative}.btn-recording.unauthorized:before{content:"🔒";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:18px;opacity:.8}.btn-recording.unauthorized:hover{transform:none;animation:none}.btn-recording.scan-mode{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;cursor:pointer;animation:scanPulse 2s ease-in-out infinite;box-shadow:0 8px 25px #f59e0b66,0 0 20px #f59e0b33}@keyframes scanPulse{0%,to{box-shadow:0 8px 25px #f59e0b66,0 0 20px #f59e0b33,0 0 40px #f59e0b1a}50%{box-shadow:0 10px 30px #f59e0b80,0 0 30px #f59e0b4d,0 0 60px #f59e0b33}}.btn-recording.scan-mode:hover:not(:disabled){transform:translateY(-3px) scale(1.05);animation:scanPulseHover 1.5s ease-in-out infinite}@keyframes scanPulseHover{0%,to{box-shadow:0 10px 30px #f59e0b80,0 0 30px #f59e0b4d,0 0 60px #f59e0b33}50%{box-shadow:0 12px 35px #f59e0b99,0 0 40px #f59e0b66,0 0 80px #f59e0b4d}}.btn-recording.scan-mode:active:not(:disabled){transform:translateY(-1px) scale(1.02)}.btn-icon{font-size:18px;line-height:1;position:relative;z-index:1}.btn-text{font-weight:700;letter-spacing:.5px;position:relative;z-index:1}.recording-indicator{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;padding:10px 16px;background:linear-gradient(135deg,#fee2e2,#fecaca);border-radius:12px;border:2px solid #ef4444;animation:indicatorPulse 2s infinite}@keyframes indicatorPulse{0%,to{background:linear-gradient(135deg,#fee2e2,#fecaca)}50%{background:linear-gradient(135deg,#fecaca,#fee2e2)}}.recording-dot{width:12px;height:12px;background:#ef4444;border-radius:50%;animation:blink 1s infinite;box-shadow:0 0 10px #ef444480}.recording-text{font-size:14px;font-weight:700;color:#dc2626;text-transform:uppercase;letter-spacing:1px}.card-warning{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 16px;background:#fef3c7f2;border:2px solid #fbbf24;border-radius:12px;color:#92400e;animation:warningShake .5s ease-in-out;backdrop-filter:blur(5px);box-shadow:0 4px 15px #fbbf244d}@keyframes warningShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.warning-icon{font-size:20px;flex-shrink:0;animation:warningBounce 1s infinite}@keyframes warningBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.warning-text{font-size:13px;font-weight:700;line-height:1.4}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes blink{0%,50%{opacity:1;transform:scale(1)}51%,to{opacity:.3;transform:scale(.9)}}@media (max-width: 1024px){.court-field{padding:18px;min-height:380px}}@media (max-width: 768px){.tennis-court-card{border-radius:14px;border-width:3px}.tennis-court-card:hover{transform:translateY(-5px) scale(1.01)}.court-field{padding:16px;min-height:360px}.court-name{font-size:20px}.card-header:before,.card-header:after{font-size:20px;top:-8px}.card-header:before{right:-8px}.card-header:after{left:-8px}.camera-monitor{padding:10px;gap:12px}.camera-icon{font-size:28px}.camera-status{font-size:13px}.camera-name,.camera-ip{font-size:11px}.recording-info{padding:16px}.duration-display{font-size:16px}.duration-icon{font-size:20px}.btn-recording{width:100%;padding:14px 32px;font-size:15px;min-width:auto}.baseline-area{padding:12px}.recording-animation-overlay{transform:translate(-50%,-50%) scale(.9)}@keyframes recordingAnimationFadeIn{to{opacity:.65;transform:translate(-50%,-50%) scale(.9)}}@keyframes recordingBreathing{0%,to{opacity:.65;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.8;transform:translate(-50%,-50%) scale(.95)}}}@media (max-width: 480px){.tennis-court-card{border-radius:12px;border-width:3px}.court-field{padding:14px;min-height:340px}.court-name{font-size:18px}.card-header:before,.card-header:after{font-size:18px;top:-6px}.card-header:before{right:-6px}.card-header:after{left:-6px}.service-area:after{font-size:18px}.net-area:before,.net-area:after{font-size:24px}.camera-monitor{flex-direction:column;text-align:center;padding:10px}.camera-icon{font-size:26px}.camera-status{font-size:12px}.camera-name,.camera-ip{font-size:10px}.recording-info{padding:14px}.duration-display{font-size:15px}.duration-icon{font-size:18px}.recording-badge{padding:6px 12px}.recording-dot{width:8px;height:8px}.recording-text{font-size:11px}.btn-recording{padding:12px 24px;font-size:14px;border-width:2px}.btn-icon{font-size:16px}.warning-icon{font-size:18px}.warning-text{font-size:12px}.baseline-area{padding:10px}.net-line{height:2px}.recording-animation-overlay{transform:translate(-50%,-50%) scale(.75)}@keyframes recordingAnimationFadeIn{to{opacity:.6;transform:translate(-50%,-50%) scale(.75)}}@keyframes recordingBreathing{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(.75)}50%{opacity:.75;transform:translate(-50%,-50%) scale(.8)}}.recording-animation-overlay:before{display:none}}@media print{.tennis-court-card{-moz-column-break-inside:avoid;break-inside:avoid;box-shadow:none;border:1px solid #ddd}.btn-recording{display:none}}.tennis-court-list{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);background-attachment:fixed;padding-bottom:40px}.court-list-header{background:linear-gradient(135deg,#667eeafa,#764ba2fa);backdrop-filter:blur(15px);box-shadow:0 2px 15px #00000026;padding:12px 30px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-bottom:2px solid rgba(255,255,255,.3);min-height:56px}.header-content{display:flex;align-items:center;gap:20px;width:100%;max-width:1400px}.court-list-header h1{margin:0;font-size:22px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px;text-shadow:0 2px 8px rgba(0,0,0,.2);letter-spacing:.5px}.court-list-header h1:before{content:"🎾";font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.last-update-time{font-size:12px;color:#ffffffe6;display:flex;align-items:center;gap:6px;padding:4px 12px;background:#ffffff26;border-radius:15px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);margin-left:auto}.last-update-time:before{content:"🕐";font-size:13px}.btn-analysis-report{padding:8px 16px;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;font-size:14px;color:#fff;font-weight:500;transition:all .3s ease;backdrop-filter:blur(10px);display:flex;align-items:center;gap:6px}.btn-analysis-report:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.court-list-container{max-width:1400px;margin:30px auto;padding:0 30px}.court-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:25px;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:#fff}.loading-spinner{width:60px;height:60px;border:5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-container p{margin-top:20px;font-size:16px;font-weight:500;color:#fff}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:40px}.error-icon{font-size:80px;margin-bottom:20px;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.error-container h3{color:#fff;font-size:24px;margin-bottom:10px;font-weight:600}.error-container p{color:#ffffffe6;font-size:16px;margin-bottom:25px}.btn-retry{padding:12px 30px;background:#fff;color:#667eea;border:none;border-radius:25px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.btn-retry:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:40px;background:#fffffff2;border-radius:20px;box-shadow:0 10px 40px #0000001a}.empty-icon{font-size:100px;margin-bottom:20px;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.empty-state h3{color:#333;font-size:24px;margin-bottom:10px;font-weight:600}.empty-state p{color:#666;font-size:16px}@media (max-width: 1200px){.court-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}@media (max-width: 768px){.court-list-header{padding:10px 20px;min-height:50px}.header-content{gap:12px}.court-list-header h1{font-size:18px}.court-list-header h1:before{font-size:22px}.last-update-time{font-size:11px;padding:3px 10px}.court-list-container{padding:0 15px;margin:20px auto}.court-grid{grid-template-columns:1fr;gap:20px}}@media (max-width: 480px){.court-list-header{padding:8px 15px;min-height:48px}.header-content{gap:10px;flex-wrap:wrap}.court-list-header h1{font-size:16px}.court-list-header h1:before{font-size:20px}.last-update-time{font-size:10px;padding:2px 8px;width:100%;justify-content:center}.court-list-container{padding:0 10px}.loading-spinner{width:50px;height:50px}.empty-icon{font-size:80px}.error-icon{font-size:60px}}