:root{--primary-color:#ff6b35;--primary-dark:#e55a2b;--secondary-color:#7209b7;--accent-color:#00d4ff;--success-color:#06ffa5;--warning-color:#ffbe0b;--dark-bg:#0a0a0a;--darker-bg:#050505;--card-bg:#1a1a1a;--text-light:#ffffff;--text-muted:#d0d0d0;--gradient-primary:linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);--gradient-secondary:linear-gradient(135deg, #7209b7 0%, #9c27b0 100%);--shadow-primary:0 8px 32px rgba(255, 107, 53, 0.3);--shadow-secondary:0 8px 32px rgba(114, 9, 183, 0.3)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body,html{height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--dark-bg);color:var(--text-light);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.clip-viewer{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:clamp(.75rem,2vw,1.5rem);background:radial-gradient(ellipse at center,rgba(255,107,53,.05) 0,var(--dark-bg) 70%);position:relative}.clip-header{text-align:center;margin-bottom:clamp(1rem,3vh,2rem);z-index:2;position:relative}.clip-logo{display:inline-block}.clip-logo a{display:inline-block;transition:transform .3s}.clip-logo a:hover{transform:scale(1.05)}.clip-logo img{width:clamp(2.5rem,4vw,4rem);height:clamp(2.5rem,4vw,4rem);display:block}.clip-container{position:relative;width:100%;max-width:clamp(320px,90vw,1400px);max-height:clamp(400px,90vh,900px);background:var(--card-bg);border-radius:clamp(.75rem,1.5vw,1.5rem);border:1px solid rgba(255,107,53,.2);overflow:hidden;box-shadow:var(--shadow-primary);backdrop-filter:blur(10px);z-index:2;contain:layout style;aspect-ratio:16/10;min-height:400px;display:flex;flex-direction:column}.clip-container::before{content:'';position:absolute;top:0;left:0;right:0;height:clamp(2px,.3vw,4px);background:var(--gradient-primary);z-index:3}.clip-video{width:100%;height:auto;max-height:clamp(300px,65vh,700px);min-height:200px;display:block;background:var(--darker-bg);object-fit:contain;object-position:center;flex:1}.clip-info{padding:clamp(1rem,3vw,1.5rem);text-align:center;background:linear-gradient(135deg,rgba(255,107,53,.05) 0,rgba(114,9,183,.05) 100%);border-top:1px solid rgba(255,107,53,.1);position:relative;flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;min-height:fit-content}.clip-info::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--gradient-primary);opacity:.3}.clip-title{font-size:clamp(1.1rem, 2.5vw, 1.4rem);font-weight:700;color:var(--text-light);margin-bottom:clamp(.5rem,1.5vw,.75rem);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}.clip-subtitle{font-size:clamp(.875rem, 1.8vw, 1rem);color:var(--text-muted);margin-bottom:clamp(1rem,2vw,1.25rem);font-weight:500}.clip-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.75rem,2vw,1rem);flex-wrap:wrap;width:100%}.edit-clip-btn{display:inline-flex;align-items:center;gap:clamp(.4rem,1vw,.5rem);padding:clamp(.625rem,1.5vw,.75rem) clamp(1.25rem,3vw,1.5rem);background:var(--gradient-secondary);border:none;border-radius:50px;color:#fff;font-size:clamp(.8rem, 1.5vw, .9rem);font-weight:600;cursor:pointer;transition:.3s;box-shadow:0 4px 16px rgba(114,9,183,.3);position:relative;overflow:hidden;text-decoration:none;font-family:inherit;white-space:nowrap;min-height:44px;min-width:fit-content}.edit-clip-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.edit-clip-btn:hover::before{left:100%}.edit-clip-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(114,9,183,.4)}.edit-icon{width:clamp(1rem,2vw,1.125rem);height:clamp(1rem,2vw,1.125rem);stroke:currentColor;flex-shrink:0}.cyg-brand{display:inline-flex;align-items:center;gap:clamp(.5rem,1.5vw,.625rem);padding:clamp(.625rem,1.5vw,.75rem) clamp(1.25rem,3vw,1.5rem);background:var(--gradient-primary);border:none;border-radius:50px;text-decoration:none;color:#fff;font-size:clamp(.8rem, 1.5vw, .9rem);font-weight:600;transition:.3s;box-shadow:0 4px 16px rgba(255,107,53,.3);position:relative;overflow:hidden;white-space:nowrap;min-height:44px;min-width:fit-content}.cyg-brand::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.cyg-brand:hover::before{left:100%}.cyg-brand:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,53,.4)}.cyg-logo{width:clamp(1rem,2vw,1.25rem);height:clamp(1rem,2vw,1.25rem);filter:brightness(0) invert(1);flex-shrink:0}@media (min-width:768px){.clip-container{max-width:clamp(600px,85vw,1200px);max-height:clamp(500px,85vh,800px);aspect-ratio:16/9;min-height:450px}.clip-video{max-height:clamp(350px,60vh,600px);min-height:250px}.clip-actions{flex-direction:row;justify-content:center;align-items:center;gap:clamp(1rem,2vw,1.5rem);flex-wrap:wrap}.cyg-brand,.edit-clip-btn{width:auto;flex:0 1 auto;min-width:fit-content;max-width:300px}}@media (min-width:1200px){.clip-container{max-width:clamp(900px,80vw,1400px);max-height:clamp(600px,80vh,900px);aspect-ratio:16/9;min-height:500px}.clip-video{max-height:clamp(450px,65vh,700px);min-height:300px}.clip-actions{gap:clamp(1.5rem,3vw,2rem)}.cyg-brand,.edit-clip-btn{font-size:clamp(.9rem, 1.2vw, 1rem);padding:clamp(.75rem,1.2vw,1rem) clamp(1.5rem,2.5vw,2rem)}.cyg-logo,.edit-icon{width:clamp(1.125rem,1.5vw,1.25rem);height:clamp(1.125rem,1.5vw,1.25rem)}}@media (min-width:1366px) and (max-width:1919px){.clip-container{max-width:1200px;max-height:750px;aspect-ratio:16/9;min-height:550px}.clip-video{max-height:550px;min-height:350px}.clip-actions{gap:1.5rem}.cyg-brand,.edit-clip-btn{font-size:.95rem;padding:.875rem 1.75rem;min-height:48px}}@media (max-width:767px){.clip-viewer{padding:clamp(.75rem,2vw,1rem);justify-content:flex-start;padding-top:clamp(1rem,3vh,1.5rem)}.clip-header{margin-bottom:clamp(.75rem,2vh,1.25rem)}.clip-container{max-width:clamp(320px,95vw,500px);max-height:clamp(500px,88vh,700px);aspect-ratio:4/5;min-height:400px;border-radius:clamp(1rem,2.5vw,1.25rem)}.clip-video{max-height:clamp(250px,55vh,400px);min-height:200px}.clip-info{padding:clamp(1rem,3vw,1.25rem);flex:0 0 auto}.clip-actions{flex-direction:column;gap:clamp(.75rem,2vw,1rem);width:100%}.cyg-brand,.edit-clip-btn{width:100%;max-width:100%;justify-content:center}}@media (max-width:480px){.clip-viewer{padding:clamp(.5rem,2vw,.75rem)}.clip-container{max-width:clamp(300px,98vw,480px);max-height:clamp(450px,85vh,600px);aspect-ratio:4/5;min-height:350px;border-radius:clamp(.75rem,2vw,1rem)}.clip-video{max-height:clamp(200px,50vh,300px);min-height:150px}.clip-info{padding:clamp(.75rem,3vw,1rem)}.clip-title{font-size:clamp(1rem, 4vw, 1.1rem)}.clip-subtitle{font-size:clamp(.8rem, 3vw, .875rem)}}@media (min-width:1920px){.clip-container{max-width:1400px;max-height:850px;aspect-ratio:16/9;min-height:600px}.clip-video{max-height:650px;min-height:400px}.clip-actions{gap:clamp(1.5rem,2vw,2.5rem)}.cyg-brand,.edit-clip-btn{font-size:1rem;padding:1rem 2rem}.cyg-logo,.edit-icon{width:1.25rem;height:1.25rem}}@media (min-width:2560px){.clip-container{max-width:2000px}}@media (max-width:926px) and (orientation:landscape){.clip-viewer{padding:clamp(.5rem,1vh,.75rem)}.clip-header{margin-bottom:clamp(.5rem,1vh,.75rem)}.clip-logo img{width:clamp(2rem,5vh,2.5rem);height:clamp(2rem,5vh,2.5rem)}.clip-container{max-width:clamp(600px,90vw,800px);max-height:clamp(400px,90vh,500px);aspect-ratio:16/10;min-height:300px}.clip-video{max-height:clamp(250px,65vh,350px);min-height:180px}.clip-info{padding:clamp(.75rem,2vh,1rem)}.clip-actions{flex-direction:row;justify-content:center;gap:clamp(.75rem,2vw,1rem);flex-wrap:wrap}.cyg-brand,.edit-clip-btn{width:auto;flex:0 1 auto;font-size:clamp(.75rem, 1.8vw, .85rem);padding:clamp(.5rem,1vh,.625rem) clamp(1rem,2vw,1.25rem);min-width:fit-content}}@media (max-width:400px){html{font-size:15px}.clip-container{border-radius:.75rem}.clip-actions{gap:.625rem}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}@media print{.clip-viewer{background:#fff}.clip-container{box-shadow:none;border:2px solid #000}.edit-clip-btn{display:none}}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:var(--text-muted)}.loading-icon{width:60px;height:60px;border:3px solid rgba(255,107,53,.3);border-top:3px solid var(--primary-color);border-radius:50%;animation:1s linear infinite spin;margin-bottom:20px}.loading h3{font-size:1.3rem;margin-bottom:12px;color:var(--text-light)}.loading p{font-size:1rem;margin-bottom:24px}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}