*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);color:#333;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:16px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}.btn{align-items:center;border:none;border-radius:12px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:12px 24px;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{box-shadow:0 8px 25px #667eea4d;transform:translateY(-2px)}.btn-secondary{background:#ffffff1a;border:1px solid #fff3;color:#fff}.btn-secondary:hover{background:#fff3;transform:translateY(-2px)}.btn-danger{background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff}.btn-danger:hover{box-shadow:0 8px 25px #ff6b6b4d;transform:translateY(-2px)}.input{width:100%}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;max-height:80vh;max-width:500px;overflow-y:auto;padding:32px;width:90%}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:slideIn .3s ease-out}@media (max-width:768px){.btn{font-size:13px;padding:10px 20px}.modal{margin:20px;padding:24px}}.header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff1a;border-bottom:1px solid #fff3;position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-container{align-items:center;display:flex;height:80px;justify-content:space-between;margin:0 auto;max-width:1200px;padding:0 20px}.logo h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:#fff;font-size:1.8rem;font-weight:700;margin:0}.tagline{color:#ffffffb3;font-size:.9rem;font-weight:300;margin-left:10px}.nav{display:flex;gap:10px}.nav-item{background:#0000;border:none;border-radius:12px;color:#fffc;cursor:pointer;font-size:14px;font-weight:500;padding:12px 20px;transition:all .3s ease}.nav-item:hover{background:#ffffff1a;color:#fff;transform:translateY(-2px)}.nav-item.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea4d;color:#fff}@media (max-width:768px){.header-container{height:70px;padding:0 15px}.logo h1{font-size:1.5rem}.tagline{display:none}.nav{gap:5px}.nav-item{font-size:13px;padding:10px 15px}}@media (max-width:480px){.nav{flex-wrap:wrap;gap:5px}.nav-item{font-size:12px;padding:8px 12px}}.video-player{background:#000;border-radius:20px;height:450px;object-fit:cover;width:100%}@media (max-width:768px){.video-player{height:300px}}@media (max-width:480px){.video-player{height:250px}}.overlay-container{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:10}.overlay-item{border-radius:8px;box-shadow:0 2px 10px #0000004d;pointer-events:all;transition:all .2s ease}.overlay-item:hover{box-shadow:0 4px 20px #0006}.overlay-item.selected{box-shadow:0 0 0 2px #667eea,0 4px 20px #667eea4d}.react-resizable-handle{background:linear-gradient(-45deg,#0000,#0000 30%,#667eea 0,#667eea 40%,#0000 0,#0000 70%,#667eea 0,#667eea);bottom:0;cursor:se-resize;height:20px;opacity:0;position:absolute;right:0;transition:opacity .2s ease;width:20px}.overlay-item.selected .react-resizable-handle,.overlay-item:hover .react-resizable-handle{opacity:1}.react-resizable-handle:hover{opacity:1!important}.overlay-item img+span{color:#ff6b6b;display:none;font-size:12px;padding:10px;text-align:center}@media (max-width:768px){.overlay-item{min-height:30px;min-width:80px}.react-resizable-handle{height:15px;width:15px}}.overlay-form{max-width:600px;width:100%}.form-header{align-items:center;border-bottom:1px solid #fff3;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:20px}.form-header h3{color:#fff;font-size:1.5rem;margin:0}.close-btn{font-size:2rem;height:40px;width:40px}.form{gap:20px}.form,.form-group{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{color:#fff;font-size:14px;font-weight:500}.form-row{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.input{background:#ffffff1a;border:1px solid #fff3;border-radius:12px;color:#fff;font-size:14px;padding:12px 16px;transition:all .3s ease}.input:focus{background:#ffffff26;border-color:#fff6;outline:none}.input::placeholder{color:#fff9}.color-input{cursor:pointer;height:50px;padding:8px}.opacity-slider{-webkit-appearance:none;background:#ffffff4d;border-radius:3px;height:6px;margin:10px 0;outline:none;width:100%}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;box-shadow:0 2px 6px #0000004d;cursor:pointer;height:20px;width:20px}.opacity-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;box-shadow:0 2px 6px #0000004d;cursor:pointer;height:20px;width:20px}.opacity-value{color:#fff;display:block;font-size:14px;font-weight:500;text-align:center}.form-actions{border-top:1px solid #fff3;display:flex;gap:15px;justify-content:flex-end;margin-top:30px;padding-top:20px}.form-actions .btn{min-width:120px}@media (max-width:768px){.form-row{gap:15px;grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions .btn{width:100%}.form-header h3{font-size:1.3rem}}.overlay-list{width:100%}.list-header{margin-bottom:30px}.list-header h3{color:#fff;font-size:1.5rem;margin:0}.empty-state{color:#fffc;padding:60px 20px;text-align:center}.empty-icon{font-size:4rem;margin-bottom:20px}.empty-state h3{color:#fff;font-size:1.5rem;margin-bottom:15px}.empty-state p{font-size:1rem;line-height:1.6}.overlay-grid{grid-gap:25px;display:grid;gap:25px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.overlay-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:20px;transition:all .3s ease}.overlay-card:hover{background:#ffffff14;box-shadow:0 10px 30px #0003;transform:translateY(-5px)}.overlay-preview{align-items:center;background:#0000004d;border-radius:12px;display:flex;height:120px;justify-content:center;margin-bottom:15px;overflow:hidden;position:relative}.image-preview{height:100%;position:relative;width:100%}.image-preview img{height:100%;object-fit:cover;width:100%}.image-error{align-items:center;color:#fff9;display:none;flex-direction:column;font-size:.9rem;height:100%;justify-content:center}.image-error span:first-child{font-size:2rem;margin-bottom:8px}.text-preview{word-wrap:break-word;align-items:center;border-radius:8px;display:flex;justify-content:center;max-width:100%;min-height:60px;padding:15px;text-align:center}.overlay-info{display:flex;flex-direction:column;gap:15px}.overlay-meta{align-items:center;color:#ffffffb3;display:flex;font-size:.9rem;justify-content:space-between}.overlay-type{font-weight:500}.overlay-size{background:#ffffff1a;border-radius:6px;font-size:.8rem;padding:4px 8px}.overlay-actions{display:flex;gap:10px}.btn-sm{border-radius:8px;flex:1 1;font-size:13px;padding:8px 16px}@media (max-width:768px){.overlay-grid{gap:20px;grid-template-columns:1fr}.overlay-card{padding:15px}.overlay-preview{height:100px}.overlay-actions{flex-direction:column}.btn-sm{width:100%}}.overlay-side-panel{bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:1000}.panel-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#00000080;flex:1 1}.panel-content{animation:slideIn .3s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff1a;border-left:1px solid #fff3;display:flex;flex-direction:column;width:400px}.panel-header{align-items:center;border-bottom:1px solid #fff3;display:flex;justify-content:space-between;padding:20px}.panel-header h3{color:#fff;font-size:1.3rem;font-weight:600;margin:0}.close-btn{align-items:center;background:none;border:none;border-radius:50%;color:#ffffffb3;cursor:pointer;display:flex;font-size:1.8rem;height:35px;justify-content:center;padding:0;transition:all .3s ease;width:35px}.close-btn:hover{background:#ffffff1a;color:#fff}.panel-body{flex:1 1;overflow-y:auto;padding:20px}.panel-actions{margin-bottom:20px}.add-overlay-btn{font-size:14px;justify-content:center;padding:12px 20px;width:100%}@media (max-width:768px){.panel-content{max-width:400px;width:100%}.panel-body,.panel-header{padding:15px}}@media (max-width:480px){.panel-content{width:100%}.panel-header h3{font-size:1.1rem}.close-btn{font-size:1.5rem;height:30px;width:30px}}@keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}.hero{align-items:center;display:flex;min-height:80vh;padding:60px 20px}.hero-container{margin:0 auto;max-width:1200px;width:100%}.hero-content{text-align:center}.hero-title{color:#fff;font-size:3.5rem;font-weight:700;line-height:1.2;margin-bottom:20px}.hero-subtitle{color:#fffc;display:block;font-size:1.5rem;font-weight:300;margin-top:10px}.video-section{margin:60px 0}.video-container{background:#0000004d;border-radius:20px;box-shadow:0 20px 40px #0000004d;margin:0 auto;max-width:800px;overflow:hidden;position:relative}.url-input-container{padding:60px 40px;text-align:center}.url-form h3{color:#fff;font-size:1.5rem;margin-bottom:30px}.url-form .input{font-size:16px;margin-bottom:20px}.video-controls{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#0000,#000c);bottom:0;display:flex;gap:15px;left:0;padding:20px;position:absolute;right:0}.control-btn{border-radius:50%;font-size:18px;height:50px;min-width:50px}.volume-control{align-items:center;color:#fff;display:flex;gap:10px}.volume-slider{-webkit-appearance:none;background:#ffffff4d;border-radius:3px;height:6px;outline:none;width:100px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;box-shadow:0 2px 6px #0000004d;cursor:pointer;height:18px;width:18px}.volume-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;box-shadow:0 2px 6px #0000004d;cursor:pointer;height:18px;width:18px}.hero-features{grid-gap:40px;display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:80px}.feature{background:#ffffff0d;border-radius:20px;padding:30px 20px;text-align:center;transition:transform .3s ease}.feature:hover{transform:translateY(-10px)}.feature-icon{font-size:3rem;margin-bottom:20px}.feature h4{color:#fff;font-size:1.3rem;font-weight:600;margin-bottom:15px}.feature p{color:#fffc;line-height:1.6}@media (max-width:768px){.hero{padding:40px 15px}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.2rem}.video-section{margin:40px 0}.url-input-container{padding:40px 20px}.video-controls{gap:10px;padding:15px}.control-btn{font-size:16px;height:45px;min-width:45px}.volume-slider{width:80px}.hero-features{gap:30px;grid-template-columns:1fr;margin-top:60px}.feature{padding:25px 15px}}@media (max-width:480px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.video-controls{flex-wrap:wrap;justify-content:center}}.overlay-manager{min-height:80vh;padding:40px 20px}.overlay-manager-container{margin:0 auto;max-width:1200px}.overlay-manager-header{align-items:center;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin-bottom:40px}.overlay-manager-header h2{color:#fff;font-size:2.5rem;font-weight:700;margin:0}.add-overlay-btn{border-radius:15px;box-shadow:0 4px 15px #667eea4d;font-size:16px;font-weight:600;padding:15px 30px}.overlay-manager-content{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;padding:30px}@media (max-width:768px){.overlay-manager{padding:30px 15px}.overlay-manager-header{align-items:stretch;flex-direction:column;text-align:center}.overlay-manager-header h2{font-size:2rem}.add-overlay-btn{justify-content:center;width:100%}.overlay-manager-content{padding:20px}}.footer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0003;border-top:1px solid #ffffff1a;margin-top:auto}.footer-container{margin:0 auto;max-width:1200px;padding:40px 20px 20px}.footer-content{grid-gap:40px;display:grid;gap:40px;grid-template-columns:1fr 2fr;margin-bottom:30px}.footer-brand h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:#fff;font-size:1.5rem;margin-bottom:10px}.footer-brand p{color:#ffffffb3;line-height:1.6}.footer-links{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(3,1fr)}.footer-section h4{color:#fff;font-size:1rem;font-weight:600;margin-bottom:15px}.footer-section ul{list-style:none;margin:0;padding:0}.footer-section li{margin-bottom:8px}.footer-section a{color:#ffffffb3;font-size:.9rem;text-decoration:none;transition:color .3s ease}.footer-section a:hover{color:#fff}.footer-bottom{align-items:center;border-top:1px solid #ffffff1a;display:flex;justify-content:space-between;padding-top:20px}.footer-bottom p{color:#fff9;font-size:.9rem;margin:0}.footer-social{display:flex;gap:15px}.footer-social a{border-radius:8px;color:#ffffffb3;font-size:1.2rem;padding:8px;text-decoration:none;transition:all .3s ease}.footer-social a:hover{background:#ffffff1a;color:#fff;transform:translateY(-2px)}@media (max-width:768px){.footer-content{gap:30px;grid-template-columns:1fr}.footer-links{gap:25px;grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:15px;text-align:center}.footer-container{padding:30px 15px 15px}}@media (max-width:480px){.footer-social{gap:10px}.footer-social a{font-size:1rem;padding:6px}}.App{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1 1;padding:20px}.container{margin:0 auto;max-width:1200px;padding:20px}.api-docs{padding:40px 20px}.api-docs h2{color:#fff;font-size:2.5rem;margin-bottom:30px;text-align:center}.api-section h3{color:#fff;font-size:1.5rem;margin-bottom:20px}.endpoint{background:#ffffff0d;border-left:4px solid #667eea;border-radius:12px;margin-bottom:15px;padding:20px}.endpoint code{background:#0000004d;border-radius:6px;color:gold;display:inline-block;font-weight:500;margin-bottom:10px;padding:8px 12px}.endpoint p{color:#fffc;margin:0}.get-started{padding:40px 20px}.get-started h2{color:#fff;font-size:2.5rem;margin-bottom:30px;text-align:center}.steps{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:30px}.step{background:#ffffff0d;border-radius:16px;padding:30px;text-align:center;transition:transform .3s ease}.step:hover{transform:translateY(-5px)}.step h3{color:#fff;font-size:1.3rem;margin-bottom:15px}.step p{color:#fffc;line-height:1.6}@media (max-width:768px){.main-content{padding:10px}.api-docs h2,.get-started h2{font-size:2rem}.steps{gap:20px;grid-template-columns:1fr}.step{padding:20px}}
/*# sourceMappingURL=main.33ccee27.css.map*/