.loops-page-root{min-height:100dvh;width:100%}.loops-watch-view{position:fixed;inset:0;z-index:var(--z-modal);background:#000;overflow:hidden}.loops-loading{font-size:1rem;font-weight:600;color:var(--text-muted);gap:.625rem}.loops-error,.loops-loading{display:flex;align-items:center;justify-content:center;min-height:60vh;font-family:var(--font-display)}.loops-error{font-size:.9375rem;color:var(--error-color,#ef4444);padding:2rem;text-align:center}.loops-search-side-btn{display:flex;align-items:center;gap:.625rem;width:100%;padding:.625rem .875rem;background:var(--background-secondary);border:1px 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);cursor:pointer;transition:border-color .18s,background .18s;text-align:left;flex-shrink:0}.loops-search-side-btn:hover{border-color:var(--primary-color);background:color-mix(in srgb,var(--primary-color) 6%,var(--background-secondary))}.loops-search-side-btn:hover .lssb-text,.lssb-icon{color:var(--primary-color)}.lssb-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.lssb-text{font-size:.8125rem;font-weight:600;color:var(--text-muted);font-family:var(--font-primary);flex:1;transition:color .18s}.loops-well-side-btn{display:flex;align-items:center;gap:.625rem;width:100%;padding:.625rem .875rem;background:color-mix(in srgb,var(--primary-color) 8%,var(--background-secondary));border:1px solid color-mix(in srgb,var(--primary-color) 40%,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);cursor:pointer;transition:background .2s,border-color .2s;text-align:left}.loops-well-side-btn:hover{background:var(--gradient-primary);border-color:transparent}.loops-well-side-btn:hover .lwsb-icon,.loops-well-side-btn:hover .lwsb-text{color:var(--text-on-primary)}.lwsb-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.lwsb-icon,.lwsb-text{color:var(--primary-color);transition:color .2s}.lwsb-text{font-size:.8125rem;font-weight:700;font-family:var(--font-display);letter-spacing:.01em}.oct-nav-btn{display:flex;align-items:center;gap:.75rem;width:100%;padding:.625rem .875rem .625rem .5rem;background:var(--background-secondary);border:1px 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);cursor:pointer;transition:border-color .18s,background .18s;text-align:left;flex-shrink:0}.oct-nav-btn:hover{border-color:var(--primary-color);background:color-mix(in srgb,var(--primary-color) 6%,var(--background-secondary))}.oct-nav-btn--accent{background:color-mix(in srgb,var(--primary-color) 9%,var(--background-secondary));border-color:color-mix(in srgb,var(--primary-color) 40%,var(--border-color))}.oct-nav-btn--accent:hover{background:var(--gradient-primary);border-color:transparent}.oct-nav-btn--accent:hover .oct-nav-arrow,.oct-nav-btn--accent:hover .oct-nav-label,.oct-nav-btn--accent:hover .oct-nav-sublabel{color:var(--text-on-primary)}.oct-nav-icon-wrap{flex-shrink:0;color:var(--primary-color)}.oct-nav-icon-inner,.oct-nav-icon-wrap{display:flex;align-items:center;justify-content:center}.oct-nav-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.oct-nav-label{font-size:.8125rem;font-weight:800;color:var(--text-primary);font-family:var(--font-display);letter-spacing:.01em;line-height:1.2}.oct-nav-label,.oct-nav-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .18s}.oct-nav-sublabel{font-size:.6875rem;color:var(--text-muted);font-weight:500}.oct-nav-arrow{font-size:1rem;color:var(--text-muted);flex-shrink:0;transition:color .18s,transform .18s;line-height:1}.oct-nav-btn:hover .oct-nav-arrow{color:var(--primary-color);transform:translateX(3px)}