.loops-viewer-empty,.loops-viewer-error,.loops-viewer-loading{display:flex;align-items:center;justify-content:center;min-height:100dvh;background:var(--color-black)}.loops-viewer-empty,.loops-viewer-error{flex-direction:column;color:var(--text-muted);gap:12px;font-size:.875rem}.loops-nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.94);backdrop-filter:none;border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;clip-path:var(--octagon-clip);transition:background .2s}.loops-nav-btn:hover{background:var(--primary-color)}.loops-nav-prev{left:12px}.loops-nav-next{right:12px}.loops-info-overlay{position:absolute;bottom:0;left:0;right:0;padding:24px 16px 80px;background:var(--gradient-overlay);z-index:10}.loops-user-info{display:flex;align-items:center;gap:10px;margin-bottom:8px}.loops-avatar{width:40px;height:40px;flex-shrink:0;overflow:hidden;clip-path:var(--octagon-clip)}.loops-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.loops-user-details{display:flex;flex-direction:column;gap:1px}.loops-username{font-size:.85rem;font-weight:800;color:#fff;line-height:1}.loops-full-name{font-size:.72rem;color:rgba(255,255,255,.65)}.loops-description{font-size:.8rem;color:rgba(255,255,255,.75);line-height:1.5;margin-bottom:12px;max-width:420px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.loops-actions-vertical{position:absolute;right:12px;bottom:80px;gap:16px;z-index:10}.loops-action-btn,.loops-actions-vertical{display:flex;flex-direction:column;align-items:center}.loops-action-btn{gap:4px;cursor:pointer;color:rgba(255,255,255,.9);background:none;border:none;transition:color .2s,transform .2s}.loops-action-btn:hover{color:var(--primary-color);transform:scale(1.12)}.loops-progress-indicator{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.18);z-index:10}.loops-progress-indicator:after{content:"";position:absolute;left:0;top:0;height:100%;background:var(--primary-color);transition:width .1s linear}.octagon-shape{clip-path:var(--octagon-clip);overflow:hidden}.creator-sound-selected{display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;background:var(--accent-light);border:1px solid var(--primary-color);clip-path:polygon(.35rem 0,calc(100% - .35rem) 0,100% .35rem,100% calc(100% - .35rem),calc(100% - .35rem) 100%,.35rem 100%,0 calc(100% - .35rem),0 .35rem);font-size:.8125rem;font-weight:700;color:var(--primary-color);cursor:pointer;transition:var(--transition-fast)}.creator-sound-selected:hover{background:color-mix(in srgb,var(--primary-color) 15%,var(--background-tertiary))}.creator-sound-clear{display:flex;align-items:center;justify-content:center;width:18px;height:18px;clip-path:var(--octagon-clip);background:color-mix(in srgb,var(--primary-color) 20%,transparent);border:none;cursor:pointer;color:var(--primary-color);flex-shrink:0}.creator-sound-clear:hover{background:var(--error-color);color:#fff}.creator-camera-wrap{position:fixed;inset:0;z-index:var(--z-modal);background:var(--color-black);display:flex;flex-direction:column;align-items:center;justify-content:center}.creator-camera-video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.creator-camera-controls{position:absolute;bottom:2rem;left:0;right:0;gap:1.5rem}.creator-camera-controls,.creator-record-btn{display:flex;align-items:center;justify-content:center}.creator-record-btn{width:68px;height:68px;clip-path:var(--octagon-clip);background:var(--gradient-primary);border:none;cursor:pointer;color:var(--text-on-primary);transition:var(--transition-fast);box-shadow:var(--shape-glow-accent)}.creator-record-btn.recording{background:var(--error-color);animation:record-pulse 1s ease-in-out infinite}@keyframes record-pulse{0%,to{box-shadow:0 0 0 0 rgba(var(--error-rgb),.6)}50%{box-shadow:0 0 0 12px rgba(var(--error-rgb),0)}}.creator-camera-close{position:absolute;top:1rem;left:1rem;width:38px;height:38px;clip-path:var(--octagon-clip);background:rgba(0,0,0,.5);color:#fff;justify-content:center}.creator-camera-close,.sound-cat-chip{border:none;cursor:pointer;display:flex;align-items:center}.sound-cat-chip{gap:.375rem;padding:.375rem .875rem;background:var(--background-tertiary);clip-path:polygon(.3rem 0,calc(100% - .3rem) 0,100% .3rem,100% calc(100% - .3rem),calc(100% - .3rem) 100%,.3rem 100%,0 calc(100% - .3rem),0 .3rem);font-size:.75rem;font-weight:700;color:var(--text-muted);white-space:nowrap;flex-shrink:0;transition:var(--transition-fast)}.sound-cat-chip.active,.sound-cat-chip:hover{background:var(--gradient-primary);color:var(--text-on-primary)}.myloop-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.5rem;gap:.625rem;color:var(--text-muted);font-size:.8125rem;text-align:center}.myloop-empty-icon{font-size:2rem}.sound-duration-badge{display:inline-flex;align-items:center;padding:1px 6px;background:var(--background-tertiary);clip-path:polygon(.2rem 0,calc(100% - .2rem) 0,100% .2rem,100% calc(100% - .2rem),calc(100% - .2rem) 100%,.2rem 100%,0 calc(100% - .2rem),0 .2rem);font-size:.625rem;font-weight:700;color:var(--text-muted);font-family:var(--font-display);flex-shrink:0}.loops-viewer-root{position:fixed;inset:0;z-index:var(--z-modal);background:#000;display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y}.viewer-video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:0}.viewer-progress-bar{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.15);z-index:10}.viewer-progress-fill{height:100%;background:var(--gradient-primary);transition:width .25s linear}.viewer-topbar{position:absolute;top:12px;left:0;right:0;z-index:10;display:flex;align-items:center;gap:.75rem;padding:0 1rem}.viewer-back-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border:none;clip-path:var(--octagon-clip);color:#fff;cursor:pointer;transition:background .15s;flex-shrink:0}.viewer-back-btn:hover{background:rgba(0,0,0,.75)}.viewer-counter{font-size:.75rem;font-weight:700;color:rgba(255,255,255,.75);background:rgba(0,0,0,.4);padding:3px 8px;clip-path:polygon(.3rem 0,calc(100% - .3rem) 0,100% .3rem,100% calc(100% - .3rem),calc(100% - .3rem) 100%,.3rem 100%,0 calc(100% - .3rem),0 .3rem);font-family:var(--font-display)}.viewer-dots{display:flex;align-items:center;gap:4px;margin-left:auto}.viewer-dot{width:5px;height:5px;background:rgba(255,255,255,.35);clip-path:var(--octagon-clip);transition:background .2s}.viewer-dot.active{background:var(--primary-color);width:8px;height:8px}.viewer-paused-indicator{inset:0;z-index:3}.viewer-nav,.viewer-paused-indicator{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer}.viewer-nav{z-index:8;left:50%;transform:translateX(-50%);width:44px;height:44px;background:rgba(0,0,0,.45);border:none;clip-path:var(--octagon-clip);color:#fff;transition:background .15s,opacity .15s}.viewer-nav:disabled{opacity:.25;cursor:default}.viewer-nav:not(:disabled):hover{background:rgba(0,0,0,.7)}.viewer-nav-prev{top:60px}.viewer-nav-next{bottom:220px}.viewer-bottom{position:absolute;bottom:0;left:0;right:0;z-index:5;display:flex;align-items:flex-end;padding:0 0 1.25rem 1rem;background:linear-gradient(0deg,rgba(0,0,0,.75) 0,transparent);pointer-events:none}.viewer-info{flex:1;min-width:0;pointer-events:all;display:flex;flex-direction:column;gap:.375rem;padding-right:80px}.viewer-user-row{display:flex;align-items:center;gap:.625rem}.viewer-username{display:flex;align-items:center;gap:4px;font-size:.9375rem;font-weight:900;color:#fff;font-family:var(--font-display)}.viewer-verified{font-size:.6875rem;background:var(--gradient-gold);color:#000;clip-path:var(--octagon-clip);padding:1px 4px}.viewer-fullname{font-size:.75rem;color:rgba(255,255,255,.65)}.viewer-plug-hex{padding:.35rem .875rem;background:var(--gradient-primary);clip-path:polygon(.3rem 0,calc(100% - .3rem) 0,100% .3rem,100% calc(100% - .3rem),calc(100% - .3rem) 100%,.3rem 100%,0 calc(100% - .3rem),0 .3rem);border:none;font-size:.6875rem;font-weight:900;color:var(--text-on-primary);cursor:pointer;font-family:var(--font-display);white-space:nowrap}.viewer-title{font-size:.9375rem;font-weight:700;color:#fff;line-height:1.3}.viewer-desc{font-size:.8125rem;color:rgba(255,255,255,.8);line-height:1.45}.viewer-sound-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.94);backdrop-filter:none;padding:.3rem .75rem;clip-path:polygon(.3rem 0,calc(100% - .3rem) 0,100% .3rem,100% calc(100% - .3rem),calc(100% - .3rem) 100%,.3rem 100%,0 calc(100% - .3rem),0 .3rem);font-size:.75rem;color:#fff;cursor:pointer;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-tag-icon{flex-shrink:0;color:var(--primary-color)}.sound-tag-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-tag-hot{flex-shrink:0}.viewer-viral-tag{display:inline-flex;align-items:center;gap:4px;font-size:.6875rem;font-weight:900;color:var(--error-color);letter-spacing:.05em;font-family:var(--font-display)}.viewer-actions{pointer-events:all;position:absolute;right:12px;bottom:1.25rem}.viewer-action-group{gap:.75rem}.vab-root,.viewer-action-group{display:flex;flex-direction:column;align-items:center}.vab-root{gap:4px;background:none;border:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}.vab-root.vab-display{cursor:default}.vab-root.vab-disabled{opacity:.45;cursor:not-allowed}.vab-oct{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.94);backdrop-filter:none;clip-path:var(--octagon-clip);border:1.5px solid rgba(255,255,255,.15);transition:background .15s,border-color .15s,transform .15s}.vab-root:not(.vab-display):not(.vab-disabled):hover .vab-oct{background:rgba(0,0,0,.75);border-color:rgba(255,255,255,.35);transform:scale(1.07)}.vab-icon{display:flex;align-items:center;justify-content:center;color:#fff;transition:color .15s}.vab-active .vab-oct{background:rgba(0,0,0,.7);border-color:var(--vab-active-color,var(--primary-color))}.vab-active .vab-icon{color:var(--vab-active-color,var(--primary-color))}.vab-count{font-size:.625rem;font-weight:900;color:rgba(255,255,255,.85);font-family:var(--font-display);letter-spacing:.02em;text-align:center}.viewer-vibe-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.94);backdrop-filter:none;clip-path:var(--octagon-clip);border:1.5px solid rgba(255,255,255,.15);cursor:pointer;transition:background .15s,transform .15s;padding:0}.viewer-vibe-btn:hover{background:var(--gradient-primary);border-color:transparent;transform:scale(1.07)}.vibe-octagon-inner{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--primary-color)}.viewer-vibe-btn:hover .vibe-octagon-inner{color:var(--text-on-primary)}.vibe-icon{display:flex;align-items:center}.vibe-label{font-size:.35rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;font-family:var(--font-display)}.viewer-reactions-pop{position:absolute;bottom:280px;right:68px;z-index:12;display:flex;gap:6px;background:rgba(0,0,0,.94);backdrop-filter:none;clip-path:polygon(.5rem 0,calc(100% - .5rem) 0,100% .5rem,100% calc(100% - .5rem),calc(100% - .5rem) 100%,.5rem 100%,0 calc(100% - .5rem),0 .5rem);padding:.5rem}.reaction-pop-btn{font-size:1.375rem;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:transform .15s;line-height:1}.reaction-pop-btn:hover{transform:scale(1.35)}.reaction-pop-btn.active{background:rgba(255,255,255,.15);transform:scale(1.2)}.viewer-comments-drawer{position:absolute;bottom:0;left:0;right:0;z-index:15;max-height:60vh;background:var(--background-secondary);border-top:1.5px solid var(--border-color);clip-path:polygon(1rem 0,calc(100% - 1rem) 0,100% 1rem,100% 100%,0 100%,0 1rem);display:flex;flex-direction:column;animation:drawer-up .25s ease}@keyframes drawer-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.comments-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem;border-bottom:1px solid var(--border-color);flex-shrink:0}.comments-drawer-title{font-size:.9375rem;font-weight:800;color:var(--text-primary);font-family:var(--font-display)}.comments-close{background:var(--background-hover);border:none;width:30px;height:30px;clip-path:var(--octagon-clip);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer}.comments-scroll{flex:1;overflow-y:auto;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.875rem;scrollbar-width:thin}.comments-empty-state,.comments-loading-state{text-align:center;font-size:.875rem;color:var(--text-muted);padding:1.5rem}.comment-row{display:flex;gap:.625rem;align-items:flex-start}.comment-body{flex:1;min-width:0}.comment-user-tag{font-size:.8125rem;font-weight:700;color:var(--text-primary);font-family:var(--font-display)}.verified-micro{font-size:.625rem;background:var(--gradient-gold);color:#000;padding:1px 3px;clip-path:var(--octagon-clip);margin-left:3px}.comment-text{font-size:.875rem;color:var(--text-secondary);margin:2px 0 4px;line-height:1.4}.comment-row-actions{display:flex;gap:.625rem}.cra-btn{background:none;border:none;font-size:.75rem;color:var(--text-muted);cursor:pointer;padding:0;font-family:var(--font-primary)}.cra-btn:hover{color:var(--text-primary)}.cra-delete:hover{color:var(--error-color)}.reply-section{margin-top:.5rem;display:flex;flex-direction:column;gap:.5rem}.replies-loading{font-size:.75rem;color:var(--text-muted)}.reply-row{display:flex;gap:.5rem;align-items:flex-start;padding-left:1.25rem}.reply-body{flex:1;min-width:0}.reply-input-row{display:flex;gap:.5rem;padding-left:1.25rem;margin-top:4px}.reply-input{flex:1;background:var(--background-tertiary);border:1px solid var(--border-color);font-size:.8125rem;color:var(--text-primary);outline:none;font-family:var(--font-primary)}.reply-input,.reply-submit{clip-path:polygon(.3rem 0,calc(100% - .3rem) 0,100% .3rem,100% calc(100% - .3rem),calc(100% - .3rem) 100%,.3rem 100%,0 calc(100% - .3rem),0 .3rem);padding:.375rem .625rem}.reply-submit{background:var(--gradient-primary);border:none;color:var(--text-on-primary);cursor:pointer;display:flex;align-items:center;justify-content:center}.comments-input-bar{display:flex;gap:.625rem;padding:.75rem 1rem;border-top:1px solid var(--border-color);flex-shrink:0}.comments-input{flex:1;background:var(--background-tertiary);border:1px solid var(--border-color);padding:.5rem .875rem;font-size:.9375rem;color:var(--text-primary);outline:none;font-family:var(--font-primary)}.comments-input,.comments-submit{clip-path:polygon(.35rem 0,calc(100% - .35rem) 0,100% .35rem,100% calc(100% - .35rem),calc(100% - .35rem) 100%,.35rem 100%,0 calc(100% - .35rem),0 .35rem)}.comments-submit{padding:.5rem 1rem;background:var(--gradient-primary);border:none;font-size:.875rem;font-weight:800;color:var(--text-on-primary);cursor:pointer;font-family:var(--font-display)}.comments-submit:disabled{opacity:.45;cursor:not-allowed}.viewer-state{position:fixed;inset:0;background:var(--background-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:var(--z-modal)}.viewer-state-spinner{animation:state-pulse 1.8s ease-in-out infinite}@keyframes state-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.viewer-state p{font-size:.9375rem;color:var(--text-muted)}.viewer-retry{padding:.5rem 1.5rem;background:var(--gradient-primary);clip-path:polygon(.4rem 0,calc(100% - .4rem) 0,100% .4rem,100% calc(100% - .4rem),calc(100% - .4rem) 100%,.4rem 100%,0 calc(100% - .4rem),0 .4rem);border:none;color:var(--text-on-primary);font-weight:800;font-family:var(--font-display);cursor:pointer}.lvi-root{width:100%}.lvi-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2.5rem 1rem;background:var(--background-tertiary);border:2px dashed var(--border-color);clip-path:polygon(.5rem 0,calc(100% - .5rem) 0,100% .5rem,100% calc(100% - .5rem),calc(100% - .5rem) 100%,.5rem 100%,0 calc(100% - .5rem),0 .5rem);cursor:pointer;transition:border-color .15s,background .15s;text-align:center}.lvi-dropzone:hover:not(.lvi-dropzone--disabled){border-color:var(--primary-color);background:var(--accent-light)}.lvi-dropzone--disabled{opacity:.5;cursor:not-allowed}.lvi-icon{color:var(--primary-color)}.lvi-label{font-size:.9375rem;font-weight:700;color:var(--text-primary)}.lvi-sub{font-size:.75rem;color:var(--text-muted)}.lvi-preview{position:relative;clip-path:polygon(.5rem 0,calc(100% - .5rem) 0,100% .5rem,100% calc(100% - .5rem),calc(100% - .5rem) 100%,.5rem 100%,0 calc(100% - .5rem),0 .5rem);overflow:hidden;background:#000;aspect-ratio:9/14;max-height:280px}.lvi-video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.lvi-change-btn{bottom:10px;right:10px;padding:.35rem .75rem;background:rgba(0,0,0,.7);font-size:.75rem;font-weight:800;clip-path:polygon(.3rem 0,calc(100% - .3rem) 0,100% .3rem,100% calc(100% - .3rem),calc(100% - .3rem) 100%,.3rem 100%,0 calc(100% - .3rem),0 .3rem);font-family:var(--font-display)}.lvi-change-btn,.lvi-clear-btn{position:absolute;border:none;color:#fff;cursor:pointer}.lvi-clear-btn{top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);clip-path:var(--octagon-clip);font-size:.875rem}.lvi-hidden-input{display:none}.lsp-root{position:relative;width:100%}.lsp-trigger{display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;background:var(--background-tertiary);border:1.5px solid var(--border-color);clip-path:polygon(.4rem 0,calc(100% - .4rem) 0,100% .4rem,100% calc(100% - .4rem),calc(100% - .4rem) 100%,.4rem 100%,0 calc(100% - .4rem),0 .4rem);font-size:.9375rem;color:var(--text-muted);cursor:pointer;font-family:var(--font-primary);transition:border-color .15s}.lsp-trigger:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-color)}.lsp-trigger:disabled{opacity:.5;cursor:not-allowed}.lsp-selected{display:flex;align-items:center;gap:.625rem;padding:.75rem 1rem;background:var(--accent-light);border:1.5px solid var(--primary-color);clip-path:polygon(.4rem 0,calc(100% - .4rem) 0,100% .4rem,100% calc(100% - .4rem),calc(100% - .4rem) 100%,.4rem 100%,0 calc(100% - .4rem),0 .4rem)}.lsp-sel-icon{color:var(--primary-color);flex-shrink:0}.lsp-sel-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.lsp-sel-title{font-size:.875rem;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lsp-sel-creator{font-size:.75rem;color:var(--text-muted)}.lsp-audio-preview{height:32px;max-width:120px}.lsp-clear{background:none;border:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;padding:4px;flex-shrink:0}.lsp-clear:hover{color:var(--error-color)}.lsp-panel{position:absolute;bottom:calc(100% + 6px);left:0;right:0;z-index:20;background:var(--background-secondary);border:1px solid var(--border-color);clip-path:polygon(.5rem 0,calc(100% - .5rem) 0,100% .5rem,100% calc(100% - .5rem),calc(100% - .5rem) 100%,.5rem 100%,0 calc(100% - .5rem),0 .5rem);display:flex;flex-direction:column;gap:0;max-height:240px;overflow:hidden;box-shadow:var(--shadow-lg)}.lsp-panel-head{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;border-bottom:1px solid var(--border-color)}.lsp-search{flex:1;background:var(--background-tertiary);border:1px solid var(--border-color);clip-path:polygon(.3rem 0,calc(100% - .3rem) 0,100% .3rem,100% calc(100% - .3rem),calc(100% - .3rem) 100%,.3rem 100%,0 calc(100% - .3rem),0 .3rem);padding:.4rem .625rem;font-size:.875rem;color:var(--text-primary);outline:none;font-family:var(--font-primary)}.lsp-panel-close{color:var(--text-muted);padding:4px}.lsp-panel-close,.lsp-upload-row{background:none;border:none;cursor:pointer;display:flex;align-items:center}.lsp-upload-row{gap:.625rem;padding:.75rem .875rem;border-bottom:1px solid var(--border-color);font-size:.875rem;color:var(--primary-color);font-family:var(--font-primary);font-weight:600;text-align:left}.lsp-upload-row:hover{background:var(--accent-light)}.lsp-list-placeholder{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem;font-size:.8125rem;color:var(--text-muted);text-align:center}