body{margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;color:#1e293b;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6}.App,body{min-height:100vh}.App{display:flex;flex-direction:column}.header{background:linear-gradient(135deg,#1e40af,#3b82f6);box-shadow:0 4px 6px -1px #0000001a;color:#fff;padding:1rem 2rem}.header-content{justify-content:center;margin:0 auto;max-width:1200px}.header-content,.logo{align-items:center;display:flex}.logo{overflow:visible}.logo-image{border-radius:4px;height:120px;margin:-30px 0;width:auto}.logo-subtitle{font-size:.9rem;margin-top:.25rem;opacity:.9}.main-content{flex:1 1;margin:0 auto;max-width:1200px;padding:2rem;width:100%}.add-stream-form{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:1px solid #93c5fd;border-radius:16px;box-shadow:0 10px 25px #1e3a8a33,0 4px 10px #0000001a;margin-bottom:2rem;padding:2rem}.form-title{color:#1e293b;font-size:1.5rem;font-weight:600;margin-bottom:1.5rem}.form-row{grid-gap:1rem;align-items:end;display:grid;gap:1rem;grid-template-columns:1fr 1fr auto;margin-bottom:1rem}.form-group{display:flex;flex-direction:column}.form-label{color:#374151;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.form-input{border:2px solid #e2e8f0;border-radius:8px;font-size:.875rem;padding:.75rem;transition:border-color .2s ease}.form-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.form-input.error{border-color:#ef4444}.error-message{color:#ef4444;font-size:.875rem;margin-top:.5rem}.add-button{background:linear-gradient(135deg,#1e40af,#3b82f6);border:1px solid #93c5fd;border-radius:12px;box-shadow:0 4px 12px #1e3a8a4d;color:#fff;cursor:pointer;font-weight:500;padding:.75rem 1.5rem;transition:all .2s ease;white-space:nowrap}.add-button:hover:not(:disabled){background:linear-gradient(135deg,#1e3a8a,#2563eb);box-shadow:0 6px 20px #1e3a8a66;transform:translateY(-2px)}.add-button:disabled{background:#9ca3af;cursor:not-allowed}.empty-state{align-items:center;display:flex;justify-content:center;min-height:400px}.empty-state-content{max-width:500px;text-align:center}.empty-state-content h3{color:#6b7280;font-size:1.5rem;margin-bottom:1rem}.empty-state-content p{color:#9ca3af;margin-bottom:1.5rem}.example-url{background:#f3f4f6;border-radius:8px;color:#374151;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;padding:1rem;word-break:break-all}.stream-grid-header{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:1px solid #93c5fd;border-radius:16px;box-shadow:0 10px 25px #1e3a8a33,0 4px 10px #0000001a;display:flex;justify-content:space-between;margin-bottom:1.5rem;padding:1rem}.stream-grid-header h2{color:#1e293b;font-size:1.5rem;font-weight:600;margin:0}.refresh-button{align-items:center;background:linear-gradient(135deg,#1e40af,#3b82f6);border:1px solid #93c5fd;border-radius:12px;box-shadow:0 4px 12px #1e3a8a4d;color:#fff;cursor:pointer;display:flex;font-weight:500;gap:.5rem;padding:.75rem 1.5rem;transition:all .2s ease}.refresh-button:hover:not(:disabled){background:linear-gradient(135deg,#1e3a8a,#2563eb);box-shadow:0 6px 20px #1e3a8a66;transform:translateY(-2px)}.refresh-button:disabled{background:#9ca3af;cursor:not-allowed}.loading-state{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:1px solid #93c5fd;border-radius:16px;box-shadow:0 10px 25px #1e3a8a33,0 4px 10px #0000001a;display:flex;flex-direction:column;justify-content:center;padding:3rem}.loading-state p{color:#6b7280;font-weight:500;margin-top:1rem}.stream-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}.stream-tile{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:1px solid #93c5fd;border-radius:16px;box-shadow:0 10px 25px #1e3a8a33,0 4px 10px #0000001a;overflow:hidden;transition:all .3s ease}.expand-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000e6;bottom:0;left:0;position:fixed;right:0;top:0;z-index:999}.stream-tile.expanded{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:1px solid #93c5fd;border-radius:20px;box-shadow:0 20px 60px #0000004d;height:auto;inset:5vh 5vw;margin:0!important;padding:0!important;position:fixed;transform:none;width:auto;z-index:1000!important}.stream-tile.expanded .stream-video-container{aspect-ratio:auto;border-radius:0 0 20px 20px;height:calc(100% - 80px);width:100%}.stream-tile:hover{box-shadow:0 4px 12px #00000026}.stream-header{align-items:center;background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-bottom:1px solid #93c5fd;display:flex;justify-content:space-between;padding:1rem}.stream-title{color:#1e293b;font-size:1rem;font-weight:600}.stream-controls{display:flex;gap:.5rem}.control-button{background:linear-gradient(135deg,#1e40af,#3b82f6);border:1px solid #93c5fd;border-radius:8px;box-shadow:0 2px 8px #1e3a8a4d;color:#fff;cursor:pointer;font-size:.875rem;min-width:60px;padding:.5rem;transition:all .2s ease}.control-button:hover:not(:disabled){background:linear-gradient(135deg,#1e3a8a,#2563eb);box-shadow:0 4px 12px #1e3a8a66;transform:translateY(-1px)}.control-button:disabled{background:#9ca3af;cursor:not-allowed}.control-button.danger{background:#ef4444}.control-button.danger:hover:not(:disabled){background:#dc2626}.stream-video-container{align-items:center;aspect-ratio:16/9;background:#000;display:flex;justify-content:center;position:relative}.expand-button{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;justify-content:center;position:absolute;transition:all .2s ease;z-index:20}.expand-button,.stream-tile.expanded .expand-button{font-size:1.2rem;height:40px;right:1rem;top:1rem;width:40px}.expand-button:hover{background:#000000e6;box-shadow:0 4px 12px #0000004d;transform:scale(1.1)}.stream-video{height:100%;object-fit:contain;width:100%}.stream-status{border-radius:20px;font-size:.875rem;font-weight:500;left:1rem;padding:.5rem 1rem;position:absolute;top:1rem;z-index:10}.stream-status.connecting{background:#fbbf24;color:#92400e}.stream-status.playing{background:#10b981;color:#fff}.stream-status.error{background:#ef4444;color:#fff}.stream-status.stopped{background:#6b7280;color:#fff}.stream-overlay{background:#000000b3;color:#fff;font-size:1.125rem}.stream-control-overlay,.stream-overlay{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.stream-control-overlay{pointer-events:none}.pause-resume-btn{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;border:2px solid #fff;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:80px;justify-content:center;padding:1rem;pointer-events:auto;transition:all .2s ease;width:80px}.pause-resume-btn:hover{background:#000c;box-shadow:0 4px 12px #0000004d;transform:scale(1.1)}.play-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#1e40af,#3b82f6);border:2px solid #fff;border-radius:50px;box-shadow:0 8px 25px #1e3a8a66;color:#fff;cursor:pointer;font-size:1.2rem;font-weight:600;padding:1rem 2rem;transition:all .2s ease}.play-button:hover:not(:disabled){background:linear-gradient(135deg,#1e3a8a,#2563eb);box-shadow:0 12px 35px #1e3a8a80;transform:scale(1.05)}.play-button:disabled{background:#9ca3af;box-shadow:0 4px 12px #0003;cursor:not-allowed;transform:none}.loading-spinner{animation:spin 1s linear infinite;border:3px solid #f3f4f6;border-radius:50%;border-top-color:#3b82f6;height:40px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.modal-backdrop{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal-content{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-width:500px;overflow-y:auto;padding:0;width:90%}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{align-items:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-bottom:1px solid #e5e7eb;border-radius:16px 16px 0 0;display:flex;justify-content:space-between;padding:1.5rem 2rem}.modal-header h2{color:#1e293b;font-size:1.25rem;font-weight:600;margin:0}.modal-close{align-items:center;background:none;border:none;border-radius:4px;color:#6b7280;cursor:pointer;display:flex;font-size:1.5rem;height:32px;justify-content:center;padding:.25rem;transition:all .2s ease;width:32px}.modal-close:hover{background-color:#f3f4f6;color:#374151}.modal-content form{padding:2rem}.modal-actions{border-top:1px solid #e5e7eb;display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem}.button{border:none;border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:500;min-width:100px;padding:.75rem 1.5rem;transition:all .2s ease}.button.primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 4px 6px -1px #3b82f64d;color:#fff}.button.primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1e40af);box-shadow:0 6px 8px -1px #3b82f666;transform:translateY(-1px)}.button.primary:disabled{background:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none}.button.secondary{background:#f3f4f6;border:1px solid #d1d5db;color:#374151}.button.secondary:hover:not(:disabled){background:#e5e7eb;color:#1f2937}.button.secondary:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed}.stream-thumbnail{transition:all .3s ease}.stream-thumbnail:hover{box-shadow:0 4px 12px #00000026;transform:scale(1.02)}.thumbnail-spinner{text-align:center}.thumbnail-spinner .spinner{animation:spin 1s linear infinite;border:3px solid #e5e7eb;border-radius:50%;border-top-color:#3b82f6;height:30px;margin:0 auto .5rem;width:30px}.thumbnail-spinner p{color:#6b7280;font-size:.875rem;margin:0}.stream-thumbnail.error{transition:all .3s ease}.stream-thumbnail.error:hover{box-shadow:0 4px 12px #dc262626;transform:scale(1.02)}.error-icon{font-size:2rem;margin-bottom:.5rem}.thumbnail-overlay{transition:opacity .2s ease}.stream-thumbnail:hover .thumbnail-overlay{opacity:.8}@media (max-width:768px){.main-content{padding:1rem}.form-row{gap:1rem}.form-row,.stream-grid{grid-template-columns:1fr}.header-content{flex-direction:column;gap:1rem;text-align:center}.logo-image{height:80px}.stream-header{align-items:stretch;flex-direction:column;gap:1rem}.stream-controls{justify-content:center}}@media (max-width:480px){.header{padding:1rem}.add-stream-form{padding:1.5rem}.form-title{font-size:1.25rem}}.notification-container{display:flex;flex-direction:column;gap:10px;pointer-events:none;position:fixed;right:20px;top:20px;z-index:9999}.notification{align-items:center;background:#fff;border-left:4px solid;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;justify-content:space-between;max-width:400px;min-width:300px;opacity:0;padding:16px 20px;pointer-events:auto;transform:translateX(100%);transition:all .3s ease-in-out}.notification.show{opacity:1;transform:translateX(0)}.notification.hide{opacity:0;transform:translateX(100%)}.notification.success{background:#10b981;border-left-color:#10b981;color:#fff}.notification.error{background:#ef4444;border-left-color:#ef4444;color:#fff}.notification-content{align-items:center;display:flex;flex:1 1}.notification-message{color:#fff;font-size:14px;font-weight:500;line-height:1.4}.notification-close{background:none;border:none;border-radius:4px;color:#fff;cursor:pointer;flex-shrink:0;font-size:16px;padding:4px;transition:all .2s ease}.notification-close:hover,.notification.error .notification-close:hover,.notification.success .notification-close:hover{background:#fff3;color:#fff}@media (max-width:768px){.notification-container{left:10px;right:10px;top:10px}.notification{max-width:none;min-width:auto}}
/*# sourceMappingURL=main.8b903f64.css.map*/