.loops-page{min-height:100vh;min-height:100dvh;color:var(--text-primary);position:relative;overflow-x:hidden}.loops-page,.loops-topbar{background:var(--background-primary)}.loops-topbar{position:sticky;top:0;z-index:var(--z-sticky-header);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;height:56px;border-bottom:1px solid var(--border-color);backdrop-filter:none;gap:1rem}.loops-hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0}.loops-hamburger span{display:block;width:22px;height:2px;background:var(--text-primary);transition:var(--transition-fast)}.loops-topbar-brand{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:800;color:var(--text-primary);letter-spacing:-.02em;font-family:var(--font-display)}.brand-icon{font-size:1.375rem}.loops-topbar-actions{display:flex;align-items:center;gap:.5rem}.loops-lens-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--background-secondary);border:1.5px solid var(--border-color);clip-path:var(--octagon-clip);color:var(--text-primary);cursor:pointer;transition:var(--transition-fast)}.loops-lens-btn:hover{background:var(--primary-color);color:var(--text-on-primary);transform:scale(1.05)}.loops-main{width:100%;max-width:1600px;margin:0 auto;padding:1.25rem 1.25rem 6rem}.loops-viewer-modal-wrap{position:fixed;inset:0;z-index:var(--z-modal);background:var(--color-black)}.loops-sidebar-overlay{position:fixed;inset:0;z-index:var(--z-modal-backdrop);background:var(--overlay);backdrop-filter:none}.loops-sidebar{position:absolute;top:0;left:0;bottom:0;width:260px;background:var(--background-secondary);border-right:2px solid var(--border-color);display:flex;flex-direction:column;padding:1.5rem 1rem;gap:.5rem;animation:sidebar-slide-in .25s var(--transition-bounce)}@keyframes sidebar-slide-in{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.sidebar-title{font-size:1.25rem;font-weight:800;color:var(--text-primary);font-family:var(--font-display)}.sidebar-close{background:none;border:none;font-size:1.25rem;color:var(--text-muted);cursor:pointer;clip-path:var(--octagon-clip);width:32px;height:32px;display:flex;align-items:center;justify-content:center}.sidebar-nav{display:flex;flex-direction:column;gap:.25rem;flex:1}.sidebar-nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;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:.9375rem;font-weight:600;color:var(--text-secondary);text-decoration:none;transition:var(--transition-fast)}.sidebar-nav-item:hover{background:var(--background-hover);color:var(--text-primary)}.sidebar-nav-item.active{background:var(--accent-light);color:var(--primary-color)}.sidebar-live-pill{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:rgba(var(--error-rgb),.1);border:1px solid rgba(var(--error-rgb),.3);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:.8125rem;font-weight:700;color:var(--error-color);margin-top:auto}.live-dot{width:8px;height:8px;background:var(--error-color);clip-path:var(--octagon-clip);animation:live-pulse 1.4s ease-in-out infinite;flex-shrink:0}@keyframes live-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}.loops-search-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--overlay);backdrop-filter:none;display:flex;flex-direction:column;align-items:center;padding-top:80px}.loops-search-modal{width:100%;max-width:600px;padding:0 1rem;display:flex;flex-direction:column;gap:1rem}.search-modal-inner{display:flex;align-items:center;gap:.75rem;background:var(--background-secondary);border:2px solid var(--primary-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);padding:.75rem 1rem}.search-lens-icon{color:var(--primary-color);flex-shrink:0}.loops-search-input{flex:1;background:none;border:none;outline:none;font-size:1rem;color:var(--text-primary);font-weight:500;font-family:var(--font-primary)}.loops-search-input::-moz-placeholder{color:var(--text-muted)}.loops-search-input::placeholder{color:var(--text-muted)}.search-cancel{background:none;border:none;font-size:.875rem;font-weight:700;color:var(--primary-color);cursor:pointer;white-space:nowrap}.search-chips{display:flex;gap:.5rem;flex-wrap:wrap}.search-chip{padding:.5rem 1.125rem;background:var(--background-secondary);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:.875rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);font-family:var(--font-primary);border:none}.search-chip.active,.search-chip:hover{background:var(--gradient-primary);color:var(--text-on-primary)}.loops-category-strip{background:var(--background-primary);border-bottom:1px solid var(--border-color);padding:.625rem 0;position:sticky;top:56px;z-index:var(--z-sticky,500)}.loops-category-scroll{display:flex;gap:.5rem;padding:0 1.25rem;overflow-x:auto;scrollbar-width:none}.loops-category-scroll::-webkit-scrollbar{display:none}.loops-cat-pill{display:flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:var(--background-secondary);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:.8125rem;font-weight:700;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:var(--transition-fast);flex-shrink:0;font-family:var(--font-primary);border:none}.loops-cat-pill:hover{background:var(--background-hover);color:var(--text-primary)}.loops-cat-pill.active{background:var(--gradient-primary);color:var(--text-on-primary)}.cat-pill-icon{font-size:1rem}.cat-pill-label{font-size:.8125rem}@media (max-width:640px){.loops-topbar{height:52px;padding:0 1rem}.loops-main{padding:.875rem .75rem 5rem}}