:root{--font-sans: "Raleway", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--transition-standard: .2s ease}html.light{--background: #f8f9fc;--foreground: #1f2937;--muted-background: #f3f4f6;--muted-foreground: #6b7280;--accent-background: #f0f0f0;--accent-foreground: #1a1a1a;--primary: #f6821f;--primary-dark: #e17012;--primary-translucent: rgba(246, 130, 31, .2);--primary-foreground: #ffffff;--secondary: #e2e8f0;--secondary-foreground: #1f2937;--border: #e5e7eb;--input: #e5e7eb;--input-background: #ffffff;--input-foreground: #1f2937;--ring: rgba(246, 130, 31, .3);--card-background: #ffffff;--card-foreground: #1f2937;--header-background: #1f2937;--header-foreground: #ffffff;--footer-background: #f3f4f6;--footer-foreground: #6b7280;--video-background: #000000;--error-background: rgba(231, 76, 60, .1);--error-text: #e53935;--hover-overlay: rgba(0, 0, 0, .05);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}html.dark{--background: #111827;--foreground: #f9fafb;--muted-background: #1f2937;--muted-foreground: #9ca3af;--accent-background: #2d3748;--accent-foreground: #f9fafb;--primary: #f6821f;--primary-dark: #e17012;--primary-translucent: rgba(246, 130, 31, .4);--primary-foreground: #ffffff;--secondary: #2d3748;--secondary-foreground: #f9fafb;--border: #374151;--input: #374151;--input-background: #1f2937;--input-foreground: #f9fafb;--ring: rgba(246, 130, 31, .5);--card-background: #1f2937;--card-foreground: #f9fafb;--header-background: #0f172a;--header-foreground: #f8fafc;--footer-background: #1f2937;--footer-foreground: #9ca3af;--video-background: #000000;--error-background: rgba(231, 76, 60, .2);--error-text: #ff5252;--hover-overlay: rgba(255, 255, 255, .1);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .2);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .2)}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font-sans);font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;width:100%;overflow-x:hidden}body{background-color:var(--background);color:var(--foreground);transition:background-color .3s,color .3s}#root{display:flex;flex-direction:column;height:100%}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;color:var(--foreground)}h1{font-size:2.5rem;font-weight:700}h2{font-size:1.75rem}h3{font-size:1.5rem}p{margin-bottom:1rem;color:var(--foreground)}a{color:var(--primary);text-decoration:none;transition:color .2s}a:hover{color:var(--primary-foreground)}button,.button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-weight:500;font-size:.875rem;line-height:1.25rem;padding:.5rem 1rem;transition:all .2s;cursor:pointer;font-family:inherit}.button-primary{background-color:var(--primary);color:var(--primary-foreground);border:1px solid transparent}.button-primary:hover{opacity:.9}.button-secondary{background-color:var(--secondary);color:var(--secondary-foreground);border:1px solid transparent}.button-secondary:hover{background-color:var(--accent-background)}.button-outline{background-color:transparent;border:1px solid var(--border);color:var(--foreground)}.button-outline:hover{background-color:var(--accent-background);color:var(--accent-foreground)}.card{background-color:var(--card-background);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:1.5rem;transition:box-shadow .2s,transform .2s}.card:hover{box-shadow:var(--shadow-lg)}.App{display:flex;flex-direction:column;min-height:100vh;width:100%;background-color:var(--background);color:var(--foreground);transition:background-color var(--video-transition-standard)}header{background-color:var(--header-background);color:var(--header-foreground);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-sm);z-index:10}header a{text-decoration:none;color:inherit}header h1{margin:0;font-size:2rem;font-weight:300;color:var(--header-foreground)}.header-controls{display:flex;align-items:center;gap:1rem}.video-id-controls{display:flex;align-items:center;gap:.5rem}.video-id-controls input{background-color:var(--input-background);color:var(--input-foreground);border:1px solid var(--border);border-radius:4px;padding:.5rem;font-size:.875rem;width:200px}.video-id-controls input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--ring)}.video-id-controls button{background-color:var(--primary);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color var(--video-transition-fast)}.video-id-controls button:hover{background-color:var(--primary-dark)}main{flex:1;padding:2rem;display:flex;flex-direction:column;align-items:center}.content-container{width:100%;max-width:1400px;margin:0 auto}footer{background-color:var(--footer-background);color:var(--footer-foreground);padding:1rem;text-align:center;box-shadow:0 -1px 0 var(--border);font-size:.875rem}footer p{margin:0}.footer-logo{height:1rem;margin:0 .3rem;vertical-align:middle}.footer-logo.light-mode{filter:brightness(.85) contrast(1.2)}.footer-logo.dark-mode{filter:brightness(1.15)}header .footer-logo.light-mode{filter:brightness(1) contrast(1.5)}@media (max-width: 768px){header{padding:1rem;flex-direction:column;align-items:flex-start;gap:.75rem}.header-controls{width:100%;justify-content:space-between}.video-id-controls{flex:1;max-width:70%}.video-id-controls input{width:100%}main{padding:1rem}}.video-info{padding:1.5rem;flex:1;overflow-y:auto;background-color:var(--card-background);color:var(--card-foreground);transition:background-color var(--video-transition-standard);border-top:1px solid var(--border)}html.light .video-info{background-color:#fff}html.dark .video-info{background-color:var(--card-background)}.video-info h2{margin-top:0;font-size:1.5rem;color:var(--foreground)}.meta-info{font-size:1rem;padding:1rem;background-color:var(--muted-background);border-radius:var(--radius-md);margin:1rem 0;color:var(--muted-foreground)}.video-meta-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;align-items:center}.video-status,.video-duration{display:flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border-radius:20px;font-size:.85rem;font-weight:500}.video-status{background-color:var(--secondary);color:var(--secondary-foreground)}.video-duration{background-color:var(--accent-background);color:var(--accent-foreground)}.video-description{color:var(--muted-foreground);line-height:1.6;margin-bottom:1.5rem}.video-description p{margin:.7rem 0}.meta-loading{font-style:italic;color:var(--muted-foreground);font-size:.9rem;padding:.5rem 0}.meta-error{color:var(--error-text);font-size:.9rem;background-color:var(--error-background);border-radius:var(--radius-md);padding:.5rem 1rem}.video-details-container{margin-top:1.5rem;margin-bottom:1rem;border-radius:var(--radius-md);background-color:var(--accent-background);overflow:hidden}.video-details-header{padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.video-details-header h3{margin:0;font-size:1.1rem;color:var(--accent-foreground)}.details-toggle-button{background-color:transparent;border:none;color:var(--primary);font-size:.9rem;font-weight:500;cursor:pointer;padding:.3rem .6rem;border-radius:var(--radius-sm);transition:all var(--video-transition-fast)}.details-toggle-button:hover{color:var(--primary-dark);background-color:#f6821f1a}.video-additional-info{background-color:var(--accent-background);padding:0 1rem;transition:max-height var(--video-transition-standard),opacity var(--video-transition-standard),padding var(--video-transition-standard);overflow:hidden}.video-additional-info.expanded{max-height:500px;opacity:1;padding:1rem}.video-additional-info.collapsed{max-height:0;opacity:0;padding-top:0;padding-bottom:0;pointer-events:none}.meta-details{list-style:none;margin:0;padding:0}.meta-details li{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--muted-foreground)}.meta-details li:last-child{border-bottom:none}.meta-details span{font-weight:500;color:var(--foreground)}.meta-details a,.share-button{color:var(--primary);text-decoration:none;transition:all var(--video-transition-fast)}.meta-details a:hover{text-decoration:underline}.share-actions{margin-top:1.5rem}.share-button{display:flex;align-items:center;gap:.5rem;background-color:var(--primary);color:#fff;border:none;border-radius:4px;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;cursor:pointer}.share-button:hover{background-color:var(--primary-dark);transform:translateY(-1px)}.share-button:active{transform:translateY(1px)}html.dark .coming-soon-page{background:linear-gradient(to bottom right,#111827,#1f2937)}html.light .coming-soon-page{background:linear-gradient(to bottom right,#f0f9ff,#e0f2fe)}.coming-soon-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;text-align:center}html.dark .coming-soon-container{color:#fff}html.light .coming-soon-container{color:var(--foreground)}.coming-soon-container h2{font-size:3.5rem;margin-bottom:1.5rem;color:var(--primary);text-transform:uppercase;letter-spacing:.1em;font-weight:700;animation:pulse 2s infinite}html.dark .coming-soon-container h2{text-shadow:0 2px 10px rgba(0,0,0,.2)}html.light .coming-soon-container h2{text-shadow:0 2px 5px rgba(0,0,0,.1)}.coming-soon-logo{margin-bottom:2rem;animation:float 6s ease-in-out infinite}.coming-soon-container h3{font-size:2rem;margin-bottom:1.5rem;color:var(--foreground)}.coming-soon-container p{font-size:1.2rem;max-width:600px;line-height:1.6;margin-bottom:2rem}html.dark .coming-soon-container p{color:#fffc}html.light .coming-soon-container p{color:var(--muted-foreground)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.coming-soon-feature-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.5rem;font-size:1.1rem}html.dark .coming-soon-feature-list{color:#ffffffb3}html.light .coming-soon-feature-list{color:var(--muted-foreground)}.coming-soon-cta{display:flex;gap:1rem;margin-top:2rem}.coming-soon-button{background-color:var(--primary);color:#fff;border:none;border-radius:4px;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--video-transition-fast)}.coming-soon-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0003}.coming-soon-button.secondary{background-color:transparent;border:2px solid var(--primary);color:var(--primary)}.coming-soon-button.secondary:hover{background-color:#f6821f1a}@media (min-width: 1024px){.video-info{flex:1;max-height:30vh}}@media (max-width: 767px){.video-info{padding:.75rem;max-height:40vh;flex:1;overflow-y:auto}.video-info h2{font-size:1.1rem;margin:0 0 .5rem}.video-meta-tags{margin-bottom:.5rem}.video-status,.video-duration{padding:.25rem .5rem;font-size:.75rem}.coming-soon-container h2{font-size:2.25rem}.coming-soon-container h3{font-size:1.25rem}.coming-soon-container p{font-size:.9rem}.coming-soon-cta{flex-direction:column;width:100%;max-width:230px}.coming-soon-button{width:100%;padding:.7rem 1rem}.meta-details li{flex-direction:column;align-items:flex-start;gap:.3rem}.video-description{max-height:100px;overflow-y:auto;margin-bottom:1rem}.video-details-container{margin-top:1rem;margin-bottom:.5rem}.video-details-header h3{font-size:.9rem}.details-toggle-button{font-size:.8rem}}@media (max-width: 480px){.video-info{max-height:50vh;flex:2}}.video-controls-overlay{position:absolute;bottom:0;left:0;right:0;background:var(--video-overlay-gradient);padding:20px 10px 10px;transition:opacity var(--video-transition-standard);z-index:10}.video-controls-overlay.visible{opacity:1;pointer-events:auto}.video-controls-overlay.hidden{opacity:0;pointer-events:none}.progress-container{position:relative;width:100%;height:12px;margin-bottom:10px;cursor:pointer;border-radius:6px;overflow:hidden;background:#fff3}.progress-bar-fill{position:absolute;top:0;left:0;height:100%;background-color:var(--primary);transition:width .1s ease;pointer-events:none;z-index:1}.progress-slider,.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.progress-slider{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;z-index:2}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 0 5px #0000004d;opacity:0;transition:opacity var(--video-transition-fast)}.progress-slider:hover::-webkit-slider-thumb{opacity:1}.controls-bar{display:flex;align-items:center;justify-content:space-between;padding:5px 0}.control-button{background:transparent;border:none;color:#fff;padding:8px;margin:0 5px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--video-transition-fast)}.control-button:hover{background-color:#ffffff1a}.time-display{font-size:.85rem;color:#fff;display:flex;align-items:center;margin:0 10px;font-variant-numeric:tabular-nums;font-weight:500}.volume-control{display:flex;align-items:center;margin-left:auto}.volume-slider{width:80px;margin:0 10px;height:4px;border-radius:2px;background:#ffffff4d;transition:all var(--video-transition-fast)}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}@media (max-width: 767px){.video-controls-overlay{padding:15px 8px 8px}.progress-container{height:10px;margin-bottom:6px}.control-button{padding:6px;margin:0 3px}.time-display{font-size:.75rem;margin:0 6px}.volume-slider{width:50px}}@media (max-width: 480px){.volume-slider{width:40px}}.video-likes{display:flex;align-items:center;gap:1.5rem;margin-top:.5rem;padding:.75rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.video-likes button{display:flex;align-items:center;gap:.5rem;background:none;border:none;color:var(--foreground);padding:.5rem .75rem;border-radius:4px;cursor:pointer;transition:all var(--video-transition-fast);position:relative}.video-likes button:hover:not(:disabled){background-color:var(--hover-overlay)}.video-likes button:disabled{opacity:.6;cursor:not-allowed}.video-likes button span{font-size:.9rem;font-weight:500;min-width:1.5rem}.video-likes button.active{background-color:var(--hover-overlay);font-weight:700}.video-likes button.like-button.active{color:#4caf50}.video-likes button.dislike-button.active{color:#f44336}.video-likes.loading,.video-likes.error{padding:.75rem 0;color:var(--muted-foreground);font-size:.9rem}.video-likes.error{color:var(--error-text)}.rate-limit-warning{padding:.5rem;margin-bottom:.5rem;background-color:var(--error-background);border-radius:4px;border-left:3px solid var(--error-text);font-size:.85rem}.rate-limit-warning p{margin:0 0 .25rem;font-weight:500;color:var(--error-text)}.rate-limit-warning small{color:var(--muted-foreground)}.likes-display{display:flex;gap:2rem}.likes-display .like-count,.likes-display .dislike-count{display:flex;align-items:center;gap:.5rem;padding:.5rem;opacity:.7}.likes-display svg{color:var(--muted-foreground)}.likes-display span{font-size:.9rem;font-weight:500;min-width:1.5rem}html.dark .video-likes button{color:#f1f1f1}html.dark .video-likes button:hover:not(:disabled){background-color:#ffffff1a}html.dark .video-likes button.active{background-color:#fff3}html.light .video-likes button{color:#333}html.light .video-likes button:hover:not(:disabled){background-color:#0000000d}html.light .video-likes button.active{background-color:#0000001a}html.light .video-likes button.like-button.active{color:#2e7d32}:root{--video-transition-standard: .3s ease;--video-transition-fast: .2s ease;--video-transition-slow: .5s ease;--video-border-radius: var(--radius-md);--video-container-height: 95vh;--video-desktop-height: calc(100vh - 180px) ;--video-overlay-gradient: linear-gradient( to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .3) 50%, transparent 100% )}.video-container{display:flex;flex-direction:column;width:100%;margin:0 auto;background-color:var(--card-background);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--video-transition-standard);height:var(--video-container-height);max-width:1440px}.video-wrapper{border-radius:var(--video-border-radius);overflow:hidden;background-color:var(--video-background);flex:2;position:relative;width:100%;height:100%}.video-aspect-container{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#000;display:flex;justify-content:center;align-items:center}.stream-container{width:85%;height:85%;position:relative;display:flex;justify-content:center;align-items:center}.cloudflare-player{width:100%;height:100%;background-color:#000;object-fit:contain}@media (min-width: 1024px){.video-container{height:var(--video-desktop-height)}.video-wrapper{flex:3;max-height:70vh}}@media (max-width: 1023px) and (min-width: 768px){.video-container{height:calc(100vh - 120px)}.video-wrapper{flex:2.5}}@media (max-width: 767px){.video-container{margin:0;border-radius:var(--radius-md);height:100vh}.video-wrapper{min-height:60vh;flex:2}}@media (max-width: 480px){.video-wrapper{min-height:50vh;flex:3}}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background-color:transparent;border:1px solid var(--border);border-radius:50%;cursor:pointer;color:var(--header-foreground);transition:all var(--video-transition-fast)}.theme-toggle:hover{background-color:var(--hover-overlay);transform:scale(1.05)}.theme-toggle:focus{outline:none;box-shadow:0 0 0 2px var(--primary-translucent)}.theme-toggle:active svg{transform:scale(.9)}